Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
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