UX PROTOTYPING AND PERSONAS
Essentialtools for creatinggreatuser experiences
WHO AM I?
ShilpaThanawala
@skthana
WHO ARE YOU?
WHAT IS A PROTOTYPE?
Asimulation of how aproductor feature willwork
Practice for people who build things
PROTOTYPES VERSUS...
Sketches
Wireframes
Storyboards
Mockups
WHY?
BENEFITS OF PROTOTYPING
Explore your ideas
Innovate
Collaborate
Geteveryone on the same page
Persuade
Testassumptions
Redu...
WHEN?
As earlyas possible
Throughoutthe design and developmentprocess
WHAT’S THE GOAL?
Whatquestion are you tryingto answer?
Howwilltheinterfacework?
Willusersunderstandwheretoclicknext?
HaveI...
WHAT ABOUT FIDELITY?
visualdesign
interaction
environment
contentand data
social
...others?
CHOOSE THE RIGHT LEVEL OF FIDELITY IN EACH AREA
What’s your objective?
Who’s your audience?
PROTOTYPING TOOLS
WHAT KINDS OF TOOLS DO PEOPLE USE?
Paper
HTML /CSS (hand-coded or WYSIWYGgenerated)
Clickable screen imagemaps in HTML
Sof...
HOW TO CHOOSE?
familiarity(or learningcurve)
availability
cost
capabilityto create ausable prototype
built-in tools (UI el...
TESTING YOUR PROTOTYPES
USABILITY TESTING
Whatare you tryingto measure?
Roles
Facilitator
Tester
Observer(s)
THE FACILITATOR
Explains the testingprocess
Sets expectations
Guides the Tester through
Asks questions during&after testing
THE TESTER
Usually, bestif unfamiliar with your product
Ideally, representative of your targetmarket
Customaryto compensat...
THE OBSERVERS
Simplywatch, listen, and take notes
Don’tinteractdirectlywith Tester
Ideally, allstakeholders and team membe...
THE TESTING SESSION
3-5 Testers
30-45 minutes each, with shortbreaks
Clear tasks or objectives
Discuss and evaluate result...
RINSE AND REPEAT
Make improvements, create anew prototype, testagain
PAPER PROTOTYPING
EXAMPLES
Paper prototype of agame
Credit:DerekLee/YouTube.com
Viewonline
EXAMPLES
Paper prototype of blood-testing kiosk
Credit:lukenwarm/YouTube.com
Viewonline
EXAMPLES
Paper prototype of akids’ website
Credit:BlueDuckLabs/YouTube.com
Viewonline
PAPER PROTOTYPING: ADVANTAGES
Fast
Cheap
No specialsoftware skills needed
Encourages collaboration (in person)
Can modelaw...
PAPER PROTOTYPING: DISADVANTAGES
Harder to collaborate with remote or distributed teams
PAPER PROTOTYPING TOOLKIT
Essentials: paper and pen
Nice-to-Haves:
heavycardstock or construction paper, tracingpaper or
v...
TIME TO BUILD YOUR OWN
ACTIVITY 1: PAPER PROTOTYPING
Prototype alogin /register process for awebsite on a
smartphone.
Goal/Purpose -to plan outth...
BALSAMIQ
BALSAMIQ: ADVANTAGES
Fast
No specialsoftware skills needed
Large libraryof UI elements
Can be used for remote collaboratio...
BALSAMIQ: DISADVANTAGES
Notmeantfor high visualdesign fidelity
Notfree
EXAMPLE
Balsamiqprototype for an iPhone interface
Credit:AppsForGood/YouTube.com
Viewonline
DEMO
YOUR TURN
ACTIVITY 2: PROTOTYPING WITH BALSAMIQ
Create aprototype for an airline’s website reservation
functionalityon atablet.
Goal...
PERSONAS
WHAT IS A PERSONA?
Afictionalcharacter developed to accuratelyand realistically
representone type of user your productis d...
WHY USE PERSONAS?
Awayto distillthe goals and desires of the users you serve,
make them memorable and human
Talk aboutprod...
PERSONAS ARE NOT...
User Profiles
Marketsegments
Realpeople
Statisticallyrepresentative
Comprehensive
Absolute
Static
FULL PERSONAS
Based on extensive user research
Site visits
Interviews
Analytics dataand logs
Tech supportlogs
Marketresear...
HOW DO I GET DATA?
User Researcher
Third-partydata
Government, NGOs, or Think-tanks (Pew, data.gov,
yougov.com)
Commercial...
WHAT IF I HAVE NO REAL DATA?
And no budgetfor UX research...
AD-HOC PERSONAS
a.k.a. Assumption personas, Quick personas, T...
AD-HOC PERSONAS
Can be advantageous even if you have data
Quick to create
Jump-starts the process of developingpersonas
Ma...
WHAT DOES A PERSONA LOOK LIKE?
TypicalCharacteristics:
Category
Afictionalname
Job title, role, responsibilities
Their goa...
ACTIVITY 3: CREATE PERSONAS
ACTIVITY 3: MODIFY YOUR PROTOTYPE
Choose one personaas your primaryone
Modifyyour Balsamic prototype from Activity2 to ser...
POWERPOINT / KEYNOTE / (OTHER)
POWERPOINT / KEYNOTE: ADVANTAGES
Familiar and widelyavailable
Easyto learn and use
Can exportto PDFor HTML
Usefulfor colla...
POWERPOINT / KEYNOTE: DISADVANTAGES
Limited tools for visualdesigners
Limited interactivity
EXAMPLES
Keynote prototype for iPhone interface
Credit:amirkhella/YouTube.com
Viewonline
KEYNOTE DEMO
ACTIVITY 4: PROTOTYPING WITH POWERPOINT OR KEYNOTE
Create aprototype for aweather webapp
Goal: Determine if keyuser needs ...
FIREWORKS
FIREWORKS: ADVANTAGES
Highlyflexible
Can simulate manyinteractions with higer fidelity
Designate common and reusable eleme...
FIREWORKS: DISADVANTAGES
Learningcurve
Less widelyavailable (mustbe purchased)
DEMO
HTML / CSS PROTOTYPES
HTML / CSS: ADVANTAGES
The realthing
Together with Javascript, can prototype actualinteractivity
Or, withoutJS, fake it
Mo...
HTML / CSS: DISADVANTAGES
Learningcurve
Time-consuming
Could be mistaken for the end product
Difficultto collaborate with ...
TOOLS FOR HTML PROTOTYPING
Hand-code
Frameworks ( , , , others)
ContentManagementSystem (eg. )
Visualtools ( , , , , other...
DEMO: FOUNDATION FRAMEWORK
ACTIVITY 5: PROTOTYPING WITH... THE TOOL THAT WORKS
FOR YOU
Create aprototype for aconference website
Goal: Establish webs...
PROTOTYPING AND PERSONAS
KEY TAKEAWAYS
Help you create agreatuser experience
Keytools in user-centered design
Greatfor ali...
RESOURCES & FURTHER STUDY
Paper Prototyping: , ,
,
UsabilityTesting: and
-Steve Krug
Personas: -Pruitt&Adlin
PowerPoint/Ke...
THANKS!
ShilpaThanawala
@skthana
Upcoming SlideShare
Loading in...5
×

UX Prototyping and Personas 4-25-14

482

Published on

Slides from my course "UX Prototyping and Personas" taught at BAVC 4/25/2014

Published in: Education, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
482
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

UX Prototyping and Personas 4-25-14

  1. 1. UX PROTOTYPING AND PERSONAS Essentialtools for creatinggreatuser experiences
  2. 2. WHO AM I? ShilpaThanawala @skthana
  3. 3. WHO ARE YOU?
  4. 4. WHAT IS A PROTOTYPE? Asimulation of how aproductor feature willwork Practice for people who build things
  5. 5. PROTOTYPES VERSUS... Sketches Wireframes Storyboards Mockups
  6. 6. WHY?
  7. 7. BENEFITS OF PROTOTYPING Explore your ideas Innovate Collaborate Geteveryone on the same page Persuade Testassumptions Reduce risk Saves time /effort/money
  8. 8. WHEN? As earlyas possible Throughoutthe design and developmentprocess
  9. 9. WHAT’S THE GOAL? Whatquestion are you tryingto answer? Howwilltheinterfacework? Willusersunderstandwheretoclicknext? HaveIcoveredallpossibleuserpathways? Generate ideas Foster collaboration Convince team, stakeholders, clients... etc.
  10. 10. WHAT ABOUT FIDELITY? visualdesign interaction environment contentand data social ...others?
  11. 11. CHOOSE THE RIGHT LEVEL OF FIDELITY IN EACH AREA What’s your objective? Who’s your audience?
  12. 12. PROTOTYPING TOOLS
  13. 13. WHAT KINDS OF TOOLS DO PEOPLE USE? Paper HTML /CSS (hand-coded or WYSIWYGgenerated) Clickable screen imagemaps in HTML Software-generated ( , , , , , etc.) PowerPoint/Keynote / Online tools ( , , , , ...) ...manyothers (Acrobat,Rails, Java, Excel, Filemaker ...) Balsamiq Fireworks Visio Axure Omnigraffle Impress iRise Solidify Moqups ProtoShare Proto
  14. 14. HOW TO CHOOSE? familiarity(or learningcurve) availability cost capabilityto create ausable prototype built-in tools (UI elements, interactivity) collaborative capabilites audience &distribution
  15. 15. TESTING YOUR PROTOTYPES
  16. 16. USABILITY TESTING Whatare you tryingto measure? Roles Facilitator Tester Observer(s)
  17. 17. THE FACILITATOR Explains the testingprocess Sets expectations Guides the Tester through Asks questions during&after testing
  18. 18. THE TESTER Usually, bestif unfamiliar with your product Ideally, representative of your targetmarket Customaryto compensate Testers for their time
  19. 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. 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
  21. 21. RINSE AND REPEAT Make improvements, create anew prototype, testagain
  22. 22. PAPER PROTOTYPING
  23. 23. EXAMPLES Paper prototype of agame Credit:DerekLee/YouTube.com Viewonline
  24. 24. EXAMPLES Paper prototype of blood-testing kiosk Credit:lukenwarm/YouTube.com Viewonline
  25. 25. EXAMPLES Paper prototype of akids’ website Credit:BlueDuckLabs/YouTube.com Viewonline
  26. 26. PAPER PROTOTYPING: ADVANTAGES Fast Cheap No specialsoftware skills needed Encourages collaboration (in person) Can modelawide varietyof interfaces and interactions Can modifyduringthe test
  27. 27. PAPER PROTOTYPING: DISADVANTAGES Harder to collaborate with remote or distributed teams
  28. 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
  29. 29. TIME TO BUILD YOUR OWN
  30. 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:
  31. 31. BALSAMIQ
  32. 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)
  33. 33. BALSAMIQ: DISADVANTAGES Notmeantfor high visualdesign fidelity Notfree
  34. 34. EXAMPLE Balsamiqprototype for an iPhone interface Credit:AppsForGood/YouTube.com Viewonline
  35. 35. DEMO
  36. 36. YOUR TURN
  37. 37. ACTIVITY 2: PROTOTYPING WITH BALSAMIQ Create aprototype for an airline’s website reservation functionalityon atablet. Goal: Simulate interaction flow Include: Search for flights Specials Bonus: Add features --check flightstatus, online check-in
  38. 38. PERSONAS
  39. 39. WHAT IS A PERSONA? Afictionalcharacter developed to accuratelyand realistically representone type of user your productis designed to serve.
  40. 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. 41. PERSONAS ARE NOT... User Profiles Marketsegments Realpeople Statisticallyrepresentative Comprehensive Absolute Static
  42. 42. FULL PERSONAS Based on extensive user research Site visits Interviews Analytics dataand logs Tech supportlogs Marketresearch Sales team notes ...other dataon realusers
  43. 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. 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. 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. 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
  47. 47. ACTIVITY 3: CREATE PERSONAS
  48. 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
  49. 49. POWERPOINT / KEYNOTE / (OTHER)
  50. 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
  51. 51. POWERPOINT / KEYNOTE: DISADVANTAGES Limited tools for visualdesigners Limited interactivity
  52. 52. EXAMPLES Keynote prototype for iPhone interface Credit:amirkhella/YouTube.com Viewonline
  53. 53. KEYNOTE DEMO
  54. 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?
  55. 55. FIREWORKS
  56. 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
  57. 57. FIREWORKS: DISADVANTAGES Learningcurve Less widelyavailable (mustbe purchased)
  58. 58. DEMO
  59. 59. HTML / CSS PROTOTYPES
  60. 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. 61. HTML / CSS: DISADVANTAGES Learningcurve Time-consuming Could be mistaken for the end product Difficultto collaborate with non-codingteam members
  62. 62. TOOLS FOR HTML PROTOTYPING Hand-code Frameworks ( , , , others) ContentManagementSystem (eg. ) Visualtools ( , , , , others) Bootstrap Foundation Centurion WordPress Dreamweaver Edge Muse Jetstrap
  63. 63. DEMO: FOUNDATION FRAMEWORK
  64. 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. 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. 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
  67. 67. THANKS! ShilpaThanawala @skthana
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×