UX Prototyping and Personas 4-25-14


Published on

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

Published in: Education, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
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?
  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
  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
  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
  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
  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
  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
  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
  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