Grundlagen des Interaktionsdesigns: Human-Computer-Interaction

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

Teil 1 von 7

Interak(onsdesign
Was ist Design

29.04.2008
Grundlagen
Deﬁni(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?


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


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


Die zentrale Botschah

Der Benutzer
•  Von Anfang an
berücksich(gen
•  Während der
Entwicklung immer
beachten
•  Am Ende nicht
vergessen


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


Anforderungen
•  Was wird überhaupt benö(gt?
•  Herausﬁnden was zur Zeit abläuh
•  Nutzer beobachten, befragen
•  Arbeitsabläufe analysieren
•  Weiteres im nächsten Kapitel


Analyse
•  Ordnung der Ergebnisse der Beobachtungen
und Interviews
•  Iden(ﬁka(on Schlüsselprobleme
•  Kommunika(on mit späteren Schriien
•  Erstellung von Modellen
•  Szenarien (Ist‐ und Ziel)


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


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


Implemen(erung
•  Sobald das Design ausreichend perfekt ist
•  Programmierung, Herstellung
•  Dokumenta(on, Handbücher


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äuﬁg exis(eren bessere alterna(ve
Lösungsmöglichkeiten die einfacher und güns(ger
umzusetzen sind


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
beeinﬂusst
•  Stakeholder
•  Wer sind sie?
•  Nicht wie du!
•  Sprich mit ihnen, beobachte sie
•  Benutze deine Fantasie


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


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).


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


Szenarien
•  Verwendung zum
–  Kommunizieren mit Anderen
–  Validierungen anderer Modelle
–  Verstehen des Verhaltens des Systems

•  Linearität
–  Zeit ist linear
–  In Szenarien keine Alterna(ven


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


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


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


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

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?


Wo bin ich?


Was kann ich tun?


Was wird geschehen?


Wo war ich schon?


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


Hierarchische Struktur

Das System

Info und Hilfe Verwaltung Nachrichten

Benutzer Benutzer
hinzufügen enrernen


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!


Hierarchie(efe (1/3)


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


Diagramme

Benutzer
Start Bestä(gung
löschen

Benutzer
hinzufügen


Querverweise


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

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 beeinﬂussen das Layout

Gestaltung von Informa(on
•  Gruppierung und Strukturierung
•  Sor(erung
•  Graﬁsche Gestaltung
•  Ausrichtung
•  Weißraum


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
…… … … …


Graﬁsche Gestaltung

•  Zur logischen Gruppierung:
•  Boxen
•  Linien
•  Schriharten
•  Hintergrund


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.


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


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

Ausrichtung in Tabellen

Walter 12
Elisabeth 75
Herbert 56
Waltraud 15
3
Olaf 89
Alfons 20
7
Pippiloia Viktualia Rollgardina Efraimstochter Langstrumpf 5


Ausrichtung in Tabellen 2

Walter ...................................................................................................... 12
Elisabeth .................................................................................................. 75
Herbert ..................................................................................................... 56
Waltraud .................................................................................................. 15
3
Olaf .......................................................................................................... 89
Alfons ....................................................................................................... 20
7
Pippiloia Viktualia Rollgardina Efraimstochter Langstrumpf .................... 5



Walter 12
Elisabeth 75
Herbert 56
Waltraud 15
3
Olaf 89
Alfons 20
7


Weißraum
•  Abgrenzung


Weißraum
•  Strukturierung


Weißraum
•  Hervorhebung


Gestaltung von Dateneingaben

 

? 

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
•  Beeinﬂusst durch Erfahrung des Benutzers


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‐Eﬀekte
•  Lokalisierung


Anpassung der Darstellung


Ä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

Farben und 3D‐Eﬀekte
•  Viele Farben verwirren
•  Farbe allein nicht als Informa(onslieferant
verwenden
•  Auf Kontrast achten
•  3D‐Eﬀekte für Texte vermeiden
•  Rich(ger Einsatzzweck
•  Quatsch: 3D‐Tortendiagramme


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

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


•  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


Vielen Dank für die Aufmerksamkeit


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

Grundlagen des Interaktionsdesigns: Human-Computer-Interaction

Recommandé

Recommandé

Contenu connexe

Similaire à Grundlagen des Interaktionsdesigns: Human-Computer-Interaction

Similaire à Grundlagen des Interaktionsdesigns: Human-Computer-Interaction (16)

Grundlagen des Interaktionsdesigns: Human-Computer-Interaction