Konventionen und Layout

Übersicht
 Denk wie der Nutzer
 Konventionen nutzen
 Welche Interface-Elemente gibt es
 Layoutregeln (für Software)
Denk wie der Nutzer
 Oberflächen, die sich an der Implementierung
orientieren sind schlecht.
Denk wie der Nutzer
 Oberflächen, die sich an der Implementierung
orientieren sind schlecht.
 Dem Benutzer ist es egal wie etwas funktioniert.
Es ist dem Nutzer egal…
 Ob sich durch ein
Artikelmerkmal etwas an
der Auftragsart ändert
 In welchem Lager / von
welchem Dienstleister sein
Produkt verschickt wird
Denk wie der Nutzer
 Oberflächen, die sich an der Implementierung
orientieren sind schlecht.
 Dem Benutzer ist es egal wie etwas funktioniert.
 Gießt man mechanische Abläufe in Software, so ist das
Ergebnis immer schlechter als vorher.
Wenn man mechanische Abläufe in
Software nachbildet, dann…
 Dupliziert man alle Nachteile der Realität
 Ohne die „Haptik“ der realen Gegenstände nachbilden
zu können.
 Braucht man in der Regel für die gleiche Aufgabe (z.B.
Umschlag beschriften) deutlich länger…
 … es sei denn, man hat einen häufig wiederkehrenden
Ablauf (z.B. Serienbriefe)
Denk wie der Nutzer
 Oberflächen, die sich an der Implementierung
orientieren sind schlecht.
 Dem Benutzer ist es egal wie etwas funktioniert.
 Gießt man mechanische Abläufe in Software, so ist das
Ergebnis immer schlechter als vorher.
 Optische Zusammenhänge werden immer schneller
erfasst als textuelle.
 Sie wirken auch stärker bindend.
Visueller Zusammenhang

C
B
Textueller Zusammenhang
 „B ist Teil von A, C ist gleichartig zu B, gehört aber
nicht zu A.“
 Yep, das ist deutlich schlechter als die Grafik.
 Schlimmer wird es, wenn das was gezeigt wird, nicht
dem entspricht was gemeint ist.
Konvention
 Konventionen müssen gelernt werden. Gut gewählte
Konventionen müssen nur einmal gelernt werden.
 „Hart verdrahtete“ Konventionen zu nutzen ist eine
gute Sache
 Bereits bekannte Konventionen zu nutzen, ist die
nächstbeste Lösung
 Neue Konventionen nur mit gutem Grund nutzen
„Was gleich aussieht, ist gleich“
„Was nahe zusammen ist, gehört zusammen“
„Rahmen fassen Dinge zu einer logischen Gruppe zusammen“
Interface Elemente (Widgets)
 Dienen der Ein- / Ausgabe von Daten
 Erlauben es Zustände zu ändern
 Navigation
 Ausführen von Befehlen
 Wechsel der Ansicht
 etc
Sprechblasen, Info- und Tooltips
Sprechblase
Wird nur verwendet, um auf
ein Problem oder einen
besonderen Zustand in einem
bestimmten Widget
hinzuweisen.

Tooltip / Infotip
Wird bei nur angezeigt, wenn Tooltips
Erklären unbeschriftete
der Mauszeiger über dem Widgets
Element schwebt.
Gibt zusätzliche nicht Infotips
essentielle Informationen. Geben weiterführende
Informationen zu einem
Widget
Check Boxen und Radio Buttons
Checkboxen nutzt man um
 Optionen an- und abzuwählen.
 Wenn es möglich ist, eine beliebige
Anzahl von Optionen zu wählen
 Wenn es weniger als 10 Optionen gibt

Radiobuttons nutzt man um

 Eine von mehreren, sich gegenseitig
ausschließenden Optionen zu wählen
 Es zwischen 2 und 7 Optionen gibt
Check Box? Oder Radio Button?
 Wenn die Alternative bei einer
Checkbox nicht direkt ersichtlich
ist, dann ist es besser Radiobuttons
zu verwenden.
 In Assistenten-Dialogen (Wizards)
sind Radiobuttons meist die bessere
Wahl, damit der Nutzer alle
Optionen sieht.
 Bei wichtigen Entscheidungen für
den Nutzer sind Radioboxen
vorzuziehen.
Radio Button? Oder Check Box?
 Wenn die Alternative klar ist, dann
ist die Checkbox die bessere Wahl.
 Ebenso, wenn die Auswahl nicht
kritisch oder gar unwichtig ist.
 Der Oberflächendesigner muss hier
Klarheit und Platzbedarf
gegeneinander abwägen.
Command Buttons und Links
 Mit einem Commandbutton führt der Benutzer
unmittelbar eine Aktion aus.
 Mit einem Link wechselt der Nutzer auf eine
andere Seite/ anderes Fenster oder kann sich
weiterführende Informationen anzeigen lassen.
Command Button oder Link?
Es ist besser einen Button zu nutzen wenn…
 Ein Klick eine direkte Aktion veranlasst die zum
primären Zweck des gerade angezeigten Fensters/
Dialogs gehört
 Wenn ein Fenster geöffnet wird, das weitergehende
Eingaben oder Auswahlen sammelt.
 Wenn die Aktion wichtig ist (zerstörerisch und/ oder
irreversibel)
Command Links
Command Links
 Ermöglichen eine einzelne Auswahl zu einer wichtigen
Frage
 Und gehen dann zum nächsten Schritt in einem
Ablauf weiter
 Sollen ein saubere, leichtes Aussehen, einen
beschreibenden Text und eine optionale,
weitergehende Beschreibung
Combo Box und Drop-Down List
 Die Drop-Down Liste ermöglicht eine
Auswahl aus sich gegenseitig
ausschließenden Möglichkeiten.
 Die Combo Box kombiniert ein
Eingabefeld mit einer Drop-Down
Liste
 Dadurch kann der Nutzer einen
eigenen Wert eintragen, und ist nicht
auf die vorgegebenen Werte
beschränkt.
Listen
 Erlauben den Nutzer eine Auswahl
aus einer stets sichtbaren Liste von
Alternativen
 Wenn eine Mehrfachauswahl
möglich ist sollte eine Liste nur
verwendet werden, wenn die
Mehrfachauswahl selten genutzt
wird, da diese Möglichkeit für den
Nutzer nicht direkt ersichtlich ist.
Slider

 Ermöglicht die Auswahl aus seiner fortlaufenden

Menge von Werten (wie Lautstäre oder Helligkeit).
 Kann ebenfalls benutzt werden, wenn es eine
definierte Menge von sortierten, eindeutigen Werten
gibt (wie z.B. die Bildschirmauflösung)
 Wenn bei einem fortlaufenden Prozess durch
Nutzereingaben eine Navigation möglich ist (z.B.
Abspielen von Ton- und Videodateien)
Progress Bars

 Erlauben es dem Nutzer den Fortschritt einer länger

dauernden Operation zu einzuschätzen.
 Sollte eingesetzt werden, wenn die Dauer der Operation
auf mehr als 5 Sekunden geschätzt wird.
 Zeigen den Fortschritt des Rechners bei einer Aktion an,
nicht den Fortschritt des Nutzers in einem Ablauf.
 Wenn die Dauer nicht eingeschätzt werden kann, so sollte
nur eine „Ich arbeite daran“ Animation gezeigt werden.
Spin Control
 Bestehen immer aus einer Textbox un den den Auf /
Ab Pfeilen.
 Erlauben es dem Nutzer numerische Werte zu ändern,
ohne tippen zu müssen.
 Die möglichen Werte sollten direkt aufeinander
folgen, ansonsten ist die Combo-Box die bessere Wahl.
Tabs

 Ermöglichen die Anzeige von zusammengehörigen

Informationen auf mehreren Seiten.
 Werden genutzt, wenn die Auswahlmöglichkeiten
nicht auf eine Seite passen.
 Die Auswahlen nicht abhängig von einander sind –
sonst ist ein Wizard die bessere Wahl
 Die Tabs nicht verschiedene Schritte in einem Ablauf
beschreiben (hier wäre ein Wizard die bessere Wahl)
Textbox
 Erlaubt es einen beliebigen
numerischen oder
alphanumerischen Wert anzuzeigen
oder zu ändern.
 Sollte benutzt werden, wenn die
Eingabemöglichkeiten nicht
praktikabel aufgelistet werden
können (sonst wären ggf. Listen,
Slider, Spinner oder Comboboxen
die bessere Wahl)
Tree
 Stellt Hierarchien dar
 Datenknoten nennt man Blätter
oder leaf nodes.
 Knoten die andere Objekte
enthalten sind Äste oder
container nodes.
Aufgaben des Layuts
 Fokus – was bemerkt der Nutzer zuerst
 Fluss – in welcher Reihenfolge wird etwas
wahrgenommen
 Gruppierung – was gehört zusammen
 Bedeutung– Herausgestellte Elemente sind wichtiger
 Konsistenz – Wenn ähnliche Seiten gleich aufgebaut
sind, findet sich der Nutzer schneller zurecht.
Was sieht der Nutzer
 Konzentriertes Lesen.
Links -> Rechts, Oben -> Unten

 Scannen.
Der Nutzer überfliegt die Seite und
sucht nach Schlüsselwörtern.

 Gibt es eine linke Spalte, so wird diese

zuerst überflogen
Leseverhalten
 Der Nutzer wird eine
Oberflächer immer erst
scannen.
 Und dabei größere
Textblöcke fast immer
komplett ignorieren.
Leseverhalten
 Sind alle Element gleich, so
wird diagonal von oben
links nach unten rechts
gescannt
 Der Bereich unten links
wird kaum beachtet
Leseverhalten
 Interaktive Elemente
werden stärker
wahrgenommen.
 Besonders oben links und
mittig angeordnete
Elemente
 Hervorgehobene Elemente
(Farbe, Schriftgröße)
erregen Aufmerksamkeit
Das heisst?
 Interaktive Elemente, die etwas starten oben links oder
zentral oben platzieren
 Elemente die eine Aufgabe abschließen unten rechts
platzieren
 Wenn möglich: Wichtigen Text auf interaktiven
Elementen platzieren
 Nichts wichtiges unten links platzieren
 Keine dicken Textblöcke
 Elemente die Aufmerksamkeit erregen, sollten diese
auch verdienen