Storyboarding Tutorial

© Zühlke 2013

Stephanie Föhrenbach

8. September 2013 Folie 1

Storyboarding Tutorial Mensch und Computer 2013


© 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!


© 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


© 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?


Zusammenfassung

Arten von Storyboards

„Narratives Storyboard“

„Storyboard“

„UI Storyboard“

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



„Storyboard“

„UI Storyboard“


© 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


© Zühlke 2013

Beispiele Navigationskarten





„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?


= 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


© 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



„Storyboard“

„UI Storyboard“


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?

Video/Sumsing Turbo 3000 English Version.mp4

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


© 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


Mehr davon? Vernetzen Sie sich mit mir:

https://twitter.com/sfoehrenbach

https://www.xing.com/profiles/Stephanie_Foehrenbach

Storyboarding Tutorial

Technology

Transcript of Storyboarding Tutorial