This document discusses prototypes and their importance. It begins by explaining that prototypes are semi-functional representations of a site or app, usually built with HTML/CSS/JavaScript, that allow for basic clicking and simulating of interactions. The document emphasizes that prototypes should be used early and often to build upon research, personas, wireframes, and flows. It provides principles for effective prototyping, such as knowing your audience and intent, planning some design elements while leaving room for discovery, and focusing prototypes only on necessary interactions. A variety of prototyping tools, both low- and high-fidelity, are also listed.

1. 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.

2. 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

3. Proto Props
http://rosenfeldmedia.com/books/prototyping/

4. Prototypes
The point of prototyping:
!
!
INTERACTIONS

5. Prototypes

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

7. Prototypes
They make all kinds of saves.
Time, money, effort, waste.
Can keep you from scoring an own goal.
Photo credit: AP

8. 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"

9. 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

10. 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

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

12. 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.

13. 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

14. Prototypes
When to prototype?
!
EARLY AND OFTEN.
Capital News Service photo by Chris Leyden

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

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

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

18. 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

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

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

21. 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

22. 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?"

23. Prototypes
A typical process:
!
usablity testing
sketch Balsamiq Adobe browser

24. Prototypes
Let’s pick our tools.

25. Prototypes
NOW LET’S PROTOTYPE THE TOP USER TASK.

26. Next up:
Usability testing
ddt@twoangstroms.com
twitter web