Grundlagen des Interaktionsdesigns: Human-Computer-Interaction

Interak(onsdesign Grundlagen

Human‐Computer Interac(on Chapter 5

Hannes Meyer

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


Was ist Design

Teil 1 von 7

Interak(

onsdesign

Grund

lagen

29.04.20

08

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?


Die Goldene Regel des Design

•  Verstehen wie Computer funk(onieren – Beschränkungen, Möglichkeiten, Werkzeuge

•  Verstehen wie Menschen funk(onieren – Psychologie, Soziale Aspekte, Menschliche Fehler


Verstehe deine Materialien

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


Der Designprozess

Teil 2 von 7

Interak(

onsdesign

Grund

lagen

29.04.20

08

Ablauf und Inhalt der Phasen

9

Prozesschaubild

Anforderungen

Analyse

Design

Implemen(erung


Prototyp

Anforderungen

•  Was wird überhaupt benö(gt? •  Herausfinden 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(fika(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äufig exis(eren bessere alterna(ve Lösungsmöglichkeiten die einfacher und güns(ger umzusetzen sind


Benutzerorien(ertes Design

Teil 3 von 7

Interak(

onsdesign

Grund

lagen

29.04.20

08

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


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


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


Szenarien

Teil 4 von 7

Interak(

onsdesign

Grund

lagen

29.04.20

08

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


Naviga(onsdesign

Teil 5 von 7

Interak(

onsdesign

Grund

lagen

29.04.20

08

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

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 hinzufügen

Benutzer 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


Start Benutzer löschen

Bestä(gung

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


Screen Design & Layout

Teil 6 von 7

Interak(

onsdesign

Grund

lagen

29.04.20

08

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


Gruppierung und Strukturierung

•  Logisch zusammen gehörendes wird physisch gruppiert


Billing details: Name Address: … Credit card no

Delivery details: Name Address: … Delivery time

Order details: item quantity cost/item cost size 10 screws (boxes) 7 3.71 25.97 …… … … …

Grafische Gestaltung

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


Ausrichtung

•  Lesen von links nach rechts => Text linksbündig


Ein Blick auf die Preistafeln an den Tankstellen ‐ und viele Autofahrer sind derzeit der Verzweiflung nahe. Mit durchschniilich 1,48 Euro pro Liter ist Benzin gegenwär(g so teuer wie nie. Die Schmerzgrenze sei überschriien, findet der Autolobby‐Verband ADAC. Und empfiehlt das Fahrrad.

Ein Blick auf die Preistafeln an den Tankstellen ‐ und viele Autofahrer sind derzeit der

Verzweiflung nahe. Mit durchschniilich 1,48 Euro pro Liter ist Benzin gegenwär(g so

teuer wie nie. Die Schmerzgrenze sei

überschriien, findet der Autolobby‐Verband ADAC. Und

empfiehlt das Fahrrad.

Ausrichtung von Namen

•  Suche nach Nachnamen erleichtern


Alan Dix Janet Finlay Gregory Abowd Russell Beale

Alan Dix Janet Finlay Gregory Abowd Russell Beale

Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell

Ausrichtung von Zahlen


532,56 179,3

256,317 15

73,948 1035 3,142

497,6256

627,865 1,005763

382,583 2502,56

432,935 2,0175 652,87 56,34

Ausrichtung in Tabellen

Walter 12

Elisabeth 75

Herbert 56

Waltraud 153

Olaf 89

Alfons 207

Pippiloia Viktualia Rollgardina Efraimstochter Langstrumpf 5


Ausrichtung in Tabellen 2


Walter ...................................................................................................... 12

Elisabeth .................................................................................................. 75

Herbert ..................................................................................................... 56

Waltraud .................................................................................................. 153

Olaf .......................................................................................................... 89

Alfons ....................................................................................................... 207

Pippiloia Viktualia Rollgardina Efraimstochter Langstrumpf .................... 5



Walter 12

Elisabeth 75

Herbert 56

Waltraud 153

Olaf 89

Alfons 207


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

•  Beeinflusst 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‐Effekte •  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 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


Lokalisierung

•  Texte von Anwendungen werden in andere Sprachen übersetzt

•  Layout muss an andere Textrichtungen angepasst werden

•  Symbole und Farben haben unterschiedliche Bedeutung


Prototypen

Teil 7 von 7

Interak(

onsdesign

Grund

lagen

29.04.20

08

Itera(ve Entwicklung von Designs

67

Prototypen

•  Auf Anhieb ist kein op(males Design möglich •  Daher itera(ves Vorgehen

29.04.2008 Interak(onsdesign Grundlagen

Prototyp Evaluierung design

re‐design

fer(g! OK?

Probleme des Prototyping

•  Lokale vs. Globale Maxima •  Was ist falsch, wie kann es verbessert werden?

•  Ein guter Ausgangspunkt


Zusammenfassung •  Design ist Abwägung •  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 29.04.2008 Interak(onsdesign Grundlagen 72

Grundlagen des Interaktionsdesigns: Human-Computer-Interaction

Design

Transcript of Grundlagen des Interaktionsdesigns: Human-Computer-Interaction