UX Prototyping and Personas 4-25-14
3 likes1,321 views
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.
UX Prototyping and Personas 4-25-14
- 1. UX PROTOTYPING AND PERSONAS Essentialtools for creatinggreatuser experiences
- 3. WHO ARE YOU?
- 4. WHAT IS A PROTOTYPE? Asimulation of how aproductor feature willwork Practice for people who build things
- 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. WHAT’S 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 What’s your objective? Who’s your audience?
- 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
- 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 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
- 21. RINSE AND REPEAT Make improvements, create anew prototype, testagain
- 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 airline’s 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
- 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