Checkliste für User-Interface-Reviews

Bei einer User-Interface-Review gehen zwei Personen alle Teile des User-Interface der Anwendung gemeinsam durch und prüfen es mit den folgenden Qualitätskriterien.

Die ATEGRA-Regeln für User-Interfaces

Ein gutes User-Interface ist selbsterklärend. Konkret:
1. Dies wird ermöglicht durch verständliche Bezeichnungen von Listen, Buttons, Feldern etc. sowie durch Hilfetexte, die „am Ort des Geschehens“ (also neben dem betreffenden Feld oder Button) angezeigt werden (ohne, dass der User irgendetwas klicken oder die Maus dorthin bewegen muss).
2. Buttons werden im Normalfall mit einem Verb beschriftet, oft auch ein Substantiv und ein Verb. Begründung: Ein Button löst eine Aktivität aus, die meist mit einem Verb umschrieben werden kann. Dies erhöht die Verständlichkeit.
Ein gutes User-Interface berücksichtigt sowohl gelegentliche User (casual user) wie auch Power-User (genauer: frequent user). Im Zweifelsfall oder Konfliktfall wird der gelegentliche User bevorzugt.
Alle Informationen werden kompakt angezeigt, sodass der User ohne zu Scrollen möglichst viel sieht. Dies betrifft v.a. Masken und Listenansichten. Auf zu viel White-Space oder Grey-Space wird verzichtet. Funktion vor Ästhetik.
Alle Flächen, die angeklickt werden können sind als anklickbar erkennbar ohne, dass man mit der Maus suchen und drüberfahren muss (da die meisten User das nie machen). Falls dies im Ausnahmefall nicht möglich ist, gilt: Jede Fläche, die angeklickt werden kann, muss bei einem Mouse-Over hervorgehoben (highlighted) werden
Alle Flächen, die angeklickt werden können (Buttons, Pager-Nummern etc.) sind genügend gross, sodass man sie leicht mit der Maus oder dem Finger treffen kann. So werden viele Buttons mit ca. 1cm Breite (damit man sie gut treffen kann) und eher kleiner Höhe angezeigt (kleine Höhe, etwas gleich hoch wie der Text, damit nicht das Gesamtbild verzerrt wird).
Die Schriftgrösse muss überall genügend gross sein, damit möglichst viele User, auch diejenigen, die nicht mehr so gut sehen, problemlos alles lesen können. Wenn möglich, soll der User wählen können, wie gross die Schrift ist. Es ist erlaubt Beschriftungen, die selten oder nie ändern, in kleinerer Schrift anzuzeigen.
Fette Schrift: Dafür gibt es verschiedene Strategien:
- Strategie: Fast kein Text ist fett (weder Labels, noch Titel, noch Feldinhalte). Punktuell und gezielt wird Text fett geschrieben um ihn hervorzuheben (Faustregel: höchstens 5 Prozent der Wörter auf einer Seite sind fett).
- Strategie: Fett sind alle Texte, die ändern und die man auf dem Mobilgerät beim Gehen sehen muss und die Texte sind nicht fett falls es sich um statische Texte handelt und solche, die unterwegs nicht gelesen werden müssen.
Die Schriftfarbe muss genügend kontrastreich auf dem Hintergrund sein. Seit ca. 2010 hat sich die Mode etabliert, Texte in dunkelgrauer Schrift auf hellgrauem Hintergrund zu präsentieren. Damit wird der Kontrast geringer. Für Menschen ab einem bestimmten Alter kann solcher Text nur unter Anstrengung gelesen werden. Deswegen muss der Kontrast genügend gross sein. Am besten schwarz auf weiss.
Falls die Anwendung unterscheidet zwischen Lese- und Edit-Modus: Es muss für den User jederzeit sofort (also ohne Mausklick) erkennbar sein, ob die aktuelle Seite sich im Lese- oder Edit-Modus befindet. Es muss zudem bei jedem Feld sichtbar sein, ob es im Edit- oder Lese-Modus ist.
Buttons, die man nicht anklicken darf, weil der User aktuell keine Rechte (basierend auf seinen Rollen) hat oder weil der Status dies aktuell nicht zulässt, werden i.d.R. nicht versteckt, sondern es wird eine Meldung angezeigt, wenn der User darauf klickt, aus welchem Grund der Button im Moment nicht genutzt werden darf. Begründung: Jeder User soll wissen, dass es einen solchen Button gibt, auch wenn er aktuell nicht berechtigt ist, aber vielleicht früher war. Es ist verwirrend für einen User, wenn ein Button „plötzlich“ nicht mehr sichtbar ist.
Alle Geräteklassen berücksichtigen: Kleine, mittlere und grosse Bildschirme (ausser die Vorgaben schränkten dies ein).
1. Man kläre ab, wie gross die Bildschirme des Zielpublikums sind. Da man nicht alle Grössen berücksichtigen kann, wähle man z.B. die drei häufigsten aus. Die Grösse wird meistens in Pixels definiert.
2. Man lege fest, welches die Referenz-Bildschirm-Grösse ist: Für diese Grösse soll die Darstellung optimiert werden.
3. Ferner ist auch zu definieren, auf wieviele Spalten der Bildschirm-Inhalt verteilt werden soll: eine, zwei, drei oder vier Spalten?
Der User soll die Fenstergrösse möglichst weitgehend frei wählen können. Hintergrund: Es gibt User, die alle Fenster maximieren und solche die lieber mit nicht-maximierten Fenstern arbeiten. Bei beiden Gruppen soll die Arbeitsfläche gut aussehen und gut bedienbar sein.
Vorsicht: Viele schöne Beispiele für UI-Design, die im Web präsentiert und diskutiert werden, sind leider nicht für Informationssysteme konzipiert. Bei Informationssystemen haben wir grosse Masken mit vielen Feldern und Listen mit vielen Spalten. Die schönen Beispiele, die man im Web findet zeigen Spezialfälle, oft nur kleine Masken und Listen mit wenigen Spalten. Sie sind nicht realistisch für Informationssysteme.
Es gibt eine Reihe von nützlichen Funktionen, die (fast) überall dem User zur Verfügung gestellt werden sollen:
1. Ein Kommentarfeld mit der Möglichkeit die eigenen Kommentare mit einem Zeitstempel zu versehen (ähnlich wie ein Logbuch). Begründung: Es kommt häufig vor, dass ein User einen Kommentar hinterlegen will.
2. Gut sichtbare Infos zu den Fragen: Wer hat diesen Datensatz erstellt? Wann? Wer hat ihn zuletzt geändert? Wann? Begründung: Es ist oft nützlich zu wissen, wann der Datensatz letztes Mal mutiert wurde und von wem.
3. Eine einfache Funktion, um einem anderen User einen Link auf das vorliegende Dokument zu senden. Begründung: Es kommt oft vor, dass man einem anderen User ein Dokument zeigen will.
4. Klare Unterscheidung zwischen Links/Buttons, um
  1. etwas anzuzeigen: Beschriftung mit „zeige…“
  2. etwas zu verändern: Beschriftung mit einem Verb
5. Eine Historie der Felder: Wer hat wann welches Feld von welchem alten Wert auf welchen neuen Wert geändert?
Scrollen muss sowohl mit den Tasten PageUp und PageDown (falls eine Tastatur zur Verfügung steht) wie auch mit der Maus resp. den Fingern möglich sein.
Die Tasten „Home“ und „End“ (an den Anfang oder an das Ende der Zeile springen) sowie die Kombinationen „Ctrl + Home“ und „Ctrl + End“ (an den Anfang des Fensters oder an das Ende des Fensters springen) müssen funktionieren.
Ergonomischer Einsatz von Farben: Durch gezielte Farbgebung kann der User rasch informiert werden (z.B. wo bin ich? ist der Status kritisch?). Es bestehen mindestens die folgenden Möglichkeiten:
1. Hintergrundfarbe der ganzen Maske oder Liste
2. Hintergrundfarbe eines Bereichs auf einer Maske, um diesen Bereich hervorzuheben (z.B. wichtiger Hinweis, Warnung, Instruktion oder schlichtweg Eingabebereich)
3. Hintergrundfarbe des Titels einer Maske oder des Titels eines Abschnitts
4. Hintergrundfarbe eines Feldes auf der Maske oder einer Zelle in einer Liste
5. Hintergrundfarbe einer Zeile in einer Tabelle abhängig von gewissen Kriterien
6. Hintergrundfarbe einer Spalte in einer Tabelle
7. Hintergrundfarbe einzelner Buttons: z.B. besonders häufig

Dieter Rams‘ 10 Thesen für gutes Design

Dieter Ram (siehe http://de.wikipedia.org/wiki/Dieter_Rams) hat seinerzeit folgende zehn Thesen formuliert:

Gutes Design ist innovativ.
Gutes Design macht ein Produkt brauchbar.
Gutes Design ist ästhetisch.
Gutes Design macht ein Produkt verständlich.
Gutes Design ist unaufdringlich.
Gutes Design ist ehrlich.
Gutes Design ist langlebig.
Gutes Design ist konsequent bis ins letzte Detail.
Gutes Design ist umweltfreundlich.
Gutes Design ist so wenig Design wie möglich.

Allgemeine Qualitätskriterien für ein User-Interface

Neben den oben beschriebenen konkreten Regeln haben wir folgende allgemeinen Regeln als Anforderungen definiert:

Verständlichkeit: Sind alle Beschriftungen und Texte verständlich formuliert? (auch für gelegentliche Benutzer) Dies kann ein User gut beurteilen, der das User-Interface zum ersten Mal sieht. Sein Urteil ist sehr wertvoll und muss aufgezeichnet werden, da beim zweiten oder wiederholten Besuch ein Gewöhnungseffekt entsteht und gewisse Dinge dann nicht mehr auffallen.
Selbsterklärend: Inwieweit ist das User-Interface selbsterklärend? Ist es so getextet und strukturiert, dass es möglichst keinen Schulungs-/Instruktions- oder Supportaufwand benötigt?
Arbeitsfluss: Entspricht die Reihenfolge der Felder und Button den häufigsten Arbeitsabläufen?
Fehlertoleranz: Reagiert die Software angemessen bei Fehleingaben? Werden grobe Fehleingaben verhindert?
Farben-Ergonomie: Werden Farben als ergonomisch sinnvolle Unterstützung eingesetzt?
User Level: Ist es sowohl für häufige User (frequent user) wie auch für gelegentliche User (casual user) ausgelegt? Für öffentlich zugängliche Anwendungen (z.B. Web oder öffentliche Terminals): Werden die unterschiedlichen Bildungslevel der User berücksichtig?
Multi-kultureller Background: Sind ggfls. User aus verschiedenen Ländern berücksichtigt, die einen unterschiedlichen kulturellen Background haben? Wurde geprüft und schriftlich festgehalten, welche kulturellen Aspekte zu berücksichtigen sind und welche (unerwünschten und erwünschten) Seiteneffekte auftreten können?
Wiedererkennungseffekt: Hält sich das User-Interface an das was die Anwender schon kennen resp. was am häufigsten vorkommt oder weicht es ohne wichtigen Grund stark davon ab?
Usability: Ist die Usability gut? Wie bequem ist es Daten und/oder Befehle einzugeben? Ist es die Bedienung „praktisch“?
Ästhetik: Ist die Graphik ästhetisch befriedigend? Sind die Farben harmonisch abgestimmt? Passen die Farben zum Thema? Ist das Gesamtbild ruhig? Sind Hauptlinien erkennbar und werden diese nicht unschön gebrochen? Hat es graphische Symbole und Bilder um das Textbild ansprechend und freundlich zu gestalten?
Navigation: Weiss der Benutzer jederzeit a) wo er ist?, b) was er hier tun kann? und c) wo er hingehen kann?
Freundlichkeit: Spricht die Software freundlich zum User? In der Forschung wurde beschrieben, dass freundliche Software die User produktiver macht.
Mausklick-Ökonomie: Sind die wichtigsten Aufgaben mit nur wenigen Mausklicks machbar? Die User lieben es, mit möglichst wenigen Mausklicks einen Effekt auszulösen.
Optische Lesbarkeit: Sind die Schriftgrössen so gewählt, dass auch Anwender mit nicht mehr so jungen Augen alles gut lesen können? Man bedenke, dass gewisse Schriftarten in 9 Punkt Grösse auf Bildschirmen mit grosser Auflösung nicht mehr gut lesbar sind.
Hilfe-Texte: Hat es an den richtigen Stellen Erklärungen? Z.B. als grüner Text, der bloss im Edit-Modus sichtbar ist.
Vorgabe-Werte: Sind dort, wo es Sinn macht, sinnvolle Default-Werte gesetzt?

ATEGRA Software Engineering