In diesem Vortrag gebe ich einen groben Überblick über Anforderungsquellen, sowie Arten, Eigenschaften und Vor- & Nachteile von verschiedenen Methoden und Tools zum Wireframing/Prototyping. Gehalten wurde dieser Vortrag am World Usability Day 2013 in Stuttgart.

1. Bassier, Bergmann & Kindler GmbH
Welche Prototyping-Methode passt zu
meinen Anforderungen?
1

2. 2

3. Relevanz der Frage
„Welche PrototypingMethode passt zu
meinen
Anforderungen?“
3

4. Woher kommen
die Anforderungen?
Welche Eigenschaften
haben die Methoden und
Tools?
4
Welche Arten von Methoden
und Tools gibt es?
Welche Vor- und Nachteile
haben die Methoden und
Tools in der Praxis?

5. Woher kommen
die Anforderungen?
5

6. Anforderungen
Woher kommen die Anforderungen?
Kunde
Dienstleister
Agentur
Projekt
6

7. Anforderungen
Woher kommen die Anforderungen?
Dienstleister
Agentur
Kunde = Nutzer der Deliverables
Kunde
Projekt
7
Kunde ≠ Nutzer des Endprodukts

8. Anforderungen
Woher kommen die Anforderungen?
Agentur
Kunde
Dienstleister
Prozesse
Weitere
Spezifika
Projekt
8

9. Anforderungen
Woher kommen die Anforderungen?
Wasserfall-Prozess
vs.
Agiler Prozess
Agentur
Prozesse
Kunde
Dienstleister
Dokumentation,
Übergaben …
Weitere
Spezifika
Projekt
9
Budget, Lizenzen …
Hard- & Software,
Betriebssysteme,
Verbindungen …
Ansprechpartner,
Stakeholder …

10. Anforderungen
Woher kommen die Anforderungen?
Agentur
Kunde
Dienstleister
Prozesse
Weitere
Spezifika
Projekt
10

11. Anforderungen
Woher kommen die Anforderungen?
Agentur
Kunde
Dienstleister
Prozesse
Weitere
Spezifika
Projekt
11
****
***
**
*
Priorisierte
Anforderungen

12. Anforderungen
Woher kommen die Anforderungen?
****
***
**
*
12
PrototypingMethode

13. Welche Arten von
Methoden und Tools
gibt es?
13

14. Arten von Methoden und Tools
Beschreibungen und abstrakte Daten
Content-Matrix
Sitemap
Mindmap
Text-Spezifikation
14
Bildquellen: Eigene Entwürfe

15. Arten von Methoden und Tools
Statische Prototypen
Paper Prototype
Designscreen
Skizzen
15
Bildquellen:
http://wireframes.linowski.ca/2011/08/3-ideas-for-capturing-feedback/
http://dribbble.com/shots/782399-Blueprint-Wireframe

16. Arten von Methoden und Tools
Dynamische Prototypen (analog)
Papier Origami
Papier Module
16
Bildquellen:
http://wireframes.linowski.ca/2009/04/engaging-paper-wireframe/
http://www.fastcodesign.com/1669513/using-origami-to-mock-up-ingenious-gestural-interfaces

17. Arten von Methoden und Tools
Dynamische Prototypen (digital)
Frontend-Programmierung
Klickdummies
17
Bildquellen:
Eigene Entwürfe
http://blocks.eightshapes.com/about/

18. Arten von Methoden und Tools
Mischformen
Stop-Frame
Animation
Video
Post it
18
Bildquellen: http://wireframes.linowski.ca/2009/12/rigged-paper-prototype-animations/

19. Welche
Eigenschaften haben
die Methoden und
Tools?
19

20. Eigenschaften von Methoden und Tools
Form
Analog
Wireframe
Digital
Statisch
Screendesign
Dynamisch
Wegwerf-Produkt End-Produkt
Überblick
Platzhalter
Realer Content
Low Fidelity
Form
Funktion
Beschränkt
20
Bildquellen:
Detail
Erweiterbar
High Fidelity

21. Eigenschaften von Methoden und Tools
Abstimmung und Technik
Fremde Server
Eigene Server
Intern
Extern
Steile Lernkurve Flache Lernkurve
Keine Doku
Dokumentiert
Keine Bearbeit.
Spezifische OS
Keine Notizen
Alle OS
Notiz-Funktion
Kein Feedback
21
Bildquellen:
Bearbeitbar
Feedback-Funkt.

22. Welche Vor- und
Nachteile haben die
Methoden und Tools
in der Praxis?
22

23. Vor- und Nachteile von Methoden und Tools
#1: Skribbles und Paper Prototype
23

24. Vor- und Nachteile von Methoden und Tools
#1: Skribbles und Paper Prototype
VORTEILE
NACHTEILE
― Flache bis mittlere Lernkurve
― Form frei wählbar
― Statisch oder modular
― Keine digitale Dokumentation
― Änderungen bei statischen
― Geeignet für Tests in der
Research-Phase
― Geeignet für Usability Tests
24
Skribbles schwierig
― Wegwerf-Produkt

25. Vor- und Nachteile von Methoden und Tools
#2: PowerPoint
25

26. Vor- und Nachteile von Methoden und Tools
#2: PowerPoint
VORTEILE
NACHTEILE
― Flache Lernkurve
― Weit verbreitetes Tool
― Viele Plugins für Wireframe-
― Begrenzung auf festes Format
― Änderungen zeitraubend trotz
Elemente vorhanden
― Mischung der Inhalten möglich
― Statisch, bedingt dynamisch
― Format zum Ausdrucken
geeignet
26
Masterfolien
― Darstellung von Interaktionen
und Zuständen schwierig
― Keine reale Experience im
Browser
― Wegwerf-Produkt

27. Vor- und Nachteile von Methoden und Tools
#3: Axure
27

28. Vor- und Nachteile von Methoden und Tools
#3: Axure
VORTEILE
NACHTEILE
― Widget-Libraries verfügbar
― Sehr skalierbar (statisch,
― Hohe Lizenzkosten
― Steile Lernkurve
― Sehr variabler Aufbau möglich
dynamisch, modular, …)
― Änderungen leicht durch
Master und Styles
― Denkweise entwicklerorientiert
― Notiz-, Feedback- und
Sharing-Funktion vorhanden
― Reale Experience im Browser
28
― HTML/CSS nur bedingt
weiterverwendbar
― Reale Umsetzbarkeit trotz
HTML/CSS Output nicht
gewährleistet

29. Vor- und Nachteile von Methoden und Tools
#4: Programmierung
29

30. Vor- und Nachteile von Methoden und Tools
#4: Programmierung
VORTEILE
NACHTEILE
― Viele Code-Snippets und
― Steile Lernkurve
― Programmierkenntnisse bei
Plugins vorhanden
― Direkte Prüfung der
Umsetzbarkeit
― Kein Wegwerf-Produkt
Konzeptern und Designern
notwendig
― Übertragungsleistung von
Code zum grafischen UI
notwendig
― Im Voraus Strategie- und
Konzeptionsphase für
Gesamtkonzept notwendig
30

31. Für verschiedene
Anforderungen sind
unterschiedliche
Methoden ideal.
Man muss von Fall zu Fall
entscheiden.
31

32. Eigenschaften von ausgewählten Methoden und Tools
#1: Skribbles und Paper Prototype
Analog
Spezifische OS
Alle OS
Form
Funktion
Fremde Server
Eigene Server
Statisch
Dynamisch
Steile Lernkurve
Flache
Lernkurve
Low Fidelity
High Fidelity
Keine Bearbeit.
Bearbeitbar
Keine Notizen
Notiz-Funktion
Kein Feedback
FeedbackFunktion
WegwerfProdukt
32
Digital
End-Produkt
Keine Doku
Dokumentiert

33. Eigenschaften von ausgewählten Methoden und Tools
#2: PowerPoint
Analog
Spezifische OS
Alle OS
Form
Funktion
Fremde Server
Eigene Server
Statisch
Dynamisch
Steile Lernkurve
Flache
Lernkurve
Low Fidelity
High Fidelity
Keine Bearbeit.
Bearbeitbar
Keine Notizen
Notiz-Funktion
Kein Feedback
FeedbackFunktion
WegwerfProdukt
33
Digital
End-Produkt
Keine Doku
Dokumentiert

34. Eigenschaften von ausgewählten Methoden und Tools
#3: Axure
Analog
Spezifische OS
Alle OS
Form
Funktion
Fremde Server
Eigene Server
Statisch
Dynamisch
Steile Lernkurve
Flache
Lernkurve
Low Fidelity
High Fidelity
Keine Bearbeit.
Bearbeitbar
Keine Notizen
Notiz-Funktion
Kein Feedback
FeedbackFunktion
WegwerfProdukt
34
Digital
End-Produkt
Keine Doku
Dokumentiert

35. Eigenschaften von ausgewählten Methoden und Tools
#4: Programmierung
Analog
Spezifische OS
Alle OS
Form
Funktion
Fremde Server
Eigene Server
Statisch
Dynamisch
Steile Lernkurve
Flache
Lernkurve
Low Fidelity
High Fidelity
Keine Bearbeit.
Bearbeitbar
Keine Notizen
Notiz-Funktion
Kein Feedback
FeedbackFunktion
WegwerfProdukt
35
Digital
End-Produkt
Keine Doku
Dokumentiert

36. Wo kann ich mich
über Methoden und
Tools informieren?
36

37. Starter-Paket
Hier ein Starter-Paket an Links zum Thema
Prototyping-Methoden und Tools.
― The messy art of UX sketching
― PowerPoint
― Axure
― Wireframing: Tips, Tools, and Techniques Part 1 + Part 2
― Ultimate Guide to Website Wireframing
― Wireframing Techniques for a Peaceful Development Process
― 35 Excellent Wireframing Resources
― Alphabetical list of GUI prototyping tools
― 10 Wireframing and Prototyping Tools for 2013
― Designer’s Toolkit: Road Testing Prototype Tools
― 22 Good Prototype and Wireframe Tools for Mobile and Web Design
― Die besten Prototyping-Tools für Websites und Apps
37

38. Evolution never stops
Bassier, Bergmann & Kindler
Customer Experience Specialists Ludwigsburg GmbH
Lena Körpe
Senior Concept Developer
Rheinlandstr. 11, D-71636 Ludwigsburg
T +49 (0) 7141 643 86 - 42
F +49 (0) 7141 643 86 - 66
Lena.Koerpe@bb-k.com
www.bb-k.com
38
Alle Angaben basieren auf dem derzeitigen Kenntnisstand. Änderungen vorbehalten. Dieses Dokument
der Bassier, Bergmann & Kindler Customer Experience Specialists Ludwigsburg GmbH ist ausschließlich
für den Adressaten bzw. Auftraggeber bestimmt. Es bleibt bis zur einer ausdrücklichen Übertragung von
Nutzungsrechten Eigentum der Agentur. Jede Bearbeitung, Verwertung, Vervielfältigung und/oder
gewerbsmäßige Verbreitung des Werkes ist nur mit Einverständnis der Agentur zulässig.
All content is based on the current state of communication. Subject to change. This document of Bassier,
Bergmann & Kindler Customer Experience Specialists Ludwigsburg GmbH is only intended for the client.
It belongs to the agency until its explicit transfer of usage rights. Any adaptation, utilization, copy and/or
professional spreading has to be approved by the agency.