Prototypes
Remember?
!
Prototypes: Semi-functional. Will have the the start of
a functional user interface, usually built ...
Prototypes
Remember?
!
Each step is a base for the next
!
So far, we’ve built on:
— user research
— personas and scenarios...
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 ...
Prototypes
They make all kinds of saves.
Time, money, effort, waste.
Can keep you from scoring an own goal.
Photo credit: ...
Prototypes
A few principles
(From Todd Zaki Warfel)
!
"Most of the mistakes I’ve seen, made, or heard about didn’t
happen ...
Prototypes
Principle 1: Know audience and intent
!
—We (should) know the users by now
— Is your audience fellow designers,...
Prototypes
Principle 2: Plan some, prototype the rest
!
—"I plan up to 70% of the design through sketching and
then it’s d...
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 int...
Prototypes
Principle 5: Do only what you need to
!
— If you have five or six scenarios you need to get feedback
on, prototy...
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 (Proto...
Prototypes
Tools for high-fi prototyping:
!
Adobe Edge Reflow
OmniGraffle (with the right stencils)
Keynote/PowerPoint
Macaw
...
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...
Prototypes
My point is, we could make useful
charts like this all day long
!
http://www.cooper.com/journal/2013/07/designe...
Prototypes
Picking your tools:
!
—"What is everyone else using?"
—"What kind of prototypes are we making?"
—"What am I fam...
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
Upcoming SlideShare
Loading in …5
×

Module 09: Prototypes

563 views

Published on

Module 09 in a one-week intensive for community college instructors held by MPICT.org.

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
563
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Module 09: Prototypes

  1. 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. 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. 3. Proto Props http://rosenfeldmedia.com/books/prototyping/
  4. 4. Prototypes The point of prototyping: ! ! INTERACTIONS
  5. 5. Prototypes
  6. 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. 7. Prototypes They make all kinds of saves. Time, money, effort, waste. Can keep you from scoring an own goal. Photo credit: AP
  8. 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. 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. 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. 11. Prototypes Principle 3: "It’s a prototype, not the Mona Lisa" ! —Yeah, I don’t think I can draw, either
  12. 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. 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. 14. Prototypes When to prototype? ! EARLY AND OFTEN. Capital News Service photo by Chris Leyden
  15. 15. Prototypes Types of prototyping ! paper digital (low- and high-fidelity)
  16. 16. Prototypes Tools for paper prototyping: ! paper pens crayons markers tape scissors whiteboard
  17. 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. 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. 19. Prototypes Frameworks (roughly): ! Twitter Bootstrap ZURB Foundation Skeleton …and a text editor
  20. 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. 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. 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. 23. Prototypes A typical process: ! usablity testing sketch Balsamiq Adobe browser
  24. 24. Prototypes Let’s pick our tools.
  25. 25. Prototypes NOW LET’S PROTOTYPE THE TOP USER TASK.
  26. 26. Next up: Usability testing ddt@twoangstroms.com twitter web

×