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

transcript

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.

Ähnli

t (Fid

Funktionale Ähnlichkeit zum Endprodukt (Fidelity)

Aufwan

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

Ähnli

t (Fid

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

Ähnli

t (Fid

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

Ähnli

t (Fid

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

Funktioniert die Struktur auf allen wichtigen Endgeräten?

Introducing… Responsive Wireframes

http://www.thismanslife.co.uk/projects/lab/responsivewireframes/

Ähnli

t (Fid

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

Ähnli

t (Fid

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

Introducing…Framer

http://www.framerjs.com/

Ähnli

t (Fid

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?

Ähnli

t (Fid

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?

Mehr dazuhier @jbaeck und hier johannesbaeck.com/blog

Danke!

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/

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

Documents