bury the wireframe: a primer in interaction prototyping

35
hugeinc.com [email protected] 45 Main St. #220 Brooklyn, NY 11201 +1 718 625 4843 January 31, 2013 Bury the Wireframe: A Primer in Interaction Prototyping

Upload: derek-vaz

Post on 01-Dec-2014

6.496 views

Category:

Design


0 download

DESCRIPTION

Originally presented at Interaction 13 in Toronto, Jan 31, 2013 When it comes to communicating a concept, testing assumptions and gaining consensus, nothing beats a prototype. Yet many people believe prototyping is beyond their ability or too taxing to add to their process. It's time we stop using static representations to design interactive products. This talk will discuss why interaction designers should abandon printouts for interaction prototypes, how to introduce them into your process and showcase real world examples and success stories.

TRANSCRIPT

Page 1: Bury the Wireframe: A Primer in Interaction Prototyping

[email protected] Main St. #220 Brooklyn, NY 11201+1 718 625 4843

January 31, 2013Bury the Wireframe: A Primer in Interaction Prototyping

Page 2: Bury the Wireframe: A Primer in Interaction Prototyping

A Primer in Interaction Prototyping.

Bury the Wireframe:

Page 3: Bury the Wireframe: A Primer in Interaction Prototyping

This is not a talk about prototyping tools.

Page 4: Bury the Wireframe: A Primer in Interaction Prototyping
Page 5: Bury the Wireframe: A Primer in Interaction Prototyping
Page 6: Bury the Wireframe: A Primer in Interaction Prototyping

Prototyping is a process.

Page 7: Bury the Wireframe: A Primer in Interaction Prototyping

Explore.Communicate.Validate.

Page 8: Bury the Wireframe: A Primer in Interaction Prototyping

Explore.Communicate.Validate.

Page 9: Bury the Wireframe: A Primer in Interaction Prototyping

Exploration is collaborative.

Page 10: Bury the Wireframe: A Primer in Interaction Prototyping

“Creative Intelligence is social. We increase our creative ability

by learning from others, collaborating, sharing.”

- Bruce NussbaumCreative Intelligence

Page 11: Bury the Wireframe: A Primer in Interaction Prototyping

Collaborate. If Kanye can, you can.

Page 12: Bury the Wireframe: A Primer in Interaction Prototyping

Wireframes are great tool for information design, not

interaction design.

Page 13: Bury the Wireframe: A Primer in Interaction Prototyping
Page 14: Bury the Wireframe: A Primer in Interaction Prototyping

Explore.Communicate.Validate.

Page 15: Bury the Wireframe: A Primer in Interaction Prototyping

A click is worth a thousand annotations.

Page 16: Bury the Wireframe: A Primer in Interaction Prototyping

Maybe...

I’ll just read the annotations.

Page 17: Bury the Wireframe: A Primer in Interaction Prototyping
Page 18: Bury the Wireframe: A Primer in Interaction Prototyping

Communication is being a salesperson.

Page 19: Bury the Wireframe: A Primer in Interaction Prototyping

You are a sales person.

“Selling, I’ve grown to understand, is more urgent, more important, and, in its own sweet way, more beautiful than we realize.”

- Dan Pink

Page 20: Bury the Wireframe: A Primer in Interaction Prototyping

Explore.Communicate.Validate.

Page 21: Bury the Wireframe: A Primer in Interaction Prototyping

Invalidate at every step.

Page 22: Bury the Wireframe: A Primer in Interaction Prototyping
Page 23: Bury the Wireframe: A Primer in Interaction Prototyping
Page 24: Bury the Wireframe: A Primer in Interaction Prototyping

Validate in the wild.

Page 25: Bury the Wireframe: A Primer in Interaction Prototyping
Page 26: Bury the Wireframe: A Primer in Interaction Prototyping

More Considerations

• How savvy are clients, stakeholders?

• How innovative is your design?

• What are the core interactions in the experience?

• How foreign is the context?

Page 27: Bury the Wireframe: A Primer in Interaction Prototyping

Get prototyping:Just do it.

Don’t be precious.Tell a story.

Define your content first.Use the buddy system.

Test. Break. Repeat.Make something you love.

Page 28: Bury the Wireframe: A Primer in Interaction Prototyping

One more thing.

Page 29: Bury the Wireframe: A Primer in Interaction Prototyping
Page 30: Bury the Wireframe: A Primer in Interaction Prototyping
Page 32: Bury the Wireframe: A Primer in Interaction Prototyping

[email protected] Main St. #220 Brooklyn, NY 11201+1 718 625 4843

Page 33: Bury the Wireframe: A Primer in Interaction Prototyping

Appendix.

Page 34: Bury the Wireframe: A Primer in Interaction Prototyping

Tools, Resources, Frameworks

• Prototypr http://bit.ly/Vx0vz0• Kenotopia http://bit.ly/aLrB1A• Window Resizer for Chrome http://bit.ly/Qylb49• Zurb Foundation http://foundation.zurb.com/• Code Academy http://bit.ly/udgloC• CSS Hat http://bit.ly/I6Or3m