Storyboarding Tutorial

2.404 Aufrufe

Veröffentlicht am

Storyboards werden im Usability Engineering verwendet um Ideen und Konzepte für Produkte anschaulich als illustrierte Geschichte darzustellen. Sie zeigen die Interaktion zwischen dem Benutzer und dem System in einem realistischen Anwendungsfall. Sie dienen zur Kommunikation mit Stakeholdern und um Feedback von Benutzern einzuholen. Dieses Storyboarding Tutorial kombiniert theoretische Grundlagen mit Beispielen aus der Praxis und einem Hands-on Teil in dem die Teilnehmer in Kleingruppen ein Storyboard erstellen. Die Teilnehmer wissen nach dem Tutorial was Storyboards sind und wie Sie diese einsetzen und erstellen können. Sie haben ein photo-basiertes narratives Storyboard erstellt und dadurch eine Methode kennengelernt mit der auch ohne spezielle Zeichenfähigkeiten aussagekräftige Storyboards entstehen.
Autorin ist Stephanie Föhrenbach - Kontakt über Twitter:@sfoehrenbach oder über Xing.

Veröffentlicht in: Technologie
0 Kommentare
3 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.404
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
23
Aktionen
Geteilt
0
Downloads
30
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Ein Schritt zurück
  • Storyboarding Tutorial

    1. 1. Storyboarding Tutorial Mensch und Computer 2013 Stephanie Föhrenbach Folie 1 8. September 2013 Stephanie Föhrenbach © Zühlke 2013
    2. 2. 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
    3. 3. Wer hat‘s erfunden? Bildquelle: http://creativethinking.net/articles/2011/08/29/walt-disney%E2%80%99s-creative-thinking-technique/ Folie 3 © Zühlke 2013
    4. 4. 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
    5. 5. Storyboard = Kommunikation! 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 Storyboards | Stephanie Föhrenbach 8. September 2013 Folie 5 © Zühlke 2013
    6. 6. 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
    7. 7. Was gehört in eine Geschichte? 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? Storyboards | Stephanie Föhrenbach 8. September 2013 Folie 7 © Zühlke 2013
    8. 8. Zusammenfassung
    9. 9. Arten von Storyboards Quelle Abbildung: Greenberg et al. 2012 „Narratives Storyboard“ „Storyboard“ „UI Storyboard“
    10. 10. Fokus Kontext Zweck Produktidee, Abläufe, Benutzungserlebnis. Passt es zum Anwendungskontext? Quelle Abbildung: Greenberg et al. 2012 Projektverlauf User Interface User Interface spezifizieren. Wie sieht die Lösung im Detail aus?
    11. 11. Arten von Storyboards Quelle Abbildung: Greenberg et al. 2012 „Narratives Storyboard“ „Storyboard“ „UI Storyboard“
    12. 12. 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
    13. 13. Beispiele Navigationskarten Storyboards | Stephanie Föhrenbach 8. September 2013 Folie 13 © Zühlke 2013
    14. 14. Arten von Storyboards Quelle Abbildung: Greenberg et al. 2012 „Narratives Storyboard“ „Storyboard“ „UI Storyboard“
    15. 15. Wie kommen wir zu guten Storyboards? 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 Storyboards | Stephanie Föhrenbach 8. September 2013 Folie 15 © Zühlke 2013
    16. 16. Der Kern von Usability Engineering = Etablieren einer Feedbackschleife zwischen Unternehmen / Entwicklungsteam und Benutzern Storyboard als ein Mittel dass für die Feedbackschleife verwendet werden kann. (Storyboard = Kommunikation)
    17. 17. Darstellungsform & Erstellungstechniken Photos Sketches Projektteam spielt Abläufe durch und erstellt Photos Abbildungen werden gezeichnet Optional: Ergänzung durch Photos aus Beobachtungen) „One man show“ möglich Erkennbare - keine schönen - Abbildungen Kreativität beim Materialeinsatz Beim Ausprobieren fallen bereits erste Unstimmigkeiten auf Storyboards | Stephanie Föhrenbach 8. September 2013 Folie 17 © Zühlke 2013
    18. 18. Photos für das Storyboard Kreativität beim Materialeinsatz Storyboards | Stephanie Föhrenbach 8. September 2013 Folie 18 © Zühlke 2013
    19. 19. Hilfreiche Kameraeinstellungen (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) Quelle schwarz/weiss Abbildungen: Greenberg et al. 2012 © Zühlke 2013
    20. 20. Arten von Storyboards Quelle Abbildung: Greenberg et al. 2012 „Narratives Storyboard“ „Storyboard“ „UI Storyboard“
    21. 21. 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?
    22. 22. Das „narrative“ Storyboard • 1 Konzeptidee • 1 Benutzungssituation • 5 Bilder Quelle Abbildung: S. Greenberg, S. Carpendale, N. Marquardt & B. Buxton 2012, Sketching User Experiences The Workbook
    23. 23. Aufbau des Storyboards 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? Storyboards | Stephanie Föhrenbach 8. September 2013 Folie 23 © Zühlke 2013
    24. 24. „Beendet die Diktatur beim Fernsehschauen“ Die demokratische Fernbedienung Folie 24 8. September 2013 Stephanie Föhrenbach © Zühlke 2013
    25. 25. 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 © Zühlke 2013
    26. 26. Mehr davon? Vernetzen Sie sich mit mir:

    ×