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.
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)
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)
13. MENSCH
Die grobe Konfiguration ist in den meisten Fällen identisch, aber
nicht immer gleich leistungsfähig (Motorik, Sensorik)
14. MENSCH
Die grobe Konfiguration ist in den meisten Fällen identisch, aber
nicht immer gleich leistungsfähig (Motorik, Sensorik)
Gewohnheiten
15. MENSCH
Die grobe Konfiguration ist in den meisten Fällen identisch, aber
nicht immer gleich leistungsfähig (Motorik, Sensorik)
Gewohnheiten
Erfahrungen
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. 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
57. ACHTE AUF KONSISTENZ
INNERHALB EINER ANWENDUNG
Biete einen stabilen Rahmen (Styleguide)
Sorge für Konsistenz, wenn Dinge gleich sind
58. 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
64. ZEIGE DEM BENUTZER, DASS ER SICH
AUF DEINE ANWENDUNG VERLASSEN
KANN
Reduziere kognitiven Aufwand
65. ZEIGE DEM BENUTZER, DASS ER SICH
AUF DEINE ANWENDUNG VERLASSEN
KANN
Reduziere kognitiven Aufwand
Schaffe eine vertraute Umgebung
66. ZEIGE DEM BENUTZER, DASS ER SICH
AUF DEINE ANWENDUNG VERLASSEN
KANN
Reduziere kognitiven Aufwand
Schaffe eine vertraute Umgebung
Gib wertvolle Fehlermeldungen
74. ELIMINIERE ALLES, WAS NICHT
WIRKLICH NOTWENDIG IST
Fordere nicht zu viele Entscheidungen
75. ELIMINIERE ALLES, WAS NICHT
WIRKLICH NOTWENDIG IST
Fordere nicht zu viele Entscheidungen
Biete nicht zu viel an
76. 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
82. 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
98. GESTALTE DIE WARTEZEIT DES
BENUTZERS SO ERTRÄGLICH WIE
MÖGLICH
Halte die Oberfläche ständig verfügbar
99. 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
100. 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
101. 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
102. 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
103.
104.
105.
106.
107. TOLERIERE DIE FEHLER DER BENUTZER
UND BIETE IHNEN DIE MÖGLICHKEIT
EINER KORREKTUR
108. TOLERIERE DIE FEHLER DER BENUTZER
UND BIETE IHNEN DIE MÖGLICHKEIT
EINER KORREKTUR
Mache Aktionen umkehrbar
109. TOLERIERE DIE FEHLER DER BENUTZER
UND BIETE IHNEN DIE MÖGLICHKEIT
EINER KORREKTUR
Mache Aktionen umkehrbar
Erlaube immer „Rückgängig“
110. 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
111. 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
112. 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
116. TEILE DEM BENUTZER ZU JEDER ZEIT
DEN ZUSTAND DER ANWENDUNG MIT
Browserbasierte Produkte existieren zunächst in einer
zustandslosen Umgebung
117. 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
121. ERMÖGLICHE EINE STÄNDIGE,
VERLÄSSLICHE ORIENTIERUNG
INNERHALB DER ANWENDUNG
Zeige dem Benutzer zu jeder Zeit, wo er sich befindet
122. 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
123. 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
124. 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)
129. NUTZE METAPHERN AUF
ANGEMESSENE ART UND WEISE
Metaphern aktivieren Sinne: Sehen, Hören, Berührung
Nutze angemessene und zur Aufgabe des Nutzers passende
Metaphern
130. 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)
147. EXKURS: FITTS‘ GESETZ
Die Dauer, ein Ziel zu treffen, ist abhängig von der Distanz zum
Ziel und der Zielgröße
148. 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
149. 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
155. EXKURS: RE-DESIGN
Behutsam sein!
Vorsicht walten lassen!
Vorteil nutzen: man weiss, womit der Nutzer vertraut ist!
156. EXKURS: 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?
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.
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.