Die zehn Gebote des Interaction Design

DIE ZEHN GEBOTE DES INTERACTION DESIGN

WARUM? Benutzer lieben gute Oberﬂächen

STUDIE Gute Oberﬂächen erobern Märkte Quelle: admob

iPhone OS RIM OS Windows Mobile OS Palm OS Android Hiptop OS Symbian OS STUDIE Gute Oberﬂächen erobern Märkte Quelle: admob

iPhone OS RIM OS Windows Mobile OS Palm OS Android Hiptop OS Symbian OS 6% 1% 6% 4% 11% 50% 22% STUDIE Gute Oberﬂächen erobern Märkte Quelle: admob

WARUM GIBT ES SO VIELE MITTELMÄSSIGE OBERFLÄCHEN?

MENTALE MODELLE

1958, Deutsches Bundesarchiv Bild 146-1969-169-19

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)

NASA/Johns Hopkins University Applied Physics Laboratory/Carnegie Institution of Washington

NASA/Johns Hopkins University Applied Physics Laboratory/Carnegie Institution of Washington „Ob es der gravitätische Adler in seinem Flug oder die geöﬀnete 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)

MENSCH

MENSCH Die grobe Konﬁguration ist in den meisten Fällen identisch, aber nicht immer gleich leistungsfähig (Motorik, Sensorik)

MENSCH Die grobe Konﬁguration ist in den meisten Fällen identisch, aber nicht immer gleich leistungsfähig (Motorik, Sensorik) Gewohnheiten

MENSCH Die grobe Konﬁguration ist in den meisten Fällen identisch, aber nicht immer gleich leistungsfähig (Motorik, Sensorik) Gewohnheiten Erfahrungen

MENSCH Die grobe Konﬁguration ist in den meisten Fällen identisch, aber nicht immer gleich leistungsfähig (Motorik, Sensorik) Gewohnheiten Erfahrungen Kulturelle Prägungen

MENSCH Die grobe Konﬁguration ist in den meisten Fällen identisch, aber nicht immer gleich leistungsfähig (Motorik, Sensorik) Gewohnheiten Erfahrungen Kulturelle Prägungen Vorkenntnisse

COMPUTER

COMPUTER Bildschirm, Maus, Tastatur

COMPUTER Bildschirm, Maus, Tastatur Ausgabe: Auﬂösung, Farbtiefe, Schärfe, Kontrast

COMPUTER Bildschirm, Maus, Tastatur Ausgabe: Auﬂösung, Farbtiefe, Schärfe, Kontrast Eingabe: Sprache, Tastenanzahl, Genauigkeit

COMPUTER Bildschirm, Maus, Tastatur Ausgabe: Auﬂösung, Farbtiefe, Schärfe, Kontrast Eingabe: Sprache, Tastenanzahl, Genauigkeit Architektur, Datenformate, Vernetzung, Abhängigkeiten

Wer glaubt, die Gestaltung von Oberﬂächen erfordere die alleinige Kenntnis von Mensch oder Computer?

Um Oberﬂächen zu gestalten, muss man alle relevanten Informationen über beide Seiten besitzen!

ERFORDERLICHE KENNTNISSE

ERFORDERLICHE KENNTNISSE Gestaltung

ERFORDERLICHE KENNTNISSE Gestaltung Heuristik

ERFORDERLICHE KENNTNISSE Gestaltung Heuristik Psychologie

ERFORDERLICHE KENNTNISSE Gestaltung Heuristik Psychologie Archivierung

ERFORDERLICHE KENNTNISSE Gestaltung Heuristik Psychologie Archivierung Medientheorie

ERFORDERLICHE KENNTNISSE Gestaltung Heuristik Psychologie Archivierung Medientheorie Informatik

ERFORDERLICHE KENNTNISSE Gestaltung Heuristik Psychologie Archivierung Medientheorie Informatik Soziologie

Die Oberﬂäche ist das Produkt. (Aus Sicht des Benutzers.)

TOLERANZ UND MOTIVATION

TOLERANZ UND MOTIVATION Je komplexer die Oberﬂäche, desto geringer die Toleranz.

TOLERANZ UND MOTIVATION Je komplexer die Oberﬂäche, desto geringer die Toleranz. Je stärker die Motivation, desto unwichtiger die Komplexität.

BEISPIEL 1

BEISPIEL 1 Starkes Bedürfnis

BEISPIEL 1 Starkes Bedürfnis Eindeutige, sichere Befriedigung

BEISPIEL 1 Starkes Bedürfnis Eindeutige, sichere Befriedigung Qualität der Oberﬂäche ist absolut nachrangig

BEISPIEL II

BEISPIEL II Starkes Bedürfnis

BEISPIEL II Starkes Bedürfnis Eindeutige, sichere Befriedigung

BEISPIEL II Starkes Bedürfnis Eindeutige, sichere Befriedigung Erforschung der Oberﬂäche ist das Ziel

DIE ZEHN GEBOTE

ANTIZIPIERE DIE BEDÜRFNISSE DES BENUTZERS

ANTIZIPIERE DIE BEDÜRFNISSE DES BENUTZERS Zielgruppe kennen

ANTIZIPIERE DIE BEDÜRFNISSE DES BENUTZERS Zielgruppe kennen Relevante Werkzeuge geben

ANTIZIPIERE DIE BEDÜRFNISSE DES BENUTZERS Zielgruppe kennen Relevante Werkzeuge geben Relevante Informationen geben

ACHTE AUF KONSISTENZ INNERHALB EINER ANWENDUNG

ACHTE AUF KONSISTENZ INNERHALB EINER ANWENDUNG Biete einen stabilen Rahmen (Styleguide)

ACHTE AUF KONSISTENZ INNERHALB EINER ANWENDUNG Biete einen stabilen Rahmen (Styleguide) Sorge für Konsistenz, wenn Dinge gleich sind

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

ZEIGE DEM BENUTZER, DASS ER SICH AUF DEINE ANWENDUNG VERLASSEN KANN

ZEIGE DEM BENUTZER, DASS ER SICH AUF DEINE ANWENDUNG VERLASSEN KANN Reduziere kognitiven Aufwand

ZEIGE DEM BENUTZER, DASS ER SICH AUF DEINE ANWENDUNG VERLASSEN KANN Reduziere kognitiven Aufwand Schaffe eine vertraute Umgebung

ZEIGE DEM BENUTZER, DASS ER SICH AUF DEINE ANWENDUNG VERLASSEN KANN Reduziere kognitiven Aufwand Schaffe eine vertraute Umgebung Gib wertvolle Fehlermeldungen

ELIMINIERE ALLES, WAS NICHT WIRKLICH NOTWENDIG IST

ELIMINIERE ALLES, WAS NICHT WIRKLICH NOTWENDIG IST Fordere nicht zu viele Entscheidungen

ELIMINIERE ALLES, WAS NICHT WIRKLICH NOTWENDIG IST Fordere nicht zu viele Entscheidungen Biete nicht zu viel an

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

WAS ANBIETER WOLLEN:

WAS NUTZER WOLLEN:

WAS DESIGNER WOLLEN:

WAS KUNDEN WOLLEN:

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

GESTALTE DIE WARTEZEIT DES BENUTZERS SO ERTRÄGLICH WIE MÖGLICH

GESTALTE DIE WARTEZEIT DES BENUTZERS SO ERTRÄGLICH WIE MÖGLICH Halte die Oberﬂäche ständig verfügbar

GESTALTE DIE WARTEZEIT DES BENUTZERS SO ERTRÄGLICH WIE MÖGLICH Halte die Oberﬂäche ständig verfügbar Sorge dafür, dass die Ladezeit im Verhältnis zum Ergebnis steht

GESTALTE DIE WARTEZEIT DES BENUTZERS SO ERTRÄGLICH WIE MÖGLICH Halte die Oberﬂä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

GESTALTE DIE WARTEZEIT DES BENUTZERS SO ERTRÄGLICH WIE MÖGLICH Halte die Oberﬂä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

GESTALTE DIE WARTEZEIT DES BENUTZERS SO ERTRÄGLICH WIE MÖGLICH Halte die Oberﬂä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

TOLERIERE DIE FEHLER DER BENUTZER UND BIETE IHNEN DIE MÖGLICHKEIT EINER KORREKTUR

TOLERIERE DIE FEHLER DER BENUTZER UND BIETE IHNEN DIE MÖGLICHKEIT EINER KORREKTUR Mache Aktionen umkehrbar

TOLERIERE DIE FEHLER DER BENUTZER UND BIETE IHNEN DIE MÖGLICHKEIT EINER KORREKTUR Mache Aktionen umkehrbar Erlaube immer „Rückgängig“

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

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

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

TEILE DEM BENUTZER ZU JEDER ZEIT DEN ZUSTAND DER ANWENDUNG MIT

TEILE DEM BENUTZER ZU JEDER ZEIT DEN ZUSTAND DER ANWENDUNG MIT Browserbasierte Produkte existieren zunächst in einer zustandslosen Umgebung

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

http://www.ﬂickr.com/photos/lincolnose2/2317699857/

ERMÖGLICHE EINE STÄNDIGE, VERLÄSSLICHE ORIENTIERUNG INNERHALB DER ANWENDUNG

ERMÖGLICHE EINE STÄNDIGE, VERLÄSSLICHE ORIENTIERUNG INNERHALB DER ANWENDUNG Zeige dem Benutzer zu jeder Zeit, wo er sich beﬁndet

ERMÖGLICHE EINE STÄNDIGE, VERLÄSSLICHE ORIENTIERUNG INNERHALB DER ANWENDUNG Zeige dem Benutzer zu jeder Zeit, wo er sich beﬁndet Der Benutzer sollte das Interface kontrollieren, nicht das Interface den Benutzer

ERMÖGLICHE EINE STÄNDIGE, VERLÄSSLICHE ORIENTIERUNG INNERHALB DER ANWENDUNG Zeige dem Benutzer zu jeder Zeit, wo er sich beﬁndet Der Benutzer sollte das Interface kontrollieren, nicht das Interface den Benutzer Zu wenig Freiheit schränkt ebenso ein wie zu viel Freiheit

ERMÖGLICHE EINE STÄNDIGE, VERLÄSSLICHE ORIENTIERUNG INNERHALB DER ANWENDUNG Zeige dem Benutzer zu jeder Zeit, wo er sich beﬁndet 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 Oberﬂäche immer mehrere Wege zu einem Ziel an (Navigation, Button, Tastenkombination)

NUTZE METAPHERN AUF ANGEMESSENE ART UND WEISE

NUTZE METAPHERN AUF ANGEMESSENE ART UND WEISE Metaphern aktivieren Sinne: Sehen, Hören, Berührung

NUTZE METAPHERN AUF ANGEMESSENE ART UND WEISE Metaphern aktivieren Sinne: Sehen, Hören, Berührung Nutze angemessene und zur Aufgabe des Nutzers passende Metaphern

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)

EXKURS: FITTS‘ GESETZ

EXKURS: FITTS‘ GESETZ Die Dauer, ein Ziel zu treffen, ist abhängig von der Distanz zum Ziel und der Zielgröße

EXKURS: FITTS‘ GESETZ Die Dauer, ein Ziel zu treffen, ist abhängig von der Distanz zum Ziel und der Zielgröße Große Schaltﬂächen für wichtige Funktionen verwenden

EXKURS: FITTS‘ GESETZ Die Dauer, ein Ziel zu treffen, ist abhängig von der Distanz zum Ziel und der Zielgröße Große Schaltﬂächen für wichtige Funktionen verwenden Ergebnis: die Menü-Umsetzung unter Mac OS X ist deutlich schneller bedienbar als die Menü-Umsetzung unter Windows

EXKURS: RE-DESIGN

EXKURS: RE-DESIGN Behutsam sein!

EXKURS: RE-DESIGN Behutsam sein! Vorsicht walten lassen!

EXKURS: RE-DESIGN Behutsam sein! Vorsicht walten lassen! Vorteil nutzen: man weiss, womit der Nutzer vertraut ist!

EXKURS: RE-DESIGN Behutsam sein! Vorsicht walten lassen! Vorteil nutzen: man weiss, womit der Nutzer vertraut ist! Nicht alles, was neu ist, ist besser

VIELEN DANK! Twitter: stn1978

Die zehn Gebote des Interaction Design

0 comments

Notes on slide 1

17 Favorites