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