Multimedia Produktion 2: Interaktion Design

Design & Prototyp I

Interak(on  Design  SS  2010  187  309  

Lisa  Ehrenstrasser  

VO  7  

VO7-Prototyp1

Themen der VO…

  Definitionen & Begriffe (VO1 + VO2)   Was ist Interaction Design?   Interaktion & Interaktivität

  Ansätze & Methoden (VO3 bis VO7)   Prozesse von Interaction Design (VO3, VO4, VO5)   Anforderungsdefinition- und analyse (VO6)   Design, Modelle, Prototyping & Implementierung (VO7, VO8)

  Weitere Aspekte   Design für Kollaboration & Kommunikation (VO8)   Nutzungsqualitäten; Evaluation (VO9)   WAI Richtlinien und Web- Fehler (VO10)   Design Frameworks & Interfaces (VO11)

VO6-Analyse

Vom Design über das Prototyping zur Implementierung I

VO7-Prototyp1

Inhalt heute…

  Storyboards   Paper based Prototyping   Low- High Fidelity Prototyping   Experience Prototyping   Definitionen und Beispiele

VO7-Prototyp1

Wozu Prototypen

  Zur  Visualisierung,  zum  Überzeugen    Konkre@siert  Diskussion,  weniger  Missverständnisse    Direkte  Interak@on  mit  Prototyp  (Vergleich  mit  Dokument  

oder  Zeichnung)    Bessere  Kommunika@on  innerhalb  des  Team,  Beantwortet  

Fragen  und  hilQ  bei  Auswahl  zwischen  Alterna@ven    Austesten  von  Ideen  möglich    Ermöglicht  Usern  ak@ve  Beteiligung  im  Designprozess,  Design  

Tes@ng    Klären  ungenauer  Anforderungen,  Regt  Reflek@on  an    Spart  Geld  …(Probleme  früh  erkennen)  

⇒  Bewertung,  Evalua/on  und  Feedback  

VO7-Prototyp1

Was kann man mit Prototypen testen

 Work-­‐flow,  Aufgabengestaltung    Interak@onsabfolgen    Screen  Layout  und  Informa@onsdarstellung  

  Schwierige,  kontroverse  Aspekte    Technische  Aspekte  

VO7-Prototyp1

Prototypen im Interaction Design

  Eine  Reihe  von  Skizzen  der  Fenster/Screens    Ein  Storyboard,  d.h.  eine  comic-­‐ar@ge  Reihe  von  Szenen  

  Ein  Video,  das  die  Nutzung  eines  Systems  simuliert    Ein  Prop  zB.:  ein  Holzstück  (Bsp.  PalmPilot)    Ein  Mock-­‐Up  aus  Pappe  oder  Post-­‐its  (pretend  play)    Ein  Video-­‐Mock-­‐Up,  eine  Kombina@on  von  Video  und  Papp  bzw.  Post-­‐itmodell  

  Eine  Powerpoint  Folienshow    Ein  Stück  SoEware  mit  begrenzter  Funk@onalität  in  der  Zielsprache  (oder  einer  anderen)  

VO7-Prototyp1

Prototypen im Interaction Design

  Ein  Video-­‐Mock-­‐Up,  eine  Kombina@on  von  Video  und  Pappmodell  –  bestens  geeignet  für  Interak@onsabläufe  jeglicher  Art      Ideal  nach  Ideenentwurf  und  Interak@onskonzept    Testen  von  Abfolgen,  Interak@onen,,  Aufgaben  (Video  gibt  Zeitkomponente;  Soundmöglichkeit)  

  Eine  Powerpoint  Folienshow  –  bestens  geeignet  für  SoQware,  Grafik,  Layout  und  Tex@nhalte    Ideal  während  Entwicklung  und  Interak@onskonzept    Testen  von  Stufen,  Interak@onen,  Informa@onsdarstellung  (PPT  gibt  Zeitkomponente;  Soundmöglichkeit)  

VO7-Prototyp1

Prototyp Definition

Ein  Prototyp  ist  eine  begrenzte  Repräsenta@on  eines  Designs,  die  es  Usern  erlaubt,  mit  ihr  zu  interagieren  und  Ihre  Eignung  zu  erkunden  

und  zu  prüfen.  

VO7-Prototyp1

Low-Fidelity vs. High-Fidelity

  Niedrige/Hohe  Ähnlichkeit  (Wiedergabetreue)    Prüfe  Nutzen  von  Ideen,  Interak@onen,  Abläufe,  Einbeiung  in  Umgebung  

     ⇒  low  fidelity  

  Prüfe  Details  (Gestaltung,  Darstellung,  Ton,  Zeitverhalten,  Performance,  Benutzbarkeit)  &  genaue  Funk@on  

     ⇒  high  fidelity  

VO7-Prototyp1

Arten

  Skizzen  &  Papierprototypen    Low-­‐fidelity,  nicht-­‐interak@ve,  computergezeichnete  Prototypen  

  Miiel-­‐Fidelity,  programmierte  Prototypen    High-­‐Fidelity  Prototypen    Diverse  Mischstufen    

  Papier  &  low-­‐fi    ge-­‐scripted  &  interak@v  &  low-­‐fi  

  Breite  versus  Tiefe,  Look  versus  Interak@on  

VO7-Prototyp1

Low-Fi Prototypen

  Verwendet  Medien/Material  das  dem  finalen  nicht  ähnelt,  z.B.  Papier,  Pappe,  Schaumstoff,  meist  keine  Funk@onalität  

  schnell,  billig  und  leicht  änderbar    Beispiele:  

  Screen-­‐Skizzen,  task  sequences,  etc.    ‘Post-­‐it’  Klebezeiel    Mock-­‐Up  aus  Pappe/Holz/Schaumstoff    Storyboard  (Comicstrip)    ‘Wizard-­‐of-­‐Oz’  

VO7-Prototyp1

Low-Fi Prototypen (Beispiele)

IDEO.com: social mobiles Mockup mit Flötenfunktion Mock-Ups versch. Genauigkeit für einen „tangible“ personal organizer Sperrholz & Papierstreifen… (Handling interaktiv, Simuliert….)

VO7-Prototyp1

Storyboards

  Ursprünglich  verwendet  in  Film/Videoproduk@on  zur  Vorplanung  des  Drehs  

  OQ  zusammen  mit  Szenarien  verwendet,  mehr  Details,  Chance  für  Rollenspiele  

  Reihe  von  Sketchen/Skizzen    Frühe  Phasen  des  Designs    Krea@ve  Ideenfindung,  Miiel  der  Kommunika@on  mit  Usern  und  Kunden,  anderer  Denkmodus  als  textbasierte  Szenarien  

VO7-Prototyp1

Storyboarding im Produktdesign

IDEO.com: social mobiles VO7-Prototyp1

Prototypen im Produktdesign

  In  vielen  Design/    Entwurfsfelder  ist  ein    Prototype  ein  Modell    in  kleinem  Maßstab:    ein  Modell-­‐Auto  (Miniatur)  

 Modell  einer  Stadt/eines  Gebäudes    ein  maßstabsgetreues  Modell  ohne  die  Funk@onalität  des  Zielprodukts  z.B.:  ein  Auto  aus  Lehm  oder  Pappe  

VO7-Prototyp1

Storyboarding im Interaction Design

Simple Skizzen

VO7-Prototyp1

Storyboarding im GUI Design

SAP VO7-Prototyp1

Prototypen Beispiele

IDEO.com VO7-Prototyp1

GUI Prototyping

  Große  Karteikarten    Jede  Karte  stellt  eine  Bildschirmmaske  dar  oder  einen  Aufgabenschrii  

  OQ  für  Webseiten-­‐Design  genutzt  

  In  Evalua@onen  wird  Kartenstapel  von  Usern  “durchlaufen”  (mit  Hilfe  eines  Moderators)  

  den  Ablauf  “durchspielend”  

VO7-Prototyp1

Paper GUI-Prototyping

  Material:    Papier  in  versch.  Größen  (Maßstab)    Farbs@Qe  (kräQige),  -­‐  Farb-­‐Marker,    Karteikarten  (für  Pop-­‐Up  Windows  etc.),    Post-­‐Its/Klebezeiel  (farbig)  z.B.  für  Menüs,    BuKons,  Tabellen,  Eingabefelder,  Klebeband  (ablösbar)  z.B.  für  Eingabefelder,  Scheren,  Radierer,  Lineale,  

  durchsich@ge  farbige  Folien  (als  Überlagerung,  temporäre  Auswahlen  drauf  einzeichnen),  vorgefer@gte  Elemente  passend  zum  Projekt  

  Papier  sollte  Grundform  des  Interfaces  imi@eren  

VO7-Prototyp1

Paper Prototyping

  Prototyping  im  Team:  Krea@vität,  gemeinsame  Erfahrung,  gemeinsames  Verständnis  entwickeln  

  Eine  Person  moderiert    Team:  Usability  Specialist,  Interface  Designer,  Interac@on  

Designer,  Technology  Specialist,  Anwendungs-­‐Experte,  ….  Technische  Dokumenta@on,  Business/Marke@ng  Spezialist….  

  Oder  Team  zusammen  mit  Usern      ⇒  Par(zipa(ves  Design  

  Video  der  Ergebnisse  (Simula@on  der  Benutzung)  

VO7-Prototyp1

Prototyping im Team

Entwickeln alternativer Entwürfe in Kleingruppen

Präsentation der Vorschläge vor Gesamtgruppe

Bilder: SAP Design Guild VO7-Prototyp1

Evaluieren von Papier Prototypen

Bilder: SAP Design Guild

Papier Prototyp nutzbar für Usability Test mit Usern (Walkthrough durch typische Aufgabe) Moderator hantiert Papier, fragt User aus: „was würden Sie jetzt tun, Wie würden Sie es tun….“ Schreiber notiert Änderungsvorschläge direkt umsetzen & erneut testen Interview vorher mit Kollegen üben! Ziel vorher festlegen (Konkretheitsstufe, Fokus) 3-6 User für jede Evaluationsrunde VO7-Prototyp1

“High-fidelity” Prototyping

  Verwendet  das  Material,  das  man  beim  finalen  Produkt  erwarten  würde.  

  Prototype  sieht  dem  finalen  System  ähnlicher  als  low-­‐fi  version.  

  Funk@onal  dicht  am  Endprodukt  dran.    Tools  zum  Hi-­‐Fi  Prototyping:  HTML,  Macromedia,  Programmier  Sprachen.  

  Gefahr,  dass  User  den  Prototypen  mit  Zielsystem  ⇒  verwechseln    

  Kompromisse  

VO7-Prototyp1

‘Wizard-of-Oz’ Prototyping

  Der  User  glaubt,  er  interagiert  mit  dem  Computer.    

  Meist  während  früher  Designphasen    Probleme:    

  Wizard  ist  klüger  als  der  Computer  

  Reak@onszeiten  

VO7-Prototyp1

Mittlerer (low-hi) fi Prototyp

HTML-Prototyp – Simulation der Interaktion

Oder Präsentation (Powerpoint) mit spezifizierten Übergängen, Effekten etc.

VO7-Prototyp1

Vergleich Low-Fi / High-Fi

Low-­‐Fi  +  Billig,  schnell,  einfach  +  Erzeuge/Evaluiere  viele  +  Varianten,  itera@ver  Entwurf  +  Kommunika@v,  alle  beteiligt  +  Screen  Layout  prütar  +  Proof-­‐of-­‐concept  +  Konzentra@on  auf  grobes  Konzept,  

Naviga@on    -­‐  Ohne  Funk@onalität  -­‐  Begrenzte  Fehler-­‐Erkennung  -­‐  Ergibt  ungenaue  Spezifika@on  -­‐  Sehr  abhängig  vom  Moderator  -­‐  Nicht  weiter  nutzbar  -­‐  Begrenzter  Nutzen  für  Usability  Tests  -­‐  Naviga@on  &  Fluß  begrenzt  -­‐  Ideen  evtl.  technisch  nicht  umsetzbar  

Hi-­‐Fi  +  Mehr/Kompleie  Funk@onalität  +  Voll  interak@v  User  kann  agieren  +  Naviga@on  prütar  +  vollständiger  Test  +  Look  &  Feel  des  Endprodukts  +  Lebende  Spezifika@on  +  Marke@ng  &  Sales  Tool  -­‐  Teuer,  Aufwendig  -­‐  Ineffizient  für  Proof-­‐of-­‐concept  und  

Requirements  Analyse  -­‐  Verleitet  dazu,  sich  auf  oberflächliche  

Details  zu  konzentrieren  -­‐  Hemmschwelle  des  Änderns  (nach  soviel  

Aufwand)  -­‐  Erzeugt  oQ  zu  hohe  Erwartungen  -­‐  Ein  einziger  Bug  stoppt  Tests  

VO7-Prototyp1

Beispiele

 Mock-­‐up  mit  Video    PPT  

Video 1

Video 2

SUCHE BIETE

OK√

SUCHE BIETE

SUCHE BIETE

SUCHE BIETE

ADI DEMILCHANOV Tür 13

Experience based Prototyping

  Sonderform,  aber  wich@g  für  Interac@on  Design  

  Erfahrung  und  Vorstellung  aus  erster  Hand  gewinnen,  durch  ak@ven  Umgang  mit  Prototypen  

  Erfahrung  selbst  von  simplen  Produkten  entsteht  nicht  im  Vakuum,  sondern  in  dynamischer  Wechselwirkung  mit  Umgebung  

  Erfahrung/Erleben  von  Look  &  Feel  sowie  Kontext      Ak@ve  Teilhabe  (kein  bloßes  Betrachten)  

  Wozu:    Verstehen  vorhandener  User-­‐Erfahrung  und  Kontexte    Erkunden  und  Evaluieren  von  Design  Ideen    Designideen  kommunizieren  

VO7-Prototyp1

Experience based Prototyping

  VorstellungskraQ  und  Ersatzobjekte,  um  Aspekte  einer  Erfahrung  zu  re-­‐kreieren  

  Produktdesign:    Internet  enabled  Herz-­‐Telemetrie-­‐  System  

  Wie  ist  es,  wenn  man  nicht  weiß,  wann  ein  Herzschriimacher-­‐Schock  kommt?  

  Ersetzt  nicht  den  Kontakt  mit  echten  Pa@enten/Usern  !!!  

VO7-Prototyp1

Kompromisse beim Prototyping

  Kompromisse:    Was  repräsen@ere  ich,  wovon  abstrahiere  ich?    Wo  unterscheiden  sich  Funk@on/Verhalten  ?    Antwortzeiten?  Skizzierte  Icons?    Geringe  Funk@onalität?  

  2  typische  Kompromisse:    ‘Horizontal’:  breite  Spanne  an  Funk@onen,  ohne  ins  Detail  zu  gehen  

(breit)    ‘Ver(cal’:  viel  Detail  für  wenige  (ausgewählte)  Funk@onen  (@ef)  

  Welche  Schriie/Aufgaben  sind  typisch,  werden  oQ  gemacht  ?    Je  vollständiger  Prototyp,  umso  sicherer  kann  getestet  

werden,  ob  alles  zusammen  paßt  

VO7-Prototyp1

Prototypen Messgrößen

  Breite:  Prozent  der  Gesamt  Produkyunk@onalität    Linearer  Zusammenhang  zw.  Breite  &  Aufwand  der  Erstellung  

  Tiefe:  Detaillevel  implemen@ert      (inklusive  z.B.  Datenbasis),      Robustheit,      Vollständigkeit,      Bes@mmt  beim  Design  Test  das  Ausmaß  möglichen  Explorierens  

  Look:  visuelle  Aspekte    Interak(on:    

  Handling  von  In-­‐/Output    Wie  realis@sch  simuliert    Zeitverhalten  

VO7-Prototyp1

Vergleich für E-Commerce Webseite mit dem Ziel: Design-Testing   Papier  Prototype  

  Look:  Niedrig-­‐Miiel  

  Interak@on:  Niedrig      (Achtung:  interak0v,  aber  anders!)  

  Tiefe:  Miiel-­‐hoch    Ad-­‐hoc  anpaßbar  

  Folienshow    Look:  Hoch    Interak@on:  Niedrig  (linear)    Tiefe:  Niedrig-­‐Miiel  

  Working  Prototype    Look:  Miiel-­‐Hoch  

  Interak@on:  Miiel-­‐Hoch    Tiefe:  Niedrig  -­‐  Miiel  

VO7-Prototyp1

Ideen kommunizieren und evaluieren

Ziel hier: Vision vermitteln Working Prototype (Funktionalität, Zeitverhalten)

„Appearance Model“ (für Form)

VO7-Prototyp1

Zur Implementierung

  Den  Prototypen  nehmen  und  daraus  das  ganze  System  entwickeln  (oder  vom  Prototypen  lernen…)  

  Qualität:  Usability  (klar),  Verläßlichkeit,  Robustheit,  Wartbarkeit,  Por@erbarkeit,  Effizienz,  Erweiterbarkeit,  etc  

  Evolu@onäres  Prototyping      Achtung:  Fehler  ziehen  sich  durch!  

  ‘Throw-­‐away’  Prototyping    Always  throw  away  the  first  /  second  one  …  

VO7-Prototyp1

Andere Arten des Prototypings: Videos-Theater-Improvisation-Designspiele

VO7-Prototyp1

Quellen …

  Folien beruhen auf Lisa Ehrenstrasser, Dr. Eva Hornecker

VO7-Prototyp1

Infos & PDFs Download auf…

  http://www.media.tuwien.ac.at/l.ehrenstrasser/interaktiondesign10.html

über Tuwis über Institut Seite (Personen)

VO7-Prototyp1

Nächste VO…

  Mittwoch 12. Mai ´08   Es fallen aus: 2.Juni; 23.Juni;

VO7-Prototyp1