Grundlagen des Interaktionsdesigns: Human-Computer-Interaction
Upcoming SlideShare
Loading in...5
×
 

Grundlagen des Interaktionsdesigns: Human-Computer-Interaction

on

  • 1,610 views

Diese Präsentation orientiert sich am Buch \"Human-Computer Interaction\" von Dix und Finley. http://hcibook.com/

Diese Präsentation orientiert sich am Buch \"Human-Computer Interaction\" von Dix und Finley. http://hcibook.com/

Statistics

Views

Total Views
1,610
Views on SlideShare
1,604
Embed Views
6

Actions

Likes
0
Downloads
17
Comments
0

3 Embeds 6

http://hannesmeyer.de 4
http://h1m.net 1
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Grundlagen des Interaktionsdesigns: Human-Computer-Interaction Grundlagen des Interaktionsdesigns: Human-Computer-Interaction Presentation Transcript

  • 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