This document discusses various prototyping tools and techniques for creating user experiences, including paper prototyping, Balsamiq, PowerPoint/Keynote, Fireworks, and HTML/CSS. It emphasizes that prototyping should start as early as possible, and that the goal is to test assumptions and explore ideas through usability testing. Personas are also presented as a way to represent different user types and focus the prototype design. A variety of prototyping activities are suggested to allow readers to experiment with different tools.
1 of 67
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
More Related Content
UX Prototyping and Personas 4-25-14
1. UX PROTOTYPING AND PERSONAS
Essentialtools for creatinggreatuser experiences
7. BENEFITS OF PROTOTYPING
Explore your ideas
Innovate
Collaborate
Geteveryone on the same page
Persuade
Testassumptions
Reduce risk
Saves time /effort/money
17. THE FACILITATOR
Explains the testingprocess
Sets expectations
Guides the Tester through
Asks questions during&after testing
18. THE TESTER
Usually, bestif unfamiliar with your product
Ideally, representative of your targetmarket
Customaryto compensate Testers for their time
19. THE OBSERVERS
Simplywatch, listen, and take notes
Don’tinteractdirectlywith Tester
Ideally, allstakeholders and team members
In another room, watchingvideo and audio
If no observers, then it’s you!
20. THE TESTING SESSION
3-5 Testers
30-45 minutes each, with shortbreaks
Clear tasks or objectives
Discuss and evaluate results rightafterward
Categorize results based on the originalgoal(s)
Separate unexpected or extraresults so as notto get
sidetracked
26. PAPER PROTOTYPING: ADVANTAGES
Fast
Cheap
No specialsoftware skills needed
Encourages collaboration (in person)
Can modelawide varietyof interfaces and interactions
Can modifyduringthe test
28. PAPER PROTOTYPING TOOLKIT
Essentials: paper and pen
Nice-to-Haves:
heavycardstock or construction paper, tracingpaper or
vellum
pens, markers, highlighters, colored pencils, charcoalpencils
erasers
stickynotes
re-stickable tape and labels
index cards
cardboard
cuttingtools
printed UI elements and device frames
30. ACTIVITY 1: PAPER PROTOTYPING
Prototype alogin /register process for awebsite on a
smartphone.
Goal/Purpose -to plan outthe login process flow
Include the followingfeatures:
32. BALSAMIQ: ADVANTAGES
Fast
No specialsoftware skills needed
Large libraryof UI elements
Can be used for remote collaboration
Hand-drawn look encourages focus on layout&functionality
Automaticallystores revision history
Integrates with other online apps (Jira, Google Drive)
39. WHAT IS A PERSONA?
Afictionalcharacter developed to accuratelyand realistically
representone type of user your productis designed to serve.
40. WHY USE PERSONAS?
Awayto distillthe goals and desires of the users you serve,
make them memorable and human
Talk aboutproductfeatures as theyrelate to aspecific person
instead of “The User”
Focus the user experience your product
Prioritize improvements to your product
Getallthe assumptions outin the open and aligned
Uncover disconnects
Geteveryone to buyin
41. PERSONAS ARE NOT...
User Profiles
Marketsegments
Realpeople
Statisticallyrepresentative
Comprehensive
Absolute
Static
42. FULL PERSONAS
Based on extensive user research
Site visits
Interviews
Analytics dataand logs
Tech supportlogs
Marketresearch
Sales team notes
...other dataon realusers
43. HOW DO I GET DATA?
User Researcher
Third-partydata
Government, NGOs, or Think-tanks (Pew, data.gov,
yougov.com)
Commercial(Nielsen, Gallup)
UX {UIE, AnswerLab}
Approach with aquestion in mind
44. WHAT IF I HAVE NO REAL DATA?
And no budgetfor UX research...
AD-HOC PERSONAS
a.k.a. Assumption personas, Quick personas, Thin personas...
Getwhatever generaldatayou can
Who are you buildingfor?
Test, research, modify... repeat!
45. AD-HOC PERSONAS
Can be advantageous even if you have data
Quick to create
Jump-starts the process of developingpersonas
Makes dataanalysis easier
Focuses future research: validation, answeringrelevant
questions
46. WHAT DOES A PERSONA LOOK LIKE?
TypicalCharacteristics:
Category
Afictionalname
Job title, role, responsibilities
Their goals, needs, and priorities
Their environment
Demographics (if relevant)
Aquote or keystatement
Aphoto
(usability.gov)
An example persona
48. ACTIVITY 3: MODIFY YOUR PROTOTYPE
Choose one personaas your primaryone
Modifyyour Balsamic prototype from Activity2 to serve the
specific needs and goals of thatprimarypersona
50. POWERPOINT / KEYNOTE: ADVANTAGES
Familiar and widelyavailable
Easyto learn and use
Can exportto PDFor HTML
Usefulfor collaboration amongdistributed teams
Can draw on existingresources for UI elements
Can simulate some interactivity
54. ACTIVITY 4: PROTOTYPING WITH POWERPOINT OR KEYNOTE
Create aprototype for aweather webapp
Goal: Determine if keyuser needs are met
Include:
Currentconditions
Forecast
Chance of precipitation
Multiple locations
Sunrise and sunsettimes
Bonus:
Additionalfeatures like an extended forecast, hourlyforecast
How willyour design change on smaller screens /mobile
devices?
56. FIREWORKS: ADVANTAGES
Highlyflexible
Can simulate manyinteractions with higer fidelity
Designate common and reusable elements
Comes with built-in UI elements library
Integrates wellwith Photoshop and Illustrator
Can be exported to PDF, HTML, Air, ...
Can distribute and collaborate remotely
Additionaltools for responsive and touch prototyping
60. HTML / CSS: ADVANTAGES
The realthing
Together with Javascript, can prototype actualinteractivity
Or, withoutJS, fake it
Modular &collaborative
Free, requires no specialsoftware
Can use frameworks
Responsive -one prototype for allscreen sizes
Might be possible to reuse code (butrarely)
61. HTML / CSS: DISADVANTAGES
Learningcurve
Time-consuming
Could be mistaken for the end product
Difficultto collaborate with non-codingteam members
62. TOOLS FOR HTML PROTOTYPING
Hand-code
Frameworks ( , , , others)
ContentManagementSystem (eg. )
Visualtools ( , , , , others)
Bootstrap Foundation Centurion
WordPress
Dreamweaver Edge Muse Jetstrap
64. ACTIVITY 5: PROTOTYPING WITH... THE TOOL THAT WORKS
FOR YOU
Create aprototype for aconference website
Goal: Establish website layoutand modelinteractions
Include:
Introduction and descriptions
Date, location, featured speakers
Aschedule of talks
Pricingand registration
Nearbyhotels, parking, localrestaurants
65. PROTOTYPING AND PERSONAS
KEY TAKEAWAYS
Help you create agreatuser experience
Keytools in user-centered design
Greatfor aligningteams and gettingbuy-in from clients, execs,
etc.
Prototypingis easyand inexpensive
Startbyusingthe tools you have &know. You can learn
somethingelse later if you need to.
66. RESOURCES & FURTHER STUDY
Paper Prototyping: , ,
,
UsabilityTesting: and
-Steve Krug
Personas: -Pruitt&Adlin
PowerPoint/Keynote:
Fireworks: ,
Muse:
GeneralUX: , , , ,
, , ,
MyClientis Obsessed with the Design:
iOS design elements Sneakpeekit UI
Stencils Speckyboylist
Don’tMake Me Think RocketSurgery Made
Easy
The Essential PersonaLifecycle
Keynotopia
ExportResponsive Prototypes iOS Touch
Prototyping
Muse Jams
UIE UX Magazine Rosenfeld Media UXMastery
AListApart Lynda Interaction Design Foundation 52 Weeks
of UX
Style Tiles