UX Fundamentals
-
Upload
jennifer-romano-bergstrom -
Category
Education
-
view
146 -
download
0
description
Transcript of UX Fundamentals
![Page 1: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/1.jpg)
2013 User Experience IntensiveFebruary 27, 2013 | Goethe Institut | 9a-5:30p
Snacks sponsored by:
![Page 2: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/2.jpg)
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
![Page 3: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/3.jpg)
UX Fundamentals
Jennifer Romano BergstromUXPA DC Short Course
February 27, 2013@romanocog
@forsmarshgroup
![Page 4: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/4.jpg)
Background Knowledge
•What does usability mean to you?
•Have you been involved in usability research?
•How is “user experience” different from “usability?”
@romanocog @forsmarshgroup
![Page 5: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/5.jpg)
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
![Page 6: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/6.jpg)
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
![Page 7: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/7.jpg)
Measuring the UX
www.forsmarshgroup.com/index.php/blog/post/the-importance-of-eye-tracking-in-user-experience-research
@romanocog @forsmarshgroup
![Page 8: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/8.jpg)
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
![Page 9: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/9.jpg)
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
![Page 10: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/10.jpg)
What People do on the Web
Krug, S. Don’t Make Me Think
@romanocog @forsmarshgroup
![Page 11: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/11.jpg)
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
![Page 12: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/12.jpg)
Patterns
![Page 13: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/13.jpg)
Why designs don’t work
![Page 14: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/14.jpg)
(fun activity time again)
@romanocog @forsmarshgroup
![Page 15: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/15.jpg)
Cognitive Limitations
Schaie, K. W. Intellectual Development in Adulthood: The Seattle Longitudinal Study.
@romanocog @forsmarshgroup
![Page 16: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/16.jpg)
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
![Page 17: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/17.jpg)
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.
![Page 18: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/18.jpg)
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
![Page 19: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/19.jpg)
Content
@romanocog @forsmarshgroup
![Page 20: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/20.jpg)
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
![Page 21: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/21.jpg)
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
![Page 22: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/22.jpg)
Writing for Paper
![Page 23: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/23.jpg)
Writing for the Web
@romanocog @forsmarshgroup
![Page 24: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/24.jpg)
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
![Page 25: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/25.jpg)
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
![Page 26: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/26.jpg)
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
![Page 27: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/27.jpg)
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
![Page 28: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/28.jpg)
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
![Page 29: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/29.jpg)
Ability to Skim
•Key info in first two sentences
•Users should know if they want to stay
•Rule of twos
•F-Shaped pattern
![Page 30: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/30.jpg)
Emphasizing Text
•Use bold and italics sparingly.
•Say the emphasized text aloud. Does it make sense?
•Never underline plain text.
@romanocog @forsmarshgroup
![Page 31: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/31.jpg)
Hypertext
•Use meaningful words or phrases.
•Be specific.
•Avoid “more” and “click here”
•Do not repeat hypertext.
@romanocog @forsmarshgroup
![Page 32: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/32.jpg)
Visual Design
@romanocog @forsmarshgroup
![Page 33: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/33.jpg)
White Space
•White space on a page
•Sections are differentiated
•Don’t overdo it
![Page 34: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/34.jpg)
White Space
•White space on a page
•Sections are differentiated
•Don’t overdo it
![Page 35: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/35.jpg)
White Space
•White space on a page
•Sections are differentiated
•Don’t overdo it
![Page 36: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/36.jpg)
Emphasizing Content
![Page 37: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/37.jpg)
Emphasizing Content
![Page 38: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/38.jpg)
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
![Page 39: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/39.jpg)
Font
@romanocog @forsmarshgroup
![Page 40: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/40.jpg)
Graphics
•Use when they supply meaning.
•Consider “ad blindness.”
@romanocog @forsmarshgroup
![Page 41: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/41.jpg)
Graphics
@romanocog @forsmarshgroup
![Page 42: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/42.jpg)
Graphics
@romanocog @forsmarshgroup
![Page 43: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/43.jpg)
Graphics
@romanocog @forsmarshgroup
![Page 44: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/44.jpg)
Instructions and Error Messages
•Place them near action item.
•Don’t Make Me Think
@romanocog @forsmarshgroup
![Page 45: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/45.jpg)
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
![Page 46: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/46.jpg)
@romanocog @forsmarshgroup
![Page 47: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/47.jpg)
@romanocog @forsmarshgroup
![Page 48: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/48.jpg)
@romanocog @forsmarshgroup
![Page 49: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/49.jpg)
How can we fix this?
@romanocog @forsmarshgroup
![Page 50: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/50.jpg)
How can we fix this?
@romanocog @forsmarshgroup
![Page 51: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/51.jpg)
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
![Page 52: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/52.jpg)
“Standard” Top and Left Navigation
young middle age older adults
![Page 53: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/53.jpg)
User Experience
@romanocog @forsmarshgroup
![Page 54: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/54.jpg)
Motivating UX
•Stairs or escalator?
•Recycle bottles
•Throw trash in bins
@romanocog @forsmarshgroup
![Page 55: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/55.jpg)
Emotional UX
•The nicest place on the Internet
@romanocog @forsmarshgroup
![Page 56: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/56.jpg)
Rewarding UX
•Fun shopping cart
@romanocog @forsmarshgroup
![Page 57: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/57.jpg)
Personal UX
•What do you want to cook?
@romanocog @forsmarshgroup
![Page 58: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/58.jpg)
Joyful UX
•Attack of the cute
@romanocog @forsmarshgroup
![Page 59: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/59.jpg)
Inspiring UX
•Wonder How To
•This is Why I’m Broke
@romanocog @forsmarshgroup
![Page 60: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/60.jpg)
Fun
@romanocog @forsmarshgroup
![Page 61: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/61.jpg)
The World’s Worst Website
http://www.angelfire.com/super/badwebs/
@romanocog @forsmarshgroup
![Page 62: UX Fundamentals](https://reader033.fdocuments.us/reader033/viewer/2022051314/54c78bde4a7959b8108b4591/html5/thumbnails/62.jpg)
@romanocog @forsmarshgroup
Questions and Discussion