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.
21. 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)
23. 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?
25. DING 1: MENSCH
Die grobe Konfiguration ist in den meisten Fällen identisch, aber
nicht immer gleich leistungsfähig (Motorik, Sensorik)
26. DING 1: MENSCH
Die grobe Konfiguration ist in den meisten Fällen identisch, aber
nicht immer gleich leistungsfähig (Motorik, Sensorik)
Gewohnheiten
27. DING 1: MENSCH
Die grobe Konfiguration ist in den meisten Fällen identisch, aber
nicht immer gleich leistungsfähig (Motorik, Sensorik)
Gewohnheiten
Erfahrungen
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
29. 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
85. VERFÜGBARKEIT
Das Interface muss ständig verfügbar sein
Die Ladezeit muss im Verhältnis zum Ergebnis stehen
86. 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
90. 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
95. FEHLERTOLERANZ
Machen Sie Aktionen umkehrbar
Erlauben Sie immer „Rückgängig“
Bieten Sie immer einen Ausweg
96. 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
97. 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
103. KONSISTENZ
Einen stabilen Rahmen bieten (Styleguide)
Geregelte Konsistenz wenn Dinge gleich sind
Geregelte Inkonsistenz wenn Dinge unterschiedlich sind
109. STATUS
Der Status eines Systems muss auf den ersten Blick ersichtlich
sein
Browserbasierte Produkte existieren zunächst in einer
zustandslosen Umgebung
110. 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
115. AUTONOMIE
Der Benutzer sollte das Interface kontrollieren, nicht das
Interface den Benutzer
Zu wenig Freiheit schränkt ebenso ein wie zuviel Freiheit
116. 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)
119. METAPHERN
Metaphern aktivieren Sinne: Sehen, Hören, Berührung
Metaphern müssen angemessen sein und zur Aufgabe des
Nutzers passen
120. METAPHERN
Metaphern aktivieren Sinne: Sehen, Hören, Berührung
Metaphern müssen angemessen sein und zur Aufgabe des
Nutzers passen
Implizite/Explizite Handlungsaufforderung (Button)
121. 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)
134. ICONS
Icons sind nicht immer die beste Lösung
Icons sollten nicht alleine stehen, ohne Beschriftung
135. ICONS
Icons sind nicht immer die beste Lösung
Icons sollten nicht alleine stehen, ohne Beschriftung
Tooltips ersetzen nicht die Beschriftung
136. 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
137. 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
146. EFFIZIENTE NUTZUNG
Informationen dort anzeigen, wo sie benötigt werden
Alle relevanten Informationen müssen dargestellt werden
Nutzer sollen erkennen statt erinnern
151. BESCHÄFTIGUNG
Wartezeiten lösen stressähnliche Reaktionen aus
Vortäuschung von Aktivität macht Wartezeiten nachweisbar erträglicher
152. 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
153. 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
154. 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!
162. DIALOGE/SPRACHE
Dialoge müssen verständlich sein
Orthografie und Grammatik sind wichtig
163. DIALOGE/SPRACHE
Dialoge müssen verständlich sein
Orthografie und Grammatik sind wichtig
Prozesse müssen verständlich sein
164. DIALOGE/SPRACHE
Dialoge müssen verständlich sein
Orthografie und Grammatik sind wichtig
Prozesse müssen verständlich sein
Gute, knappe Hilfetexte
165. DIALOGE/SPRACHE
Dialoge müssen verständlich sein
Orthografie und Grammatik sind wichtig
Prozesse müssen verständlich sein
Gute, knappe Hilfetexte
Konsistente Benennung
166. 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
176. FITTS‘ GESETZ
Die Dauer, ein Ziel zu treffen, ist abhängig von der Distanz zum
Ziel und der Zielgröße
177. 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
178. 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
184. INTERFACE RE-DESIGN
Behutsam sein!
Vorsicht walten lassen!
Vorteil nutzen: man weiss, womit der Nutzer vertraut ist!
185. INTERFACE RE-DESIGN
Behutsam sein!
Vorsicht walten lassen!
Vorteil nutzen: man weiss, womit der Nutzer vertraut ist!
Nicht alles, was neu ist, ist besser
Design und Gestaltung – insbesondere in Typografie, Farbenlehre, Layout
Heuristik – die Wissenschaft der allgemein wiederholbaren Vorgehensweisen in Lern-, Erkenntnis- und Problemlösungsprozessen
Psychologie – insbesondere die kognitive Psychologie, also die Erkenntnis über unsere Rezeption und Bewertung von Kommunikation
Archivierung – Wissenschaft und Praxis darüber, wie man Daten zum erfolgreichen Wiederfinden durch Dritte ablegt und dabei erhält
Medientheorie – die eher theoretische Untersuchung, welche Typologien und innewohnenden Eigenschaften Medien haben und wie diese beim Gebrauch durch den mediennutzenden Menschen zum tragen kommen
Informatik – da ein Interface immer die Landkarte der darunter liegenden Datenagglomeration ist, müssen auch die Abläufe und Bedingungen der Datenverarbeitung bekannt sein
Soziologie – ein Wissensbereich, der derzeit noch wenig mit dem Interfacedesign verbunden ist, aber in Zukunft an Bedeutung gewinnen wird: Wie begegnen unterschiedliche Lebensalter und Kulturen einer Mensch-Maschine-Schnittstelle?
Design und Gestaltung – insbesondere in Typografie, Farbenlehre, Layout
Heuristik – die Wissenschaft der allgemein wiederholbaren Vorgehensweisen in Lern-, Erkenntnis- und Problemlösungsprozessen
Psychologie – insbesondere die kognitive Psychologie, also die Erkenntnis über unsere Rezeption und Bewertung von Kommunikation
Archivierung – Wissenschaft und Praxis darüber, wie man Daten zum erfolgreichen Wiederfinden durch Dritte ablegt und dabei erhält
Medientheorie – die eher theoretische Untersuchung, welche Typologien und innewohnenden Eigenschaften Medien haben und wie diese beim Gebrauch durch den mediennutzenden Menschen zum tragen kommen
Informatik – da ein Interface immer die Landkarte der darunter liegenden Datenagglomeration ist, müssen auch die Abläufe und Bedingungen der Datenverarbeitung bekannt sein
Soziologie – ein Wissensbereich, der derzeit noch wenig mit dem Interfacedesign verbunden ist, aber in Zukunft an Bedeutung gewinnen wird: Wie begegnen unterschiedliche Lebensalter und Kulturen einer Mensch-Maschine-Schnittstelle?
Design und Gestaltung – insbesondere in Typografie, Farbenlehre, Layout
Heuristik – die Wissenschaft der allgemein wiederholbaren Vorgehensweisen in Lern-, Erkenntnis- und Problemlösungsprozessen
Psychologie – insbesondere die kognitive Psychologie, also die Erkenntnis über unsere Rezeption und Bewertung von Kommunikation
Archivierung – Wissenschaft und Praxis darüber, wie man Daten zum erfolgreichen Wiederfinden durch Dritte ablegt und dabei erhält
Medientheorie – die eher theoretische Untersuchung, welche Typologien und innewohnenden Eigenschaften Medien haben und wie diese beim Gebrauch durch den mediennutzenden Menschen zum tragen kommen
Informatik – da ein Interface immer die Landkarte der darunter liegenden Datenagglomeration ist, müssen auch die Abläufe und Bedingungen der Datenverarbeitung bekannt sein
Soziologie – ein Wissensbereich, der derzeit noch wenig mit dem Interfacedesign verbunden ist, aber in Zukunft an Bedeutung gewinnen wird: Wie begegnen unterschiedliche Lebensalter und Kulturen einer Mensch-Maschine-Schnittstelle?
Design und Gestaltung – insbesondere in Typografie, Farbenlehre, Layout
Heuristik – die Wissenschaft der allgemein wiederholbaren Vorgehensweisen in Lern-, Erkenntnis- und Problemlösungsprozessen
Psychologie – insbesondere die kognitive Psychologie, also die Erkenntnis über unsere Rezeption und Bewertung von Kommunikation
Archivierung – Wissenschaft und Praxis darüber, wie man Daten zum erfolgreichen Wiederfinden durch Dritte ablegt und dabei erhält
Medientheorie – die eher theoretische Untersuchung, welche Typologien und innewohnenden Eigenschaften Medien haben und wie diese beim Gebrauch durch den mediennutzenden Menschen zum tragen kommen
Informatik – da ein Interface immer die Landkarte der darunter liegenden Datenagglomeration ist, müssen auch die Abläufe und Bedingungen der Datenverarbeitung bekannt sein
Soziologie – ein Wissensbereich, der derzeit noch wenig mit dem Interfacedesign verbunden ist, aber in Zukunft an Bedeutung gewinnen wird: Wie begegnen unterschiedliche Lebensalter und Kulturen einer Mensch-Maschine-Schnittstelle?
Design und Gestaltung – insbesondere in Typografie, Farbenlehre, Layout
Heuristik – die Wissenschaft der allgemein wiederholbaren Vorgehensweisen in Lern-, Erkenntnis- und Problemlösungsprozessen
Psychologie – insbesondere die kognitive Psychologie, also die Erkenntnis über unsere Rezeption und Bewertung von Kommunikation
Archivierung – Wissenschaft und Praxis darüber, wie man Daten zum erfolgreichen Wiederfinden durch Dritte ablegt und dabei erhält
Medientheorie – die eher theoretische Untersuchung, welche Typologien und innewohnenden Eigenschaften Medien haben und wie diese beim Gebrauch durch den mediennutzenden Menschen zum tragen kommen
Informatik – da ein Interface immer die Landkarte der darunter liegenden Datenagglomeration ist, müssen auch die Abläufe und Bedingungen der Datenverarbeitung bekannt sein
Soziologie – ein Wissensbereich, der derzeit noch wenig mit dem Interfacedesign verbunden ist, aber in Zukunft an Bedeutung gewinnen wird: Wie begegnen unterschiedliche Lebensalter und Kulturen einer Mensch-Maschine-Schnittstelle?
Design und Gestaltung – insbesondere in Typografie, Farbenlehre, Layout
Heuristik – die Wissenschaft der allgemein wiederholbaren Vorgehensweisen in Lern-, Erkenntnis- und Problemlösungsprozessen
Psychologie – insbesondere die kognitive Psychologie, also die Erkenntnis über unsere Rezeption und Bewertung von Kommunikation
Archivierung – Wissenschaft und Praxis darüber, wie man Daten zum erfolgreichen Wiederfinden durch Dritte ablegt und dabei erhält
Medientheorie – die eher theoretische Untersuchung, welche Typologien und innewohnenden Eigenschaften Medien haben und wie diese beim Gebrauch durch den mediennutzenden Menschen zum tragen kommen
Informatik – da ein Interface immer die Landkarte der darunter liegenden Datenagglomeration ist, müssen auch die Abläufe und Bedingungen der Datenverarbeitung bekannt sein
Soziologie – ein Wissensbereich, der derzeit noch wenig mit dem Interfacedesign verbunden ist, aber in Zukunft an Bedeutung gewinnen wird: Wie begegnen unterschiedliche Lebensalter und Kulturen einer Mensch-Maschine-Schnittstelle?
Design und Gestaltung – insbesondere in Typografie, Farbenlehre, Layout
Heuristik – die Wissenschaft der allgemein wiederholbaren Vorgehensweisen in Lern-, Erkenntnis- und Problemlösungsprozessen
Psychologie – insbesondere die kognitive Psychologie, also die Erkenntnis über unsere Rezeption und Bewertung von Kommunikation
Archivierung – Wissenschaft und Praxis darüber, wie man Daten zum erfolgreichen Wiederfinden durch Dritte ablegt und dabei erhält
Medientheorie – die eher theoretische Untersuchung, welche Typologien und innewohnenden Eigenschaften Medien haben und wie diese beim Gebrauch durch den mediennutzenden Menschen zum tragen kommen
Informatik – da ein Interface immer die Landkarte der darunter liegenden Datenagglomeration ist, müssen auch die Abläufe und Bedingungen der Datenverarbeitung bekannt sein
Soziologie – ein Wissensbereich, der derzeit noch wenig mit dem Interfacedesign verbunden ist, aber in Zukunft an Bedeutung gewinnen wird: Wie begegnen unterschiedliche Lebensalter und Kulturen einer Mensch-Maschine-Schnittstelle?
Man bricht gekonnt Regeln.
Man erfindet das Rad nicht neu
Man orientiert sich an Best Practices
Man hält sich an Standards
1903, Daytona Beach
Wasserdampf betriebenes Hochgeschwindigkeitsauto
Stanley Steamer
Nach Start 20 Minuten bis Druck im Boiler ausreichend hoch war
Es ist mittlerweile absolut unentschuldbar, dass die heutigen Computer und Betriebssysteme kein kontinuierliches Speichern unterstützen.
Es ist mittlerweile absolut unentschuldbar, dass die heutigen Computer und Betriebssysteme kein kontinuierliches Speichern unterstützen.
Es ist mittlerweile absolut unentschuldbar, dass die heutigen Computer und Betriebssysteme kein kontinuierliches Speichern unterstützen.
Es ist mittlerweile absolut unentschuldbar, dass die heutigen Computer und Betriebssysteme kein kontinuierliches Speichern unterstützen.
Es ist mittlerweile absolut unentschuldbar, dass die heutigen Computer und Betriebssysteme kein kontinuierliches Speichern unterstützen.
Status muss auf den ersten Blick ersichtlich sein
Viele unserer browserbasierten Produkte existieren in einer zustandslosen Umgebung
Wir müssen möglicherweise wissen:
ob der Benutzer das System zum ersten Mal verwendet;
wo der Benutzer ist;
wo der Benutzer hingeht;
wo der Benutzer während der Session gewesen ist;
wo der Benutzer war, als er die letzte Session verließ;
… sowie Myriaden weiterer Details.
Es ist außerdem nicht nur nützlich zu wissen, wo Benutzer gewesen sind, sondern auch, was sie gemacht haben.
Benutzern sollte es ermöglicht werden, sich auf der Arbeit ausloggen, nach Hause gehen und genau dort fortfahren zu können, wo sie aufgehört haben.
Status muss auf den ersten Blick ersichtlich sein
Viele unserer browserbasierten Produkte existieren in einer zustandslosen Umgebung
Wir müssen möglicherweise wissen:
ob der Benutzer das System zum ersten Mal verwendet;
wo der Benutzer ist;
wo der Benutzer hingeht;
wo der Benutzer während der Session gewesen ist;
wo der Benutzer war, als er die letzte Session verließ;
… sowie Myriaden weiterer Details.
Es ist außerdem nicht nur nützlich zu wissen, wo Benutzer gewesen sind, sondern auch, was sie gemacht haben.
Benutzern sollte es ermöglicht werden, sich auf der Arbeit ausloggen, nach Hause gehen und genau dort fortfahren zu können, wo sie aufgehört haben.
Status muss auf den ersten Blick ersichtlich sein
Viele unserer browserbasierten Produkte existieren in einer zustandslosen Umgebung
Wir müssen möglicherweise wissen:
ob der Benutzer das System zum ersten Mal verwendet;
wo der Benutzer ist;
wo der Benutzer hingeht;
wo der Benutzer während der Session gewesen ist;
wo der Benutzer war, als er die letzte Session verließ;
… sowie Myriaden weiterer Details.
Es ist außerdem nicht nur nützlich zu wissen, wo Benutzer gewesen sind, sondern auch, was sie gemacht haben.
Benutzern sollte es ermöglicht werden, sich auf der Arbeit ausloggen, nach Hause gehen und genau dort fortfahren zu können, wo sie aufgehört haben.
Pinboard, Desktop, Tabs
Pinboard, Desktop, Tabs
Pinboard, Desktop, Tabs
Pinboard, Desktop, Tabs
Die eher frustrierende Suche nach hilfreichen Informationen in einem Expertensystem wird in der Hilfe von MS Word von einer Animation begleitet. Man sieht eine Büroklammer, die ein Gesicht repräsentiert und ganz amüsante Minenspiele bietet. Farblich im grau-blauen Bereich, die Bewegungen sparsam und mit relativ langsamer Frequenz. Die Animation selbst benützt nur etwa 5% des Platzes. Die Wirkung dieser Zurückhaltung der Programmierer ist deutlich spürbar. Man kann diese Animation auch über sehr lange Zeit hinweg immer wieder sehen, ohne eine Abneigung zu entwickeln.
Was kostet weniger Zeit, Wasser in einer Mikrowelle für eine Minute und zehn Sekunden oder für eine Minute und elf Sekunden kochen zu lassen?
Beispiel: XING vs. Facebook/Kontakt bestätigen
Was kostet weniger Zeit, Wasser in einer Mikrowelle für eine Minute und zehn Sekunden oder für eine Minute und elf Sekunden kochen zu lassen?
Beispiel: XING vs. Facebook/Kontakt bestätigen
Was kostet weniger Zeit, Wasser in einer Mikrowelle für eine Minute und zehn Sekunden oder für eine Minute und elf Sekunden kochen zu lassen?
Beispiel: XING vs. Facebook/Kontakt bestätigen
Nicht Schönheit, nicht subjektive Wahrnehmung, sondern die Art und Weise, wie Menschen die Schnittstelle wahrnehmen
Nicht Schönheit, nicht subjektive Wahrnehmung, sondern die Art und Weise, wie Menschen die Schnittstelle wahrnehmen
Nicht Schönheit, nicht subjektive Wahrnehmung, sondern die Art und Weise, wie Menschen die Schnittstelle wahrnehmen
Nicht Schönheit, nicht subjektive Wahrnehmung, sondern die Art und Weise, wie Menschen die Schnittstelle wahrnehmen
Man kann nicht nicht kommunizieren
Interface Design = Kommunikation = Missverständnisse
Man kann nicht nicht kommunizieren
Interface Design = Kommunikation = Missverständnisse
Man kann nicht nicht kommunizieren
Interface Design = Kommunikation = Missverständnisse
Man kann nicht nicht kommunizieren
Interface Design = Kommunikation = Missverständnisse
Man kann nicht nicht kommunizieren
Interface Design = Kommunikation = Missverständnisse
Man kann nicht nicht kommunizieren
Interface Design = Kommunikation = Missverständnisse