Post on 27-Jan-2015
description
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