Cross-Device Prototyping
Mit dem richtigen Ansatz zu den
wichtigen Antworten
World Usability Day Hannover

14. November 20...
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?

...
„
A prototype is a question rendered
as an artifact.
Scott Klemmer, Associate Professor UC San Diego

aus https://www.cour...
Eine Frage der Fidelity.

d
an
fw

Wireframe

Endprodukt

Au

Ähnlichkeit zum Endprodukt (Fidelity)

Visuelle 


DesignLay...
„
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 (Fide...
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...
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 (Fideli...
Mid-Vi-Fi

Wireframes

https://twitter.com/bokardo/status/304215877509857282

http://www.flickr.com/photos/doos/4689874175/...
Mid-Vi-Fi

Wireframes

Funktioniert die Struktur auf
allen wichtigen Endgeräten?

http://www.flickr.com/photos/doos/4689874...
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.

Fu...
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 (Fid...
Hi-Vi-Fi

Design-Layouts

Sieht es nur gut aus? 

Oder fühlt es sich auch gut an?

https://play.google.com/store/apps/deta...
„
You don’t design something like
Facebook Home in Photoshop.
Julie Zhuo, Product design director | Facebook

https://medi...
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...
„
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 
...
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 Go...
Nächste SlideShare
Wird geladen in …5
×

Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten

1.401 Aufrufe

Veröffentlicht am

Meine Präsentation vom World Usability Day 2013.

0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.401
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
9
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten

  1. 1. Cross-Device Prototyping Mit dem richtigen Ansatz zu den wichtigen Antworten World Usability Day Hannover
 14. November 2013 Johannes Baeck | usability.de
 @jbaeck
  2. 2. http://bradfrostweb.com/wp-content/uploads/2012/03/this-is-the-web.png
  3. 3. http://uxdesign.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/
  4. 4. Neue Fragestellungen ergeben sich. Funktioniert dieser Ansatz geräteübergreifend? Verstehen Nutzer die Gestensteuerung? Ist der Prozess auf kleinen Bildschirmen noch verständlich?
  5. 5. „ A prototype is a question rendered as an artifact. Scott Klemmer, Associate Professor UC San Diego aus https://www.coursera.org/course/hci
  6. 6. 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/
  7. 7. „ There is no such thing as high or low fidelity, only appropriate fidelity. Bill Buxton http://www.billbuxton.com/
  8. 8. Lo-Vi-Fi
 Papierskizzen
  9. 9. Ähnlichkeit zum Endprodukt (Fidelity) Visuelle 
 Lo-Vi-Fi
 Papierskizzen Funktionale 
 Ähnlichkeit zum Endprodukt (Fidelity)
  10. 10. Lo-Vi-Fi
 Papierskizzen Wie fühlt sich dieser Ansatz auf dem Endgerät an?
  11. 11. Introducing… 
 AppSeed http://www.kickstarter.com/projects/appseed/appseed-turn-sketches-into-functioning-prototypes
  12. 12. Ähnlichkeit zum Endprodukt (Fidelity) Visuelle 
 Von der statischen Skizze effizient zum interaktiven Prototypen auf dem Endgerät. Funktionale 
 Ähnlichkeit zum Endprodukt (Fidelity)
  13. 13. Mid-Vi-Fi
 Wireframes http://www.flickr.com/photos/doos/4689874175/ von Rob Enslin
  14. 14. Ähnlichkeit zum Endprodukt (Fidelity) Visuelle 
 Mid-Vi-Fi
 Wireframes Funktionale 
 Ähnlichkeit zum Endprodukt (Fidelity)
  15. 15. Mid-Vi-Fi
 Wireframes https://twitter.com/bokardo/status/304215877509857282 http://www.flickr.com/photos/doos/4689874175/ von Rob Enslin
  16. 16. Mid-Vi-Fi
 Wireframes Funktioniert die Struktur auf allen wichtigen Endgeräten? http://www.flickr.com/photos/doos/4689874175/ von Rob Enslin
  17. 17. Introducing… 
 Responsive Wireframes http://www.thismanslife.co.uk/projects/lab/responsivewireframes/
  18. 18. Ähnlichkeit zum Endprodukt (Fidelity) Visuelle 
 Von der statischen zur dynamischen Definition der Struktur im Code. Funktionale 
 Ähnlichkeit zum Endprodukt (Fidelity)
  19. 19. Hi-Vi-Fi Design-Layouts https://play.google.com/store/apps/details?id=com.facebook.home
  20. 20. Ähnlichkeit zum Endprodukt (Fidelity) Visuelle 
 Hi-Vi-Fi
 Design-Layouts Funktionale 
 Ähnlichkeit zum Endprodukt (Fidelity)
  21. 21. 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
  22. 22. „ 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
  23. 23. Beispiel: Facebook Home http://www.youtube.com/watch?v=GGAtBvKsJAI
  24. 24. Introducing…
 Framer http://www.framerjs.com/
  25. 25. Ähnlichkeit zum Endprodukt (Fidelity) Visuelle 
 Vom statischen Design-Layout, zum realistischen Erlebnis auf dem Endgerät. Funktionale 
 Ähnlichkeit zum Endprodukt (Fidelity)
  26. 26. „ The Question Is What Is The Question. HP Baxxter, Scooter http://www.youtube.com/watch?v=xwQw6_X9hPk
  27. 27. 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)
  28. 28. Danke! Mehr dazu
 hier @jbaeck 
 und hier johannesbaeck.com/blog
  29. 29. 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/

×