4. Teil 1 von 7
Interak(onsdesign
Was ist Design
29.04.2008
Grundlagen
Defini(on, die goldene Regel und Fehler
4
5. 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
6. 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
7. 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
8. 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
9. Teil 2 von 7
Interak(onsdesign
Der Designprozess
29.04.2008
Grundlagen
Ablauf und Inhalt der Phasen
9
11. 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
12. 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
14. 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
16. 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
17. Teil 3 von 7
Benutzerorien(ertes
Interak(onsdesign
Design
29.04.2008
Grundlagen
Kenne deine Benutzer
17
19. 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
20. 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
21. Teil 4 von 7
Interak(onsdesign
Szenarien
29.04.2008
Grundlagen
Beschreibung von Benutzungsvorgängen
21
22. 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
23. 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
24. Teil 5 von 7
Interak(onsdesign
Naviga(onsdesign
29.04.2008
Grundlagen
Das Zurechrinden in einem System
24
25. 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
27. 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
28. 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
29. 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
35. 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
36. Hierarchische Struktur
Das System
Info und Hilfe Verwaltung Nachrichten
Benutzer Benutzer
hinzufügen enrernen
29.04.2008 Interak(onsdesign Grundlagen 36
44. 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
45. Teil 6 von 7
Interak(onsdesign
Screen Design & Layout
29.04.2008
Grundlagen
Gestaltung von Informa(onen und Interak(onen
45
46. 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
50. 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
51. 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
61. 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
64. Ä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
66. 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
67. Teil 7 von 7
Interak(onsdesign
Prototypen
29.04.2008
Grundlagen
Itera(ve Entwicklung von Designs
67
69. 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
70. • 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
72. 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