In acht goldenen Regeln um die (UI-)Welt

Jochen Wolters@jochenwolters

via http://daringfireball.com

via http://www.webpagesthatsuck.com

Ben Shneiderman’sEight Golden Rules of Interface DesignAus: “Designing the User Interface: Strategies for Effective Human-Computer Interaction.”

Strive for consistency

Consistent sequences of actions should be required in similar situations; identical terminology should be used in prompts, menus, and help screens; and consistent commands should be employed throughout.

1. Strebe nach Einheitlichkeit

Arbeitsabläufe

Funktionalität

Erscheinungsbild

Terminologie

1. Strebe nach Einheitlichkeit

“Welt” Kippschalter, Drehregler, …

Kultur-Raum (Schriftzeichen, -richtung, …)

System-Typ Haushalts-Gerät, Auto, Computer, …

System MS Windows, iOS, Navi, …

1. Strebe nach Einheitlichkeit

App Photoshop, Word, eBay, …

1. Strebe nach Einheitlichkeit

1. Strebe nach Einheitlichkeit

Enable frequent users to use shortcuts

As the frequency of use increases, so do the user's desires to reduce the number of interactions and to increase the pace of interaction. Abbreviations, function keys, hidden commands, and macro facilities are very helpful to an expert user.

2. Richte Abkürzungen für erfahrene Nutzer ein

Tastatur-Kürzel

Versteckte “Power User”-Funktionen

Automation

2. Richte Abkürzungen für erfahrene Nutzer ein

2. Richte Abkürzungen für erfahrene Nutzer ein

2. Richte Abkürzungen für erfahrene Nutzer ein

2. Richte Abkürzungen für erfahrene Nutzer ein

Offer informative feedback

For every operator action, there should be some system feedback. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial.

3. Biete informative Rückmeldungen

Relevant

Wichtigkeit / Dringlichkeit angemessen

Verständlich und aussagekräftig

Im passenden Kontext (Zeit und Ort)

3. Biete informative Rückmeldungen

3. Biete informative Rückmeldungen

0,1 s 1,0 s 10 sUrsache-

Wirkungs-Zusammenhang

“Seitenwechsel”in einer

Unterhaltung

MenschlicheAufmerksamkeits-

Spanne

Rückmeldung aufTastendruck,Mausklick, …

Progressbaranzeigen, Fenster

öffnen, …

Datei öffnen,Druck starten, …

3. Biete informative Rückmeldungen

Design dialog to yield closure

Sequences of actions should be organized into groups with a beginning, middle, and end. The informative feedback at the completion of a group of actions gives the operators the satisfaction of accomplishment, a sense of relief, the signal to drop contingency plans and options from their minds, and an indication that the way is clear to prepare for the next group of actions.

4. Gestalte in sich abgeschlossene Dialoge

Gruppierung von Arbeitsabläufen

Klarer Abschluss eines Arbeitsschrittes

Eindeutige Alternativen für den nächsten Schritt

4. Gestalte in sich abgeschlossene Dialoge

4. Gestalte in sich abgeschlossene Dialoge

4. Gestalte in sich abgeschlossene Dialoge

Offer simple error handling

As much as possible, design the system so the user cannot make a serious error. If an error is made, the system should be able to detect the error and offer simple, comprehensible mechanisms for handling the error.

5. Ermögliche einfache Fehler-Handhabung

Fehler-Vermeidung vor Fehler-Korrektur

Automatische Fehler-Erkennung

Eindeutige Anzeige von Fehlern

Fehlermeldungen mit Lösungs-Hinweisen

5. Ermögliche einfache Fehler-Handhabung

5. Ermögliche einfache Fehler-Handhabung

5. Ermögliche einfache Fehler-Handhabung

5. Ermögliche einfache Fehler-Handhabung

Permit easy reversal of actions

This feature relieves anxiety, since the user knows that errors can be undone; it thus encourages exploration of unfamiliar options. The units of reversibility may be a single action, a data entry, or a complete group of actions.

6. Erlaube einfaches Rückgängig-Machen

Einzelschritte vs. Historie

Keine Unterbrechung des Arbeitsablaufs

Mehr Freiheiten für den Benutzer

6. Erlaube einfaches Rückgängig-Machen

6. Erlaube einfaches Rückgängig-Machen

6. Erlaube einfaches Rückgängig-Machen

6. Erlaube einfaches Rückgängig-Machen

Support internal locus of control

Experienced operators strongly desire the sense that they are in charge of the system and that the system responds to their actions. Design the system to make users the initiators of actions rather than the responders.

7. Gib dem Nutzer das Kommando

Nutzer befiehlt, Computer folgt

Eng verknüpft mit Informativen Rückmeldungen

“Principle of Least Surprise”

7. Gib dem Nutzer das Kommando

7. Gib dem Nutzer das Kommando

7. Gib dem Nutzer das Kommando

7. Gib dem Nutzer das Kommando

Time-outs sind

BÖSE

7. Gib dem Nutzer das Kommando

Reduce short-term memory load

The limitation of human information processing in short-term memory requires that displays be kept simple, multiple page displays be consolidated, window-motion frequency be reduced, and sufficient training time be allotted for codes, mnemonics, and sequences of actions.

8. Entlaste das Kurzzeit-Gedächtnis

Klare Struktur: Fenster, Dialoge, Gesamt-App

“Recognition over Recall”

Implizite Hilfe

Selbst ein kurzer Satz kann — unterbrochen von einem etwas längeren Einschub wie diesem hier, der insgesamt 28 Worte enthält (was schon eine Menge ist) und das Kurzzeit-Gedächtnis schon spürbar in’s Wackeln bringen kann — zum Problem werden.

8. Entlaste das Kurzzeit-Gedächtnis

Selbst ein kurzer Satz kann — unterbrochen von einem etwas längeren Einschub wie diesem hier, der insgesamt 28 Worte enthält (was schon eine Menge ist) und das Kurzzeit-Gedächtnis schon spürbar in’s Wackeln bringen kann — zum Problem werden.

8. Entlaste das Kurzzeit-Gedächtnis

7 ± 2Informations-“Brocken”

8. Entlaste das Kurzzeit-Gedächtnis

Ebene 3→

1. Strebe nach Einheitlichkeit

2. Richte Abkürzungen für erfahrene Nutzer ein

3. Biete informative Rückmeldungen

4. Gestalte in sich abgeschlossene Dialoge

5. Ermögliche einfache Fehler-Korrekturen

6. Erlaube einfaches Rückgängig-Machen

7. Gib dem Nutzer das Kommando

8. Entlaste das Kurzzeit-Gedächtnis

Ben Shneiderman’sAcht Goldene Regeln des UI-Design

UX ROI ?

∆K = ∆t ✕ Kt

Auswählen

RegistrierenEinloggen

Bezahlen

“Weiter”

(+ Registrieren)

oder

$ ?$300M More revenue in first year at $25B retailer

The $300 Million Button

via http://www.uie.com/articles/three_hund_million_button/

UXROI ?

!Benutzerfreundlichkeit rechnet sich

Bruce “Tog” Tognazzini’sFirst Principles of Interaction Designhttp://www.asktog.com/basics/firstPrinciples.html

Jakob Nielsen’sTen Usability Heuristicshttp://www.useit.com/papers/heuristic/heuristic_list.html

Ben Shneiderman’sEight Golden Rules of Interface Designhttp://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.html

Donald Norman

TheDesign ofEverydayThings

In acht goldenen Regeln um die (UI-)Welt

Jochen Wolters@jochenwolters | uiobservatory.com

Vielen Dankfür’s Mitreisen!