cross-device prototyping - mit dem richtigen ansatz zu den wichtigen antworten
DESCRIPTION
Meine Präsentation vom World Usability Day 2013.TRANSCRIPT
![Page 1: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/1.jpg)
Cross-Device PrototypingMit dem richtigen Ansatz zu den wichtigen Antworten
Johannes Baeck | usability.de @jbaeck
World Usability Day Hannover14. November 2013
![Page 2: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/2.jpg)
http://bradfrostweb.com/wp-content/uploads/2012/03/this-is-the-web.png
![Page 3: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/3.jpg)
http://uxdesign.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/
![Page 4: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/4.jpg)
Neue Fragestellungen ergeben sich.
Funktioniert dieser Ansatz geräteübergreifend?
Ist der Prozess auf kleinen Bildschirmen noch verständlich?
Verstehen Nutzer die Gestensteuerung?
![Page 5: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/5.jpg)
Scott Klemmer, Associate Professor UC San Diego
„ A prototype is a question rendered as an artifact.
aus https://www.coursera.org/course/hci
![Page 6: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/6.jpg)
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/
![Page 7: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/7.jpg)
Bill Buxton
„ There is no such thing as high or low fidelity, only appropriate fidelity.
http://www.billbuxton.com/
![Page 8: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/8.jpg)
Lo-Vi-FiPapierskizzen
![Page 9: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/9.jpg)
Visu
elle
Ähnli
chke
it zu
m E
ndpr
oduk
t (Fid
elity
)
Funktionale Ähnlichkeit zum Endprodukt (Fidelity)
Lo-Vi-FiPapierskizzen
![Page 10: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/10.jpg)
Lo-Vi-FiPapierskizzen
Wie fühlt sich dieser Ansatz auf dem Endgerät an?
![Page 11: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/11.jpg)
Introducing… AppSeed
http://www.kickstarter.com/projects/appseed/appseed-turn-sketches-into-functioning-prototypes
![Page 12: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/12.jpg)
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.
![Page 13: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/13.jpg)
Mid-Vi-Fi Wireframes
http://www.flickr.com/photos/doos/4689874175/ von Rob Enslin
![Page 14: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/14.jpg)
Visu
elle
Ähnli
chke
it zu
m E
ndpr
oduk
t (Fid
elity
)
Funktionale Ähnlichkeit zum Endprodukt (Fidelity)
Mid-Vi-Fi Wireframes
![Page 15: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/15.jpg)
http://www.flickr.com/photos/doos/4689874175/ von Rob Enslin
Mid-Vi-Fi Wireframes
https://twitter.com/bokardo/status/304215877509857282
![Page 16: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/16.jpg)
http://www.flickr.com/photos/doos/4689874175/ von Rob Enslin
Mid-Vi-Fi Wireframes
Funktioniert die Struktur auf allen wichtigen Endgeräten?
![Page 17: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/17.jpg)
Introducing… Responsive Wireframes
http://www.thismanslife.co.uk/projects/lab/responsivewireframes/
![Page 18: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/18.jpg)
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.
![Page 19: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/19.jpg)
Hi-Vi-Fi Design-Layouts
https://play.google.com/store/apps/details?id=com.facebook.home
![Page 20: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/20.jpg)
Visu
elle
Ähnli
chke
it zu
m E
ndpr
oduk
t (Fid
elity
)
Funktionale Ähnlichkeit zum Endprodukt (Fidelity)
Hi-Vi-FiDesign-Layouts
![Page 21: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/21.jpg)
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
![Page 22: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/22.jpg)
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
![Page 23: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/23.jpg)
Beispiel: Facebook Home
http://www.youtube.com/watch?v=GGAtBvKsJAI
![Page 25: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/25.jpg)
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.
![Page 26: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/26.jpg)
HP Baxxter, Scooter
„ The Question Is What Is The Question.
http://www.youtube.com/watch?v=xwQw6_X9hPk
![Page 27: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/27.jpg)
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?
![Page 29: Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten](https://reader034.vdocuments.pub/reader034/viewer/2022051612/54c3a0954a7959186d8b45a9/html5/thumbnails/29.jpg)
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/