module 09: prototypes

Prototypes

Remember? !Prototypes: Semi-functional. Will have the the start of a functional user interface, usually built with HTML/CSS/JavaScript (directly or by proxy). Ability to click, simulates the way the site will work. May or may not include finalized design elements.

Prototypes

Remember? !Each step is a base for the next !So far, we’ve built on: — user research — personas and scenarios — wireframes — flows and maps

Proto Props

http://rosenfeldmedia.com/books/prototyping/

Prototypes

The point of prototyping: !!

INTERACTIONS

Prototypes

Prototypes

The power of showing. And gets people to see the same thing at the same time. Reduces the "wait, I thought you meant… ."

Prototypes

They make all kinds of saves. Time, money, effort, waste. Can keep you from scoring an own goal.

Photo credit: AP

Prototypes

A few principles (From Todd Zaki Warfel)

!"Most of the mistakes I’ve seen, made, or heard about didn’t happen from selecting the wrong tool or method. Instead, most of the mistakes came from the following situations: !— Prototyping either too much or too little — Prototyping the wrong thing — Not setting expectations for what the prototype will be"

Prototypes

Principle 1: Know audience and intent !— We (should) know the users by now — Is your audience fellow designers, engineers? — low-fi, even sketching, returns good insights — Is your audience a CEO/client/etc.? — hi-fi may be the way to go — it is your responsibility to communicate that these may not be what the "final design" looks like, to the pixel

Prototypes

Principle 2: Plan some, prototype the rest !— "I plan up to 70% of the design through sketching and then it’s down to the business of prototyping" — Warfel !— The missing 30% emerges: warnings, dialogs you forgot, fixes to mistakes or assumptions

Prototypes

Principle 3: "It’s a prototype, not the Mona Lisa" !— Yeah, I don’t think I can draw, either

Prototypes

Principle 4: "If you can’t make it, fake it" !— I made this mostly in Keynote. There’s no coding, no actual interaction, but I could simulate interactions by building other screens and using hyperlinks in PDF files shown on an actual phone. — We were able to observe user reactions, suss out failed assumptions about what they might want to do and how.

Prototypes

Principle 5: Do only what you need to !— If you have five or six scenarios you need to get feedback on, prototype those interactions only !— If a user clicks on something you haven’t built yet, well… it’s a prototype. Just make sure that action doesn’t result in something catastrophic, like revealing personal data or causing death

Prototypes

When to prototype? !EARLY AND OFTEN.

Capital News Service photo by Chris Leyden

Prototypes

Types of prototyping !paper digital (low- and high-fidelity)

Prototypes

Tools for paper prototyping: !paper pens crayons markers tape scissors whiteboard

Prototypes

Tools for low-fi prototyping: !Balsamiq OmniGraffle (with the right stencils) InVision Easel Axure RP POP (Prototyping on Paper) …and a text editor

Prototypes

Tools for high-fi prototyping: !Adobe Edge Reflow OmniGraffle (with the right stencils) Keynote/PowerPoint Macaw Webflow (http://making.webflow.com/) …and a text editor

Prototypes

Frameworks (roughly): !Twitter Bootstrap ZURB Foundation Skeleton …and a text editor

Prototypes

Tools in general: !Note: New ones are appearing as we speak, so be sure to do your own research and refresh it often.

Prototypes

My point is, we could make useful charts like this all day long !

http://www.cooper.com/journal/2013/07/designers-toolkit-proto-testing-for-prototypes

Prototypes

Picking your tools: !— "What is everyone else using?" — "What kind of prototypes are we making?" — "What am I familiar with?" — "What does it cost?" — "How easy is it to collaborate with?" — "Desktop or cloud-based?"

Prototypes

A typical process: !

usablity testing

sketch Balsamiq Adobe browser

Prototypes

Let’s pick our tools.

Prototypes

NOW LET’S PROTOTYPE THE TOP USER TASK.

Next up:

Usability testing

ddt@twoangstroms.com

twitter web