Your SlideShare is downloading. ×
Cross-Device Prototyping - Mit dem richtigen Ansatz zu den wichtigen Antworten
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

648

Published on

Meine Präsentation vom World Usability Day 2013.

Meine Präsentation vom World Usability Day 2013.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
648
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×