Mit einer kleinen Verspätung melde ich mich auch diese Woche zu Wort – es geht weiter mit der User Experience (kurz UX) – Schaut euch auch Teil 1 und Teil 2 an! Heute geht es um einheitliche Oberflächen und wie diese unseren Benutzern helfen.

Sind einheitliche Oberflächen wirklich wichtig?

Absolut! Stellt euch folgendes vor: Euer Computer fragt euch beim überschreiben einer Datei „<Datei> ist bereits vorhanden. Möchten Sie sie ersetzen?“ Aus Gewohnheit klickt ihr den linken Button, weil ihr genau wisst das links immer die Schaltfläche zum „bestätigen“ ist, während der rechte Button die Aktion abbricht. Irgendwann gelangt ihr an einen Dialog bei dem diese beiden Buttons vertauscht sind – Ihr würdet mit hoher Wahrscheinlichkeit die Aktion (unbeabsichtigt) abbrechen oder, falls ihr es beim überfliegen bemerkt, kurz ins stocken kommen und anschließend die Meldung lesen.
Das liegt daran, das dieses „Links: Ja, Rechts: Nein“ denken sich durch alle Dialoge des (Windows) Betriebssystems zieht. Es ist einheitlich!

Gleiches gilt für andere Elemente, wie z.B. die Statusleiste („Datei“, „Bearbeiten“, …). Diese befindet sich immer an der gleichen Stelle und beinhaltet meistens die gleichen Schaltflächen. Es gibt womöglich kein Programm im „Standard“ Windows Design, wo diese plötzlich unten oder seitlich zu finden ist.

Das einheitliche Design zieht sich aber noch viel weiter: Überschriften, Icons, Schriftarten, Schriftgrößen, Farben, … Oder habt ihr jemals eine Fehlermeldung mit einem grünen Haken ( ✔ ) gesehen 😉 ?

Worauf ist speziell zu achten?

Schauen wir uns z.B. mal Frontend-Frameworks wie Bootstrap an – Hier ist alles von vorn bis hinten einheitlich gestaltet. Vor allem die Typographie und Formular Elemente profitieren hier! Doch weiterhin solltet ihr auf folgende Dinge achten:

  • Gleiche Aktionen sollten immer an gleichen Stellen positioniert sein („OK / Abbrechen“, „Speichern / Abbrechen“, …).
  • Gleiche Funktionen sollten außerdem über gleiche Icons verfügen, sodass diese auch ohne Beschreibung (wieder-) erkannt werden!
  • Überlegt euch ein Design für Dialoge, welches sich durch die gesamte Oberfläche zieht: Anordnung, Größe und Farbe von Überschrift, Beschreibung und Schaltflächen.
  • Schaut euch an, wie die „Großen“ es machen – Was für wiederkehrende Elemente könnt ihr z.B. im Betriebssystem erkennen?
  • Schaut euch z.B. die verschiedenen Google Dienste an, diese bieten meist eine ausgezeichnete Oberfläche im einheitlichen Stil!

Das war es?

Noch nicht ganz. Die einheitliche Oberfläche ist nur eine Seite der Medaille – Das Backend sollte ebenfalls auf Befehle einheitlich reagieren. Das bedeutet: einheitliche Access keys für bestimmte Funktionen, einheitlicher tabindex (Tabulator Reihenfolge) usw. Wenn ihr z.B. einige Formulare per Ajax abschickt ohne die Seite nachzuladen, sollte sich das (idealerweise) durch die Anwendung ziehen – Wenn nämlich manche Aktionen durch Seiten-Reloads geschehen wirkt das ggf. unsauber oder bringt den Benutzer aus seinem Fluss.

Alle weiteren Punkte würden womöglich nur das bereits geschriebene wiederholen… Davon abgesehen kann und möchte ich euch nicht alles vorkauen 😉

Mit diesen Worten verabschiede ich mich für diese Woche und darf euch hoffentlich am kommenden Dienstag wieder hier begrüßen. Ich selbst bin morgen auf der CeBIT unterwegs und schaue mir das ein- oder andere an…
Bis dahin wünsche ich euch eine angenehme Rest-Woche und natürlich Happy Coding!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.