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.

1. 2013 User Experience Intensive
February 27, 2013 | Goethe Institut | 9a-5:30p
Snacks sponsored by:

2. 2013 User Experience Intensive
Schedule
9 - 11: UX Fundamentals - Jen Romano Bergstrom
11 - 11:30: Rock Creek Strategic Marketing
11:30 - 12:30: lunch at RFD
12:30 - 2:30: UX Strategy and Lean UX - John Whalen
2:30 - 4: UX and SEO - Andrew Stevens
4 - 4:15: afternoon break
4:15 - 5:30: Hands-On Usability Testing - Jon Rubin
5:30 - 6:30: Networking

3. UX Fundamentals
Jennifer Romano Bergstrom
UXPA DC Short Course
February 27, 2013
@romanocog
@forsmarshgroup

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. 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
•Usability.gov
•User Experience includes emotions and perceptions.
@romanocog
@forsmarshgroup

6. Understanding Users
Peter’s User Experience
Whitney’s 5Es of Usability Honeycomb
The 5 Es to Understanding Users (W. Quesenbery): http://www.wqusability.com/articles/getting-started.html
User Experience Design (P. Morville): http://semanticstudios.com/publications/semantics/000029.php

7. Measuring the UX
@romanocog
@forsmarshgroup www.forsmarshgroup.com/index.php/blog/post/the-importance-of-eye-tracking-in-user-experience-research

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. 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. What People do on the Web
@romanocog
@forsmarshgroup Krug, S. Don’t Make Me Think

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. Patterns

13. Why designs don’t work

14. (fun activity time again)
@romanocog
@forsmarshgroup

15. Cognitive Limitations
@romanocog
@forsmarshgroup Schaie, K. W. Intellectual Development in Adulthood: The Seattle Longitudinal Study.

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. 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: UFoV
young middle age older adults

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. Content
@romanocog
@forsmarshgroup

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. 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. Writing for Paper

23. Writing for the Web
@romanocog
@forsmarshgroup

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. 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. 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: http://iat.ubalt.edu/summers/papers/Summers_ASIST2005.pdf

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: http://iat.ubalt.edu/summers/papers/Summers_ASIST2005.pdf

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. Ability to Skim
•Key info in first two sentences
• Users should know if they want to stay
•Rule of twos
•F-Shaped pattern

30. Emphasizing Text
•Use bold and italics sparingly.
•Say the emphasized text aloud. Does it make
sense?
•Never underline plain text.
@romanocog
@forsmarshgroup

31. Hypertext
•Use meaningful words or
phrases.
•Be specific.
•Avoid “more” and “click
here”
•Do not repeat hypertext.
@romanocog
@forsmarshgroup

32. Visual Design
@romanocog
@forsmarshgroup

33. White Space
•White space on a page
•Sections are differentiated
•Don’t overdo it

34. White Space
•White space on a page
•Sections are differentiated
•Don’t overdo it

35. White Space
•White space on a page
•Sections are differentiated
•Don’t overdo it

36. Emphasizing Content

37. Emphasizing Content

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. Font
@romanocog
@forsmarshgroup

40. Graphics
•Use when they supply
meaning.
•Consider “ad
blindness.”
@romanocog
@forsmarshgroup

41. Graphics
@romanocog
@forsmarshgroup

42. Graphics
@romanocog
@forsmarshgroup

43. Graphics
@romanocog
@forsmarshgroup

44. Instructions and Error
Messages
•Place them
near action
item.
•Don’t Make
Me Think
@romanocog
@forsmarshgroup

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. @romanocog
@forsmarshgroup

47. @romanocog
@forsmarshgroup

48. @romanocog
@forsmarshgroup

49. How can we fix this?
@romanocog
@forsmarshgroup

50. How can we fix this?
@romanocog
@forsmarshgroup

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. “Standard” Top and
Left Navigation
young middle age older adults

53. User Experience
@romanocog
@forsmarshgroup

54. Motivating UX
•Stairs or escalator?
•Recycle bottles
•Throw trash in bins
@romanocog
@forsmarshgroup

55. Emotional UX
•The nicest place on the Internet
@romanocog
@forsmarshgroup

56. Rewarding UX
•Fun shopping cart
@romanocog
@forsmarshgroup

57. Personal UX
•What do you want to cook?
@romanocog
@forsmarshgroup

58. Joyful UX
•Attack of the cute
@romanocog
@forsmarshgroup

59. Inspiring UX
•Wonder How To
•This is Why I’m Broke
@romanocog
@forsmarshgroup

60. Fun
@romanocog
@forsmarshgroup

61. The World’s Worst Website
http://www.angelfire.com/super/badwebs/
@romanocog
@forsmarshgroup

62. Questions and
Discussion
@romanocog
@forsmarshgroup