User Centered Design overview 2013


Published on

Presentation to National Extension Conference on Volunteerism. Supporting Lucy Bradley's session on developing an Interactive Statewide Extension Master Gardener Portal

Published in: Design, Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Did you come to this conference with a rolling suitcase? Who didn’t? Do you know they were designed for flight attendants but ALSO met the needs of every gosh darned business traveler. Now they’re standard.
  • This is common, especially with resource constrained not for profit agencies
  • Result of your research may be personas or psychographic profiles, fictional characters, broken into categories that exemplify the needs and goals of your user base
  • Sometimes a website can test well in prototype stage and fail usability once it’s designed with full colors and graphics
  • You have a bit of a supply chain going on which makes narrowing focus to a primary audience challenging. Extension employees train master gardener volunteers to enable home gardeners and farmers Other important stakeholders include the press, donors Bear in mind some visitors come to consume content others to post it
  • Here are some tools you have to work with
  • User Centered Design overview 2013

    1. 1. Delise Weir, User ExperienceConsultant
    2. 2. ◦ A philosophy that places the person (as opposedto the thing) at the center;◦ A process that focuses on cognitive factorsimpacting peoples interactions with things.o perception, memory, learning, problem-solving, etc.UCD seeks to answer questions aboutusers and their tasks and goals, thenuse the findings to drive development and design.
    3. 3. UCD seeks to answer questions such as:◦ Who are the users?◦ What are their tasks and goals?◦ What is their level of experience?◦ What functions do the users need?◦ What information do they want, and in whatform?◦ How do users think this should work?◦ How can the design facilitate cognitive processes?
    4. 4. It needs 4 wheels, a gas pedal and brakes,right?
    5. 5. If we were developing a car, we might consider thefollowing:–A soccer mom–A construction worker–A race car driverEach of them needs 4 wheels, a gas pedal and brakes.But beyond that, what needs do they have that aredifferent?
    6. 6. Is it possible to make one car that serves eachof them?
    7. 7. The roll-aboard suitcase:originally designed to serve theneeds of flight attendants.◦ Hold a few days worth of clothes◦ Fit in the overhead bin◦ Get on and off the plane quicklyThese needs also turn out to bethe needs of most businesstravelers.Now everyone has one.
    8. 8.  Define my message Round up my content Organize my content Use my familiartechnology Start codin’ Make it pretty Go live
    9. 9. Self-referential design: Basing design decisions on what you would like, rather than onwhat the actual user wants.Elastic users: Description of users changes depending on the situation.In one meeting the focus may be on the ―power user,‖ in the nextmeeting they are discussed as a novice. This often leads to the ―kitchensink‖ approach.Too many features Users need appropriate tools that they can find. This is perceived asmore valuable than many tools that can’t be found or aren’t wellunderstood.Putting ―might on will‖. A person might want to read breaking news while paying their billsbut they will want to pay bills.
    10. 10. ◦ Clarify requirements and priorities◦ Reveal requirements, assumptions and processgaps early◦ Fewer revisions after launch◦ Reduced scope creep◦ Improve relationship with the end user◦ Improve adoption and retention
    11. 11. Integrated Pest Management :Addressing the problem at it’searliest lifecycle stage providesthe most effective and costefficient control.y = f (x)
    12. 12. ―... for every $1 spent to resolve a problem during productdesign,$10 would be spent on the same problem during development,and$100 or more if the problem had to be solved after theproducts release.―Equally compelling is the fact that those who skip ease of usein the design phase can end up spending 80% of their servicecosts on unforeseen user requirements down the road.――The cost of "learning something about users you didnt want toknow" at the start of a web project is small compared to thecost of learning it after launching the website.‖Reference The ROI of Usability
    13. 13. Know Your USERSTEST with usersPROTOTYPE theinterface
    14. 14. There are many ways tounderstand your users’needs: interview usersTools:• Set of questions• Recording device• Observer and facilitator
    15. 15. There are many ways tounderstand your users’needs: interview users conduct focus groupsTools:• Set of questions• Recording device• Observer and facilitator
    16. 16. There are many ways tounderstand your users’needs: interview users conduct focus groupsfield a surveyTools:• Survey design (advanced)• Online survey tool
    17. 17. There are many ways tounderstand your users’needs: interview users conduct focus groups field a survey analyze site trafficTools:• Google Analytics
    18. 18. There are many ways tounderstand your users’needs: interview users conduct focus groups field a survey consult marketresearch interview useradvocates or proxyusersTools:• Set of questions• Recording device• Observer and facilitator
    19. 19. There are many ways tounderstand your users’needs: interview users conduct focus groupsfield a survey consult marketresearch interview useradvocates or proxyusers consult an advisorypanelTools:• Willing advisors• Set of questions• Recording device• Observer and facilitator
    20. 20. Tools:• Demographics aboutpopulation of interest• Data about user needs• Analyze for patternsThere are many ways tounderstand your users’needs: interview users conduct focus groupsfield a survey consult marketresearch interview useradvocates or proxyusers consult an advisorypanel construct personas
    21. 21. “Robert”Role: Product ManagerAge: 47Location: San Diego, CAMarital Status: DivorcedInfluencers:Seed catalogs, selectedwebsites, researchuniversities, food andgarden blogs, fellowfoodiesGoals: grow unusual,flavorful food and prepareit. Enjoy good food withfriends, pass on tipsabout cooking andgardening.Barriers: Getting qualityinformation, finding newseed varieties that growin his area. Time tospend.“Martha & Caleb”Role: Frugal LOHASmother of a toddlerAge: 36Location: Santa Cruz, CAMarital Status: MarriedInfluencers: Friends,websites, books, father,Facebook groups and blogsubscriptionsGoals: Supplement familyfood budget with clean,healthy home-grownvegetables. Teach herchildren where their foodcomes from, avoid toxins.Enjoy a connection withnature.Barriers: Budgetconstraints, pests, specificinformation“Betsy”Role: Recently retiredAge: 54Location: Santa Fe, NMMarital Status: WidowedInfluencers: Neighbors, sister,newspaper, internetGoals: Grow a few things andsee how it works out.Barriers: Doesn’t know when toplant what. Doesn’t know whatgrows in her area or how toprepare a garden. Needs helpgetting started.“Tony”Role: Computer programmerAge: 26Location: Atlanta, GAMarital Status: SingleInfluencers: Girlfriend, Internet,social media, work colleaguesGoals: Figure out a way togarden in the city.Barriers: Lots of other things todo, time is a premium. Doesn’thave anyplace to grow a gardenbut thinks it would be cool.The Chef The Frugal Steward The Newbee The Wannabee
    22. 22. BackgroundMartha works from home while raising her young son and daughter. She loves to see themplaying in the soil like she did with her father when she was a child. Martha thinks it’simportant that her kids have a connection to the food they eat and the earth that it comesfrom. She is concerned about what she reads online and in the media about climate change,pollution and other environmental dangers. She’s particularly concerned about what shefeeds the kids, so she grows her own, organically.Four people living on her husband’s salary has motivated Martha to use every inch of theirsuburban yard to produce food as frugally as possible. She makes her own compost, growsher own plants and uses recycled food containers as seedling pots. At the grocery store, shetries to buy organic as often as possible but sometimes can’t resist a good deal. She’s homeall day and spends a lot of time on Facebook, doing garden research and plays a couple ofonline games with the older child. Martha is a meticulous record keeper having learned whatworks well in her garden the hard way, through trial and error. She relies heavily on Georgeat the local garden center for advice, usually after searching for answers through Google.High Level Goals• Supplement family food budget with clean, healthy home-grown vegetables• Teach her children where their food comes from• Avoid toxins in the food• Enjoy a connection with natureCommon Trigger/Touch Points• Has a pest problems• Reads a media, articles and online research• Checking her son’s garden patch with him• Unseasonable weather that knocks back plantings• Hand watering and looking at the plants she notices something• Seasonal changes, especially spring and fall – garden fever• Food and gas prices risePersona Example: The Frugal Steward“Martha & Caleb”Role: Frugal LOHAS mother of atoddlerAge: 36Location: Olima, CAMarital Status: MarriedInfluencers: Friends, websites,books, father, Facebook groupsand blog subscriptionsLevel of Interest $ to spendTech Savvy Online ActivityLevel of Experience Time to spend
    23. 23. Fidelity Scale LowTechnique PaperPrototypeWireframe DesignedScreen CompClickableWireframeHTML orFunctionalPrototypeTools Paper, pencils, post-it notesVisio, illustrator,drawing programPhotoshop,PowerPointImage map fromstatic prototype orWYSIWYG tool suchas DreamweaverHTML, JSP, ASPBenefits Collaborative design,low investment, rapiditerations, most likelyto get candidfeedback, very fastDigital medium forremote collaborationand review, capturesmore detail, provideslayout, user reviewsonly content andfunctionality – notdistracted by design,can accompanyrequirements doc,precursor to clickablewireframe, informscontent contributorsMay be a familiar toolto the designer,includes graphicdesign with brandedlook and feelDynamicallycommunicatesinteractivefunctionality, used forvirtual testing overWEBEX orNetMeeting,interactivelyillustrates processflowInteractive,approximates finalfunctionality closelyDrawbacks Requires user bepresent, somedrawing skills, goodpenmanshipRequires skill indrawing tool, largertime investment, noteveryone has theVisioUsers respond tographic design andmay miss content orfunctionality, timeinvestment toproduce, requiresspecial tool skillMay be laborintensive, requiresskill, requires ahosting server fortestingEven more laborintensive, requires skill,requires a hostingserver for testingDevelopmentLifecycleDiscoveryHighDevelop
    24. 24. Video:• Paper and pencil or pen• Tape, post it notes, scissors• A little drawing skill
    25. 25. Tools:• Drawing software
    26. 26. The very act of going though the process revealsflaws, improves communication, clarifiesrequirements.◦ Drives requirements◦ Mockup and iterate the UI to reveal gaps◦ Use the mockup to validate assumptions with users◦ Revise early and often before you freeze requirements◦ Deploy with fewer surprises and improved satisfaction!BUT…
    27. 27. Interface design is a specialized skill. Hundreds of books are written on thesubject People specialize in this profession Educational background may includehuman-computer interaction, libraryscience, graphic design, psychology andergonomics To do it well requiresaptitude, experience, skill, education, creative ability, and a deep understandingof the user expectations, businessrequirements and industry standards You get out what you put in
    28. 28. Sample Deliverable:Resource:
    29. 29. Heuristic Evaluation Review by a seasoned expert who applies principles or―heuristics‖ to the site.Formal Lab Testing One-on-one interviews in a professional testing lab with 8 ormore users.Informal One-on-One Testing One-on-one interviews or observational studies with 8 ormore users.Remote Testing Real-time, facilitated virtual testing over WebEx or similartoolAutomated Testing Online tool that displays screens while surveying the userabout the process.Guerilla Testing Informal one-on-one testing
    30. 30. You only need to test with5 users to identify 80% of your defects
    31. 31.  Earlier is better. In order ofpreference: Define phase – with paper Design – with paper or wireframes Develop – with paper or wireframes,clickable or static Deploy – beta site Post launch – application or site It’s best to test when you canSTILL ―COMFORTABLY‖ MAKECHANGES
    32. 32. step 1:identify targetuser attributesstep 5:recruit appropriateusers for testingstep 2:develop aprototypestep 3:design testprotocol +recording methodstep 4:do a trial runstep 7:administer teststep 6:provide anincentivestep 8:record the resultsstep 9:analyze the resultsand report
    33. 33. Here’s How:•Rely on already developedpersonas or ―psychographic‖profiles•Interview end users orcustomers•Interview business users• Marketing researchdata, profiles andsegmentation information•Develop a screener
    34. 34. Here’s How:•Paper prototype•Wireframes•Mockup in Photoshop orPowerPoint•HTML Prototype•App or website in dev orstaging•Clickable wireframes•Functional prototype•App or website inproductionNorth AmericaSPP Member LoginUsername**********Login for access to theadditional features offered to you.Not a member? Register here.SubmitFeatures5 Year WarrantySeagate has just extended the warrant on all itsinternal drives to 5 years.New Interactive Decision-Making ToolSeagate has made choosing the right disc drive fordifferent applications SIMPLE!> Launch the SAM toolProduct NewsSupport> Disc Utility Downloads> Technical Library> Warranty Support> Contact UsAlready A Member?Register | Where to Buy | Help | Contact | Site IndexUpdate your profile to take advantageof the expanded benefits.> Update My ProfileUpcoming EventsSD Best PracticesBoston, MASept. 20-24 2004Seagate Savvio Disc Drives Make the Cut forIBM BladeCenter (11/08/04) More >>>Seagate Delivers Worlds Highest Capacity PCHard Drive to Retail Stores and System Builders(11/18/04) More >Product SpotlightReliable, top-performing storage forhigh-end PCs and advancedapplications, including entry-levelRAID servers and economicalnearline storage solutions> Read More| North AmericaLogoLearn more about why thats good for yourbusiness.>Check your warranty status.>Which is my region?Simple. Fast. Easy.Seagate Solutions Provider Program[Image] Seagate Solutions Provider Program offers you the tools and support needed to helpyou grow your business and drive increased profit. (Example copy only)> Learn More > Sign up now to start receiving member benefits Receive priority Toll-free Support Be the first to evaluate new products Receive up to date news with the member – only NewsletterFind A DriveAll interfacesAlll Capacities SearchSearch By Model NumberSearchEnter Model NumberHow do I Find The Model Number?
    35. 35. Here’s How:•Design task scenarios•Develop a test planwith a SME•Questions per page orprocess•Navigational questions
    36. 36. Here’s How:•Try out the testprotocol withsomeone,anyone!•Refine the scriptbased onfeedback•Adjust mockups,script for timing,etc.
    37. 37.  Here’s How:•Delegate screening toprofessionals•Make calls yourself•Gain access to customersthrough the businessliaison•Use user advocates•Use user proxies•Ask friends and family
    38. 38. Here’s How:•Gift certificate•Cash•For volunteers: freelunch, a pat on theback, commendation ina newsletter•Extension products orbranded items•Small appropriate giftlike seeds or a tool
    39. 39. Here’s How:•Hire aprofessional•Use a neutral 3rdparty•Learn how to doit yourself
    40. 40. Here’s How:•Observer takenotes•Clickstreamtracking software•Video recording•Audio recording•WebEx recording
    41. 41. Here’s How:• Hire a professional• Group processes to lookfor patterns in thebehavior• Review recordings• Analyze quantitativedata—pass/fail, errorsper task, abandonedtasks, clicks to complete• Report and makerecommendations• This is where the artand science come in
    42. 42.  So you have no budget, no time but you’re facing ausability emergency?! Guerilla Testing
    43. 43. ExtensionEmployeesMasterGardenersHomeGardeners &FarmersStakeholders
    44. 44. As a group, we will reviewNC State website andthe people who will useit.1. Consider the type ofindividuals who mightvisit. What do theyneed? What broughtthem here?2. Find the informationthey seek on thewebsite
    45. 45. ExtensionEmployees• Agents & Staff• ExecutivesMasterGardeners• Potential volunteers• SeasonedvolunteersHome Gardeners &Farmers• Novice Gardeners• Experienced Gardeners• Casual Gardeners• FarmersStakeholders• Press• Community Supporters• Local Government• Local businesses• University
    46. 46.  Type – Novice Goal – grow asalad garden forthe family Tasks Learn the basics Trouble shoot a pestproblem More…Home Gardeners & Farmers•Novice Gardeners•Experienced Gardeners•Casual Gardeners•Farmers•ChildrenCan she accomplish the tasks?
    47. 47.  Type – Goal – Tasks -MasterGardeners• Potential volunteers• SeasonedvolunteersCan they accomplish the task?
    48. 48.  Type – Goal – TasksStakeholders•Press•Community Supporters•Local Government•Local businesses•UniversityCan they accomplish the task?
    49. 49.  Type – Goal – TasksExtensionEmployees• Agents & Staff• ExecutivesCan they accomplish the task?
    50. 50. Know Users• Interview• Survey• UseMetricsPrototype• Paper• Wireframe• DesignTest• 1-on-1• Remote• Automated
    51. 51.
    52. 52. ◦ Personas and User Scenarios Cooper newsletters The Inmates are Running the Asylum by Alan Cooper◦ Information Architecture Argus Center for Information Architecture Information Architecture Tutorial Information Architecture for the World Wide Web byRosenfeld and Moreville◦ Paper Prototyping Paper Prototyping by Carol Snyder
    53. 53. ◦ Wireframing Prototyping and Usability Testing with Visio (pdf) Mockflow◦ Usability Testing Usability Testing Tutorial A Practical Guide to Usability Testing by Dumas and Redish Remote Usability Testing Tools◦ Process Overviews Usability Guidelines and Methods Don’t Make Me Think by Steve Krug IBM