Embed Size (px)
DESCRIPTION
Meine Präsentation vom World Usability Day 2013.
Citation preview
Cross-Device PrototypingMit dem richtigen Ansatz zu den wichtigen Antworten
Johannes Baeck | usability.de @jbaeck
World Usability Day Hannover14. November 2013
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?
Ist der Prozess auf kleinen Bildschirmen noch verständlich?
Verstehen Nutzer die Gestensteuerung?
Scott Klemmer, Associate Professor UC San Diego
„ A prototype is a question rendered as an artifact.
aus https://www.coursera.org/course/hci
Eine Frage der Fidelity.
Visu
elle
Ähnli
chke
it zu
m E
ndpr
oduk
t (Fid
elity
)
Funktionale Ähnlichkeit zum Endprodukt (Fidelity)
Aufwan
d
Design-Layout
Skizze
Wireframe
Endprodukt
http://boxesandarrows.com/integrating-prototyping-into-your-design-process/
Bill Buxton
„ There is no such thing as high or low fidelity, only appropriate fidelity.
http://www.billbuxton.com/
Lo-Vi-FiPapierskizzen
Visu
elle
Ähnli
chke
it zu
m E
ndpr
oduk
t (Fid
elity
)
Funktionale Ähnlichkeit zum Endprodukt (Fidelity)
Lo-Vi-FiPapierskizzen
Lo-Vi-FiPapierskizzen
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
Visu
elle
Ähnli
chke
it zu
m E
ndpr
oduk
t (Fid
elity
)
Funktionale Ähnlichkeit zum Endprodukt (Fidelity)
Von der statischen Skizze effizient zum interaktiven Prototypen auf dem Endgerät.
Mid-Vi-Fi Wireframes
http://www.flickr.com/photos/doos/4689874175/ von Rob Enslin
Visu
elle
Ähnli
chke
it zu
m E
ndpr
oduk
t (Fid
elity
)
Funktionale Ähnlichkeit zum Endprodukt (Fidelity)
Mid-Vi-Fi Wireframes
http://www.flickr.com/photos/doos/4689874175/ von Rob Enslin
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?
Introducing… Responsive Wireframes
http://www.thismanslife.co.uk/projects/lab/responsivewireframes/
Visu
elle
Ähnli
chke
it zu
m E
ndpr
oduk
t (Fid
elity
)
Funktionale Ähnlichkeit zum Endprodukt (Fidelity)
Von der statischen zur dynamischen Definition der Struktur im Code.
Hi-Vi-Fi Design-Layouts
https://play.google.com/store/apps/details?id=com.facebook.home
Visu
elle
Ähnli
chke
it zu
m E
ndpr
oduk
t (Fid
elity
)
Funktionale Ähnlichkeit zum Endprodukt (Fidelity)
Hi-Vi-FiDesign-Layouts
Hi-Vi-FiDesign-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
Julie Zhuo, Product design director | Facebook
„ You don’t design something like Facebook Home in Photoshop.
https://medium.com/the-year-of-the-looking-glass/af182add5a2f
Beispiel: Facebook Home
http://www.youtube.com/watch?v=GGAtBvKsJAI
Visu
elle
Ähnli
chke
it zu
m E
ndpr
oduk
t (Fid
elity
)
Funktionale Ähnlichkeit zum Endprodukt (Fidelity)
Vom statischen Design-Layout, zum realistischen Erlebnis auf dem Endgerät.
HP Baxxter, Scooter
„ The Question Is What Is The Question.
http://www.youtube.com/watch?v=xwQw6_X9hPk
Welcher Ansatz und welches Werkzeug machen im aktuellen Kontext Sinn?
Visu
elle
Ähnli
chke
it zu
m E
ndpr
oduk
t (Fid
elity
)
Funktionale Ähnlichkeit zum Endprodukt (Fidelity)
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?
Quellen
• Brad Frost: This is the Webhttp://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-Kurshttps://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/
• AppSeedhttp://www.kickstarter.com/projects/appseed/appseed-turn-sketches-into-functioning-prototypes
• Responsive Wireframes http://www.thismanslife.co.uk/projects/lab/responsivewireframes/
• Jetstraphttps://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 Composerhttp://www.youtube.com/watch?v=GGAtBvKsJAI
• Framer http://www.framerjs.com/
