Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Interface Design – Best Practices

4,046 views

Published on

Schnittstellen zwischen Mensch und Maschine sind selten technologieabhängig. Welchen Sinn sie auch ansprechen, sie haben alle die gleiche Zielgruppe: den Menschen, egal in welcher Sprache sie geschrieben, oder mit welchem Werkzeug sie erstellt wurden.

Der Vortrag „Interface Design – Best Practices“ soll einen Überblick über Aspekte geben, die man bei der Gestaltung einer Mensch-Maschine-Schnittstelle beachten muss. An zahlreichen aktuellen Beispielen erläutert Stefan Nitzsche unterhaltsam die wichtigsten Richtlinien und haarsträubendsten Fehltritte.

Published in: Design

Interface Design – Best Practices

  1. 1. WARUM? Menschen lieben gute Interfaces
  2. 2. STUDIE Gute Interfaces erobern Märkte Quelle: admob
  3. 3. iPhone OS RIM OS Windows Mobile OS Palm OS Android Hiptop OS Symbian OS STUDIE Gute Interfaces erobern Märkte Quelle: admob
  4. 4. iPhone OS RIM OS Windows Mobile OS Palm OS Android Hiptop OS Symbian OS 1% 6% 6% 4% 11% 50% 22% STUDIE Gute Interfaces erobern Märkte Quelle: admob
  5. 5. INTERFACE
  6. 6. INTERFACE
  7. 7. INTERFACE Ding 1
  8. 8. INTERFACE Ding 1
  9. 9. INTERFACE Ding 1 Ding 2
  10. 10. INTERFACE Ding 1 Ding 2
  11. 11. INTERFACE Ding 1 Ding 2 Schnittstelle
  12. 12. INTERFACE Ding 1 Ding 2 Schnittstelle Mensch
  13. 13. INTERFACE Ding 1 Ding 2 Schnittstelle Mensch Grafik
  14. 14. INTERFACE Ding 1 Ding 2 Schnittstelle Mensch Computer Grafik
  15. 15. INTERFACE Ding 1 Ding 2 Schnittstelle Mensch Computer Grafik Bedürfnis
  16. 16. INTERFACE Ding 1 Ding 2 Schnittstelle Mensch Computer Grafik Schnittstelle Bedürfnis
  17. 17. INTERFACE Ding 1 Ding 2 Schnittstelle Mensch Computer Grafik Schnittstelle Bedürfnis Befriedigung
  18. 18. WARUM GIBT ES SO VIELE MITTELMÄSSIGE SCHNITTSTELLEN?
  19. 19. 1958, Deutsches Bundesarchiv Bild 146-1969-169-19
  20. 20. 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)
  21. 21. MENTALE MODELLE
  22. 22. Kann man sich vorstellen, dass ein Designer einem Benutzer erklärt, wie der Programmierer die Idee des Kunden umgesetzt hat, die ihm vom Konzepter beschrieben wurde?
  23. 23. DING 1: MENSCH
  24. 24. DING 1: MENSCH Die grobe Konfiguration ist in den meisten Fällen identisch, aber nicht immer gleich leistungsfähig (Motorik, Sensorik)
  25. 25. DING 1: MENSCH Die grobe Konfiguration ist in den meisten Fällen identisch, aber nicht immer gleich leistungsfähig (Motorik, Sensorik) Gewohnheiten
  26. 26. DING 1: MENSCH Die grobe Konfiguration ist in den meisten Fällen identisch, aber nicht immer gleich leistungsfähig (Motorik, Sensorik) Gewohnheiten Erfahrungen
  27. 27. DING 1: MENSCH Die grobe Konfiguration ist in den meisten Fällen identisch, aber nicht immer gleich leistungsfähig (Motorik, Sensorik) Gewohnheiten Erfahrungen Kulturelle Prägungen
  28. 28. DING 1: 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
  29. 29. DING 2: COMPUTER
  30. 30. DING 2: COMPUTER Bildschirm, Maus, Tastatur
  31. 31. DING 2: COMPUTER Bildschirm, Maus, Tastatur Ausgabe: Auflösung, Farbtiefe, Schärfe, Kontrast
  32. 32. DING 2: COMPUTER Bildschirm, Maus, Tastatur Ausgabe: Auflösung, Farbtiefe, Schärfe, Kontrast Eingabe: Sprache, Tastenanzahl, Genauigkeit
  33. 33. DING 2: COMPUTER Bildschirm, Maus, Tastatur Ausgabe: Auflösung, Farbtiefe, Schärfe, Kontrast Eingabe: Sprache, Tastenanzahl, Genauigkeit Architektur, Datenformate, Vernetzung, Abhängigkeiten
  34. 34. DER INTERFACE DESIGNER
  35. 35. Wer glaubt, die Gestaltung einer Schnittstelle erfordere die alleinige Kenntnis von Ding 1 oder Ding 2?
  36. 36. Um eine Schnittstelle zu gestalten, muss man alle relevanten Informationen über beide Seiten besitzen!
  37. 37. KENNTNISSE EINES INTERFACE DESIGNERS
  38. 38. KENNTNISSE EINES INTERFACE DESIGNERS Gestaltung
  39. 39. KENNTNISSE EINES INTERFACE DESIGNERS Gestaltung Heuristik
  40. 40. KENNTNISSE EINES INTERFACE DESIGNERS Gestaltung Heuristik Psychologie
  41. 41. KENNTNISSE EINES INTERFACE DESIGNERS Gestaltung Heuristik Psychologie Archivierung
  42. 42. KENNTNISSE EINES INTERFACE DESIGNERS Gestaltung Heuristik Psychologie Archivierung Medientheorie
  43. 43. KENNTNISSE EINES INTERFACE DESIGNERS Gestaltung Heuristik Psychologie Archivierung Medientheorie Informatik
  44. 44. KENNTNISSE EINES INTERFACE DESIGNERS Gestaltung Heuristik Psychologie Archivierung Medientheorie Informatik Soziologie
  45. 45. Das Interface ist das Produkt, soweit der Nutzer das beurteilen kann.
  46. 46. TOLERANZ UND MOTIVATION
  47. 47. TOLERANZ UND MOTIVATION Je komplexer das Interface, desto weniger Toleranz.
  48. 48. TOLERANZ UND MOTIVATION Je komplexer das Interface, desto weniger Toleranz. Je stärker die Motivation, desto unwichtiger die Komplexität.
  49. 49. BEISPIEL 1
  50. 50. BEISPIEL 1 Starkes Bedürfnis
  51. 51. BEISPIEL 1 Starkes Bedürfnis Eindeutige, sichere Befriedigung
  52. 52. BEISPIEL 1 Starkes Bedürfnis Eindeutige, sichere Befriedigung Qualität des Interface ist absolut nachrangig
  53. 53. BEISPIEL II
  54. 54. BEISPIEL II Starkes Bedürfnis
  55. 55. BEISPIEL II Starkes Bedürfnis Eindeutige, sichere Befriedigung
  56. 56. BEISPIEL II Starkes Bedürfnis Eindeutige, sichere Befriedigung Erforschung des Interface ist das Ziel
  57. 57. MÖGLICHKEIT 1 Man ist in der Lage, perfekte, bahnbrechende Schnittstellen zu gestalten.
  58. 58. MÖGLICHKEIT 2 Man ist nicht in der Lage, perfekte, bahnbrechende Schnittstellen zu gestalten.
  59. 59. BEST PRACTICES
  60. 60. ANTIZIPATION
  61. 61. ANTIZIPATION Zielgruppe kennen
  62. 62. ANTIZIPATION Zielgruppe kennen Relevante Werkzeuge geben
  63. 63. ANTIZIPATION Zielgruppe kennen Relevante Werkzeuge geben Relevante Informationen geben
  64. 64. VERTRAUTHEIT
  65. 65. VERTRAUTHEIT Kognitiven Aufwand reduzieren
  66. 66. VERTRAUTHEIT Kognitiven Aufwand reduzieren Eine vertraute Umgebung schaffen
  67. 67. EINFACHHEIT
  68. 68. EINFACHHEIT Nicht zu viele Entscheidungen
  69. 69. EINFACHHEIT Nicht zu viele Entscheidungen Nicht zu viele Angebote
  70. 70. EINFACHHEIT Nicht zu viele Entscheidungen Nicht zu viele Angebote Jedes Element der Anwendung, das nicht hilfreich ist, unbarmherzig eliminieren!
  71. 71. WAS ANBIETER WOLLEN:
  72. 72. WAS NUTZER WOLLEN:
  73. 73. WAS DESIGNER WOLLEN:
  74. 74. WAS KUNDEN WOLLEN:
  75. 75. VERFÜGBARKEIT
  76. 76. VERFÜGBARKEIT Das Interface muss ständig verfügbar sein
  77. 77. VERFÜGBARKEIT Das Interface muss ständig verfügbar sein Die Ladezeit muss im Verhältnis zum Ergebnis stehen
  78. 78. VERFÜGBARKEIT Das Interface muss ständig verfügbar sein Die Ladezeit muss im Verhältnis zum Ergebnis stehen Sagt man dem Nutzer, was ihn erwartet, ist er bereit zu warten
  79. 79. MODUS
  80. 80. MODUS Der Nutzer muss jederzeit wissen, in welchem Modus das System sich befindet
  81. 81. MODUS Der Nutzer muss jederzeit wissen, in welchem Modus das System sich befindet Der Verzicht auf Modi ist der Erlernbarkeit eines Interface stark zuträglich
  82. 82. http://www.flickr.com/photos/lincolnose2/2317699857/
  83. 83. FEHLERTOLERANZ
  84. 84. FEHLERTOLERANZ Machen Sie Aktionen umkehrbar
  85. 85. FEHLERTOLERANZ Machen Sie Aktionen umkehrbar Erlauben Sie immer „Rückgängig“
  86. 86. FEHLERTOLERANZ Machen Sie Aktionen umkehrbar Erlauben Sie immer „Rückgängig“ Bieten Sie immer einen Ausweg
  87. 87. FEHLERTOLERANZ Machen Sie Aktionen umkehrbar Erlauben Sie immer „Rückgängig“ Bieten Sie immer einen Ausweg Stellen Sie sicher, dass Benutzer niemals ihre Arbeit verlieren
  88. 88. FEHLERTOLERANZ Machen Sie Aktionen umkehrbar Erlauben Sie immer „Rückgängig“ Bieten Sie immer einen Ausweg Stellen Sie 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
  89. 89. KONSISTENZ
  90. 90. KONSISTENZ Einen stabilen Rahmen bieten (Styleguide)
  91. 91. KONSISTENZ Einen stabilen Rahmen bieten (Styleguide) Geregelte Konsistenz wenn Dinge gleich sind
  92. 92. KONSISTENZ Einen stabilen Rahmen bieten (Styleguide) Geregelte Konsistenz wenn Dinge gleich sind Geregelte Inkonsistenz wenn Dinge unterschiedlich sind
  93. 93. STATUS
  94. 94. STATUS Der Status eines Systems muss auf den ersten Blick ersichtlich sein
  95. 95. STATUS Der Status eines Systems muss auf den ersten Blick ersichtlich sein Browserbasierte Produkte existieren zunächst in einer zustandslosen Umgebung
  96. 96. STATUS Der Status eines Systems muss auf den ersten Blick ersichtlich sein Browserbasierte Produkte existieren zunächst in einer zustandslosen Umgebung Benutzern sollte es ermöglicht werden, sich im Büro auszuloggen, nach Hause gehen und genau dort fortfahren zu können, wo sie aufgehört haben
  97. 97. AUTONOMIE
  98. 98. AUTONOMIE Der Benutzer sollte das Interface kontrollieren, nicht das Interface den Benutzer
  99. 99. AUTONOMIE Der Benutzer sollte das Interface kontrollieren, nicht das Interface den Benutzer Zu wenig Freiheit schränkt ebenso ein wie zuviel Freiheit
  100. 100. AUTONOMIE Der Benutzer sollte das Interface kontrollieren, nicht das Interface den Benutzer Zu wenig Freiheit schränkt ebenso ein wie zuviel Freiheit Im gleichen Interface immer mehrere Wege zu einem Ziel anbieten (Navigation, Button, Tastenkombination)
  101. 101. METAPHERN
  102. 102. METAPHERN Metaphern aktivieren Sinne: Sehen, Hören, Berührung
  103. 103. METAPHERN Metaphern aktivieren Sinne: Sehen, Hören, Berührung Metaphern müssen angemessen sein und zur Aufgabe des Nutzers passen
  104. 104. METAPHERN Metaphern aktivieren Sinne: Sehen, Hören, Berührung Metaphern müssen angemessen sein und zur Aufgabe des Nutzers passen Implizite/Explizite Handlungsaufforderung (Button)
  105. 105. METAPHERN Metaphern aktivieren Sinne: Sehen, Hören, Berührung Metaphern müssen angemessen sein und zur Aufgabe des Nutzers passen Implizite/Explizite Handlungsaufforderung (Button) Erforschbarkeit (entsteht aus Gewohnheiten)
  106. 106. ICONS
  107. 107. ICONS Icons sind nicht immer die beste Lösung
  108. 108. ICONS Icons sind nicht immer die beste Lösung Icons sollten nicht alleine stehen, ohne Beschriftung
  109. 109. ICONS Icons sind nicht immer die beste Lösung Icons sollten nicht alleine stehen, ohne Beschriftung Tooltips ersetzen nicht die Beschriftung
  110. 110. ICONS Icons sind nicht immer die beste Lösung Icons sollten nicht alleine stehen, ohne Beschriftung Tooltips ersetzen nicht die Beschriftung Icons brauchen zeitgemäße Metaphern
  111. 111. ICONS Icons sind nicht immer die beste Lösung Icons sollten nicht alleine stehen, ohne Beschriftung Tooltips ersetzen nicht die Beschriftung Icons brauchen zeitgemäße Metaphern Icons müssen abstrahieren
  112. 112. EFFIZIENTE NUTZUNG
  113. 113. EFFIZIENTE NUTZUNG Informationen dort anzeigen, wo sie benötigt werden
  114. 114. EFFIZIENTE NUTZUNG Informationen dort anzeigen, wo sie benötigt werden Alle relevanten Informationen müssen dargestellt werden
  115. 115. EFFIZIENTE NUTZUNG Informationen dort anzeigen, wo sie benötigt werden Alle relevanten Informationen müssen dargestellt werden Nutzer sollen erkennen statt erinnern
  116. 116. BESCHÄFTIGUNG
  117. 117. BESCHÄFTIGUNG Wartezeiten lösen stressähnliche Reaktionen aus
  118. 118. BESCHÄFTIGUNG Wartezeiten lösen stressähnliche Reaktionen aus Vortäuschung von Aktivität macht Wartezeiten nachweisbar erträglicher
  119. 119. BESCHÄFTIGUNG Wartezeiten lösen stressähnliche Reaktionen aus Vortäuschung von Aktivität macht Wartezeiten nachweisbar erträglicher Alle Klicks auf Schaltflächen binnen 50 Millisekunden durch sicht- oder hörbares Feedback bestätigen
  120. 120. BESCHÄFTIGUNG Wartezeiten lösen stressähnliche Reaktionen aus Vortäuschung von Aktivität macht Wartezeiten nachweisbar erträglicher Alle Klicks auf Schaltflächen binnen 50 Millisekunden durch sicht- oder hörbares Feedback bestätigen Alles, was länger als 2–3 Sekunden dauert, sollte mit einer Ladeanzeige (Spinner, Balken) ausgestattet werden
  121. 121. BESCHÄFTIGUNG Wartezeiten lösen stressähnliche Reaktionen aus Vortäuschung von Aktivität macht Wartezeiten nachweisbar erträglicher Alle Klicks auf Schaltflächen binnen 50 Millisekunden durch sicht- oder hörbares Feedback bestätigen Alles, was länger als 2–3 Sekunden dauert, sollte mit einer Ladeanzeige (Spinner, Balken) ausgestattet werden Restzeit oder Fortschritt angeben, wenn möglich!
  122. 122. ÄSTHETIK
  123. 123. ÄSTHETIK Content is King
  124. 124. ÄSTHETIK Content is King Dezente Farben bevorzugen
  125. 125. ÄSTHETIK Content is King Dezente Farben bevorzugen Zurückhaltende Animationen
  126. 126. ÄSTHETIK Content is King Dezente Farben bevorzugen Zurückhaltende Animationen Klare Struktur
  127. 127. DIALOGE/SPRACHE
  128. 128. DIALOGE/SPRACHE Dialoge müssen verständlich sein
  129. 129. DIALOGE/SPRACHE Dialoge müssen verständlich sein Orthografie und Grammatik sind wichtig
  130. 130. DIALOGE/SPRACHE Dialoge müssen verständlich sein Orthografie und Grammatik sind wichtig Prozesse müssen verständlich sein
  131. 131. DIALOGE/SPRACHE Dialoge müssen verständlich sein Orthografie und Grammatik sind wichtig Prozesse müssen verständlich sein Gute, knappe Hilfetexte
  132. 132. DIALOGE/SPRACHE Dialoge müssen verständlich sein Orthografie und Grammatik sind wichtig Prozesse müssen verständlich sein Gute, knappe Hilfetexte Konsistente Benennung
  133. 133. DIALOGE/SPRACHE Dialoge müssen verständlich sein Orthografie und Grammatik sind wichtig Prozesse müssen verständlich sein Gute, knappe Hilfetexte Konsistente Benennung Verzicht auf Fachbegriffe oder technische Termini
  134. 134. FITTS‘ GESETZ
  135. 135. FITTS‘ GESETZ Die Dauer, ein Ziel zu treffen, ist abhängig von der Distanz zum Ziel und der Zielgröße
  136. 136. FITTS‘ GESETZ Die Dauer, ein Ziel zu treffen, ist abhängig von der Distanz zum Ziel und der Zielgröße Ergebnis: die Menü-Umsetzung unter Mac OS X ist fünfmal schneller bedienbar als die Menü-Umsetzung unter Windows
  137. 137. FITTS‘ GESETZ Die Dauer, ein Ziel zu treffen, ist abhängig von der Distanz zum Ziel und der Zielgröße Ergebnis: die Menü-Umsetzung unter Mac OS X ist fünfmal schneller bedienbar als die Menü-Umsetzung unter Windows Große Schaltflächen für wichtige Funktionen verwenden
  138. 138. INTERFACE RE-DESIGN
  139. 139. INTERFACE RE-DESIGN Behutsam sein!
  140. 140. INTERFACE RE-DESIGN Behutsam sein! Vorsicht walten lassen!
  141. 141. INTERFACE RE-DESIGN Behutsam sein! Vorsicht walten lassen! Vorteil nutzen: man weiss, womit der Nutzer vertraut ist!
  142. 142. INTERFACE RE-DESIGN Behutsam sein! Vorsicht walten lassen! Vorteil nutzen: man weiss, womit der Nutzer vertraut ist! Nicht alles, was neu ist, ist besser
  143. 143. VIELEN DANK! Webseite: http://nitzsche.info/ E-Mail: stefan@nitzsche.info Twitter: stn1978

×