Die zehn Gebote des Interaction Design

4.461 Aufrufe

Veröffentlicht am

Die Gestaltung von Benutzerschnittstellen zwischen Mensch und Maschine stellt Einsteiger und bisweilen auch Fortgeschrittene vor Rätsel. Warum funktionieren manche Schnittstellen, manche aber wieder nicht? Warum ist Ästhetik nicht unbedingt ein Erfolgskriterium? Interaction Design ist zu großen Teilen ein erlernbares Handwerk, das bestimmten Regeln folgt. Zehn dieser Regeln stellt Stefan Nitzsche vor und zeigt Beispiele, wie man es machen kann und wie man es nicht machen sollte.

Veröffentlicht in: Design, Technologie, Bildung
  • Als Erste(r) kommentieren

Die zehn Gebote des Interaction Design

  1. 1. DIE ZEHN GEBOTE DES INTERACTION DESIGN
  2. 2. WARUM? Benutzer lieben gute Oberflächen
  3. 3. STUDIE Gute Oberflächen erobern Märkte Quelle: admob
  4. 4. iPhone OS RIM OS Windows Mobile OS Palm OS Android Hiptop OS Symbian OS STUDIE Gute Oberflächen erobern Märkte Quelle: admob
  5. 5. iPhone OS RIM OS Windows Mobile OS Palm OS Android Hiptop OS Symbian OS 6% 1% 6% 4% 11% 50% 22% STUDIE Gute Oberflächen erobern Märkte Quelle: admob
  6. 6. WARUM GIBT ES SO VIELE MITTELMÄSSIGE OBERFLÄCHEN?
  7. 7. MENTALE MODELLE
  8. 8. 1958, Deutsches Bundesarchiv Bild 146-1969-169-19
  9. 9. 1958, Deutsches Bundesarchiv Bild 146-1969-169-19 „Natürlich können Sie dem Lu fahrtministe- rium ein Flugzeug mit allen gewünschten Eigenscha en bauen – solange Sie nicht zwingend voraussetzen, dass es dann auch iegt.“ Willy Messerschmitt Flugzeugkonstrukteur (1898-1978)
  10. 10. NASA/Johns Hopkins University Applied Physics Laboratory/Carnegie Institution of Washington
  11. 11. NASA/Johns Hopkins University Applied Physics Laboratory/Carnegie Institution of Washington „Ob es der gravitätische Adler in seinem Flug oder die geöffnete Apfelblüte, das sich abplagende Arbeitspferd, der anmutige Schwan, die sich abzweigende Eiche, der sich schlängelnde Strom an seiner Quelle, die treibenden Wolken, die überall scheinende Sonne, die Form folgt immer der Funktion, und das ist das Gesetz.“ Louis Henri Sullivan Architekt (1856-1924)
  12. 12. MENSCH
  13. 13. MENSCH Die grobe Konfiguration ist in den meisten Fällen identisch, aber nicht immer gleich leistungsfähig (Motorik, Sensorik)
  14. 14. MENSCH Die grobe Konfiguration ist in den meisten Fällen identisch, aber nicht immer gleich leistungsfähig (Motorik, Sensorik) Gewohnheiten
  15. 15. MENSCH Die grobe Konfiguration ist in den meisten Fällen identisch, aber nicht immer gleich leistungsfähig (Motorik, Sensorik) Gewohnheiten Erfahrungen
  16. 16. MENSCH Die grobe Konfiguration ist in den meisten Fällen identisch, aber nicht immer gleich leistungsfähig (Motorik, Sensorik) Gewohnheiten Erfahrungen Kulturelle Prägungen
  17. 17. MENSCH Die grobe Konfiguration ist in den meisten Fällen identisch, aber nicht immer gleich leistungsfähig (Motorik, Sensorik) Gewohnheiten Erfahrungen Kulturelle Prägungen Vorkenntnisse
  18. 18. COMPUTER
  19. 19. COMPUTER Bildschirm, Maus, Tastatur
  20. 20. COMPUTER Bildschirm, Maus, Tastatur Ausgabe: Auflösung, Farbtiefe, Schärfe, Kontrast
  21. 21. COMPUTER Bildschirm, Maus, Tastatur Ausgabe: Auflösung, Farbtiefe, Schärfe, Kontrast Eingabe: Sprache, Tastenanzahl, Genauigkeit
  22. 22. COMPUTER Bildschirm, Maus, Tastatur Ausgabe: Auflösung, Farbtiefe, Schärfe, Kontrast Eingabe: Sprache, Tastenanzahl, Genauigkeit Architektur, Datenformate, Vernetzung, Abhängigkeiten
  23. 23. Wer glaubt, die Gestaltung von Oberflächen erfordere die alleinige Kenntnis von Mensch oder Computer?
  24. 24. Um Oberflächen zu gestalten, muss man alle relevanten Informationen über beide Seiten besitzen!
  25. 25. ERFORDERLICHE KENNTNISSE
  26. 26. ERFORDERLICHE KENNTNISSE Gestaltung
  27. 27. ERFORDERLICHE KENNTNISSE Gestaltung Heuristik
  28. 28. ERFORDERLICHE KENNTNISSE Gestaltung Heuristik Psychologie
  29. 29. ERFORDERLICHE KENNTNISSE Gestaltung Heuristik Psychologie Archivierung
  30. 30. ERFORDERLICHE KENNTNISSE Gestaltung Heuristik Psychologie Archivierung Medientheorie
  31. 31. ERFORDERLICHE KENNTNISSE Gestaltung Heuristik Psychologie Archivierung Medientheorie Informatik
  32. 32. ERFORDERLICHE KENNTNISSE Gestaltung Heuristik Psychologie Archivierung Medientheorie Informatik Soziologie
  33. 33. Die Oberfläche ist das Produkt. (Aus Sicht des Benutzers.)
  34. 34. TOLERANZ UND MOTIVATION
  35. 35. TOLERANZ UND MOTIVATION Je komplexer die Oberfläche, desto geringer die Toleranz.
  36. 36. TOLERANZ UND MOTIVATION Je komplexer die Oberfläche, desto geringer die Toleranz. Je stärker die Motivation, desto unwichtiger die Komplexität.
  37. 37. BEISPIEL 1
  38. 38. BEISPIEL 1 Starkes Bedürfnis
  39. 39. BEISPIEL 1 Starkes Bedürfnis Eindeutige, sichere Befriedigung
  40. 40. BEISPIEL 1 Starkes Bedürfnis Eindeutige, sichere Befriedigung Qualität der Oberfläche ist absolut nachrangig
  41. 41. BEISPIEL II
  42. 42. BEISPIEL II Starkes Bedürfnis
  43. 43. BEISPIEL II Starkes Bedürfnis Eindeutige, sichere Befriedigung
  44. 44. BEISPIEL II Starkes Bedürfnis Eindeutige, sichere Befriedigung Erforschung der Oberfläche ist das Ziel
  45. 45. DIE ZEHN GEBOTE
  46. 46. ANTIZIPIERE DIE BEDÜRFNISSE DES BENUTZERS
  47. 47. ANTIZIPIERE DIE BEDÜRFNISSE DES BENUTZERS Zielgruppe kennen
  48. 48. ANTIZIPIERE DIE BEDÜRFNISSE DES BENUTZERS Zielgruppe kennen Relevante Werkzeuge geben
  49. 49. ANTIZIPIERE DIE BEDÜRFNISSE DES BENUTZERS Zielgruppe kennen Relevante Werkzeuge geben Relevante Informationen geben
  50. 50. ACHTE AUF KONSISTENZ INNERHALB EINER ANWENDUNG
  51. 51. ACHTE AUF KONSISTENZ INNERHALB EINER ANWENDUNG Biete einen stabilen Rahmen (Styleguide)
  52. 52. ACHTE AUF KONSISTENZ INNERHALB EINER ANWENDUNG Biete einen stabilen Rahmen (Styleguide) Sorge für Konsistenz, wenn Dinge gleich sind
  53. 53. ACHTE AUF KONSISTENZ INNERHALB EINER ANWENDUNG Biete einen stabilen Rahmen (Styleguide) Sorge für Konsistenz, wenn Dinge gleich sind Sorge für Inkonsistenz, wenn Dinge unterschiedlich sind
  54. 54. ZEIGE DEM BENUTZER, DASS ER SICH AUF DEINE ANWENDUNG VERLASSEN KANN
  55. 55. ZEIGE DEM BENUTZER, DASS ER SICH AUF DEINE ANWENDUNG VERLASSEN KANN Reduziere kognitiven Aufwand
  56. 56. ZEIGE DEM BENUTZER, DASS ER SICH AUF DEINE ANWENDUNG VERLASSEN KANN Reduziere kognitiven Aufwand Schaffe eine vertraute Umgebung
  57. 57. ZEIGE DEM BENUTZER, DASS ER SICH AUF DEINE ANWENDUNG VERLASSEN KANN Reduziere kognitiven Aufwand Schaffe eine vertraute Umgebung Gib wertvolle Fehlermeldungen
  58. 58. ELIMINIERE ALLES, WAS NICHT WIRKLICH NOTWENDIG IST
  59. 59. ELIMINIERE ALLES, WAS NICHT WIRKLICH NOTWENDIG IST Fordere nicht zu viele Entscheidungen
  60. 60. ELIMINIERE ALLES, WAS NICHT WIRKLICH NOTWENDIG IST Fordere nicht zu viele Entscheidungen Biete nicht zu viel an
  61. 61. ELIMINIERE ALLES, WAS NICHT WIRKLICH NOTWENDIG IST Fordere nicht zu viele Entscheidungen Biete nicht zu viel an Verliebe Dich nicht in Funktionen oder technische Möglichkeiten
  62. 62. WAS ANBIETER WOLLEN:
  63. 63. WAS NUTZER WOLLEN:
  64. 64. WAS DESIGNER WOLLEN:
  65. 65. WAS KUNDEN WOLLEN:
  66. 66. KOMMUNIZIERE VERSTÄNDLICH Lokalisiere sorgfältig Triff die Tonalität der Benutzer Verlange nur nachvollziehbare Entscheidungen Gestalte Dialoge verständlich Benenne konsistent Verzichte auf Fachbegriffe oder technische Termini
  67. 67. GESTALTE DIE WARTEZEIT DES BENUTZERS SO ERTRÄGLICH WIE MÖGLICH
  68. 68. GESTALTE DIE WARTEZEIT DES BENUTZERS SO ERTRÄGLICH WIE MÖGLICH Halte die Oberfläche ständig verfügbar
  69. 69. GESTALTE DIE WARTEZEIT DES BENUTZERS SO ERTRÄGLICH WIE MÖGLICH Halte die Oberfläche ständig verfügbar Sorge dafür, dass die Ladezeit im Verhältnis zum Ergebnis steht
  70. 70. GESTALTE DIE WARTEZEIT DES BENUTZERS SO ERTRÄGLICH WIE MÖGLICH Halte die Oberfläche ständig verfügbar Sorge dafür, dass die Ladezeit im Verhältnis zum Ergebnis steht Sage dem Nutzer, was ihn erwartet – dann ist er bereit, zu warten
  71. 71. GESTALTE DIE WARTEZEIT DES BENUTZERS SO ERTRÄGLICH WIE MÖGLICH Halte die Oberfläche ständig verfügbar Sorge dafür, dass die Ladezeit im Verhältnis zum Ergebnis steht Sage dem Nutzer, was ihn erwartet – dann ist er bereit, zu warten Achtung: Wartezeiten lösen stressähnliche Reaktionen aus
  72. 72. GESTALTE DIE WARTEZEIT DES BENUTZERS SO ERTRÄGLICH WIE MÖGLICH Halte die Oberfläche ständig verfügbar Sorge dafür, dass die Ladezeit im Verhältnis zum Ergebnis steht Sage dem Nutzer, was ihn erwartet – dann ist er bereit, zu warten Achtung: Wartezeiten lösen stressähnliche Reaktionen aus Täusche Aktivität vor, das macht Wartezeiten nachweisbar erträglicher
  73. 73. TOLERIERE DIE FEHLER DER BENUTZER UND BIETE IHNEN DIE MÖGLICHKEIT EINER KORREKTUR
  74. 74. TOLERIERE DIE FEHLER DER BENUTZER UND BIETE IHNEN DIE MÖGLICHKEIT EINER KORREKTUR Mache Aktionen umkehrbar
  75. 75. TOLERIERE DIE FEHLER DER BENUTZER UND BIETE IHNEN DIE MÖGLICHKEIT EINER KORREKTUR Mache Aktionen umkehrbar Erlaube immer „Rückgängig“
  76. 76. TOLERIERE DIE FEHLER DER BENUTZER UND BIETE IHNEN DIE MÖGLICHKEIT EINER KORREKTUR Mache Aktionen umkehrbar Erlaube immer „Rückgängig“ Biete immer einen Ausweg
  77. 77. TOLERIERE DIE FEHLER DER BENUTZER UND BIETE IHNEN DIE MÖGLICHKEIT EINER KORREKTUR Mache Aktionen umkehrbar Erlaube immer „Rückgängig“ Biete immer einen Ausweg Stelle sicher, dass Benutzer niemals ihre Arbeit verlieren
  78. 78. TOLERIERE DIE FEHLER DER BENUTZER UND BIETE IHNEN DIE MÖGLICHKEIT EINER KORREKTUR Mache Aktionen umkehrbar Erlaube immer „Rückgängig“ Biete immer einen Ausweg Stelle sicher, dass Benutzer niemals ihre Arbeit verlieren Menschen in fehlerintoleranter Umgebung machen nicht mehr Fehler als in einer fehlertoleranten Umgebung, sie arbeiten nur wesentlich langsamer (sorgfältiger), um Fehler zu vermeiden
  79. 79. TEILE DEM BENUTZER ZU JEDER ZEIT DEN ZUSTAND DER ANWENDUNG MIT
  80. 80. TEILE DEM BENUTZER ZU JEDER ZEIT DEN ZUSTAND DER ANWENDUNG MIT Browserbasierte Produkte existieren zunächst in einer zustandslosen Umgebung
  81. 81. TEILE DEM BENUTZER ZU JEDER ZEIT DEN ZUSTAND DER ANWENDUNG MIT Browserbasierte Produkte existieren zunächst in einer zustandslosen Umgebung Mache den Status eines Systems auf den ersten Blick ersichtlich
  82. 82. http://www.flickr.com/photos/lincolnose2/2317699857/
  83. 83. ERMÖGLICHE EINE STÄNDIGE, VERLÄSSLICHE ORIENTIERUNG INNERHALB DER ANWENDUNG
  84. 84. ERMÖGLICHE EINE STÄNDIGE, VERLÄSSLICHE ORIENTIERUNG INNERHALB DER ANWENDUNG Zeige dem Benutzer zu jeder Zeit, wo er sich befindet
  85. 85. ERMÖGLICHE EINE STÄNDIGE, VERLÄSSLICHE ORIENTIERUNG INNERHALB DER ANWENDUNG Zeige dem Benutzer zu jeder Zeit, wo er sich befindet Der Benutzer sollte das Interface kontrollieren, nicht das Interface den Benutzer
  86. 86. ERMÖGLICHE EINE STÄNDIGE, VERLÄSSLICHE ORIENTIERUNG INNERHALB DER ANWENDUNG Zeige dem Benutzer zu jeder Zeit, wo er sich befindet Der Benutzer sollte das Interface kontrollieren, nicht das Interface den Benutzer Zu wenig Freiheit schränkt ebenso ein wie zu viel Freiheit
  87. 87. ERMÖGLICHE EINE STÄNDIGE, VERLÄSSLICHE ORIENTIERUNG INNERHALB DER ANWENDUNG Zeige dem Benutzer zu jeder Zeit, wo er sich befindet Der Benutzer sollte das Interface kontrollieren, nicht das Interface den Benutzer Zu wenig Freiheit schränkt ebenso ein wie zu viel Freiheit Biete innerhalb der gleichen Oberfläche immer mehrere Wege zu einem Ziel an (Navigation, Button, Tastenkombination)
  88. 88. NUTZE METAPHERN AUF ANGEMESSENE ART UND WEISE
  89. 89. NUTZE METAPHERN AUF ANGEMESSENE ART UND WEISE Metaphern aktivieren Sinne: Sehen, Hören, Berührung
  90. 90. NUTZE METAPHERN AUF ANGEMESSENE ART UND WEISE Metaphern aktivieren Sinne: Sehen, Hören, Berührung Nutze angemessene und zur Aufgabe des Nutzers passende Metaphern
  91. 91. NUTZE METAPHERN AUF ANGEMESSENE ART UND WEISE Metaphern aktivieren Sinne: Sehen, Hören, Berührung Nutze angemessene und zur Aufgabe des Nutzers passende Metaphern Eine Metapher ist immer eine implizite/explizite Handlungsaufforderung (Button)
  92. 92. EXKURS: FITTS‘ GESETZ
  93. 93. EXKURS: FITTS‘ GESETZ Die Dauer, ein Ziel zu treffen, ist abhängig von der Distanz zum Ziel und der Zielgröße
  94. 94. EXKURS: FITTS‘ GESETZ Die Dauer, ein Ziel zu treffen, ist abhängig von der Distanz zum Ziel und der Zielgröße Große Schaltflächen für wichtige Funktionen verwenden
  95. 95. EXKURS: FITTS‘ GESETZ Die Dauer, ein Ziel zu treffen, ist abhängig von der Distanz zum Ziel und der Zielgröße Große Schaltflächen für wichtige Funktionen verwenden Ergebnis: die Menü-Umsetzung unter Mac OS X ist deutlich schneller bedienbar als die Menü-Umsetzung unter Windows
  96. 96. EXKURS: RE-DESIGN
  97. 97. EXKURS: RE-DESIGN Behutsam sein!
  98. 98. EXKURS: RE-DESIGN Behutsam sein! Vorsicht walten lassen!
  99. 99. EXKURS: RE-DESIGN Behutsam sein! Vorsicht walten lassen! Vorteil nutzen: man weiss, womit der Nutzer vertraut ist!
  100. 100. EXKURS: RE-DESIGN Behutsam sein! Vorsicht walten lassen! Vorteil nutzen: man weiss, womit der Nutzer vertraut ist! Nicht alles, was neu ist, ist besser
  101. 101. VIELEN DANK! Twitter: stn1978

×