SlideShare ist ein Scribd-Unternehmen logo
1 von 72
Downloaden Sie, um offline zu lesen
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 

Weitere ähnliche Inhalte

Ähnlich wie Grundlagen des Interaktionsdesigns: Human-Computer-Interaction

Wissenskonferenz - ein Führungsinstrument für große Gruppen
Wissenskonferenz - ein Führungsinstrument für große GruppenWissenskonferenz - ein Führungsinstrument für große Gruppen
Wissenskonferenz - ein Führungsinstrument für große GruppenGebhard Borck
 
Dr. Sybille Hambach: Lernen Im Prozess der Arbeit
Dr. Sybille Hambach: Lernen Im Prozess der ArbeitDr. Sybille Hambach: Lernen Im Prozess der Arbeit
Dr. Sybille Hambach: Lernen Im Prozess der Arbeitlernet
 
Svenskt Projektforum
Svenskt ProjektforumSvenskt Projektforum
Svenskt ProjektforumSven Ringmar
 
Wie kann ich ein besserer Designer werden? (Mit Konzeption die Welt retten.)
Wie kann ich ein besserer Designer werden? (Mit Konzeption die Welt retten.)Wie kann ich ein besserer Designer werden? (Mit Konzeption die Welt retten.)
Wie kann ich ein besserer Designer werden? (Mit Konzeption die Welt retten.)Sebastian Waters
 
Xp days2010 agile-usabiltytoolbox
Xp days2010 agile-usabiltytoolboxXp days2010 agile-usabiltytoolbox
Xp days2010 agile-usabiltytoolboxxpdaysgermany
 
Mental Model - Basis für eine nachhaltige Informationsarchitektur
Mental Model - Basis für eine nachhaltige InformationsarchitekturMental Model - Basis für eine nachhaltige Informationsarchitektur
Mental Model - Basis für eine nachhaltige InformationsarchitekturKaren Lindemann
 
Fallstudie: Usability-Test im Labor (neckermann.de)
Fallstudie: Usability-Test im Labor (neckermann.de)Fallstudie: Usability-Test im Labor (neckermann.de)
Fallstudie: Usability-Test im Labor (neckermann.de)martin.beschnitt
 
Code Reuse, Motivation, Koordination, Kollaboration: Was Entwicklerteams von ...
Code Reuse, Motivation, Koordination, Kollaboration: Was Entwicklerteams von ...Code Reuse, Motivation, Koordination, Kollaboration: Was Entwicklerteams von ...
Code Reuse, Motivation, Koordination, Kollaboration: Was Entwicklerteams von ...Matthias Stürmer
 
Der Socio-Technical Walkthrough als Methode der Dokumentation und Analyse von...
Der Socio-Technical Walkthrough als Methode der Dokumentation und Analyse von...Der Socio-Technical Walkthrough als Methode der Dokumentation und Analyse von...
Der Socio-Technical Walkthrough als Methode der Dokumentation und Analyse von...integro
 
Fürchtet Euch nicht - Social Media Marketing Konferenz 2013, Zürich
Fürchtet Euch nicht - Social Media Marketing Konferenz 2013, ZürichFürchtet Euch nicht - Social Media Marketing Konferenz 2013, Zürich
Fürchtet Euch nicht - Social Media Marketing Konferenz 2013, ZürichRoman Kappeler
 
Produktbroschuere ABDok
Produktbroschuere ABDokProduktbroschuere ABDok
Produktbroschuere ABDokGebhard Borck
 
Optimierte Vorgehensweisen für Intranet-Projekte [DE]
Optimierte Vorgehensweisen für Intranet-Projekte [DE]Optimierte Vorgehensweisen für Intranet-Projekte [DE]
Optimierte Vorgehensweisen für Intranet-Projekte [DE]Stephan Schillerwein
 
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...eparo GmbH
 
140509 Socialbar PräSentation Forschungsprojekt If N
140509 Socialbar PräSentation Forschungsprojekt If N140509 Socialbar PräSentation Forschungsprojekt If N
140509 Socialbar PräSentation Forschungsprojekt If NJuliaLena
 
Designpattern für Online Communitites
Designpattern für Online CommunititesDesignpattern für Online Communitites
Designpattern für Online CommunititesCarsten Grandke
 

Ähnlich wie Grundlagen des Interaktionsdesigns: Human-Computer-Interaction (16)

Wissenskonferenz - ein Führungsinstrument für große Gruppen
Wissenskonferenz - ein Führungsinstrument für große GruppenWissenskonferenz - ein Führungsinstrument für große Gruppen
Wissenskonferenz - ein Führungsinstrument für große Gruppen
 
Dr. Sybille Hambach: Lernen Im Prozess der Arbeit
Dr. Sybille Hambach: Lernen Im Prozess der ArbeitDr. Sybille Hambach: Lernen Im Prozess der Arbeit
Dr. Sybille Hambach: Lernen Im Prozess der Arbeit
 
Svenskt Projektforum
Svenskt ProjektforumSvenskt Projektforum
Svenskt Projektforum
 
Wie kann ich ein besserer Designer werden? (Mit Konzeption die Welt retten.)
Wie kann ich ein besserer Designer werden? (Mit Konzeption die Welt retten.)Wie kann ich ein besserer Designer werden? (Mit Konzeption die Welt retten.)
Wie kann ich ein besserer Designer werden? (Mit Konzeption die Welt retten.)
 
Xp days2010 agile-usabiltytoolbox
Xp days2010 agile-usabiltytoolboxXp days2010 agile-usabiltytoolbox
Xp days2010 agile-usabiltytoolbox
 
Gruppe Rabatt And More Final1.1 1
Gruppe Rabatt And More Final1.1 1Gruppe Rabatt And More Final1.1 1
Gruppe Rabatt And More Final1.1 1
 
Mental Model - Basis für eine nachhaltige Informationsarchitektur
Mental Model - Basis für eine nachhaltige InformationsarchitekturMental Model - Basis für eine nachhaltige Informationsarchitektur
Mental Model - Basis für eine nachhaltige Informationsarchitektur
 
Fallstudie: Usability-Test im Labor (neckermann.de)
Fallstudie: Usability-Test im Labor (neckermann.de)Fallstudie: Usability-Test im Labor (neckermann.de)
Fallstudie: Usability-Test im Labor (neckermann.de)
 
Code Reuse, Motivation, Koordination, Kollaboration: Was Entwicklerteams von ...
Code Reuse, Motivation, Koordination, Kollaboration: Was Entwicklerteams von ...Code Reuse, Motivation, Koordination, Kollaboration: Was Entwicklerteams von ...
Code Reuse, Motivation, Koordination, Kollaboration: Was Entwicklerteams von ...
 
Der Socio-Technical Walkthrough als Methode der Dokumentation und Analyse von...
Der Socio-Technical Walkthrough als Methode der Dokumentation und Analyse von...Der Socio-Technical Walkthrough als Methode der Dokumentation und Analyse von...
Der Socio-Technical Walkthrough als Methode der Dokumentation und Analyse von...
 
Fürchtet Euch nicht - Social Media Marketing Konferenz 2013, Zürich
Fürchtet Euch nicht - Social Media Marketing Konferenz 2013, ZürichFürchtet Euch nicht - Social Media Marketing Konferenz 2013, Zürich
Fürchtet Euch nicht - Social Media Marketing Konferenz 2013, Zürich
 
Produktbroschuere ABDok
Produktbroschuere ABDokProduktbroschuere ABDok
Produktbroschuere ABDok
 
Optimierte Vorgehensweisen für Intranet-Projekte [DE]
Optimierte Vorgehensweisen für Intranet-Projekte [DE]Optimierte Vorgehensweisen für Intranet-Projekte [DE]
Optimierte Vorgehensweisen für Intranet-Projekte [DE]
 
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
 
140509 Socialbar PräSentation Forschungsprojekt If N
140509 Socialbar PräSentation Forschungsprojekt If N140509 Socialbar PräSentation Forschungsprojekt If N
140509 Socialbar PräSentation Forschungsprojekt If N
 
Designpattern für Online Communitites
Designpattern für Online CommunititesDesignpattern für Online Communitites
Designpattern für Online Communitites
 

Grundlagen des Interaktionsdesigns: Human-Computer-Interaction

  • 1. Interak(onsdesign Grundlagen  Hannes Meyer  Human‐Computer Interac(on  Chapter 5 
  • 2. 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 
  • 3. 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 
  • 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 
  • 10. Prozesschaubild  Anforderungen  Analyse  Design  Implemen(erung  Prototyp  29.04.2008  Interak(onsdesign Grundlagen  10 
  • 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 
  • 13. 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 
  • 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 
  • 15. Implemen(erung  •  Sobald das Design ausreichend perfekt ist  •  Programmierung, Herstellung  •  Dokumenta(on, Handbücher  29.04.2008  Interak(onsdesign Grundlagen  15 
  • 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 
  • 18. 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 
  • 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 
  • 26. 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 
  • 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 
  • 30. Wo bin ich?  29.04.2008  Interak(onsdesign Grundlagen  30 
  • 31. Wo bin ich?  29.04.2008  Interak(onsdesign Grundlagen  31 
  • 32. Was kann ich tun?  29.04.2008  Interak(onsdesign Grundlagen  32 
  • 33. Was wird geschehen?  29.04.2008  Interak(onsdesign Grundlagen  33 
  • 34. Wo war ich schon?  29.04.2008  Interak(onsdesign Grundlagen  34 
  • 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 
  • 37. 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 
  • 38. Hierarchie(efe (1/3)  29.04.2008  Interak(onsdesign Grundlagen  38 
  • 39. Hierarchie(efe (2/3)  29.04.2008  Interak(onsdesign Grundlagen  39 
  • 40. Hierarchie(efe (3/3)  29.04.2008  Interak(onsdesign Grundlagen  40 
  • 41. 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 
  • 42. Diagramme  Benutzer  Start  Bestä(gung  löschen  Benutzer  hinzufügen  29.04.2008  Interak(onsdesign Grundlagen  42 
  • 43. Querverweise  29.04.2008  Interak(onsdesign Grundlagen  43 
  • 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 
  • 47. Gestaltung von Informa(on  •  Gruppierung und Strukturierung  •  Sor(erung  •  Grafische Gestaltung  •  Ausrichtung  •  Weißraum  29.04.2008  Interak(onsdesign Grundlagen  47 
  • 48. 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 
  • 49. Grafische Gestaltung  •  Zur logischen Gruppierung:  •  Boxen  •  Linien  •  Schriharten  •  Hintergrund  29.04.2008  Interak(onsdesign Grundlagen  49 
  • 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 
  • 52. 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 
  • 53. 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 
  • 54. 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 
  • 55. 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 
  • 56. 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 
  • 57. Weißraum  •  Abgrenzung  29.04.2008  Interak(onsdesign Grundlagen  57 
  • 58. Weißraum  •  Strukturierung  29.04.2008  Interak(onsdesign Grundlagen  58 
  • 59. Weißraum  •  Hervorhebung  29.04.2008  Interak(onsdesign Grundlagen  59 
  • 60. Gestaltung von Dateneingaben    ?  29.04.2008  Interak(onsdesign Grundlagen  60 
  • 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 
  • 62. 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 
  • 63. Anpassung der Darstellung  29.04.2008  Interak(onsdesign Grundlagen  63 
  • 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 
  • 65. 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 
  • 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 
  • 68. 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 
  • 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 
  • 71. Vielen Dank für die Aufmerksamkeit  29.04.2008  Interak(onsdesign Grundlagen  71 
  • 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