Download - Storyboarding Tutorial
© Zühlke 2013
Stephanie Föhrenbach
8. September 2013 Folie 1
Storyboarding Tutorial Mensch und Computer 2013
Stephanie Föhrenbach
© Zühlke 2013
Ein Storyboard
Erzählt eine bebilderte Geschichte mit einem linearen zeitlichen Verlauf über die Verwendung eines Systems im Kontext aus Sicht des Benutzers
Zeigt:
• Handelnde (Benutzer),
• das Systems,
• die Umgebung,
• ein realistisches konkretes Anwendungsszenario
Storyboards | Stephanie Föhrenbach 8. September 2013 Folie 2
© Zühlke 2013
Wer hat‘s erfunden?
Folie 3 Bildquelle: http://creativethinking.net/articles/2011/08/29/walt-disney%E2%80%99s-creative-thinking-technique/
© Zühlke 2013
Exkurs: Einsatzbereich Film
Film Storyboards (Beispiel Taxi Driver 1976, Martin Scorsese)
• “… a large comic of the film or some section of the film produced beforehand to help film directors, cinematographers and television commercial advertising clients visualize the scenes and find potential problems before they occur.” (Wikipedia)
Beispiel von http://cinemastyles.blogspot.com/2008/02/storyboarding-taxi-driver.html
© Zühlke 2013
Mit Benutzern,
• über Ihre künftige Arbeit mit dem System
Mit Vorgesetzten,
• über die künftigen Prozesse
Mit Software Architekten,
• über architekturrelevante Anforderungen
Mit Software Entwicklern,
• über Einflüsse auf das System
Storyboard = Kommunikation!
Storyboards | Stephanie Föhrenbach 8. September 2013 Folie 5
© Zühlke 2013
Verwendung
In
• Workshops
• Usability Evaluationen
• Informations- und Einführungsveranstaltungen
• Schulungen und Benutzerdokumentation
Als
• Mittel zur Kommunikation des Arbeitsumfeldes
• Diskussionsgrundlage für künftige Abläufe
• Mittel zur Kommunikation von Anforderungen
• Grundlage für Bewertung und Priorisierung
• Anschauliche Einführung
Storyboards | Stephanie Föhrenbach 8. September 2013 Folie 6
© Zühlke 2013
Wer
• interessante und realistische Charaktere
Was
• Eine realistische Handlung an einem konkreten Beispiel
Wann und Wo
• zeitliche und örtliche Einordnung
Warum
• Warum handeln die Charaktere in der Geschichte so wie sie das tun?
Was gehört in eine Geschichte?
Storyboards | Stephanie Föhrenbach 8. September 2013 Folie 7
Zusammenfassung
Arten von Storyboards
„Narratives Storyboard“
„Storyboard“
„UI Storyboard“
Quelle Abbildung: Greenberg et al. 2012
Quelle Abbildung: Greenberg et al. 2012
Kontext
User Interface
Produktidee, Abläufe, Benutzungserlebnis.
Passt es zum Anwendungskontext?
User Interface spezifizieren. Wie sieht die Lösung im Detail aus?
Fokus Zweck
Projektverlauf
Arten von Storyboards
„Narratives Storyboard“
„Storyboard“
„UI Storyboard“
Quelle Abbildung: Greenberg et al. 2012
© Zühlke 2013
Probleme
Wartung und Änderung der Storyboards kann je nach Tool und Anzahl der Screens sehr aufwändig werden. Möglichst einfache Änderungen bei der Wahl der Tools berücksichtigen z.B. Wireframes und Text innerhalb eines Tools (z.B. Balsamiq) nicht in zwei Tools (Visio und Word).
Bei komplexen User Interfaces mit multiplen Storyboards
• Überblick über das Gesamt-GUI geht verloren
Lösungsansätze für besseren Überblick
• Ablaufübergreifende Navigationskarte des UIs erstellen
• Storyboards für ausgewählte Abläufe
Storyboards | Stephanie Föhrenbach 8. September 2013 Folie 12
© Zühlke 2013
Beispiele Navigationskarten
Storyboards | Stephanie Föhrenbach 8. September 2013 Folie 13
Quelle Abbildung: Greenberg et al. 2012
Arten von Storyboards
„Narratives Storyboard“
„Storyboard“
„UI Storyboard“
© Zühlke 2013
Der Weg zum Storyboard geht über Szenarien
Personen machen die Tätigkeit heute schon
• 1. Tätigkeiten heute im Detail aufnehmen (z.B. Contextual Inquiry Szenarien)
• 2. Breakdowns und gute Lösungen markieren
• 3. Eigenschaften und Ziel(e) der Persona definieren
• 4. Interessanten Lösungsweg aufzeigen (Soll-Szenarien) – erfüllt die Ziele der Persona – berücksichtigt die Eigenschaften der Persona – verwendet heutige Handlungsstrategien (1,2) – verbessert Breakdowns (2)
• 5. Storyboard erstellen
• 6. Feedback einholen
Die Tätigkeit existiert noch nicht
• Einsetzen bei 3
Wie kommen wir zu guten Storyboards?
Storyboards | Stephanie Föhrenbach 8. September 2013 Folie 15
= Etablieren einer Feedbackschleife zwischen Unternehmen / Entwicklungsteam und Benutzern Storyboard als ein Mittel dass für die Feedbackschleife verwendet werden kann. (Storyboard = Kommunikation)
Der Kern von Usability Engineering
© Zühlke 2013
Photos
Projektteam spielt Abläufe durch und erstellt Photos
Optional: Ergänzung durch Photos aus Beobachtungen)
Kreativität beim Materialeinsatz
Beim Ausprobieren fallen bereits erste Unstimmigkeiten auf
Darstellungsform & Erstellungstechniken
Storyboards | Stephanie Föhrenbach
Sketches
Abbildungen werden gezeichnet
„One man show“ möglich
Erkennbare - keine schönen - Abbildungen
8. September 2013 Folie 17
© Zühlke 2013 Storyboards | Stephanie Föhrenbach
Photos für das Storyboard Kreativität beim Materialeinsatz
8. September 2013 Folie 18
© Zühlke 2013
(Extreme) long shot
Zeigt das Setting (wo, wer ist beteiligt)
Z.B. für „Establishing shot“
Medium range shot
Zeit den Benutzer (z.B. bei der Verwendung des Systems)
Over the shoulder shot
Über die Schulter des Benutzers schauen
Point of view shot
Aus der Sicht des Benutzers (z.B. Systemverwendung)
Close-up
Detailaufnahme (z.B. vom System)
Hilfreiche Kameraeinstellungen
Quelle schwarz/weiss Abbildungen: Greenberg et al. 2012
Arten von Storyboards
„Narratives Storyboard“
„Storyboard“
„UI Storyboard“
Quelle Abbildung: Greenberg et al. 2012
Wie viele verschiedene Anwendungsmöglichkeiten werden gezeigt?
Achtet darauf:
• Wer benutzt es?
• Was ist der Grund für die Benutzung?
• In welcher Situation wird es benutzt?
• Wie wird es verwendet?
• Was ist das Resultat?
Quelle Abbildung: S. Greenberg, S. Carpendale, N. Marquardt & B. Buxton 2012, Sketching User Experiences The Workbook
Das „narrative“ Storyboard
• 1 Konzeptidee
• 1 Benutzungssituation
• 5 Bilder
© Zühlke 2013
5 Bilder (Querformat)
1. Bild
• „Establishing shot“ der das Setting zeigt
• Wo findet es statt? Wer ist beteiligt?
2. – 4. Bild
• Benutzer bei der Verwendung des Produkts (z.B. medium range shot, over the shoulder shot)
• Falls notwendig: Details des Produktes (z.B. close-up shot)
5. Bild
• Was ist das Resultat der Effekt der Benutzung?
Aufbau des Storyboards
Storyboards | Stephanie Föhrenbach 8. September 2013 Folie 23
© Zühlke 2013
Stephanie Föhrenbach
„Beendet die Diktatur beim Fernsehschauen“ Die demokratische Fernbedienung
8. September 2013 Folie 24
© Zühlke 2013
Quellen & weiterführende Literatur
S. Greenberg, S. Carpendale, N. Marquardt & B. Buxton 2012, Sketching User Experiences The Workbook
Richter, M.; Flückiger, M., Usability Engineering kompakt: Benutzbare Produkte gezielt entwickeln
Sappers, P.J., Psaman, G., Handout of CHI 2013 Course: Storyboarding for Designers and Design Researcher
Storyboards | Stephanie Föhrenbach 8. September 2013 Folie 25
Mehr davon? Vernetzen Sie sich mit mir: