Interak(onsdesign Grundlagen
Hannes Meyer
Human‐Computer Interac(on
Chapter 5

Agenda
1 WAS IST DESIGN
2 DER DESIGNPROZESS
3 BENUTZERORIENTIERTES DESIGN
4 SZENARIEN
5 NAVIGATIONSDESIGN
6 SCREEN DESIGN & LAYOUT
7 PROTOTYPEN
29.04.2008 Interak(onsdesign Grundlagen 2

Einführung
• Interak(onsdesign != Interfacedesign
• Sondern Design der Interak(on an sich
• Und der Veränderungen die das neue System
bewirkt
• z.B. Arbeitsprozesse
• Ergebnis ist nicht nur ein neues Artefakt
sondern eine Verbesserung der gesamten
Arbeitsweise
29.04.2008 Interak(onsdesign Grundlagen 3

Teil 1 von 7
Interak(onsdesign
Was ist Design
29.04.2008
Grundlagen
Defini(on, die goldene Regel und Fehler
4

Erreichen von Zielen innerhalb von
Beschränkungen
• Ziele
– Was ist der Grund für das Design? Wer wird das
System benutzen? Warum benö(gen sie es?
• Beschränkungen
– Welche Materialien sind zu verwenden? Welchen
Standards muss genügt werden? Wie viel darf es
kosten?
•  Abwägung
– Auf welche Ziele/ Beschränkungen kann zu Gunsten
anderer verzichtet werden?
29.04.2008 Interak(onsdesign Grundlagen 5

Die Goldene Regel des Design
Verstehe deine Materialien
• Verstehen wie Computer funk(onieren
– Beschränkungen, Möglichkeiten, Werkzeuge
• Verstehen wie Menschen funk(onieren
– Psychologie, Soziale Aspekte, Menschliche
Fehler
29.04.2008 Interak(onsdesign Grundlagen 6

Menschliche Fehler
• Menschliches Versagen bei Katastrophen deutet
auf Designfehler hin
• Menschen machen in Stresssitua(onen Fehler
• Bei physischen Produkten werden
Sicherheitsmechanismen eingebaut
• Designer müssen verstehen wann und wie
Menschen Fehler machen und das Interface
daran anpassen, denn:
• Fehler im Interfacedesign kosten Geld und Leben
29.04.2008 Interak(onsdesign Grundlagen 7

Die zentrale Botschah
Der Benutzer
• Von Anfang an
berücksich(gen
• Während der
Entwicklung immer
beachten
• Am Ende nicht
vergessen
29.04.2008 Interak(onsdesign Grundlagen 8

Teil 2 von 7
Interak(onsdesign
Der Designprozess
29.04.2008
Grundlagen
Ablauf und Inhalt der Phasen
9

Prozesschaubild
Anforderungen
Analyse
Design
Implemen(erung
Prototyp
29.04.2008 Interak(onsdesign Grundlagen 10

Anforderungen
• Was wird überhaupt benö(gt?
• Herausfinden was zur Zeit abläuh
• Nutzer beobachten, befragen
• Arbeitsabläufe analysieren
• Weiteres im nächsten Kapitel
29.04.2008 Interak(onsdesign Grundlagen 11

Analyse
• Ordnung der Ergebnisse der Beobachtungen
und Interviews
• Iden(fika(on Schlüsselprobleme
• Kommunika(on mit späteren Schriien
• Erstellung von Modellen
• Szenarien (Ist‐ und Ziel)
29.04.2008 Interak(onsdesign Grundlagen 12

Design
• Wie werden die Ziele erreicht?
• Beachtung von Regeln, Prinzipien und
Richtlinien
• Dokumenta(on von Entscheidungen
• Design der Naviga(on
• Screen‐Layout
29.04.2008 Interak(onsdesign Grundlagen 13

Itera(on und Prototyp
• Überprüfung der Designentscheidung
• Testen des Designs an Benutzern
• Erstellung von Prototypen
• Überarbeitung der Ziele und des Designs
• So oh zu wiederholen bis nah am Op(mum
29.04.2008 Interak(onsdesign Grundlagen 14

Implemen(erung
• Sobald das Design ausreichend perfekt ist
• Programmierung, Herstellung
• Dokumenta(on, Handbücher
29.04.2008 Interak(onsdesign Grundlagen 15

Zusammenfassung
• Designprozess ist komplex
• Zeitbedarf und Qualität müssen abgewägt werden
• Usability‐Probleme können immer behoben werden
• Entscheidung welche Probleme wirklich entscheidend
sind
• Perfektes Produkt bedeutet schlechtes Design
• Häufig exis(eren bessere alterna(ve
Lösungsmöglichkeiten die einfacher und güns(ger
umzusetzen sind
29.04.2008 Interak(onsdesign Grundlagen 16

Teil 3 von 7
Benutzerorien(ertes
Interak(onsdesign
Design
29.04.2008
Grundlagen
Kenne deine Benutzer
17

know your users
• Viele Menschen werden direkt oder indirekt
beeinflusst
• Stakeholder
• Wer sind sie?
• Nicht wie du!
• Sprich mit ihnen, beobachte sie
• Benutze deine Fantasie
29.04.2008 Interak(onsdesign Grundlagen 18

Personas
• Imaginäre Personen
• Repräsentanten der Kernbenutzergruppe
• Basieren auf tatsächlichen Studien
• Können als quasi‐reale Personen in Szenarien
eingesetzt werden
• Beflügeln die Fantasie der Designer (Wie würde Beiy
reagieren?)
• Aber:
– Können keine Fragen beantworten
– Können nicht verifiziert weden
– Können ihre Meinung nicht ausdrücken
29.04.2008 Interak(onsdesign Grundlagen 19

Beispiel Persona
• Beiy ist 37 Jahre alt. Sie arbeitet seit 5 Jahren als Managerin und ist
seit 12 Jahren in der Firma. Sie hat keine Universität besucht, aber
in einer Abendschule ihr BWL‐Diplom gemacht. Sie hat zwei Kinder,
7 und 15 Jahre alt und möchte deshalb nicht lange arbeiten. Sie hat
einen Teil einer Computereinführung absolviert, wurde dann aber
befördert und haie keine Zeit sie weiter zu besuchen. Sie kann
perfekt sehen, hat aber eine eingeschränkte Bewegungsfähigkeit
der rechten Hand, verursacht durch einen Arbeitunfall vor 5 Jahren.
Sie ist sehr engagiert in ihrer Arbeit, gibt gerne Verantwortung an
andere ab und nimmt Kri(ken ihrer Kollegen entgegen. Sie fühlt
sich allerdings von der Einführung eines neuen Computersystems
bedroht (schon das Driie seit sie in der Firma arbeitet).
29.04.2008 Interak(onsdesign Grundlagen 20

Teil 4 von 7
Interak(onsdesign
Szenarien
29.04.2008
Grundlagen
Beschreibung von Benutzungsvorgängen
21

Szenario
• Hypothe(sche Beschreibung der Benutzung
• Konkrete Beispiele
• Geschichten, Bilder, Zeichnungen
• Erkennen von Problemen bei der Benutzung
• Im Designprozess wiederverwenden
29.04.2008 Interak(onsdesign Grundlagen 22

Szenarien
• Verwendung zum
– Kommunizieren mit Anderen
– Validierungen anderer Modelle
– Verstehen des Verhaltens des Systems
• Linearität
– Zeit ist linear
– In Szenarien keine Alterna(ven
29.04.2008 Interak(onsdesign Grundlagen 23

Teil 5 von 7
Interak(onsdesign
Naviga(onsdesign
29.04.2008
Grundlagen
Das Zurechrinden in einem System
24

Interak(onsebenen
• Widgets
– Schalter, Links, Menüs
• Screen Design
– Fenster, Layout, Gruppierung
• Naviga(on
– Wo bin ich? Wo kann ich hin? Was passiert?
• Umgebung
– Andere Anwendungen, Betriebssystem
29.04.2008 Interak(onsdesign Grundlagen 25

Im WWW
• Widgets: Formulare, Tags, Links, Buions
• Screen Design: Seitenlayout
• Naviga(on: Seitenstruktur, Menüs
• Umgebung: Das Web, Browser, Externe Seiten
29.04.2008 Interak(onsdesign Grundlagen 26

Bei Geräten
• Widgets: Knöpfe, Schalter, Lampen, Anzeigen
• Screen Design: Physische Gestaltung
• Naviga(on: Funk(onen des Gerätes
• Umgebung: Die Welt
29.04.2008 Interak(onsdesign Grundlagen 27

Struktur einer Anwendung
– Wer benutzt die Anwendung?
– Wie denken sie über die Anwendung?
– Wozu benutzen Sie die Anwendung?
• Lokale Struktur
– Ausgehend von der aktuellen Situa(on (Fenster,
Webseite)
• Globale Struktur
– Allgemeiner Ausau, Organisa(on, Hierarchie, Dialoge
– Verknüpfung der Funk(onen
29.04.2008 Interak(onsdesign Grundlagen 28

Lokale Struktur
• Erreichen eines Ziels
Ziel
Start
Wo bin ich?
Was kann ich tun?
Was wird geschehen?
Wo war ich schon? Was habe ich getan?
29.04.2008 Interak(onsdesign Grundlagen 29

Wo bin ich?
29.04.2008 Interak(onsdesign Grundlagen 30

Wo bin ich?
29.04.2008 Interak(onsdesign Grundlagen 31

Was kann ich tun?
29.04.2008 Interak(onsdesign Grundlagen 32

Was wird geschehen?
29.04.2008 Interak(onsdesign Grundlagen 33

Wo war ich schon?
29.04.2008 Interak(onsdesign Grundlagen 34

Globale Struktur – Hierarchie
• Struktureller Ausau eines Systems
• Logische Gruppierung von Funk(onen
• Naviga(on durch das System
• Strukturierung von Informa(onen
• Hierarchischer Ausau, Naviga(ons(efe
29.04.2008 Interak(onsdesign Grundlagen 35

Hierarchische Struktur
Das System
Info und Hilfe Verwaltung Nachrichten
Benutzer Benutzer
hinzufügen enrernen
29.04.2008 Interak(onsdesign Grundlagen 36

Naviga(on
• Tiefe Hierarchien sind schwerer zu erfassen
• Falscher Gebrauch von Millers 7 ± 2 Regel
– Nur anwendbar auf Kurzzeitgedächtnis
– Nicht auf visuelle Suche von Elementen
– Also auch nicht auf die Zahl von Menüelementen
• Op(mal:
– Möglichst viele Elemente auf einmal
– Aber: Logisch strukturiert und gruppiert!
29.04.2008 Interak(onsdesign Grundlagen 37

Hierarchie(efe (1/3)
29.04.2008 Interak(onsdesign Grundlagen 38

Hierarchie(efe (2/3)
29.04.2008 Interak(onsdesign Grundlagen 39

Hierarchie(efe (3/3)
29.04.2008 Interak(onsdesign Grundlagen 40

Globale Struktur – Dialog
• Interak(on zwischen Benutzer und System
• Bewegung innerhalb verschiedener Modi
eines Systems
• Verschiedene Wege durch das System
• Darstellung in Diagrammen
• Querverweise zwischen verschiedenen
Hierarchieebenen
29.04.2008 Interak(onsdesign Grundlagen 41

Diagramme
Benutzer
Start Bestä(gung
löschen
Benutzer
hinzufügen
29.04.2008 Interak(onsdesign Grundlagen 42

Querverweise
29.04.2008 Interak(onsdesign Grundlagen 43

Weiteres zum Naviga(onsdesign
• Belange der Gestaltung
– Standards der Plavorm
– Einheitlichkeit aller Anwendungen
• Funk(onale Belange
– Berücksich(gung von Grundlegenden Funk(onen
wie Copy & Paste, Drag & Drop …
• Naviga(on
– Anwendungsübergreifende Integra(on
– Import und Export an andere Anwendungen
29.04.2008 Interak(onsdesign Grundlagen 44

Teil 6 von 7
Interak(onsdesign
Screen Design & Layout
29.04.2008
Grundlagen
Gestaltung von Informa(onen und Interak(onen
45

Grundlagen
• Fragen
– Was macht der Benutzer?
• Nachdenken
– Welche Informa(onen werden benö(gt? Was
muss der Benutzer damit machen können?
Welche Reihenfolge?
• Gestalten
– form follows func(on
– Benö(gte Interak(onen beeinflussen das Layout
29.04.2008 Interak(onsdesign Grundlagen 46

Gestaltung von Informa(on
• Gruppierung und Strukturierung
• Sor(erung
• Grafische Gestaltung
• Ausrichtung
• Weißraum
29.04.2008 Interak(onsdesign Grundlagen 47

Gruppierung und Strukturierung
• Logisch zusammen gehörendes wird physisch
gruppiert
Billing details: Delivery details:
Name Name
Address: … Address: …
Credit card no Delivery time
Order details:
item quantity cost/item cost
size 10 screws (boxes) 7 3.71 25.97
…… … … …
29.04.2008 Interak(onsdesign Grundlagen 48

Grafische Gestaltung
• Zur logischen Gruppierung:
• Boxen
• Linien
• Schriharten
• Hintergrund
29.04.2008 Interak(onsdesign Grundlagen 49

Ausrichtung
• Lesen von links nach rechts => Text linksbündig
Ein Blick auf die Preistafeln an Ein Blick auf die Preistafeln an
den Tankstellen ‐ und viele den Tankstellen ‐ und viele
Autofahrer sind derzeit der Autofahrer sind derzeit der
Verzweiflung nahe. Mit Verzweiflung nahe. Mit
durchschniilich 1,48 Euro pro durchschniilich 1,48 Euro pro
Liter ist Benzin gegenwär(g so Liter ist Benzin gegenwär(g so
teuer wie nie. Die teuer wie nie. Die
Schmerzgrenze sei Schmerzgrenze sei
überschriien, findet der überschriien, findet der
Autolobby‐Verband ADAC. Und Autolobby‐Verband ADAC. Und
empfiehlt das Fahrrad. empfiehlt das Fahrrad.
29.04.2008 Interak(onsdesign Grundlagen 50

Ausrichtung von Namen
• Suche nach Nachnamen erleichtern
Alan Dix

Janet Finlay
Gregory Abowd
Dix , Alan

Finlay, Janet

Abowd, Gregory
Russell Beale Beale, Russell
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
29.04.2008 Interak(onsdesign Grundlagen 51

Ausrichtung von Zahlen
532,56 627,865
179,3 1,005763
256,317 382,583
15 2502,56
73,948 432,935
1035 2,0175
3,142 652,87
497,6256 56,34
29.04.2008 Interak(onsdesign Grundlagen 52

Ausrichtung in Tabellen
Walter 12
Elisabeth 75
Herbert 56
Waltraud 15
3
Olaf 89
Alfons 20
7
Pippiloia Viktualia Rollgardina Efraimstochter Langstrumpf 5
29.04.2008 Interak(onsdesign Grundlagen 53

Ausrichtung in Tabellen 2
Walter ...................................................................................................... 12
Elisabeth .................................................................................................. 75
Herbert ..................................................................................................... 56
Waltraud .................................................................................................. 15
3
Olaf .......................................................................................................... 89
Alfons ....................................................................................................... 20
7
Pippiloia Viktualia Rollgardina Efraimstochter Langstrumpf .................... 5
29.04.2008 Interak(onsdesign Grundlagen 54

Ausrichtung in Tabellen 3
Walter 12
Elisabeth 75
Herbert 56
Waltraud 15
3
Olaf 89
Alfons 20
7
Pippiloia Viktualia Rollgardina Efraimstochter Langstrumpf 5
29.04.2008 Interak(onsdesign Grundlagen 55

Ausrichtung in Tabellen 4
Walter 12
Elisabeth 75
Herbert 56
Waltraud 15
3
Olaf 89
Alfons 20
7
Pippiloia Viktualia Rollgardina Efraimstochter Langstrumpf 5
29.04.2008 Interak(onsdesign Grundlagen 56

Weißraum
• Abgrenzung
29.04.2008 Interak(onsdesign Grundlagen 57

Weißraum
• Strukturierung
29.04.2008 Interak(onsdesign Grundlagen 58

Weißraum
• Hervorhebung
29.04.2008 Interak(onsdesign Grundlagen 59

Gestaltung von Dateneingaben
 
? 
29.04.2008 Interak(onsdesign Grundlagen 60

Was kann gemacht werden?
• Benutzer muss wissen wo geklickt wird und
wo Text eingegeben wird
• Interak(onselemente müssen deutlich
machen wie sie zu benutzen sind
• Buions müssen deutlich sein
• Beeinflusst durch Erfahrung des Benutzers
29.04.2008 Interak(onsdesign Grundlagen 61

Angemessene Erscheinung
• Art der Darstellung hängt von der Art der
Informa(onen ab (Text, Zahlen, Karten,
Tabellen) und vom Grund der Benutzung
• Ästhe(k und Nutzbarkeit
• Farben und 3D‐Effekte
• Lokalisierung
29.04.2008 Interak(onsdesign Grundlagen 62

Anpassung der Darstellung
29.04.2008 Interak(onsdesign Grundlagen 63

Ästhe(k und Benutzbarkeit
• Schönes Interface muss kein gutes Interface
sein
• Ein schönes Interface kann den Benutzer
glücklich machen und steigert dadurch die
Produk(vität
• Einheitliche Gestaltung erleichtert die
Bedienung
• Abwägung zwischen Gestaltung und
Benutzbarkeit
• Gestaltung als Alleinstellungsmerkmal
29.04.2008 Interak(onsdesign Grundlagen 64

Farben und 3D‐Effekte
• Viele Farben verwirren
• Farbe allein nicht als Informa(onslieferant
verwenden
• Auf Kontrast achten
• 3D‐Effekte für Texte vermeiden
• Rich(ger Einsatzzweck
• Quatsch: 3D‐Tortendiagramme
29.04.2008 Interak(onsdesign Grundlagen 65

Lokalisierung
• Texte von Anwendungen werden in andere
Sprachen übersetzt
• Layout muss an andere Textrichtungen
angepasst werden
• Symbole und Farben haben unterschiedliche
Bedeutung
 
29.04.2008 Interak(onsdesign Grundlagen 66

Teil 7 von 7
Interak(onsdesign
Prototypen
29.04.2008
Grundlagen
Itera(ve Entwicklung von Designs
67

Prototypen
• Auf Anhieb ist kein op(males Design möglich
• Daher itera(ves Vorgehen
OK?
design Prototyp Evaluierung fer(g!
re‐design
29.04.2008 Interak(onsdesign Grundlagen

Probleme des Prototyping
• Lokale vs. Globale Maxima
• Was ist falsch, wie kann es verbessert
werden?
• Ein guter Ausgangspunkt
29.04.2008 Interak(onsdesign Grundlagen 69

• Design ist Abwägung
Zusammenfassung
• Design ist ein Prozess
• Benutzer ist im Fokus
• Szenarien helfen
• Naviga(on und Struktur
der Anwendung
• Grundlagen des Designs
beachten
• Prototypen und Itera(on
29.04.2008 Interak(onsdesign Grundlagen 70

Vielen Dank für die Aufmerksamkeit
29.04.2008 Interak(onsdesign Grundlagen 71

Literatur & Abbildungen
• Abowd, G., Beale, R., Dix, A., & Finlay, J.
(2003). Human‐Computer Interac0on (3rd
Edi0on). Alexandria, VA: Pren0ce Hall.
• Preece, J., Rogers, Y., & Sharp, H. (2007).
Interac0on Design: Beyond Human‐Computer
Interac0on. New York, NY: Wiley.
• Screenshots:
– Yahoo! Inc., Sunnyvale, CA USA
– Apple, Inc. Cuper(no, CA, USA
– Microsoh Corp., Redmond, WA, USA
– Google Inc., Mountain View, CA, USA
29.04.2008 Interak(onsdesign Grundlagen 72