Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UX Fundamentals


Published on

Slides for a short course I taught for UXPA DC on Feb 27, 2013. This is a UX 101- basics if you are new to UX and Usability. The focus is on desktop websites, but many of these principles apply to other products (e.g., surveys, apps) and devices (e.g., tablets, smartphones). Stay tuned for an updated version that is mobile-heavy.

Published in: Education

UX Fundamentals

  1. 1. 2013 User Experience Intensive February 27, 2013 | Goethe Institut | 9a-5:30p Snacks sponsored by:
  2. 2. 2013 User Experience IntensiveSchedule9 - 11: UX Fundamentals - Jen Romano Bergstrom11 - 11:30: Rock Creek Strategic Marketing11:30 - 12:30: lunch at RFD12:30 - 2:30: UX Strategy and Lean UX - John Whalen2:30 - 4: UX and SEO - Andrew Stevens4 - 4:15: afternoon break4:15 - 5:30: Hands-On Usability Testing - Jon Rubin5:30 - 6:30: Networking
  3. 3. UX Fundamentals Jennifer Romano Bergstrom UXPA DC Short Course February 27, 2013 @romanocog @forsmarshgroup
  4. 4. Background Knowledge •What does usability mean to you? •Have you been involved in usability research? •How is “user experience” different from “usability?”@romanocog@forsmarshgroup
  5. 5. Usability vs. User Experience •Usability: “the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use.” ISO 9241-11 • •User Experience includes emotions and perceptions.@romanocog@forsmarshgroup
  6. 6. Understanding Users Peter’s User Experience Whitney’s 5Es of Usability HoneycombThe 5 Es to Understanding Users (W. Quesenbery): Experience Design (P. Morville):
  7. 7. Measuring the UX@romanocog@forsmarshgroup
  8. 8. !   Evaluation Questions Addressed: !   Advantages Disadvantages Tool Do your users… ! •  Navigate or use your product efficiently? •  Objective measure of usability •  Does not reveal complete experience (e.g., few Measuring the UX   ! Objective •  Use your design as you intended? •  Provides multiple measures that are easy to collect errors, but bad experience) ! ! Task Performance •  Find key items or content? •  Straightforward quantitative comparisons between different •  Does not inform the source or cause of the ! Real-time (e.g., accuracy, efficiency) designs or groups of users. issue ! Behavioral ! •  Answers “what” but not “why.” •  Verbalize a positive experience? •  Insight into users’ thoughts •  Lack insight into user’s experience as they •  Express frustration about functionality, •  Satisfaction surveys provide quantitative measure of subjective work with the interface (e.g., satisfaction navigation, or content? experience measure at end) Subjective Subjective Reactions •  Indicate that they will use your product again in •  Some insight into emotional responses •  Memory is fallible (debriefing and satisfaction Recalled (e.g., satisfaction survey, the future? •  Explicit intentions (e.g., on whether they will use product in measures at end) Explicit debriefing interview) future). •  Responses are biased by social desirability, overthinking, and uncertainty. •  Indicate a positive experience in the moment? •  Insight into users’ thoughts •  Responses are biased by social desirability, Subjective Moment-to-moment •  Run into problems at a specific point when •  Real-time insight into participants explicit emotional reactions. overthinking, and uncertainty Real-time participant feedback using your product? •  May interfere with normal task performance. Explicit (e.g., think aloud, button •  Get turned off at a specific moment? presses, rating dial) •  Visually scan your product as you intended? •  Objective assessment about items that may be distracting, •  Some participants eyes do not track well •  Get excited or frightened when looking at attracting, or confusing •  Somewhat expensive specific components of your product? •  Can assess visual search strategy and efficiency •  Longer analysis time. •  Notice your advertisements? •  Objective assessment of or anxiety, which is difficult to describe Eye Tracking •  See the content and features you want them to or people may not describe due to social desirability Objective see? •  Assess mental workload (e.g., hand-eye movement) (e.g., fixation quantity, Real-time •  Get engaged with your product? •  Modern non-invasive and non-obtrusive technology fixation duration, pupil Eyes dilation) •  Run into problems after looking at a specific •  Implicit measure that is well understood and researched in UX . component? •  Overwork their eyes and attention when using your product? Objective- •  Emotionally react to your product? •  Real-time tracking of facial expressions and voice fluctuations •  Not well studied in UX research Subjective Emotion Recognition •  Have the emotional reaction you intended from •  Modern non-invasive and non-obtrusive technology. •  Somewhat expensive (e.g., facial or audio) using your product? •  Longer analysis time. Real-time Face, voice •  Emotionally react to your product (how intense •  Real-time measure of sympathetic nervous system through the •  Moderately correlated with palm is that emotion)? skin •  Not well studied in UX research Objective •  Have the emotional responses you intended? •  A measure of emotional intensity •  Somewhat expensive Real-time •  Engage with your product throughout its use? •  Correlated with stress, excitement, engagement, frustration, •  Longer analysis time. Sympathetic ElectroDermal Activity (EDA) anger nervous system •  Modern non-invasive and non-obtrusive technology (conductance from wrist). Objective •  Respond in a way that will lead to behavior •  Deeper understanding of what user is experiencing (e.g., fear, •  Invasive and obtrusive technology (varies change? engagement, excitement) among options). Real-time •  Over or underwork attention and mental •  Deeper understanding of engagement •  Need complex lab space Hemodynamic Neuroimaging resources when using your product? •  More temporally or spatially precise (varies among options). •  Expensive response, (e.g., fMRI, EEG, fNIRs) •  Engage with your product throughout its use? •  Long set-up time electrical neural •  Long analysis time. activity !!
  9. 9. Measuring the UX•How does it work for the end user?•What does the user expect?•How does it make the user feel?@romanocog@forsmarshgroup
  10. 10. What People do on the Web@romanocog@forsmarshgroup Krug, S. Don’t Make Me Think
  11. 11. UX Design Failure •Poor planning •“It’s all about me.” (Redish: filing cabinets) •Human cognitive limitations •Memory & Perception •(fun activity time) • Primacy Effect • Chunking • Recency Effect • Patterns@romanocog@forsmarshgroup
  12. 12. Patterns
  13. 13. Why designs don’t work
  14. 14. (fun activity time again)@romanocog@forsmarshgroup
  15. 15. Cognitive Limitations@romanocog@forsmarshgroup Schaie, K. W. Intellectual Development in Adulthood: The Seattle Longitudinal Study.
  16. 16. The Aging Brain • Study 1: Decreased Processing Speed • Young are faster than older adults • Study 2: Speed/Accuracy Trade-Off • Older adults take longer and are more precise • Younger adults are faster and make more errors • Studies 3 & 4: Useful Field of View (UFoV) Decline • Older adults do not look in the periphery Study 1: Romano Bergstrom, J. C. & Olmsted-Hawala, E. L. (2012). Effects of Age and Think-Aloud Protocol on Eye-Tracking Data and Usability Measures. Paper presentation at EyeTrackUX, Las Vegas, NV, June 2012. Study 2: Olmsted-Hawala, E. L., Romano Bergstrom, J. C. & Rogers, W. (2013). Age-related differences in search strategy and performance@romanocog when using a data-rich Web site. Proceedings from the Human Computer Interaction Internationals Conference, July 2013, Las Vegas, NV. Study 3: Romano Bergstrom, J. C., Olmsted-Hawala, E. L. & Jans, M. E. (2012).  Age-related differences in eye tracking and usability performance: Web site usability for older adults. International Journal of Human-Computer Interaction, in press.@forsmarshgroup Study 4: Romano Bergstrom, J. C., Olmsted-Hawala, E. L. & Bergstrom, H. C. (under review). Older adults fail to see the peripheral parts of the display during a Web site search task.
  17. 17. Romano Bergstrom, J. C., Olmsted-Hawala, E. L. & Bergstrom, H. C. (under review). Older adults fail to see the peripheral parts of the display during a Web site search task. Study 4: UFoVyoung middle age older adults
  18. 18. Memory • Remembering is not a completely independent function, entirely distinct from perceiving, imaging, or even from constructive thinking, but it has intimate relations with them all…One’s memory of an event reflects a blend of information contained in specific traces encoded at the time it occurred, plus inferences based on knowledge, expectations, beliefs, and attitudes derived from other sources. • Mental Models@romanocog@forsmarshgroup Sir Frederick Bartlett (1886-1969), Remembering: A Study in Experimental and Social Psychology, 1932
  19. 19. Content@romanocog@forsmarshgroup
  20. 20. Content Considerations •Why do users come to your site? •Define your purpose •Objectives of the site • The site’s purpose • The user’s purpose, task, goals (personas) • Content must meet both • It’s not reading; it’s information sharing.@romanocog@forsmarshgroup
  21. 21. Content Considerations •Does it need to be there? • Self evident • Obvious • Self explanatory •Less is more • Get rid of half the words on each page, then half of what’s left •Don’t Make Me Think@romanocog@forsmarshgroup
  22. 22. Writing for Paper
  23. 23. Writing for the Web@romanocog@forsmarshgroup
  24. 24. Cut Unnecessary Words •Due to Becausethat business is good at this point in the fact business is good now... time = •Click on these links to find out about the Zoo hours, Zoo admission fees, or Zoo directions = VISIT THE ZOO admission fees directions hours@romanocog@forsmarshgroup Redish, J. Letting Go of the Words: Writing Web Content that Works
  25. 25. Put Action in Verbs, not Nouns •Retention of these records for seven years is a requirement for licensees = Licensees must keep these records for seven years. Look for... As in... Change to... -al denial deny -ance maintenance maintain, keep up -ment assignment assign@romanocog@forsmarshgroup Redish, J. Letting Go of the Words: Writing Web Content that Works
  26. 26. Readability •Default: 8th - 12th grade •We all read simple, short, common words faster •Helping low-literacy users helps everyone •Assess with MS Word: Flesch-Kincaid@romanocog Redish, J. Letting Go of the Words: Writing Web Content that Works@forsmarshgroup Summers & Summers, 2005:
  27. 27. Improving Readability Time on Task (Mean) Site 1 Site 2 Improvement high literacy users 14:19 5:05 +182% low literacy users 22:16 9:30 +134% Success Rate (Mean) Site 1 Site 2 Improvement high literacy users 68% 93% +37% low literacy users 46% 82% +77%@romanocog@forsmarshgroup Summers & Summers, 2005:
  28. 28. Improving Readability Instead of this Try this obtain get prior to before purchase buy request ask for subsequent next terminate end@romanocog@forsmarshgroup Redish, J. Letting Go of the Words: Writing Web Content that Works
  29. 29. Ability to Skim•Key info in first two sentences • Users should know if they want to stay•Rule of twos•F-Shaped pattern
  30. 30. Emphasizing Text •Use bold and italics sparingly. •Say the emphasized text aloud. Does it make sense? •Never underline plain text.@romanocog@forsmarshgroup
  31. 31. Hypertext •Use meaningful words or phrases. •Be specific. •Avoid “more” and “click here” •Do not repeat hypertext.@romanocog@forsmarshgroup
  32. 32. Visual Design@romanocog@forsmarshgroup
  33. 33. White Space•White space on a page•Sections are differentiated•Don’t overdo it
  34. 34. White Space•White space on a page•Sections are differentiated•Don’t overdo it
  35. 35. White Space•White space on a page•Sections are differentiated•Don’t overdo it
  36. 36. Emphasizing Content
  37. 37. Emphasizing Content
  38. 38. Font •Don’t use a format simply because you like it. •Don’t avoid a format because you don’t like it. •Avoid small fonts. •Use high contrast settings. •Color contrast checkers@romanocog@forsmarshgroup
  39. 39. Font@romanocog@forsmarshgroup
  40. 40. Graphics•Use when they supply meaning.•Consider “ad blindness.”@romanocog@forsmarshgroup
  41. 41. Graphics@romanocog@forsmarshgroup
  42. 42. Graphics@romanocog@forsmarshgroup
  43. 43. Graphics@romanocog@forsmarshgroup
  44. 44. Instructions and Error Messages•Place them near action item.•Don’t Make Me Think@romanocog@forsmarshgroup
  45. 45. The “Fold” •Users think they have reached the end of the page •Keep pages short •Give cues •1024 x 768 • (Stay tuned for the endless scroll)@romanocog@forsmarshgroup
  46. 46. @romanocog@forsmarshgroup
  47. 47. @romanocog@forsmarshgroup
  48. 48. @romanocog@forsmarshgroup
  49. 49. How can we fix this?@romanocog@forsmarshgroup
  50. 50. How can we fix this?@romanocog@forsmarshgroup
  51. 51. The “new” Epic Scroll •Let the content decide •No standard formula •Social media •E-commerce@romanocog Burridge, L & Rowe, A. The User Experience of Social Media. Forthcoming in Schall & Romano@forsmarshgroup Bergstrom. Eye Tracking in User Experience.
  52. 52. “Standard” Top and Left Navigationyoung middle age older adults
  53. 53. User Experience@romanocog@forsmarshgroup
  54. 54. Motivating UX •Stairs or escalator? •Recycle bottles •Throw trash in bins@romanocog@forsmarshgroup
  55. 55. Emotional UX •The nicest place on the Internet@romanocog@forsmarshgroup
  56. 56. Rewarding UX •Fun shopping cart@romanocog@forsmarshgroup
  57. 57. Personal UX •What do you want to cook?@romanocog@forsmarshgroup
  58. 58. Joyful UX •Attack of the cute@romanocog@forsmarshgroup
  59. 59. Inspiring UX •Wonder How To •This is Why I’m Broke@romanocog@forsmarshgroup
  60. 60. Fun@romanocog@forsmarshgroup
  61. 61. The World’s Worst Website
  62. 62. Questions and Discussion@romanocog@forsmarshgroup