2013 User Experience IntensiveFebruary 27, 2013 | Goethe Institut | 9a-5:30p
Snacks sponsored by:
2013 User Experience Intensive
Schedule9 - 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
UX Fundamentals
Jennifer Romano BergstromUXPA DC Short Course
February 27, 2013@romanocog
@forsmarshgroup
Background Knowledge
•What does usability mean to you?
•Have you been involved in usability research?
•How is “user experience” different from “usability?”
@romanocog @forsmarshgroup
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
Understanding Users
The 5 Es to Understanding Users (W. Quesenbery): http://www.wqusability.com/articles/getting-started.htmlUser Experience Design (P. Morville): http://semanticstudios.com/publications/semantics/000029.php
Whitney’s 5Es of UsabilityPeter’s User Experience
Honeycomb
Measuring the UX
www.forsmarshgroup.com/index.php/blog/post/the-importance-of-eye-tracking-in-user-experience-research
@romanocog @forsmarshgroup
Measuring the UX ! !
Evaluation Tool
Questions Addressed: Do your users…
Advantages Disadvantages
!
! ! ! ! ! !
Task Performance (e.g., accuracy, efficiency)
• Navigate or use your product efficiently? • Use your design as you intended? • Find key items or content?
• Objective measure of usability • Provides multiple measures that are easy to collect • Straightforward quantitative comparisons between different
designs or groups of users.
• Does not reveal complete experience (e.g., few errors, but bad experience)
• Does not inform the source or cause of the issue
• Answers “what” but not “why.”
Subjective Reactions (e.g., satisfaction survey,
debriefing interview)
• Verbalize a positive experience? • Express frustration about functionality,
navigation, or content? • Indicate that they will use your product again in
the future?
• Insight into users’ thoughts • Satisfaction surveys provide quantitative measure of subjective
experience • Some insight into emotional responses • Explicit intentions (e.g., on whether they will use product in
future).
• Lack insight into user’s experience as they work with the interface (e.g., satisfaction measure at end)
• Memory is fallible (debriefing and satisfaction measures at end)
• Responses are biased by social desirability, overthinking, and uncertainty.
Moment-to-moment participant feedback
(e.g., think aloud, button presses, rating dial)
• Indicate a positive experience in the moment? • Run into problems at a specific point when
using your product? • Get turned off at a specific moment?
• Insight into users’ thoughts • Real-time insight into participants explicit emotional reactions.
• Responses are biased by social desirability, overthinking, and uncertainty
• May interfere with normal task performance.
Eye Tracking (e.g., fixation quantity, fixation duration, pupil
dilation)
• Visually scan your product as you intended? • Get excited or frightened when looking at
specific components of your product? • Notice your advertisements? • See the content and features you want them to
see? • Get engaged with your product? • Run into problems after looking at a specific
component? • Overwork their eyes and attention when using
your product?
• Objective assessment about items that may be distracting, attracting, or confusing
• Can assess visual search strategy and efficiency • Objective assessment of or anxiety, which is difficult to describe
or people may not describe due to social desirability • Assess mental workload (e.g., hand-eye movement) • Modern non-invasive and non-obtrusive technology • Implicit measure that is well understood and researched in UX .
• Some participants eyes do not track well • Somewhat expensive • Longer analysis time.
Emotion Recognition (e.g., facial or audio)
• Emotionally react to your product? • Have the emotional reaction you intended from
using your product?
• Real-time tracking of facial expressions and voice fluctuations • Modern non-invasive and non-obtrusive technology.
• Not well studied in UX research • Somewhat expensive • Longer analysis time.
ElectroDermal Activity (EDA)
• Emotionally react to your product (how intense is that emotion)?
• Have the emotional responses you intended? • Engage with your product throughout its use?
• Real-time measure of sympathetic nervous system through the skin
• A measure of emotional intensity • Correlated with stress, excitement, engagement, frustration,
anger • Modern non-invasive and non-obtrusive technology
(conductance from wrist).
• Moderately correlated with palm • Not well studied in UX research • Somewhat expensive • Longer analysis time.
Neuroimaging (e.g., fMRI, EEG, fNIRs)
• Respond in a way that will lead to behavior change?
• Over or underwork attention and mental resources when using your product?
• Engage with your product throughout its use?
• Deeper understanding of what user is experiencing (e.g., fear, engagement, excitement)
• Deeper understanding of engagement • More temporally or spatially precise (varies among options).
• Invasive and obtrusive technology (varies among options).
• Need complex lab space • Expensive • Long set-up time • Long analysis time.
!!
Objective Real-time Behavioral
Subjective Recalled Explicit
Subjective Real-time
Explicit
Objective Real-time
Eyes
Objective-Subjective Real-time
Face, voice
Objective Real-time
Sympathetic nervous system
Objective Real-time
Hemodynamic response,
electrical neural activity
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
What People do on the Web
Krug, S. Don’t Make Me Think
@romanocog @forsmarshgroup
UX Design Failure
•Poor planning
•“It’s all about me.” (Redish: filing cabinets)
•Human cognitive limitations
•Memory & Perception
•(fun activity time)•Chunking
•Patterns•Primacy Effect
•Recency Effect@romanocog @forsmarshgroup
Patterns
Why designs don’t work
(fun activity time again)
@romanocog @forsmarshgroup
Cognitive Limitations
Schaie, K. W. Intellectual Development in Adulthood: The Seattle Longitudinal Study.
@romanocog @forsmarshgroup
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 peripheryStudy 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 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.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.
@romanocog @forsmarshgroup
Study 4: UFoV
young middle age older adults
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.
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
Sir Frederick Bartlett (1886-1969), Remembering: A Study in Experimental and Social Psychology, 1932
@romanocog @forsmarshgroup
Content
@romanocog @forsmarshgroup
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
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
Writing for Paper
Writing for the Web
@romanocog @forsmarshgroup
Cut Unnecessary Words
•Due to the fact that business is good at this point in time =
•Click on these links to find out about the Zoo hours, Zoo admission fees, or Zoo directions =
VISIT THE ZOOadmission fees
directionshours
Redish, J. Letting Go of the Words: Writing Web Content that Works
Because business is good now...
@romanocog @forsmarshgroup
Put Action in Verbs, not Nouns
•Retention of these records for seven years is a requirement for licensees =
Redish, J. Letting Go of the Words: Writing Web Content that Works
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
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
Redish, J. Letting Go of the Words: Writing Web Content that WorksSummers & Summers, 2005: http://iat.ubalt.edu/summers/papers/Summers_ASIST2005.pdf
@romanocog @forsmarshgroup
Improving Readability
Time on Task (Mean) Site 1 Site 2 Improvementhigh literacy users 14:19 5:05 +182%low literacy users 22:16 9:30 +134%
Success Rate (Mean) Site 1 Site 2 Improvementhigh literacy users 68% 93% +37%low literacy users 46% 82% +77%
Summers & Summers, 2005: http://iat.ubalt.edu/summers/papers/Summers_ASIST2005.pdf
@romanocog @forsmarshgroup
Improving Readability
Redish, J. Letting Go of the Words: Writing Web Content that Works
Instead of this Try thisobtain getprior to before
purchase buyrequest ask for
subsequent nextterminate end
@romanocog @forsmarshgroup
Ability to Skim
•Key info in first two sentences
•Users should know if they want to stay
•Rule of twos
•F-Shaped pattern
Emphasizing Text
•Use bold and italics sparingly.
•Say the emphasized text aloud. Does it make sense?
•Never underline plain text.
@romanocog @forsmarshgroup
Hypertext
•Use meaningful words or phrases.
•Be specific.
•Avoid “more” and “click here”
•Do not repeat hypertext.
@romanocog @forsmarshgroup
Visual Design
@romanocog @forsmarshgroup
White Space
•White space on a page
•Sections are differentiated
•Don’t overdo it
White Space
•White space on a page
•Sections are differentiated
•Don’t overdo it
White Space
•White space on a page
•Sections are differentiated
•Don’t overdo it
Emphasizing Content
Emphasizing Content
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
Font
@romanocog @forsmarshgroup
Graphics
•Use when they supply meaning.
•Consider “ad blindness.”
@romanocog @forsmarshgroup
Graphics
@romanocog @forsmarshgroup
Graphics
@romanocog @forsmarshgroup
Graphics
@romanocog @forsmarshgroup
Instructions and Error Messages
•Place them near action item.
•Don’t Make Me Think
@romanocog @forsmarshgroup
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
@romanocog @forsmarshgroup
@romanocog @forsmarshgroup
@romanocog @forsmarshgroup
How can we fix this?
@romanocog @forsmarshgroup
How can we fix this?
@romanocog @forsmarshgroup
The “new” Epic Scroll
•Let the content decide
•No standard formula
•Social media
•E-commerce
Burridge, L & Rowe, A. The User Experience of Social Media. Forthcoming in Schall & Romano Bergstrom. Eye Tracking in User Experience.
@romanocog @forsmarshgroup
“Standard” Top and Left Navigation
young middle age older adults
User Experience
@romanocog @forsmarshgroup
Motivating UX
•Stairs or escalator?
•Recycle bottles
•Throw trash in bins
@romanocog @forsmarshgroup
Emotional UX
•The nicest place on the Internet
@romanocog @forsmarshgroup
Rewarding UX
•Fun shopping cart
@romanocog @forsmarshgroup
Personal UX
•What do you want to cook?
@romanocog @forsmarshgroup
Joyful UX
•Attack of the cute
@romanocog @forsmarshgroup
Inspiring UX
•Wonder How To
•This is Why I’m Broke
@romanocog @forsmarshgroup
Fun
@romanocog @forsmarshgroup
The World’s Worst Website
http://www.angelfire.com/super/badwebs/
@romanocog @forsmarshgroup
@romanocog @forsmarshgroup
Questions and Discussion
Top Related