Your SlideShare is downloading. ×
Essential User Experience Skills
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Essential User Experience Skills

4,028
views

Published on

These slides are from the STC Atlanta (www.stcatlanta.org) workshop on usability. We spent the day teaching technical communicators about usability and walked them through a mock usability test. The …

These slides are from the STC Atlanta (www.stcatlanta.org) workshop on usability. We spent the day teaching technical communicators about usability and walked them through a mock usability test. The workshop was hosted by User Insight (www.userinsight.com).

Published in: Technology, Design

0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,028
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
74
Comments
0
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 1. Essential UX Skills forTechnical CommunicatorsNovember 14, 2009
      Mark Richman
      Information architect
      WebSoSmart
      Yina Li
      Technical Writer
      Horizon Software
      Rachel Peters
      Technical Writer
      Aon eSolutions
      Will Sansbury
      UX architectSilverpop Systems
      1
    • 2. Thanks to User Insightfor hosting us today!
      Tweet your
      appreciation to
      @eholtzclaw!
      2
    • 3. Agenda
      All times –ish. And we’ll throw in a potty break or two if you’re well behaved.
      3
    • 4. Heuristic EvaluationThat’s a $2 phrase for “expert review.”
      Mark Richman
      4
    • 5. What’s a heuristic evaluation?
      A quick-and-dirty usability technique, this is a big-money term for an 'expert review' of a website or application using a set of guidelines or 'heuristics'.
      Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the "heuristics").
      JakobNeilsen and Rolf Moloch created this technique in 1990…
      Using a fixed list of heuristics keeps the evaluator on track. Some evaluators have their own sets of heuristics.
      5
    • 6. Neilsenand Molich's Heuristics (1990)Neilsen now offers an updated set of heuristics
      Visibility of system status: The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
      Match between system and the real world: The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
      User control and freedom: Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
      Consistency and standards: Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
      Error prevention: Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
      Recognition rather than recall: Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
      Flexibility and efficiency of use: Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
      Aesthetic and minimalist design: Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
      Help users recognize, diagnose, and recover from errors: Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
      Help and documentation: Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
      Some Others
      Don't force user to make precise actions
      Direct attention properly
      Consistent use of color or saturation
      For this list and another well-regarded list of heuristics visit:
      http://www.usability.gov/methods/test_refine/heuristic.html
      Or search on “usability.gov heuristics”
      6
    • 7. Our Task
      Several group members evaluated four sites with content similar to STC
      We each took different approaches to our evaluations
      Here: summarize different approaches and also the results
      7
    • 8. Heuristic Evaluations:Value and Caveats
      Heuristics are mental shortcuts or assumptions that help us quickly make sense of the world.
      How does it work? The expert uses your software product and looks for violations of the guidelines. For instance, hundreds of ad-packed pages would fail the heuristic ‘Aesthetic and Minimalist Design’.
      Does it work? Yes and no.
      Appraisers will differ in the usability problems they find
      Evaluators may have trouble uncovering domain-specific issues.
      Tests have shown that up to 50% of problems identified don’t actually affect the product’s usability
      Why use it?
      Great way to quickly and cheaply point out serious usability issues
      Use it early in the design process to uncover some blatant problems
      Know that usability testing may uncover additional issues
      8
    • 9. Perform a Quick Evaluationof STCAtlanta.org
      Some Heuristics that might be useful:
      Aesthetic and minimalist design: Every extra unit of information in a dialogue competes with others and diminishes their relative visibility.
      Direct attention properly
      Consistent use of color or saturation
      Consistency and standards
      Display data in a clear and obvious manner
      Error prevention
      9
    • 10. Sites We Evaluated
      Sample Heuristic Evaluations
      10
    • 11. 11
    • 12. 12
    • 13.
    • 14. 14
    • 15. Strategies
      Two evaluators browsed page by page through the sites, looking for usability problems and violations of the heuristics.
      One evaluator performed a representative task on two similar websites and used that task to focus her evaluation.
      Takeaway: There is no right or wrong strategy, but performing a task can make your evaluation deeper and more meaningful
      Don't focus on the task exclusively, but use it to add richness to your evaluation of the complete site.
      15
    • 16. Technology Association of Georgia
      16
    • 17. Technology Association of GeorgiaText evaluation
      The layout of the home page is very busy. Many colors are used on this page. Along with the fast changing slides, there is no clear focus.
      The top navigation is clear. However the quick links under the TAG TV are hard to notice.
      The member login is placed at an easy to find, traditional location.
      The search box under the member login is not in its usual place and could be missed by novice users.
      The slideshow changes too fast but it does offer the audience the information about events at a glance.
      The home page contains so much information that the user can't get a quick overview of the site.
      17
    • 18. Technology Association of GeorgiaAdding a picture clarifies the text
      Layout is very busy and contains many colors. There is no clear focus.
      The top navigation is clear but the quick links under the TAG TV are hard to notice.
      The member login is placed at an easy to find, traditional location.
      The search box under the member login is not in a usual place and could be missed
      The slideshow changes too fast but it does offer the audience event information.
      18
    • 19. Technology Association of GeorgiaNavigation
      19
    • 20. Technology Association of GeorgiaEvaluation using callouts
      20
    • 21. Technology Association of Georgia Callout Format: Page Content and Layout
      21
    • 22. Technology Association of GeorgiaSummary
      Site has great content and oozes professionalism.
      However a lot of strongly emphasized content competes for the user's attention. This is seen in the red, underlined links, large colored areas, and vibrant logos
      Some web conventions are not followed, adding to the difficulty of finding items on a crowded page
      22
    • 23. Information Architecture Institute
      23
    • 24. Information Architecture InstituteCategories and Navigation
      24
    • 25. Information Architecture InstituteDirecting Attention
      25
    • 26. Spotlight: Comparing Header Types
      Headers at IAI
      Typical headers
      26
    • 27. Information Architecture InstitutePage Content and Accessibility
      27
    • 28. Information Architecture InstituteSummary
      Clear hierarchy, directs attention effectively
      Navigation and headers are clear without taking emphasis away from the content
      A lot of content without being distracting
      28
    • 29. STC Intermountain Chapter
      29
    • 30. STC Intermountain Chapter Text with Pictures and Callouts
      30
    • 31. STC Intermountain Chapter Finding the Next Meeting
      31
    • 32. STC Intermountain ChapterSummary of Findings
      Consider: Top findings might be the first item in each section.
      32
    • 33. STC Washington DC Chapter
      33
    • 34. STC Washington DC ChapterAdditional Recommendations
      34
    • 35. Heuristic Evaluation Tips
      Pictures are invaluable to add context to the evaluation
      You may do a narrative or a page-by-page evaluation.
      Narratives express findings in a conversational manner, but are not be easy to scan. To counteract this, use bullet points.
      Callouts are great but care should be taken to keep them neat
      Align them if possible
      Keep them roughly the same size
      Don't be Negative Norman – call attention to good design and practice in the existing system. The customer will appreciate that you respond to her good ideas.
      35
    • 36. Card SortingSomething for the office supply fetishists.
      Rachel Peters
      36
    • 37. What is card sorting?
      Image by cannedtuna - http://flickr.com/photos/cannedtuna/1423599488/
      37
    • 38. What aisle is hot dog chili on?
      38
    • 39. With the hot dog buns?
      39
    • 40. Chili’s kind of like a soup…
      40
    • 41. Chili has beans…
      41
    • 42. Nah, that’s too easy!
      42
    • 43. Is hot dog chili a condiment?
      43
    • 44. Card Sort Activity
      Finding a place for everything
      44
    • 45. Card Sort Instructions
      How would you organize the STC Atlanta site?
      Group the cards into categories.
      Is something missing? Use a blank card to add it.
      Something doesn’t belong? Put the card aside.
      Card belongs in more than one group? Be creative.
      Label the categories
      Use a blank card to name each category.
      Category names are up to you.
      45
    • 46. Now What?
      Look for trends in the results
      46
    • 47. Open vs. Closed Sort
      Open
      No set category labels
      Good for exploratory research
      Helps you understand how the users arrange the information
      Closed
      Set category labels provided
      Good for testing existing structures (navigation, table of contents, etc.)
      47
    • 48. A Few Notes
      Not Tarot cards
      Use card sorts to help with decision making
      Don’t let the cards decide for you
      Remote testing options
      Spreadsheets
      OptimalSort - http://www.optimalsort.com
      WebSort - http://websort.net/
      More tools listed at http://www.stcsig.org/usability/topics/cardsorting.html
      48
    • 49. For More Information
      Card Sorting: Designing Usable Categories
      Donna Spencer
      Available from Rosenfeld Media: http://www.rosenfeldmedia.com/books/cardsorting/
      49
    • 50. Just for funHow a grocery store is like a web site
      A visit to Publix
      50
    • 51. Home Page
      51
    • 52. Feature Product or Article
      52
    • 53. Ads
      53
    • 54. Pop Up Ads!
      54
    • 55. Checkout
      55
    • 56. Usability TestingNo creepy two-way mirrors required.
      Yina Li Will Sansbury
      56
    • 57. What is usability testing?
      Image by eekim - http://www.flickr.com/photos/63669472@N00/1819104307
    • 58. What is usability testing?
      Qualitative
      Subjective
      Small scale; usually stop seeing significant new findings after 5 to 7 tests
      Loose, forgiving method
      Analysis based on observations
      Relatively cheap and easy to execute
      Quantitative
      Objective
      Large scale; requires large enough sample of users to statistically validate findings
      Stresses rigorous scientific method
      Analysis based on crunching numbers
      Expensive in time and money
      58
    • 59. Planning and Preparing a Usability Test
      Yina Li
      59
    • 60. Planning a usability test
      Image by Experimental:DB : http://www.flickr.com/photos/experimentaldb/3839716928/sizes/o
      60
    • 61. Goals
      http://www.offprint.co.ukBenefits.aspxBenefit=revenue
      61
    • 62. Focus
      http://www.infinitiusa.com/g_coupe/photos-360s/
      62
    • 63. Focus
      http://www.infinitiusa.com/g_coupe/photos-360s/
      63
    • 64. User Profiles
      64
    • 65. Deliverables
      Screeners
      Consent form
      Pre-test questionnaire
      Scenarios/tasks
      Post-task questionnaire
      Post-test questionnaire
      Facilitator script
      Test plan
      65
    • 66. Types of scenarios
      First impression
      Open-ended tasks
      e.g. join STC on this site.
      Answer-oriented
      e.g. find information about the next chapter meeting
      66
      Nielsen Norman Group Usability In Practice: 3-Day Camp 2008
    • 67. How to create unbiased scenarios/tasks?
      Avoid lingo used in the testing product
      Currents
      Summit
      Do NOT provide instructions or steps
      67
    • 68. Anything else?
      How many tasks should I prepare?
      35-40 minutes
      What sequence of the tasks should I use?
      Easy on the first task
      Prioritize the tasks
      Prepare extra tasks
      RUN a pilot test
      68
    • 69. Fun time
      Write the two tasks for the STC website usability test.
      69
    • 70. How to recruit test participants?
      70
    • 71. User profiles / Personas
      http://www.usability.gov/methods/analyze_current/personas.html
      71
    • 72. How to recruit test participants?
      How many participants?
      5 (http://www.useit.com/alertbox/20000319.html)
      20 (http://usableconnections.com/papers/Faulkner_BRMIC_Vol35.pdf)
      Should I recruit the participants?
      Where to start?
      Client relations
      Account executives
      Marketing
      Sales
      Customer support
      72
    • 73. Creating a screener
      What is a screener?
      Short
      Sequence of questions
      Sample questions
      What’s the last time you booked a hotel room online?
      How many hours do you spend on internet per week?
      What is your household income? Give a range.
      What is your profession?
      What company do you work for?
      73
    • 74. Incentives
      Type of incentives
      Cash
      Gift cards
      Software or product the company makes
      How much
      It depends…
      74
    • 75. It’s time to call
      Not a sales call
      Your opinion will help improve the product
      Your time will be paid and how much
      How long the test will be, where, and when
      We will video and/or audio tape the session
      Still interested? Now ask the questions in screener.
      75
      Nielsen Norman Group Usability In Practice: 3-Day Camp 2008
    • 76. It’s almost the testing day
      Call to confirm
      Send the following information:
      Testing time
      Location
      Parking info
      Driving direction
      Contact information
      76
    • 77. Facilitating Usability Tests &Analyzing Usability Findings
      Will Sansbury
      77
    • 78. Brief your observation team.
      Image by llawliet - http://www.flickr.com/photos/llawliet/2547595587/
      78
    • 79. Observation Team Ground Rules
      Focus on observation
      Limit side conversations
      Take good notes
      Don’t jump to solutions
      Keep your frustration in check
      Trust the facilitator’s judgment
      79
    • 80. Observation Team Ground Rules
      NEVER tear down the user!
      As facilitator, defend the user’sdignity above all else.
      (Seriously. I’ve kicked people out of the observation room before.)
      80
    • 81. Embrace multiple personalities.
      Flight attendant
      Keep participants happy
      Protect the participant’s safety and dignity
      Sportscaster
      Keep the observation team engaged with play-by-play
      Conduct sidelines interviews between sessions
      Scientist
      Plan and execute the test
      Analyze the test results
      From Carolyn Snider’s Paper Prototyping
      81
    • 82. Make the participant feel comfortable.
      Image by Tom Purves - http://www.flickr.com/photos/thomaspurves/2843427903/
      82
    • 83. Start when you confirm the test date.
      Avoid email
      Give them a choice of times
      Charm with chit chat
      “Do you go by Thomas or Tom?”
      “Your office is in the Highlands? My favorite restaurant is down there.”
      Absorb ALL the pain
      Image from stock.xchng – http://sxc.hu
      83
    • 84. Make sure they can find you.
      Image from stock.xchng – http://sxc.hu
      84
    • 85. Be the host(ess) with the most(est).
      Image by Rachel from Cupcakes Take the Cake - http://www.flickr.com/photos/rkbcupcakes/2383055571/
      85
    • 86. (Just don’t be freaky.)
      Image by Rachel from Cupcakes Take the Cake - http://www.flickr.com/photos/rkbcupcakes/2383055571/
      86
    • 87. Help them know what to expect.
      Explain the test procedure
      Stress the importance of thinking out loud
      Obtain signed informed consent form
      87
    • 88. Make sure they understand that…
      You’re testing the product, not them.
      When they’re struggling, you’re learning.
      If they’re frustrated or have questions, they canask you for help.Set up a faux helpdesk phone number to ring the observation room.
      Thinking out loud is critical. Affirm what they’re doing, but repeat the importancebefore each scenario.
      88
    • 89. Run the test.
      Image from stock.xchng – http://sxc.hu
      89
    • 90. Run the test.
      Provide the participant with written scenarios. You can give scenario instructions verbally, but written instructions can tell a more compelling story.
      Ask them to read the scenario aloud.Primes the pump for thinking out loud.
      After they finish the scenario, administer a survey.Some standard surveys exist, and tools like Morae include them.
      Rinse and repeat for each scenario.
      90
    • 91. Meanwhile, in the observation room...
      Image by Ken Lund – http://www.flickr.com/photos/kenlund/3441041154/
      91
    • 92. Meanwhile, in the observation room...
      Log interesting observations.Track time of each so that you can correlate notes with the video.
      As you see usability issues, point them out to the observation team.You’ll have a common ground to start analysis discussions.
      Pay attention to nonverbal cues, too.Look for odd mousing behaviors, facial expressions, andsounds of frustration.
      92
    • 93. Add it all up.
      Image by stuartpilbrow – http://www.flickr.com/photos/stuartpilbrow/2938100285/
      93
    • 94. Analyze the test findings.
      Run analysis in two stages
      Immediately after a test session, have each observer write down the issues they observed.
      After all sessions, review all observations.
      Transfer each observation from each session on to an index card or sticky note.
      Once all issues are recorded, post them on a wall.
      Read through each, and group similar items.
      Look for high density areas which indicate issues observed often across multiple test sessions.
      94
    • 95. Communicate findings to decision makers.
      Formal report
      Assign priority to findings and present highest firstBe careful to not dilute report with too many findings
      Include stills from videos to illustrate findings
      Brief profiles of test participants and actual quotes from tests foster empathy for the user
      Highlights reels of videos go a long way with executives
      Informal reports
      If you’re agile, generate user stories directly from the final analysis session
      Capture findings on wiki, intranet, or other shared resource
      Just write it down somewhere! Don’t let findings be forgotten.
      95
    • 96. Let’s eat!We’ll answer questions, too…
      …if you don’t mind us talking with our mouths full.
      96
    • 97. Mock Usability TestSome participants may be professional actors.
      YOU!
      97