Dialoggestaltung

[Stefan Froehlich]

Ich habe einen relativ trivialen Dialog - stark vereinfacht und um
jegliches Layout gekürzt in <http://froehlich.priv.at/dialog.html>
dargestellt. Der Auftraggeber wünscht sich nun für (zur Zeit: eines
der) Felder die Möglichkeit, mit einem Click (zur Zeit: ein bis
drei) vordefinierte Werte eintragen zu können.

Die erste Frage ist: Wie macht man so etwas am geschicktesten?
Technisch kommt ja so ziemlich alles in Frage. Exemplarisch habe ich
mir einmal Buttons, Links und Checkboxen angesehen - semantisch
finde ich Buttons noch am passendsten, die unterschiedliche Funktion
zu den optisch ident aufgebauten Buttons "Ok" und "Abbruch" jedoch
problematisch.

Und die zweite Frage ist: *Wo* macht man das am geschicktesten?

Als Liste unterhalb des Dialogs ist von der Raumaufteilung am
einfachsten, aber (auch mit Stylesheet) für den Anwender einfach nur
grausam.

Neben dem jeweiligen Feld sieht das entweder komisch und
unbalanciert aus (im zweiten Beispiel, Buttons nebeneinander), oder
es zerstört die Geometrie des Formulars (im dritten Beispiel,
Buttons untereinander).

Wie würdet ihr das lösen?

Servus,
Stefan

--
http://kontaktinser.at/ - die kostenlose Kontaktboerse fuer Oesterreich
Offizieller Erstbesucher(TM) von mmeike

Geizige Herzen will der Staat: Stefan!
(Sloganizer)

[Maik Koenig]

Am 06.07.2021 um 12:45 schrieb Stefan Froehlich:
> Ich habe einen relativ trivialen Dialog - stark vereinfacht und um
> jegliches Layout gekürzt in <http://froehlich.priv.at/dialog.html>
> dargestellt. Der Auftraggeber wünscht sich nun für (zur Zeit: eines
> der) Felder die Möglichkeit, mit einem Click (zur Zeit: ein bis
> drei) vordefinierte Werte eintragen zu können.

> Wie würdet ihr das lösen?

Ihn überzeugen dass es kein Beinbruch ist wenn die Auswahl der
vordefinierten Werte zwei Mausklicks kostet und dann Select mit den drei
vorgebenen Werten und der vierten Option "anderen Wert"; nur bei dessen
Auswahl taucht dann die frei befüllbare Option auf. Das lässt sich auch
so lösen, dass die freie Variante das Select-Feld bei entsprechender
Auswahl ersetzt.

Oder aber, das kostet aber (ohne JavaScript-Nachhilfe) mindestens drei
Mausklicks (im aktuellen Firefox jedenfalls) und müsste optisch deutlich
gemacht werden UND ich bin mir nicht sicher was die allgemeine
Browserunterstützung angeht:

<input type="text" list="muster" />
<datalist id="muster">
<option>Foo</option>
<option>Bar</option>
<option>FooBar</option>
<option></option>
</datalist>

Einmal Klick rein für den Focus, noch ein Klick öffnet die Liste,
dritter Klick wählt aus. Wobei die Liste auch aufklappt sobald man auch
nur ein Zeichen eintippt, dann bereits nach möglichen Optionen
gefiltert. Beim Tippen von B würde also "Foo" schon nicht mehr in der
Liste auftauchen, "Bar" und "FooBar" aber schon.

Das nur mit einem Klick zu machen geht spätestens bei Touch nur noch mit
Checkboxen (imho), da Hovern dort ja nicht wirklich erkannt werden kann.
Wenn Touch kein Problem ist, kann man es auf einen Klick reduzieren: Die
Liste beim Hoovern ausklappen lassen.

Greetz,
MK
--
Kopp-Verlag-Gläubige, Religionsdeppen, rechte Vollidioten
und ähnlicher Bio-Abfall werden ohne Hinweis ignoriert!
Ich lese die Gruppen in denen ich schreibe: KEINE Mailkopie.

[Peter J. Holzer]

On 2021-07-06 10:45, Stefan Froehlich <Stefan...@Froehlich.Priv.at> wrote:
> Ich habe einen relativ trivialen Dialog - stark vereinfacht und um
> jegliches Layout gekürzt in <http://froehlich.priv.at/dialog.html>
> dargestellt. Der Auftraggeber wünscht sich nun für (zur Zeit: eines
> der) Felder die Möglichkeit, mit einem Click (zur Zeit: ein bis
> drei) vordefinierte Werte eintragen zu können.
>
> Die erste Frage ist: Wie macht man so etwas am geschicktesten?
> Technisch kommt ja so ziemlich alles in Frage. Exemplarisch habe ich
> mir einmal Buttons, Links und Checkboxen angesehen - semantisch
> finde ich Buttons noch am passendsten, die unterschiedliche Funktion
> zu den optisch ident aufgebauten Buttons "Ok" und "Abbruch" jedoch
> problematisch.

Ich fände hier eine Combo-Box am schönsten: Der User kann entweder aus
dem Dropdown-Menü einen Wert auswählen oder selbst einen eintippen.

Braucht natürlich JavaScript, aber das verwendest Du eh schon.

Eine Alternative könnte ein Range-Feld sein. Default-Value ist die
Standard-Menge, mit der "Ende"-Taste kommt man zur Maximalmenge.
Allerdings wird man das wahrscheinlich auch mittels JavaScript zumindest
mit einem numerischen Anzeige-Feld oder einem Input-Feld koppeln müssen.
Sonst weiß der Kunde nicht, wieviel er da eigentlich bestellt :-).

Hängen Standard-Menge und Maximalmenge eigentlich von der Bezeichnung
ab? (Ich kann mir vorstellen, dass man mehr Schrauben bestellen möchte
als CNC-Maschinen) Wenn ja, sollte der User zuerst die Bezeichnung
eingeben müssen.

hp

[Thomas Hochstein]

Stefan Froehlich schrieb:

> Die erste Frage ist: Wie macht man so etwas am geschicktesten?
> Technisch kommt ja so ziemlich alles in Frage. Exemplarisch habe ich
> mir einmal Buttons, Links und Checkboxen angesehen - semantisch
> finde ich Buttons noch am passendsten, die unterschiedliche Funktion
> zu den optisch ident aufgebauten Buttons "Ok" und "Abbruch" jedoch
> problematisch.

Ja, entweder Buttons oder Links. Die Buttons kann man per CSS
unterschiedlich stylen, um Verwechslungen zu verhindern.

> Und die zweite Frage ist: *Wo* macht man das am geschicktesten?

[...]

> Wie würdet ihr das lösen?

Variante 2 sieht für mich optisch am ansprechendsten aus; wenn man auf
die Tabelle verzichten kann, damit auf kleinen Bildschirmen
(Smartphone) nicht das "Stück" in die nächste Zeile rutscht, aber die
Buttons bleiben, wäre das sicherlich noch besser (falls "responsive"
relevant ist und das Formular nicht eh immer nur an einem Rechner oder
Latop ausgefüllt wird).

Grüße,
-thh

[Stefan Froehlich]

On Tue, 06 Jul 2021 20:32:50 Peter J. Holzer wrote:
> On 2021-07-06 10:45, Stefan Froehlich <Stefan...@Froehlich.Priv.at> wrote:

> > <http://froehlich.priv.at/dialog.html>

> > Die erste Frage ist: Wie macht man so etwas am geschicktesten?
> > Technisch kommt ja so ziemlich alles in Frage. Exemplarisch habe
> > ich mir einmal Buttons, Links und Checkboxen angesehen -
> > semantisch finde ich Buttons noch am passendsten, die
> > unterschiedliche Funktion zu den optisch ident aufgebauten
> > Buttons "Ok" und "Abbruch" jedoch problematisch.

> Ich fände hier eine Combo-Box am schönsten: Der User kann entweder
> aus dem Dropdown-Menü einen Wert auswählen oder selbst einen
> eintippen.
>
> Braucht natürlich JavaScript, aber das verwendest Du eh schon.

Das entspräche dann dem bereits vorgeschlagenen <datalist>, wobei
die Unterstützung von mäßig komplexem JavaScript vermutlich besser
aussieht. In beiden Fällen stört mich, dass in einer Combo-Box die
tatsächlichen Werte aufscheinen sollen, hier aber eher die
beschreibenden Texte sinnvoll sind.

Ok, kann man sicher auch in JavaScript lösen, wird dann aber
zunehmend komplizierter.

> Eine Alternative könnte ein Range-Feld sein. Default-Value ist die
> Standard-Menge, mit der "Ende"-Taste kommt man zur Maximalmenge.
> Allerdings wird man das wahrscheinlich auch mittels JavaScript
> zumindest mit einem numerischen Anzeige-Feld oder einem Input-Feld
> koppeln müssen. Sonst weiß der Kunde nicht, wieviel er da
> eigentlich bestellt :-).

Das JavaScript fände ich hier absolut vertretbar, aber ich fürchte,
es wird der Ansprechperson beim Auftraggeber nicht gefallen. Wäre
aber einen Versuch beim nächsten Workshop wert, denn rein optisch
finde ich das bisher eleganter als alles andere.

> Hängen Standard-Menge und Maximalmenge eigentlich von der
> Bezeichnung ab? (Ich kann mir vorstellen, dass man mehr Schrauben
> bestellen möchte als CNC-Maschinen) Wenn ja, sollte der User
> zuerst die Bezeichnung eingeben müssen.

Zum Glück nicht, das Eingabeformular ist schon auf der Seite eines
spezifischen Produkts. Die Standardmenge sollte dem Anwender auch
halbwegs geläufig sein (d.h. da reicht zur Not der Zahlenwert aus).
Die Höchstmenge hängt aber an etwas, das mit dem Lagerstand
vergleichbar ist - da brauche ich unbedingt den Text (und ist der
Lagerstand niedriger als die Standardmenge, wird der zweite Button
logischerweise ausgeblendet).

Es ist aber, und das spricht eher gegen das range-Feld, auch
denkbar, dass in späteren Ausbaustufen noch ein oder zwei weitere,
(berechnete, und dem Anwender per Label präsentierte) Mengen
dazukommen.

Servus,
Stefan

--
http://kontaktinser.at/ - die kostenlose Kontaktboerse fuer Oesterreich
Offizieller Erstbesucher(TM) von mmeike

Stefan kommt und 2021 Jahre Erwartung waren nicht umsonst.
(Sloganizer)

[Arno Welzel]

Stefan Froehlich:

> Ich habe einen relativ trivialen Dialog - stark vereinfacht und um
> jegliches Layout gekürzt in <http://froehlich.priv.at/dialog.html>
> dargestellt. Der Auftraggeber wünscht sich nun für (zur Zeit: eines
> der) Felder die Möglichkeit, mit einem Click (zur Zeit: ein bis
> drei) vordefinierte Werte eintragen zu können.
>
> Die erste Frage ist: Wie macht man so etwas am geschicktesten?

So, dass es für die Benutzer nachvollziehbar ist.

> Technisch kommt ja so ziemlich alles in Frage. Exemplarisch habe ich
> mir einmal Buttons, Links und Checkboxen angesehen - semantisch
> finde ich Buttons noch am passendsten, die unterschiedliche Funktion
> zu den optisch ident aufgebauten Buttons "Ok" und "Abbruch" jedoch
> problematisch.

Deswegen sollten diese Buttons nicht losgelöst irgendwo auftauchen,
sondern idealerweise direkt neben oder unter dem Eingabefeld, auf das
sie sich beziehen. Alternativ den Text entsprechend benennen wie z.B.
"Standardmenge eintragen" o.Ä.

[...]

> Neben dem jeweiligen Feld sieht das entweder komisch und
> unbalanciert aus (im zweiten Beispiel, Buttons nebeneinander), oder
> es zerstört die Geometrie des Formulars (im dritten Beispiel,
> Buttons untereinander).

Das wäre aber die beste Lösung, ggf. direkt unter dem Eingabefeld.

Man kann halt nicht einerseits verlangen, dass man per Mausklick
irgendwelche Standardwerte auswählen können soll und andererseits keine
sichtbaren Elemente dafür haben wollen.

Als Drop-Down wäre auch noch denkbar, was dann aufklappt, sobald das
Eingabefeld den Fokus hat. Man könnte ein DIV-Element nehmen, was
entsprechend positioniert wird und dann bei Bedarf aufklappt. Aber schön
fände ich das auch nicht - denn dann sieht der Benutzer nicht, dass es
diese Optionen überhaupt gibt, bis er in das Feld hineinklickt und im
Sinne der Barrierfreiheit dürfte das auch ideal nicht sein.


--
Arno Welzel
https://arnowelzel.de