UX Prototyping and Personas 4-25-14

  • Published on

  • View

  • Download

Embed Size (px)


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


  • 1. UX PROTOTYPING AND PERSONAS Essentialtools for creatinggreatuser experiences

2. WHO AM I? ShilpaThanawala @skthana 3. WHO ARE YOU? 4. WHAT IS A PROTOTYPE? Asimulation of how aproductor feature willwork Practice for people who build things 5. PROTOTYPES VERSUS... Sketches Wireframes Storyboards Mockups 6. WHY? 7. BENEFITS OF PROTOTYPING Explore your ideas Innovate Collaborate Geteveryone on the same page Persuade Testassumptions Reduce risk Saves time /effort/money 8. WHEN? As earlyas possible Throughoutthe design and developmentprocess 9. WHATS THE GOAL? Whatquestion are you tryingto answer? Howwilltheinterfacework? Willusersunderstandwheretoclicknext? HaveIcoveredallpossibleuserpathways? Generate ideas Foster collaboration Convince team, stakeholders, clients... etc. 10. WHAT ABOUT FIDELITY? visualdesign interaction environment contentand data social ...others? 11. CHOOSE THE RIGHT LEVEL OF FIDELITY IN EACH AREA Whats your objective? Whos your audience? 12. PROTOTYPING TOOLS 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. HOW TO CHOOSE? familiarity(or learningcurve) availability cost capabilityto create ausable prototype built-in tools (UI elements, interactivity) collaborative capabilites audience &distribution 15. TESTING YOUR PROTOTYPES 16. USABILITY TESTING Whatare you tryingto measure? Roles Facilitator Tester Observer(s) 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 Dontinteractdirectlywith Tester Ideally, allstakeholders and team members In another room, watchingvideo and audio If no observers, then its 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 21. RINSE AND REPEAT Make improvements, create anew prototype, testagain 22. PAPER PROTOTYPING 23. EXAMPLES Paper prototype of agame Credit:DerekLee/YouTube.com Viewonline 24. EXAMPLES Paper prototype of blood-testing kiosk Credit:lukenwarm/YouTube.com Viewonline 25. EXAMPLES Paper prototype of akids website Credit:BlueDuckLabs/YouTube.com Viewonline 26. PAPER PROTOTYPING: ADVANTAGES Fast Cheap No specialsoftware skills needed Encourages collaboration (in person) Can modelawide varietyof interfaces and interactions Can modifyduringthe test 27. PAPER PROTOTYPING: DISADVANTAGES Harder to collaborate with remote or distributed teams 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. TIME TO BUILD YOUR OWN 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. BALSAMIQ 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. BALSAMIQ: DISADVANTAGES Notmeantfor high visualdesign fidelity Notfree 34. EXAMPLE Balsamiqprototype for an iPhone interface Credit:AppsForGood/YouTube.com Viewonline 35. DEMO 36. YOUR TURN 37. ACTIVITY 2: PROTOTYPING WITH BALSAMIQ Create aprototype for an airlines website reservation functionalityon atablet. Goal: Simulate interaction flow Include: Search for flights Specials Bonus: Add features --check flightstatus, online check-in 38. PERSONAS 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 47. ACTIVITY 3: CREATE PERSONAS 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. POWERPOINT / KEYNOTE / (OTHER) 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. POWERPOINT / KEYNOTE: DISADVANTAGES Limited tools for visualdesigners Limited interactivity 52. EXAMPLES Keynote prototype for iPhone interface Credit:amirkhella/YouTube.com Viewonline 53. KEYNOTE DEMO 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. FIREWORKS 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. FIREWORKS: DISADVANTAGES Learningcurve Less widelyavailable (mustbe purchased) 58. DEMO 59. HTML / CSS PROTOTYPES 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 63. DEMO: FOUNDATION FRAMEWORK 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 DontMake 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. THANKS! ShilpaThanawala @skthana