Warum es so schwer ist die richtigen Prototypen zu bauen Unser Prototyping-Repertoire wird immer größer — kontinuierlich werden neue Tools entwickelt, um effizient, integriert und multimodal Produktideen erfahrbar zu machen. Leider hilft uns kein Tool bei der Entwicklung einer sinnvollen Prototyping-Strategie. Wie bauen wir den oder die richtigen Prototypen für den aktuellen Projektkontext, um unsere Fragen zu beantworten, unsere Ziele zu erreichen und unsere Zielgruppen zu überzeugen? Vortrag von Johannes Baeck auf der IA Konferenz 2018

1. Warum es so schwer ist, die richtigen Prototypen zu bauen.

2. Wo ist überhaupt
das Problem?
!"#$%&"'"#()"*+),!-.#+/0!

3. Prototypr Toolbox

4. lobe.ai

5. Trotzdem stecken wir immer
wieder in einem Dilemma
!"#$%&'()*

6. Vorlage für die
Entwicklung
Testgegenstand
für User Research
ODER
JOBS

7. Vorlage für die
Entwicklung
Testgegenstand
für User Research
ODER
UI Animations auf
Screen-Ebene
Kritische Stellen in
der User Journey
ODER
FOKUS

8. ie
and
earch
ODER
UI Animations auf
Screen-Ebene
Kritische Stellen in
der User Journey
ODER
Axure RP
treu bleiben
InVision Studio
ausprobieren
TOOLS

11. Prototyping Jobs
Wofür brauchen wir den Prototypen?
Prototyping Fokus
Welche Aspekte müssen wir umsetzen?
Prototyping Tools
Wie setzen wir den Prototypen um?

12. PROTOTYPING JOBS
So what do you do,
prototype?

13. Research
Iterate Ideate
Sell
Align
Specify
Tech
Check

14. RESEARCH
Verstehen
Nutzer, dass
man hier…?
ITERATE
Sollten wir
nicht
lieber…?
IDEATE
Was wäre,
wenn wir…?
SELL
Passt das
Produkt in
die
Strategie?
ALIGN
Haben wir ein
gemeinsames
Verständnis
von…?
SPECIFY
Was soll
passieren,
wenn
Nutzer…?
TECH CHECK
Umsetzbar
mit
Framework
XYZ?

15. RESEARCH
Testnutzer
ITERATE
Project
Team
IDEATE
Design
Team
SELL
Manage-
ment
ALIGN
Stakeholder
SPECIFY
Frontend-
Entwickler
TECH CHECK
Backend-
Entwickler

17. CASE STUDY
* Der tatsächliche Unternehmensname würde
einige unserer Kunden verunsichern
Ihr neues Girokonto
Persönliche Daten Anrede
Titel
Vorname
Nachname
Geburtsdatum
Herr Frau
TT.MM.JJJJ

18. Prototypen
Projektverlauf
PROTOTYP #1 PROTOTYP #2

19. Jobs
Projektverlauf
Ideate Sell Tech
CheckIterate
Align
PROTOTYP #1 PROTOTYP #2
Prototypen

20. Jobs
Projektverlauf
Ideate Sell Tech
CheckIterate
Align
Research
• Formular als One Pager oder schrittweise?
• Verstehen Nutzer die Eingaben?
• Ist die Formularvalidierung verständlich?
PROTOTYP #1 PROTOTYP #2
Prototypen

21. Formular kann nur „durchgeklickt” werden
Fehlervalidierung nur Ansatzweise integriert
PROTOTYP #1
Vorname
Nachname
WEITER
Herzlichen Glückwunsch,
Ihr neues Konto wurde erstellt.
WEITER
PROTOTYP #2
Anrede
Titel
Vorname
Nachname
Pflichtfeld. Bitte ausfüllen!
Pflichtfeld. Bitte ausfüllen!
Pflichtfeld. Bitte ausfüllen!
Max Mus
Testszenario nicht durchspielbar
Realistischer Content fehlt!!

22. PROTOTYP #1
Formular kann nur „durchgeklickt” werden
Fehlervalidierung nur Ansatzweise integriert
Vorname
Nachname
WEITER
Herzlichen Glückwunsch,
Ihr neues Konto wurde erstellt.
!
PROTOTYP #2
Anrede
Titel
Vorname
Nachname
Pflichtfeld. Bitte ausfüllen!
Pflichtfeld. Bitte ausfüllen!
Pflichtfeld. Bitte ausfüllen!
Max Mus
Testszenario nicht durchspielbar
Realistischer Content fehlt!
Formular kann nur „durchgeklickt” werden
Fehlervalidierung nur Ansatzweise integriert
Vorname
Nachname
WEITER
Herzlichen Glückwunsch,
Ihr neues Konto wurde erstellt.
WEITER
!
Anrede
Titel
Vorname
Nachname
Pflichtfeld. Bitte ausfüllen!
Pflichtfeld. Bitte ausfüllen!
Pflichtfeld. Bitte ausfüllen!
Max MusMax Mus
Testszenario nicht durchspielbar
Realistischer Content fehlt!
Research-
ready?
Research-
ready?

23. Wie vermeiden wir
diese Situation?
!"##$%&'() *+

24. Research
Iterate Ideate
Sell
Align
Specify
Tech
Check

25. Design-/Projekt-Team/Testnutzer Management/Stakeholder Entwickler
Iterate
Ideate
Research Sell Align
Specify
Tech
Check
Prototyp #2
Prototyp#1
Prototyp #2
Prototyp #2
Prototyp #1
Prototyp #3
Prototyp #4

26. PROTOTYPING FOKUS
What‘s the minimal
viable prototype?

27. EndproduktPrototyp
Fidelity

28. Fokus Visual Design
und Mikrointeraktion

29. I’ve got 99 problems, but a
0.3 Sec Ease Out Animation ain’t one

30. User
Journey
Visual
Design
Physische
Form
Mikro-
interaktion
Intelligenz
Inhalt &
Daten
Nutzungs-
kontext
Technische
Basis
Persönlich-
keit

31. CASE STUDY
* Der tatsächliche Unternehmensname würde
einige unserer Kunden verunsichern

32. AI Content Mockups

33. User
Journey
Visual
Design
Physische
Form
Mikro-
interaktion
Intelligenz
Inhalt &
Daten
Nutzungs-
kontext
Technische
Basis
Persönlich-
keit

34. Voice Prototyping
mit Sayspring

35. User
Journey
Visual
Design
Physische
Form
Mikro-
interaktion
Intelligenz
Inhalt &
Daten
Nutzungs-
kontext
Technische
Basis
Persönlich-
keit

36. Wer soll all diese
Prototypen bauen?
!"##$%&'() *+

37. Produktiver Prototyp
Fokus: Kritische, komplexe
Funktionalitäten
Konzept-Prototyp
Fokus: Übergreifende
User Journey
Entwickler Designer Nutzer

38. PROTOTYPING TOOLS
One tool to
rule them all?

39. Abraham Maslow
Psychologist

41. Sketch
Ist das
Prototyping?

42. Eine interaktive
Simulation
Alles was eine Idee
greifbar macht
ODER

43. Experience Prototypes

44. Tools for
Production
Tools for
Exploration
PLUS

45. Prototyping Jobs
Wofür brauchen wir den Prototypen?
Prototyping Fokus
Welche Aspekte müssen wir umsetzen?
Prototyping Tools
Wie setzen wir den Prototypen um?

46. TAKEAWAYS
Finden wir einen Ausweg aus
dem Prototypen-Dilemma?

51. IAs als Wegweiser
beim Prototyping
!"#$%&!'()#'*+,)-.$/+01-

52. usability.de GmbH & Co. KG
Ihmeauen
Ricklinger Straße 5B
30449 Hannover
Germany
www.usability.de
+49 (0)511 360 50 70
info@usability.deinfo@usability.de

53. SEITE 1 VON 3 Obama GIF
mariskahargtay.tumblr.com/post/78283008524
Prototypr Toolbox
www.prototypr.io/toolbox
Lobe.ai
www.lobe.ai
Tick Tock GIF
https://www.reddit.com/r/gifs/comments/3sh5u6/ti
ck_tock_clock/
Experience Prototypes
https://chetmhcid.wordpress.com/2014/01/

54. SEITE 2 VON 3 Obama/Trudeau GIF
gawker.com/justin-trudeau-finally-fucked-up-
1782834237
Will Ferrell GIF
www.reddit.com/r/reactiongifs/comments/21e10z/
mrw_my_friend_tells_me_that_my_crush_texted_me
Jay-Z GIF
jiggaman4.tumblr.com/post/35175005957/because
-im-young-and-im-black-and-my-hat-is-real
Sayspring
www.sayspring.com

55. SEITE 3 VON 3 Shrug Compilation GIF
www.reddit.com/r/funny/comments/3iyyle/how_do_
i_get_to_the_front_pa/
Sketch
www.sketchapp.com
Experience Prototypes
chetmhcid.wordpress.com/2014/01
Polar Bear GIF
evil-penguins.tumblr.com/post/
64178927503/evil-penguins-armageddon