in acht goldenen regeln um die (ui-)welt
DESCRIPTION
A presentation (in German) of Ben Shneiderman's "Eight Golden Rules of Interface Design", given at webcon2012 in Aachen.TRANSCRIPT
![Page 1: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/1.jpg)
In acht goldenen Regeln um die (UI-)Welt
Jochen Wolters@jochenwolters
![Page 2: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/2.jpg)
via http://daringfireball.com
![Page 3: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/3.jpg)
via http://www.webpagesthatsuck.com
![Page 4: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/4.jpg)
Ben Shneiderman’sEight Golden Rules of Interface DesignAus: “Designing the User Interface: Strategies for Effective Human-Computer Interaction.”
![Page 5: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/5.jpg)
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
![Page 6: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/6.jpg)
1. Strebe nach Einheitlichkeit
![Page 7: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/7.jpg)
“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, …
![Page 8: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/8.jpg)
1. Strebe nach Einheitlichkeit
![Page 9: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/9.jpg)
1. Strebe nach Einheitlichkeit
![Page 10: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/10.jpg)
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
![Page 11: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/11.jpg)
2. Richte Abkürzungen für erfahrene Nutzer ein
![Page 12: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/12.jpg)
2. Richte Abkürzungen für erfahrene Nutzer ein
![Page 13: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/13.jpg)
2. Richte Abkürzungen für erfahrene Nutzer ein
![Page 14: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/14.jpg)
2. Richte Abkürzungen für erfahrene Nutzer ein
![Page 15: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/15.jpg)
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)
![Page 16: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/16.jpg)
3. Biete informative Rückmeldungen
![Page 17: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/17.jpg)
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, …
![Page 18: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/18.jpg)
3. Biete informative Rückmeldungen
![Page 19: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/19.jpg)
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
![Page 20: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/20.jpg)
4. Gestalte in sich abgeschlossene Dialoge
![Page 21: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/21.jpg)
4. Gestalte in sich abgeschlossene Dialoge
![Page 22: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/22.jpg)
4. Gestalte in sich abgeschlossene Dialoge
![Page 23: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/23.jpg)
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
![Page 24: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/24.jpg)
5. Ermögliche einfache Fehler-Handhabung
![Page 25: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/25.jpg)
5. Ermögliche einfache Fehler-Handhabung
![Page 26: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/26.jpg)
5. Ermögliche einfache Fehler-Handhabung
![Page 27: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/27.jpg)
5. Ermögliche einfache Fehler-Handhabung
![Page 28: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/28.jpg)
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
![Page 29: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/29.jpg)
6. Erlaube einfaches Rückgängig-Machen
![Page 30: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/30.jpg)
6. Erlaube einfaches Rückgängig-Machen
![Page 31: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/31.jpg)
6. Erlaube einfaches Rückgängig-Machen
![Page 32: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/32.jpg)
6. Erlaube einfaches Rückgängig-Machen
![Page 33: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/33.jpg)
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”
![Page 34: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/34.jpg)
7. Gib dem Nutzer das Kommando
![Page 35: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/35.jpg)
7. Gib dem Nutzer das Kommando
![Page 36: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/36.jpg)
7. Gib dem Nutzer das Kommando
![Page 37: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/37.jpg)
7. Gib dem Nutzer das Kommando
Time-outs sind
BÖSE
![Page 38: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/38.jpg)
7. Gib dem Nutzer das Kommando
![Page 39: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/39.jpg)
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
![Page 40: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/40.jpg)
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.
![Page 41: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/41.jpg)
8. Entlaste das Kurzzeit-Gedächtnis
7 ± 2Informations-“Brocken”
![Page 42: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/42.jpg)
8. Entlaste das Kurzzeit-Gedächtnis
Ebene 3→
![Page 43: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/43.jpg)
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
![Page 44: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/44.jpg)
UX ROI ?
![Page 45: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/45.jpg)
∆K = ∆t ✕ Kt
![Page 46: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/46.jpg)
Auswählen
RegistrierenEinloggen
Bezahlen
“Weiter”
(+ Registrieren)
oder
![Page 47: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/47.jpg)
$ ?$300M More revenue in first year at $25B retailer
The $300 Million Button
via http://www.uie.com/articles/three_hund_million_button/
![Page 48: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/48.jpg)
UXROI ?
!Benutzerfreundlichkeit rechnet sich
![Page 49: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/49.jpg)
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
![Page 50: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/50.jpg)
Donald Norman
TheDesign ofEverydayThings
![Page 51: In acht goldenen Regeln um die (UI-)Welt](https://reader034.vdokument.com/reader034/viewer/2022042515/5496fb74b4795927538b4571/html5/thumbnails/51.jpg)
In acht goldenen Regeln um die (UI-)Welt
Jochen Wolters@jochenwolters | uiobservatory.com
Vielen Dankfür’s Mitreisen!