Cross-Device Prototyping
Mit dem richtigen Ansatz zu den
wichtigen Antworten
World Usability Day Hannover
14. November 2013
Johannes Baeck | usability.de
@jbaeck

http://bradfrostweb.com/wp-content/uploads/2012/03/this-is-the-web.png

http://uxdesign.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/

Neue Fragestellungen ergeben sich.
Funktioniert dieser Ansatz
geräteübergreifend?
Verstehen Nutzer die
Gestensteuerung?
Ist der Prozess auf kleinen
Bildschirmen noch verständlich?

„
A prototype is a question rendered
as an artifact.
Scott Klemmer, Associate Professor UC San Diego
aus https://www.coursera.org/course/hci

Eine Frage der Fidelity.
d
an
fw
Wireframe
Endprodukt
Au
Ähnlichkeit zum Endprodukt (Fidelity)
Visuelle
DesignLayout
Skizze
Funktionale
Ähnlichkeit zum Endprodukt (Fidelity)
http://boxesandarrows.com/integrating-prototyping-into-your-design-process/

„
There is no such thing as high or low
fidelity, only appropriate fidelity.
Bill Buxton
http://www.billbuxton.com/

Lo-Vi-Fi
Papierskizzen

Ähnlichkeit zum Endprodukt (Fidelity)
Visuelle
Lo-Vi-Fi
Papierskizzen
Funktionale
Ähnlichkeit zum Endprodukt (Fidelity)

Lo-Vi-Fi
Papierskizzen
Wie fühlt sich dieser Ansatz
auf dem Endgerät an?

Introducing…
AppSeed
http://www.kickstarter.com/projects/appseed/appseed-turn-sketches-into-functioning-prototypes

Ähnlichkeit zum Endprodukt (Fidelity)
Visuelle
Von der statischen Skizze effizient zum
interaktiven Prototypen auf dem Endgerät.
Funktionale
Ähnlichkeit zum Endprodukt (Fidelity)

Mid-Vi-Fi
Wireframes
http://www.flickr.com/photos/doos/4689874175/ von Rob Enslin

Ähnlichkeit zum Endprodukt (Fidelity)
Visuelle
Mid-Vi-Fi
Wireframes
Funktionale
Ähnlichkeit zum Endprodukt (Fidelity)

Mid-Vi-Fi
Wireframes
https://twitter.com/bokardo/status/304215877509857282
http://www.flickr.com/photos/doos/4689874175/ von Rob Enslin

Mid-Vi-Fi
Wireframes
Funktioniert die Struktur auf
allen wichtigen Endgeräten?
http://www.flickr.com/photos/doos/4689874175/ von Rob Enslin

Introducing…
Responsive Wireframes
http://www.thismanslife.co.uk/projects/lab/responsivewireframes/

Ähnlichkeit zum Endprodukt (Fidelity)
Visuelle
Von der statischen zur dynamischen Definition
der Struktur im Code.
Funktionale
Ähnlichkeit zum Endprodukt (Fidelity)

Hi-Vi-Fi
Design-Layouts
https://play.google.com/store/apps/details?id=com.facebook.home

Ähnlichkeit zum Endprodukt (Fidelity)
Visuelle
Hi-Vi-Fi
Design-Layouts
Funktionale
Ähnlichkeit zum Endprodukt (Fidelity)

Hi-Vi-Fi
Design-Layouts
Sieht es nur gut aus?
Oder fühlt es sich auch gut an?
https://play.google.com/store/apps/details?id=com.facebook.home

„
You don’t design something like
Facebook Home in Photoshop.
Julie Zhuo, Product design director | Facebook
https://medium.com/the-year-of-the-looking-glass/af182add5a2f

Beispiel: Facebook Home
http://www.youtube.com/watch?v=GGAtBvKsJAI

Introducing…
Framer
http://www.framerjs.com/

Ähnlichkeit zum Endprodukt (Fidelity)
Visuelle
Vom statischen Design-Layout, zum realistischen
Erlebnis auf dem Endgerät.
Funktionale
Ähnlichkeit zum Endprodukt (Fidelity)

„
The Question Is What Is The Question.
HP Baxxter, Scooter
http://www.youtube.com/watch?v=xwQw6_X9hPk

Welcher Ansatz und welches Werkzeug machen
im aktuellen Kontext Sinn?
Ähnlichkeit zum Endprodukt (Fidelity)
Visuelle
Was für ein Produkt entwickeln wir?
Was ist entscheidend für die User Experience?
In welcher Projektphase befinden wir uns?
Wie viel Zeit haben wir?
Wer kann den Prototypen erstellen?
Für wen bauen wir den Prototypen?
Funktionale
Ähnlichkeit zum Endprodukt (Fidelity)

Danke!
Mehr dazu
hier @jbaeck
und hier johannesbaeck.com/blog

Quellen
•
Brad Frost: This is the Web
http://bradfrostweb.com/wp-content/uploads/2012/03/this-is-the-web.png
•
Jeff Gothelf: Lean UX
uxdesign.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/
•
Scott Klemmer: Coursera HCI-Kurs
https://www.coursera.org/course/hci
•
Fred Beecher: Integrating prototyping into your design process
http://boxesandarrows.com/integrating-prototyping-into-your-design-process/
•
Bill Buxton: Sketching User Experiences
http://www.billbuxton.com/
•
AppSeed
http://www.kickstarter.com/projects/appseed/appseed-turn-sketches-into-functioning-prototypes
•
Responsive Wireframes
http://www.thismanslife.co.uk/projects/lab/responsivewireframes/
•
Jetstrap
https://jetstrap.com/
•
Go Big by Going Home (über die Entwicklung von Facebook Home)
https://medium.com/the-year-of-the-looking-glass/af182add5a2f
•
Building Facebook with Quartz Composer
http://www.youtube.com/watch?v=GGAtBvKsJAI
•
Framer
http://www.framerjs.com/