SlideShare ist ein Scribd-Unternehmen logo
In acht goldenen Regeln
um die (UI-)Welt

Jochen Wolters
@jochenwolters
via http://daringfireball.com
via http://www.webpagesthatsuck.com
Ben Shneiderman’s
Eight Golden Rules of Interface Design
Aus:
“Designing the User Interface:
Strategies for Effective Human-Computer Interaction.”
1. Strebe nach Einheitlichkeit

  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.




            Arbeitsabläufe
            Funktionalität
            Erscheinungsbild
            Terminologie
1. Strebe nach Einheitlichkeit
1. Strebe nach Einheitlichkeit


          App              Photoshop, Word, eBay, …

         System            MS Windows, iOS, Navi, …

       System-Typ          Haushalts-Gerät, Auto,
                           Computer, …
       Kultur-Raum         (Schriftzeichen, -richtung, …)


         “Welt”            Kippschalter, Drehregler, …
1. Strebe nach Einheitlichkeit
1. Strebe nach Einheitlichkeit
2. Richte Abkürzungen für erfahrene Nutzer ein

  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.




            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
3. Biete informative Rückmeldungen

  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.




            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 s
    Ursache-       “Seitenwechsel”       Menschliche
    Wirkungs-          in einer        Aufmerksamkeits-
  Zusammenhang      Unterhaltung           Spanne


 Rückmeldung auf     Progressbar        Datei öffnen,
   Tastendruck,    anzeigen, Fenster   Druck starten, …
  Mausklick, …        öffnen, …
3. Biete informative Rückmeldungen
4. Gestalte in sich abgeschlossene Dialoge

  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.


            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
5. Ermögliche einfache Fehler-Handhabung

  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.




            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
6. Erlaube einfaches Rückgängig-Machen

  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.




            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
7. Gib dem Nutzer das Kommando

 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.




            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
8. Entlaste das Kurzzeit-Gedächtnis

  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.



            Klare Struktur: Fenster, Dialoge, Gesamt-App
            “Recognition over Recall”
            Implizite Hilfe
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±2 Informations-“Brocken”
8. Entlaste das Kurzzeit-Gedächtnis



                            ne   3→
                      Ebe
Ben Shneiderman’s
Acht Goldene Regeln des UI-Design
 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
UX
ROI ?
K
∆K = ∆t ✕
          t
Auswählen


Einloggen   oder   “Weiter”
                   Registrieren



      Bezahlen (+ Registrieren)
llion Bu tton
 he $30 0 Mi
T


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




    via http://www.uie.com/articles/three_hund_million_button/
UX
    !
ROI ?
Benutzerfreundlichkeit rechnet sich
Bruce “Tog” Tognazzini’s
First Principles of Interaction Design
http://www.asktog.com/basics/firstPrinciples.html




Jakob Nielsen’s
Ten Usability Heuristics
http://www.useit.com/papers/heuristic/heuristic_list.html




Ben Shneiderman’s
Eight Golden Rules of Interface Design
http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/
schneidermanGoldenRules.html
Donald Norman
The
Design of
Everyday
Things
Vielen Dank
für’s Mitreisen!
In acht goldenen Regeln
um die (UI-)Welt

Jochen Wolters
@jochenwolters | uiobservatory.com

Weitere ähnliche Inhalte

Ähnlich wie In acht goldenen Regeln um die (UI-)Welt

UX und Scrum
UX und ScrumUX und Scrum
UX und Scrum
Alexander Casall
 
2022 02 rpa-round-table_chatbots
2022 02 rpa-round-table_chatbots2022 02 rpa-round-table_chatbots
2022 02 rpa-round-table_chatbots
FotiosKaramitsos
 
Mehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger InterfaceMehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger Interface
Moritz Haarmann
 
Scrum Workshop
Scrum WorkshopScrum Workshop
Scrum Workshop
mrdoubleb
 
UX in Business Apps
UX in Business AppsUX in Business Apps
UX in Business Apps
Alexander Casall
 
PowerPro Flyer deutsch
PowerPro Flyer deutschPowerPro Flyer deutsch
PowerPro Flyer deutsch
cynapspro GmbH
 
Workshop: Usability praktisch erfahren
Workshop: Usability praktisch erfahrenWorkshop: Usability praktisch erfahren
Workshop: Usability praktisch erfahren
Connected-Blog
 
Everything's connected
Everything's connectedEverything's connected
Everything's connected
Philipp Schneider
 
Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web Applications
Günther Haslbeck
 
Ec13 xpages-basic
Ec13 xpages-basicEc13 xpages-basic
Ec13 xpages-basic
Ulrich Krause
 
UX Methoden, Costumer Journey, Prototyping
UX Methoden, Costumer Journey, PrototypingUX Methoden, Costumer Journey, Prototyping
UX Methoden, Costumer Journey, Prototyping
Maria Mory
 
ErasePro Flyer deutsch
ErasePro Flyer deutschErasePro Flyer deutsch
ErasePro Flyer deutsch
cynapspro GmbH
 
XPages - The Basics
XPages - The BasicsXPages - The Basics
XPages - The Basics
Ulrich Krause
 
Usability Engineering
Usability  EngineeringUsability  Engineering
Usability Engineering
Nina Rebele
 
DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011
Ulrich Krause
 
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...
AKJoom
 
Ergosign-Hilfekonzepte-2013
Ergosign-Hilfekonzepte-2013Ergosign-Hilfekonzepte-2013
Ergosign-Hilfekonzepte-2013
Ergosign GmbH
 
Bit wisem 2015-wieners-sitzung-09_Software-Entwicklung
Bit wisem 2015-wieners-sitzung-09_Software-EntwicklungBit wisem 2015-wieners-sitzung-09_Software-Entwicklung
Bit wisem 2015-wieners-sitzung-09_Software-Entwicklung
Institute for Digital Humanities, University of Cologne
 
Persuasives Web-Design. Jenseits von Usability und Konversion
Persuasives Web-Design. Jenseits von Usability und KonversionPersuasives Web-Design. Jenseits von Usability und Konversion
Persuasives Web-Design. Jenseits von Usability und Konversion
Sebastian Deterding
 
Teamarbeit 2.0 (PTF 2008)
Teamarbeit 2.0 (PTF 2008) Teamarbeit 2.0 (PTF 2008)
Teamarbeit 2.0 (PTF 2008)
Thomas Koch
 

Ähnlich wie In acht goldenen Regeln um die (UI-)Welt (20)

UX und Scrum
UX und ScrumUX und Scrum
UX und Scrum
 
2022 02 rpa-round-table_chatbots
2022 02 rpa-round-table_chatbots2022 02 rpa-round-table_chatbots
2022 02 rpa-round-table_chatbots
 
Mehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger InterfaceMehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger Interface
 
Scrum Workshop
Scrum WorkshopScrum Workshop
Scrum Workshop
 
UX in Business Apps
UX in Business AppsUX in Business Apps
UX in Business Apps
 
PowerPro Flyer deutsch
PowerPro Flyer deutschPowerPro Flyer deutsch
PowerPro Flyer deutsch
 
Workshop: Usability praktisch erfahren
Workshop: Usability praktisch erfahrenWorkshop: Usability praktisch erfahren
Workshop: Usability praktisch erfahren
 
Everything's connected
Everything's connectedEverything's connected
Everything's connected
 
Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web Applications
 
Ec13 xpages-basic
Ec13 xpages-basicEc13 xpages-basic
Ec13 xpages-basic
 
UX Methoden, Costumer Journey, Prototyping
UX Methoden, Costumer Journey, PrototypingUX Methoden, Costumer Journey, Prototyping
UX Methoden, Costumer Journey, Prototyping
 
ErasePro Flyer deutsch
ErasePro Flyer deutschErasePro Flyer deutsch
ErasePro Flyer deutsch
 
XPages - The Basics
XPages - The BasicsXPages - The Basics
XPages - The Basics
 
Usability Engineering
Usability  EngineeringUsability  Engineering
Usability Engineering
 
DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011
 
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...
 
Ergosign-Hilfekonzepte-2013
Ergosign-Hilfekonzepte-2013Ergosign-Hilfekonzepte-2013
Ergosign-Hilfekonzepte-2013
 
Bit wisem 2015-wieners-sitzung-09_Software-Entwicklung
Bit wisem 2015-wieners-sitzung-09_Software-EntwicklungBit wisem 2015-wieners-sitzung-09_Software-Entwicklung
Bit wisem 2015-wieners-sitzung-09_Software-Entwicklung
 
Persuasives Web-Design. Jenseits von Usability und Konversion
Persuasives Web-Design. Jenseits von Usability und KonversionPersuasives Web-Design. Jenseits von Usability und Konversion
Persuasives Web-Design. Jenseits von Usability und Konversion
 
Teamarbeit 2.0 (PTF 2008)
Teamarbeit 2.0 (PTF 2008) Teamarbeit 2.0 (PTF 2008)
Teamarbeit 2.0 (PTF 2008)
 

Mehr von Jochen Wolters

Backups are the BOMB!
Backups are the BOMB!Backups are the BOMB!
Backups are the BOMB!
Jochen Wolters
 
(Web)design for conversion
(Web)design for conversion(Web)design for conversion
(Web)design for conversion
Jochen Wolters
 
Data backups are the bomb!
Data backups are the bomb!Data backups are the bomb!
Data backups are the bomb!
Jochen Wolters
 
What was Apple thinking?
What was Apple thinking?What was Apple thinking?
What was Apple thinking?
Jochen Wolters
 
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface DesignAn Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
Jochen Wolters
 
Don't Believe the (Esoteric) Hype
Don't Believe the (Esoteric) HypeDon't Believe the (Esoteric) Hype
Don't Believe the (Esoteric) Hype
Jochen Wolters
 
Create More, Consume Less
Create More, Consume LessCreate More, Consume Less
Create More, Consume Less
Jochen Wolters
 
How Gestalt Psychology Can Help You Make Better High-Tech Purchasing Decisions
How Gestalt Psychology Can Help You Make Better High-Tech Purchasing DecisionsHow Gestalt Psychology Can Help You Make Better High-Tech Purchasing Decisions
How Gestalt Psychology Can Help You Make Better High-Tech Purchasing Decisions
Jochen Wolters
 

Mehr von Jochen Wolters (8)

Backups are the BOMB!
Backups are the BOMB!Backups are the BOMB!
Backups are the BOMB!
 
(Web)design for conversion
(Web)design for conversion(Web)design for conversion
(Web)design for conversion
 
Data backups are the bomb!
Data backups are the bomb!Data backups are the bomb!
Data backups are the bomb!
 
What was Apple thinking?
What was Apple thinking?What was Apple thinking?
What was Apple thinking?
 
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface DesignAn Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
 
Don't Believe the (Esoteric) Hype
Don't Believe the (Esoteric) HypeDon't Believe the (Esoteric) Hype
Don't Believe the (Esoteric) Hype
 
Create More, Consume Less
Create More, Consume LessCreate More, Consume Less
Create More, Consume Less
 
How Gestalt Psychology Can Help You Make Better High-Tech Purchasing Decisions
How Gestalt Psychology Can Help You Make Better High-Tech Purchasing DecisionsHow Gestalt Psychology Can Help You Make Better High-Tech Purchasing Decisions
How Gestalt Psychology Can Help You Make Better High-Tech Purchasing Decisions
 

In acht goldenen Regeln um die (UI-)Welt

  • 1. In acht goldenen Regeln um die (UI-)Welt Jochen Wolters @jochenwolters
  • 4. Ben Shneiderman’s Eight Golden Rules of Interface Design Aus: “Designing the User Interface: Strategies for Effective Human-Computer Interaction.”
  • 5. 1. Strebe nach Einheitlichkeit 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. Arbeitsabläufe Funktionalität Erscheinungsbild Terminologie
  • 6. 1. Strebe nach Einheitlichkeit
  • 7. 1. Strebe nach Einheitlichkeit App Photoshop, Word, eBay, … System MS Windows, iOS, Navi, … System-Typ Haushalts-Gerät, Auto, Computer, … Kultur-Raum (Schriftzeichen, -richtung, …) “Welt” Kippschalter, Drehregler, …
  • 8. 1. Strebe nach Einheitlichkeit
  • 9. 1. Strebe nach Einheitlichkeit
  • 10. 2. Richte Abkürzungen für erfahrene Nutzer ein 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. Tastatur-Kürzel Versteckte “Power User”-Funktionen Automation
  • 11. 2. Richte Abkürzungen für erfahrene Nutzer ein
  • 12. 2. Richte Abkürzungen für erfahrene Nutzer ein
  • 13. 2. Richte Abkürzungen für erfahrene Nutzer ein
  • 14. 2. Richte Abkürzungen für erfahrene Nutzer ein
  • 15. 3. Biete informative Rückmeldungen 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. Relevant Wichtigkeit / Dringlichkeit angemessen Verständlich und aussagekräftig Im passenden Kontext (Zeit und Ort)
  • 16. 3. Biete informative Rückmeldungen
  • 17. 3. Biete informative Rückmeldungen 0,1 s 1,0 s 10 s Ursache- “Seitenwechsel” Menschliche Wirkungs- in einer Aufmerksamkeits- Zusammenhang Unterhaltung Spanne Rückmeldung auf Progressbar Datei öffnen, Tastendruck, anzeigen, Fenster Druck starten, … Mausklick, … öffnen, …
  • 18. 3. Biete informative Rückmeldungen
  • 19. 4. Gestalte in sich abgeschlossene Dialoge 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. Gruppierung von Arbeitsabläufen Klarer Abschluss eines Arbeitsschrittes Eindeutige Alternativen für den nächsten Schritt
  • 20. 4. Gestalte in sich abgeschlossene Dialoge
  • 21. 4. Gestalte in sich abgeschlossene Dialoge
  • 22. 4. Gestalte in sich abgeschlossene Dialoge
  • 23. 5. Ermögliche einfache Fehler-Handhabung 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. Fehler-Vermeidung vor Fehler-Korrektur Automatische Fehler-Erkennung Eindeutige Anzeige von Fehlern Fehlermeldungen mit Lösungs-Hinweisen
  • 24. 5. Ermögliche einfache Fehler-Handhabung
  • 25. 5. Ermögliche einfache Fehler-Handhabung
  • 26. 5. Ermögliche einfache Fehler-Handhabung
  • 27. 5. Ermögliche einfache Fehler-Handhabung
  • 28. 6. Erlaube einfaches Rückgängig-Machen 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. Einzelschritte vs. Historie Keine Unterbrechung des Arbeitsablaufs Mehr Freiheiten für den Benutzer
  • 29. 6. Erlaube einfaches Rückgängig-Machen
  • 30. 6. Erlaube einfaches Rückgängig-Machen
  • 31. 6. Erlaube einfaches Rückgängig-Machen
  • 32. 6. Erlaube einfaches Rückgängig-Machen
  • 33. 7. Gib dem Nutzer das Kommando 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. Nutzer befiehlt, Computer folgt Eng verknüpft mit Informativen Rückmeldungen “Principle of Least Surprise”
  • 34. 7. Gib dem Nutzer das Kommando
  • 35. 7. Gib dem Nutzer das Kommando
  • 36. 7. Gib dem Nutzer das Kommando
  • 37. 7. Gib dem Nutzer das Kommando Time-outs sind BÖSE
  • 38. 7. Gib dem Nutzer das Kommando
  • 39. 8. Entlaste das Kurzzeit-Gedächtnis 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. Klare Struktur: Fenster, Dialoge, Gesamt-App “Recognition over Recall” Implizite Hilfe
  • 40. 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.
  • 41. 8. Entlaste das Kurzzeit-Gedächtnis 7±2 Informations-“Brocken”
  • 42. 8. Entlaste das Kurzzeit-Gedächtnis ne 3→ Ebe
  • 43. Ben Shneiderman’s Acht Goldene Regeln des UI-Design 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
  • 45. K ∆K = ∆t ✕ t
  • 46. Auswählen Einloggen oder “Weiter” Registrieren Bezahlen (+ Registrieren)
  • 47. llion Bu tton he $30 0 Mi T $? $300M More revenue in first year at $25B retailer via http://www.uie.com/articles/three_hund_million_button/
  • 48. UX ! ROI ? Benutzerfreundlichkeit rechnet sich
  • 49. Bruce “Tog” Tognazzini’s First Principles of Interaction Design http://www.asktog.com/basics/firstPrinciples.html Jakob Nielsen’s Ten Usability Heuristics http://www.useit.com/papers/heuristic/heuristic_list.html Ben Shneiderman’s Eight Golden Rules of Interface Design http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/ schneidermanGoldenRules.html
  • 51. Vielen Dank für’s Mitreisen! In acht goldenen Regeln um die (UI-)Welt Jochen Wolters @jochenwolters | uiobservatory.com

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. Z.B. Copy-and-Paste\n\nVerschiedene Abläufe möglich (Menüs, Drag-n-Drop, etc.) aber in sich immer identisch\n\nZ.B. Quelle selektieren => Kopieren, nicht Kopier-Befehl wählen => Quelle anklicken\n\nFunktionalität: Command-Key vs. Control-Key für Shortcuts\n
  6. Z.B. Copy-and-Paste\n\nVerschiedene Abläufe möglich (Menüs, Drag-n-Drop, etc.) aber in sich immer identisch\n\nZ.B. Quelle selektieren => Kopieren, nicht Kopier-Befehl wählen => Quelle anklicken\n\nFunktionalität: Command-Key vs. Control-Key für Shortcuts\n
  7. Z.B. Copy-and-Paste\n\nVerschiedene Abläufe möglich (Menüs, Drag-n-Drop, etc.) aber in sich immer identisch\n\nZ.B. Quelle selektieren => Kopieren, nicht Kopier-Befehl wählen => Quelle anklicken\n\nFunktionalität: Command-Key vs. Control-Key für Shortcuts\n
  8. Z.B. Copy-and-Paste\n\nVerschiedene Abläufe möglich (Menüs, Drag-n-Drop, etc.) aber in sich immer identisch\n\nZ.B. Quelle selektieren => Kopieren, nicht Kopier-Befehl wählen => Quelle anklicken\n\nFunktionalität: Command-Key vs. Control-Key für Shortcuts\n
  9. Z.B. Copy-and-Paste\n\nVerschiedene Abläufe möglich (Menüs, Drag-n-Drop, etc.) aber in sich immer identisch\n\nZ.B. Quelle selektieren => Kopieren, nicht Kopier-Befehl wählen => Quelle anklicken\n\nFunktionalität: Command-Key vs. Control-Key für Shortcuts\n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. (Betriebs-)System: Versionen beachten, z.B. Win XP vs. Windows 8\n\nKultur-Raum: Einfluss von Leserichtung auf Aufreihung nach Größe, Ranking, etc.\n
  24. (Betriebs-)System: Versionen beachten, z.B. Win XP vs. Windows 8\n\nKultur-Raum: Einfluss von Leserichtung auf Aufreihung nach Größe, Ranking, etc.\n
  25. (Betriebs-)System: Versionen beachten, z.B. Win XP vs. Windows 8\n\nKultur-Raum: Einfluss von Leserichtung auf Aufreihung nach Größe, Ranking, etc.\n
  26. (Betriebs-)System: Versionen beachten, z.B. Win XP vs. Windows 8\n\nKultur-Raum: Einfluss von Leserichtung auf Aufreihung nach Größe, Ranking, etc.\n
  27. Einheitlich bzgl:\n\nGerät — Firma Moog (System) — Synth (System-Typ) — Piano-Tastatur (Kultur) — Drehregler(Welt)\n
  28. Einheitlich bzgl:\n\nGerät — Firma Moog (System) — Synth (System-Typ) — Piano-Tastatur (Kultur) — Drehregler(Welt)\n
  29. Einheitlich bzgl:\n\nGerät — Firma Moog (System) — Synth (System-Typ) — Piano-Tastatur (Kultur) — Drehregler(Welt)\n
  30. Einheitlich bzgl:\n\nGerät — Firma Moog (System) — Synth (System-Typ) — Piano-Tastatur (Kultur) — Drehregler(Welt)\n
  31. Durchbrechen der Einheitlichkeit erzeugt Akzent:\n\nDruckschalter Warnblinker vs. Klimaanlage\n
  32. \n
  33. \n
  34. \n
  35. \n
  36. Speziell Cmd-P im Finder öffnet Dokument in Anwendung und dort den Drucken-Dialog\n\nSystem-interne Abkürzung für jedermann!\n
  37. \n
  38. \n
  39. \n
  40. Finger ist nach dem Wischen genau da, wo die Aktion bestätigt werden muss\n\nNachteil: Aufwendiger für Mehrfach-Löschen\n
  41. Finger ist nach dem Wischen genau da, wo die Aktion bestätigt werden muss\n\nNachteil: Aufwendiger für Mehrfach-Löschen\n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. “Was machst Du eigentlich gerade?”\n\nMenschenfreundliche Darstellung: “Ungefähr 2 Minuten” vs. “107 Sekunden”\n
  52. 0,1s 1,0s 10s Zeiträume für Feedback\n
  53. 0,1s 1,0s 10s Zeiträume für Feedback\n
  54. 0,1s 1,0s 10s Zeiträume für Feedback\n
  55. 0,1s 1,0s 10s Zeiträume für Feedback\n
  56. 0,1s 1,0s 10s Zeiträume für Feedback\n
  57. 0,1s 1,0s 10s Zeiträume für Feedback\n
  58. 0,1s 1,0s 10s Zeiträume für Feedback\n
  59. 0,1s 1,0s 10s Zeiträume für Feedback\n
  60. 0,1s 1,0s 10s Zeiträume für Feedback\n
  61. Handles zeigen Auswahlstatus und Griffe für Zoom\n\nCursor zeigt Bewegungs-Richtung\n\nShift für quadratisch, Command für Rotation (Quasi-Modes)\n\nHandles verschwinden bei Bewegung; Grad-Messer erscheint.\n\n\n
  62. Handles zeigen Auswahlstatus und Griffe für Zoom\n\nCursor zeigt Bewegungs-Richtung\n\nShift für quadratisch, Command für Rotation (Quasi-Modes)\n\nHandles verschwinden bei Bewegung; Grad-Messer erscheint.\n\n\n
  63. Handles zeigen Auswahlstatus und Griffe für Zoom\n\nCursor zeigt Bewegungs-Richtung\n\nShift für quadratisch, Command für Rotation (Quasi-Modes)\n\nHandles verschwinden bei Bewegung; Grad-Messer erscheint.\n\n\n
  64. Handles zeigen Auswahlstatus und Griffe für Zoom\n\nCursor zeigt Bewegungs-Richtung\n\nShift für quadratisch, Command für Rotation (Quasi-Modes)\n\nHandles verschwinden bei Bewegung; Grad-Messer erscheint.\n\n\n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. Druck-Qualität in dpi einstellen\n\nMehrere Fenster, die auch wieder geschlossen werden müssen\n
  71. Druck-Qualität in dpi einstellen\n\nMehrere Fenster, die auch wieder geschlossen werden müssen\n
  72. Druck-Qualität in dpi einstellen\n\nMehrere Fenster, die auch wieder geschlossen werden müssen\n
  73. Druck-Qualität in dpi einstellen\n\nMehrere Fenster, die auch wieder geschlossen werden müssen\n
  74. Druck-Qualität in dpi einstellen\n\nMehrere Fenster, die auch wieder geschlossen werden müssen\n
  75. Druck-Qualität in dpi einstellen\n\nMehrere Fenster, die auch wieder geschlossen werden müssen\n
  76. In _einem_ Fenster habe ich alle Informationen, um die Aufgabe “Drucken” zu erledigen.\n\nNach Klick auf “Drucken” ist diese Aufgabe abgeschlossen.\n
  77. In _einem_ Fenster habe ich alle Informationen, um die Aufgabe “Drucken” zu erledigen.\n\nNach Klick auf “Drucken” ist diese Aufgabe abgeschlossen.\n
  78. In _einem_ Fenster habe ich alle Informationen, um die Aufgabe “Drucken” zu erledigen.\n\nNach Klick auf “Drucken” ist diese Aufgabe abgeschlossen.\n
  79. In _einem_ Fenster habe ich alle Informationen, um die Aufgabe “Drucken” zu erledigen.\n\nNach Klick auf “Drucken” ist diese Aufgabe abgeschlossen.\n
  80. In _einem_ Fenster habe ich alle Informationen, um die Aufgabe “Drucken” zu erledigen.\n\nNach Klick auf “Drucken” ist diese Aufgabe abgeschlossen.\n
  81. In _einem_ Fenster habe ich alle Informationen, um die Aufgabe “Drucken” zu erledigen.\n\nNach Klick auf “Drucken” ist diese Aufgabe abgeschlossen.\n
  82. \n
  83. \n
  84. \n
  85. \n
  86. \n
  87. \n
  88. Titel ist so-so, weil keine Frage\n\nInfo-Text und Button-Labels — kein “Ja” / “Nein” — are top\n\n(Default button — Position und Funktion!!)\n
  89. \n
  90. Türöffner (fast) aus dem Bilderbuch\n\nProblem: Symmetrie des Griffes. Nur die Schloss-Platte rechts deutet an, an welcher Seite das Scharnier ist. Nur daher ist der Aufkleber nötig.\n
  91. Keine Unterbrechung: Stell Dir vor, Warnung “Sind Sie sicher, dass Sie diesen Text löschen möchten?” vor jedem Löschen von Text in einer Textverarbeitung!!\n
  92. Keine Unterbrechung: Stell Dir vor, Warnung “Sind Sie sicher, dass Sie diesen Text löschen möchten?” vor jedem Löschen von Text in einer Textverarbeitung!!\n
  93. Keine Unterbrechung: Stell Dir vor, Warnung “Sind Sie sicher, dass Sie diesen Text löschen möchten?” vor jedem Löschen von Text in einer Textverarbeitung!!\n
  94. Keine Unterbrechung: Stell Dir vor, Warnung “Sind Sie sicher, dass Sie diesen Text löschen möchten?” vor jedem Löschen von Text in einer Textverarbeitung!!\n
  95. Logic Pro Undo History\n\nUndo/Redo wandert schrittweise durch die History. Listeneinträge können aber auch direkt angeklickt werden.\n\nNeue Einträge werden hinzugefügt aber der aktuell selektierten Stelle. Ausgegraute Einträge werden ggf. überschrieben.\n\n
  96. Logic Pro Undo History\n\nUndo/Redo wandert schrittweise durch die History. Listeneinträge können aber auch direkt angeklickt werden.\n\nNeue Einträge werden hinzugefügt aber der aktuell selektierten Stelle. Ausgegraute Einträge werden ggf. überschrieben.\n\n
  97. Logic Pro Undo History\n\nUndo/Redo wandert schrittweise durch die History. Listeneinträge können aber auch direkt angeklickt werden.\n\nNeue Einträge werden hinzugefügt aber der aktuell selektierten Stelle. Ausgegraute Einträge werden ggf. überschrieben.\n\n
  98. Zeitleiste am rechten Bildrand\n\nFenster sind aktiv, z.B. kann ich hier zu einer anderen Folie wechseln!\n
  99. \n
  100. \n
  101. \n
  102. \n
  103. “Stop copying” — informatives Feedback\n\n“Stop” vs. “Abbrechen”\n\n“Hör bitte sofort auf!!” vs. “Oh Mann, jetzt muss ich auch noch warten auf diesen …”\n\nNEXT: Interaktionen zwischen Mensch und Computer, aber auch Prozessabläufe\n
  104. \n
  105. Dem Nutzer mehrere Optionen bieten, wie er auf Rückmeldung reagiert\n\nVerwandtes Thema: Closure / abgeschlossene Dialoge\n
  106. \n
  107. Nach etwa 5 Minuten _und_ nach Eingabe aller Adressdaten\n
  108. \n
  109. \n
  110. \n
  111. \n
  112. Analog: Selbst ein kurzer Arbeitsablauf kann zum Problem werden, wenn ich mir zuviel merken muss.\n\nVorteil beim Lesen hier: Sie können mit den Augen “navigieren” und das Satz-Puzzle aufbrechen und wieder zusammenfügen. \n\nVergleichen mit: “Selbst ein kurzer Satz kann — muss aber nicht zwingend — zum Problem werden.”\n\nNicht möglich in UIs, wenn Informationen nicht angezeigt werden.\n
  113. \n
  114. Nicht nur das _Kurzzeit_-Gedächtnis kann entlastet werden …\n
  115. Nicht nur das _Kurzzeit_-Gedächtnis kann entlastet werden …\n
  116. Nicht nur das _Kurzzeit_-Gedächtnis kann entlastet werden …\n
  117. Nicht nur das _Kurzzeit_-Gedächtnis kann entlastet werden …\n
  118. 1 Similar sequences of actions in similar situations; identical terminology; consistent commands\n\n2 Abbreviations, function keys, hidden commands, and macro facilities\n\n3 For every operator action, there should be some system feedback. Modest for frequent/minor actions, more substantial for infrequent/major actions\n\n\n* 0.1s - Perception of cause and effect\n Mouse-click ⇒ Button press visual\n \n* 1.0s - Turn-taking in conversation\n Bring up progress indicator, open window, …\n\n* 10s - Typical human attention span\n Max. time for one step of a task, like opening a file in an app\n Max. time to finish input, like printer starting after Print cmd.\n\n\n4 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.\n\n5 System should detect errors and help user deal with it. More importantly, help prevent error.\n\n6 Undo relieves anxiety and encourages exploration.\n\n7 Give users the sense that they are in control, not the system. Design the system to make users the initiators of actions rather than the responders.\n\n8 Simple displays, consolidate multi-page displays, reduce frequency of window-motion, provide sufficient training time for learning codes, mnemonics, and sequences of actions\n
  119. 1 Similar sequences of actions in similar situations; identical terminology; consistent commands\n\n2 Abbreviations, function keys, hidden commands, and macro facilities\n\n3 For every operator action, there should be some system feedback. Modest for frequent/minor actions, more substantial for infrequent/major actions\n\n\n* 0.1s - Perception of cause and effect\n Mouse-click ⇒ Button press visual\n \n* 1.0s - Turn-taking in conversation\n Bring up progress indicator, open window, …\n\n* 10s - Typical human attention span\n Max. time for one step of a task, like opening a file in an app\n Max. time to finish input, like printer starting after Print cmd.\n\n\n4 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.\n\n5 System should detect errors and help user deal with it. More importantly, help prevent error.\n\n6 Undo relieves anxiety and encourages exploration.\n\n7 Give users the sense that they are in control, not the system. Design the system to make users the initiators of actions rather than the responders.\n\n8 Simple displays, consolidate multi-page displays, reduce frequency of window-motion, provide sufficient training time for learning codes, mnemonics, and sequences of actions\n
  120. 1 Similar sequences of actions in similar situations; identical terminology; consistent commands\n\n2 Abbreviations, function keys, hidden commands, and macro facilities\n\n3 For every operator action, there should be some system feedback. Modest for frequent/minor actions, more substantial for infrequent/major actions\n\n\n* 0.1s - Perception of cause and effect\n Mouse-click ⇒ Button press visual\n \n* 1.0s - Turn-taking in conversation\n Bring up progress indicator, open window, …\n\n* 10s - Typical human attention span\n Max. time for one step of a task, like opening a file in an app\n Max. time to finish input, like printer starting after Print cmd.\n\n\n4 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.\n\n5 System should detect errors and help user deal with it. More importantly, help prevent error.\n\n6 Undo relieves anxiety and encourages exploration.\n\n7 Give users the sense that they are in control, not the system. Design the system to make users the initiators of actions rather than the responders.\n\n8 Simple displays, consolidate multi-page displays, reduce frequency of window-motion, provide sufficient training time for learning codes, mnemonics, and sequences of actions\n
  121. 1 Similar sequences of actions in similar situations; identical terminology; consistent commands\n\n2 Abbreviations, function keys, hidden commands, and macro facilities\n\n3 For every operator action, there should be some system feedback. Modest for frequent/minor actions, more substantial for infrequent/major actions\n\n\n* 0.1s - Perception of cause and effect\n Mouse-click ⇒ Button press visual\n \n* 1.0s - Turn-taking in conversation\n Bring up progress indicator, open window, …\n\n* 10s - Typical human attention span\n Max. time for one step of a task, like opening a file in an app\n Max. time to finish input, like printer starting after Print cmd.\n\n\n4 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.\n\n5 System should detect errors and help user deal with it. More importantly, help prevent error.\n\n6 Undo relieves anxiety and encourages exploration.\n\n7 Give users the sense that they are in control, not the system. Design the system to make users the initiators of actions rather than the responders.\n\n8 Simple displays, consolidate multi-page displays, reduce frequency of window-motion, provide sufficient training time for learning codes, mnemonics, and sequences of actions\n
  122. 1 Similar sequences of actions in similar situations; identical terminology; consistent commands\n\n2 Abbreviations, function keys, hidden commands, and macro facilities\n\n3 For every operator action, there should be some system feedback. Modest for frequent/minor actions, more substantial for infrequent/major actions\n\n\n* 0.1s - Perception of cause and effect\n Mouse-click ⇒ Button press visual\n \n* 1.0s - Turn-taking in conversation\n Bring up progress indicator, open window, …\n\n* 10s - Typical human attention span\n Max. time for one step of a task, like opening a file in an app\n Max. time to finish input, like printer starting after Print cmd.\n\n\n4 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.\n\n5 System should detect errors and help user deal with it. More importantly, help prevent error.\n\n6 Undo relieves anxiety and encourages exploration.\n\n7 Give users the sense that they are in control, not the system. Design the system to make users the initiators of actions rather than the responders.\n\n8 Simple displays, consolidate multi-page displays, reduce frequency of window-motion, provide sufficient training time for learning codes, mnemonics, and sequences of actions\n
  123. 1 Similar sequences of actions in similar situations; identical terminology; consistent commands\n\n2 Abbreviations, function keys, hidden commands, and macro facilities\n\n3 For every operator action, there should be some system feedback. Modest for frequent/minor actions, more substantial for infrequent/major actions\n\n\n* 0.1s - Perception of cause and effect\n Mouse-click ⇒ Button press visual\n \n* 1.0s - Turn-taking in conversation\n Bring up progress indicator, open window, …\n\n* 10s - Typical human attention span\n Max. time for one step of a task, like opening a file in an app\n Max. time to finish input, like printer starting after Print cmd.\n\n\n4 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.\n\n5 System should detect errors and help user deal with it. More importantly, help prevent error.\n\n6 Undo relieves anxiety and encourages exploration.\n\n7 Give users the sense that they are in control, not the system. Design the system to make users the initiators of actions rather than the responders.\n\n8 Simple displays, consolidate multi-page displays, reduce frequency of window-motion, provide sufficient training time for learning codes, mnemonics, and sequences of actions\n
  124. 1 Similar sequences of actions in similar situations; identical terminology; consistent commands\n\n2 Abbreviations, function keys, hidden commands, and macro facilities\n\n3 For every operator action, there should be some system feedback. Modest for frequent/minor actions, more substantial for infrequent/major actions\n\n\n* 0.1s - Perception of cause and effect\n Mouse-click ⇒ Button press visual\n \n* 1.0s - Turn-taking in conversation\n Bring up progress indicator, open window, …\n\n* 10s - Typical human attention span\n Max. time for one step of a task, like opening a file in an app\n Max. time to finish input, like printer starting after Print cmd.\n\n\n4 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.\n\n5 System should detect errors and help user deal with it. More importantly, help prevent error.\n\n6 Undo relieves anxiety and encourages exploration.\n\n7 Give users the sense that they are in control, not the system. Design the system to make users the initiators of actions rather than the responders.\n\n8 Simple displays, consolidate multi-page displays, reduce frequency of window-motion, provide sufficient training time for learning codes, mnemonics, and sequences of actions\n
  125. 1 Similar sequences of actions in similar situations; identical terminology; consistent commands\n\n2 Abbreviations, function keys, hidden commands, and macro facilities\n\n3 For every operator action, there should be some system feedback. Modest for frequent/minor actions, more substantial for infrequent/major actions\n\n\n* 0.1s - Perception of cause and effect\n Mouse-click ⇒ Button press visual\n \n* 1.0s - Turn-taking in conversation\n Bring up progress indicator, open window, …\n\n* 10s - Typical human attention span\n Max. time for one step of a task, like opening a file in an app\n Max. time to finish input, like printer starting after Print cmd.\n\n\n4 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.\n\n5 System should detect errors and help user deal with it. More importantly, help prevent error.\n\n6 Undo relieves anxiety and encourages exploration.\n\n7 Give users the sense that they are in control, not the system. Design the system to make users the initiators of actions rather than the responders.\n\n8 Simple displays, consolidate multi-page displays, reduce frequency of window-motion, provide sufficient training time for learning codes, mnemonics, and sequences of actions\n
  126. \n
  127. \n
  128. \n
  129. \n
  130. \n
  131. \n
  132. \n
  133. \n
  134. \n
  135. \n
  136. \n
  137. \n