Everything is designed, yet some interactions are much better than others. What does it take to make a great experience? Carol introduces basic concepts in user experience design that you can use to improve your work. You'll learn the basics of: cognitive psychology; accessibility; design thinking; interaction design; and visual design. These concepts work together to make great user experiences and Carol will help you to understand how this work can be integrated into your existing software development process.
6. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Identifying
• Classifying
• Selecting
… constraints
Art has fewer constraints
Design is process of
7. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Non-negotiable - satisfy
– Technology
– Amount of content (sometimes)
• Negotiable - optimize
– Navigation wording
– Color, images
Managing Constraints
Dini, Dino. (March 2008). Wikipedia: Design. 2005 Game Design
and Technology Workshop, Liverpool JM University.
http://en.wikipedia.org/wiki/Design Retrieved on 2008-03-23.
8. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Natural
– Appropriate, adaptive
• Consistent
– No surprises, reinforce learning
• Supportive
– Information, status
• Flexible
– Accommodating for preferences, ability
Principles of good interface design
10. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
1. Follow design best practices
2. Clear focus on specific users (not specific customers)
3. Ability to learn and iterate quickly
Why Designs are Better
12. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Cognitive Psychology is all about Input
• Acquire
• Perceive
• Store
• Transform
• Use
• Communicate
Ulric Neisser (1967) Cognitive Psychology
13. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Sight
• Hearing
• Taste
• Touch
• Smell
Acquire, Perceive and Store via Senses
13
14. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• From senses
• Knowledge in memory
• Relate new with old experiences and expectations
• Everything is seen through our past experiences
Acquire, Perceive and Store via Perception
14
15. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Sensory
• Short-term
• Long-term
Input is stored in memory
16. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Absorb information without paying attention
• Block out information to focus
• Sensory memory
• New info replaces old
Sensory Memory - Cocktail party phenomenon
Ceramic frogs at cocktail party.com%2Fen%2Fparty-celebrate-drink-funny-frogs-
1234566%2F&psig=AFQjCNEzJcqc6pC10aXUB2WSxcQE1HV-
hw&ust=1500840550608946
17. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Information recognized and perceived
• Passed from sensory to be processed further
• STM is held for 0 seconds to 2 minutes
Short-term Memory (STM)
18. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Limited capacity of 7 plus or minus 2 items
– Remember 7 digit phone number to dial
– Will not remember the next day
Chunking
18
19. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Repetition and rehearsal transfers information
• LTM retrieval major obstacle
– Recall – passwords, user id, etc.
– Recognition – images, words, etc.
• Offer support to users in the form of recognition
Long-Term Memory (LTM)
20. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Eye issues – colorblind, poor eyesight, or are blind
• Hearing issues - can’t decipher auditory information easily
• Reduced tactile sense (e.g., arthritis, Parkinson's)
• Mental disabilities (e.g., ADHD, dyslexia)
Complications to perception
24. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Complete familiar objects that have gaps in them
Closure
24
Kanizsa triangle By Fibonacci
https://commons.wikimedia.org/wiki/File:Kanizsa_triangle.svg
[GFDL (http://www.gnu.org/copyleft/fdl.html) or CC-BY-SA-3.0
(http://creativecommons.org/licenses/by-sa/3.0/)], via Wikimedia Commons
25. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Symmetry
25
Symmetry Photo by Kevin Jones Follow
At the Taj Mahal in Agra, Uttar Pradesh, India
https://www.flickr.com/photos/kj-an/3060098369
26. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Name this…
Grupo Firenze - FIAP 2008 - C:Fibonacci
https://commons.wikimedia.org/wiki/Category:Fibonacci#/media/File:Bromelia.png
27. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Fibonacci Sequence
28. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Quilt: Fibonacci Series #12, Copyright
2013 Caryl Bryer Fallert, Bryerpatch
Studio, www.bryerpatch.com Via
https://www.jinnybeyer.com/blog/fibonacc
i-and-the-golden-ratio/
29. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Figure-Ground: Perception Activity
Cup or faces image - By Bryan Derksen. Original image paradox.jpg
uploaded by Guam on 28 July 2005, SVG conversion by Bryan Derksen, CC BY-
SA 3.0, https://commons.wikimedia.org/w/index.php?curid=1733355
Identify
a figure from
the background
30. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Figure-Ground – Image 2
30
Figure-Ground Organization in Natural Images - Xiaofeng Ren, Charless
Fowlkes and Jitendra Malik, in ECCV '06, volume 2, pages 614-627, Graz 2006.
http://homes.cs.washington.edu/~xren/research/eccv2006/
31. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Same design principles across products
• Consistency can increase usability
• Most important type of consistency
is consistency with the way people work*
– Different ways of working
– May require inconsistencies
Style Guides Encourage Consistency
*Grudin (1989)
32. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Patterns Defined
• Collection of reusable
components
• Consistent markup, styles,
behavior in prototype and
production work
• Must be easily maintained
and quickly updated
IBM Carbon Design System
http://carbondesignsystem.com/getting-started/developers
35. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Influences on UX
• Computer Science
• Artificial Intelligence
• Ergonomics /
Human Factors Engineering
• Linguistics
• Psychology
• Art & Design
• Anthropology / Ethnography
• Industrial Design
36. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Interaction with a product, service, or company
– Functional
– Sensorial
– Emotional
– Social
User’s Experience
37. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Functional
• Able to complete task
– Find information
– Submit form
– Contact someone
– Purchase item
A Scrum board suggesting to use Kanban by Jeff.lasovski
https://commons.wikimedia.org/wiki/File:Simple-kanban-board-.jpg
38. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Sensorial
• Visual
– Layout
– Colors
– Images
• Auditory
– Video
– Music
– Ads
Google Search results:
https://www.google.com/search?q=complete+a+task&safe=active&rlz=1C1CHBF_enUS729US729&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiVo-
jTsqPVAhUFWD4KHTU7C8cQ_AUICigB&biw=1600&bih=804#safe=active&tbs=sur:fc&tbm=isch&q=sensorial
39. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Emotional
• How do they feel?
– Bring their day, context,
with them
• What does the interface
convey?
– Conveys ideas and emotions
– Sets the tone
– They react
Photo: Week #51 Emotion [51of52] by Anthony
Woman giving the "Ya whatever Dad look"
https://www.flickr.com/photos/camera_is_a_mirror_with_memory/8286395944
40. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Social
• Interactions with people
• Social networking
• Help features
• Chat
An icon representing a conversation Created by Benjamin D.
Esham (bdesham) with Inkscape. 4 Aug 2007
https://commons.wikimedia.org/wiki/File:Chat_bubbles.svg
41. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
X
Experience
Functional
Emotional
Sensorial
Social
Where They Overlap...
42. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Usability is the degree to which something
- software, hardware or anything else –
is easy to use and a good fit
for the people who use it.
Usability
Definition from UXPA Usability Body of Knowledge:
http://usabilitybok.org/glossary/19#letteru
43. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Able to complete tasks
• Effectively and efficiently
• Learnable
• Pleasant to use and engaging
• Feeling of control and support
Aspects of Usability
43
45. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Minimize Human Cost
• Tiredness
• Discomfort
• Embarrassment
• Frustration
• Personal effort
45
Image: Woman holding face in hands in front of computer:
http://maxpixel.freegreatpicture.com/People-Male-Man-Sad-Happy-Face-Adult-
Emotions-371238
46. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Increased Usefulness
• Increased Efficiency ($$$)
• Improved Productivity
Benefits of Good User Experience
47. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Fewer Errors
• Reduced Training Time
• Improved Acceptance
Benefits (continued)
Natural Smile by Bradley Davis
https://www.flickr.com/photos/backpackphotography/1375817337
64. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• What are their goals?
• How many are there?
• Common complaints/biggest issues?
• Most important/frequent tasks?
Who are the Primary users?
65. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Same Job Title, May Differ in…
UserExperience
Frequency of use
Priority of tasks Characteristics
Motivations
and attitude
Expectations
66. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Which Student?
Rick Connie
http://www.flickr.com/photos/mrjkbh/ via http://creativecommons.org/licenses/by-nc-nd/2.0/deed.en
http://www.flickr.com/photos/caharley72/ (Christopher Alison Photography) via
http://creativecommons.org/licenses/by-nc-nd/2.0/
67. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Loosely defined groups into Archetypes
• What differentiates them?
• Be honest about what you don’t know
• Only develop Personas with lots of research
Start with Quick Assumptions
68. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Customer Service
• Marketing (Web statistics)
• Training
• Sales/Business development
Interview the Experts
69. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• People with disabilities
– “We are all only temporarily able-bodied. Accessibility is
good for us all.”
– Not “disabled” or “handicapped”
– Get to spirit of the law (Section 508, WCAG 2.0)
• Disability
– any condition that impedes the completion of daily tasks
using traditional methods (Wikipedia)
Include PWD in Research
-@mollydotcom at #stirtrek 2011 via @carologic
70. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
What is Accessibility?
Accessibility is designing
products so that people
can use them regardless
of ability or environment.
Disability symbols By NPS Graphics, put together by User:Wcommons
(http://www.nps.gov/hfc/carto/map-symbols.htm) [Public domain or Public domain], via
Wikimedia Commons https://commons.wikimedia.org/wiki/File:Disability_symbols.png
71. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Accessible and Usable by Everyone
Curb Cuts
Universally Accessible
Packaging
Curb Cut Image http://4sbccfaculty.org/lecture/2000s/lectures/Jan_Shapiro.html
72. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Time of Onset
• Course of the disability
– Static or progressive (Macular degeneration)
– Temporary or permanent (Surgery)
• Degree of Severity (Diabetes)
• Single or Multiple Disabilities
Disabilities vary by…
73. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Loud warehouse, public transportation
• Distraction - kids in background
• Wireless devices not receiving signal
• Slow internet connection
• Small Screen
Environmental Factors – Limiting Conditions
74. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Perceive
• Understand
• Navigate
• Interact
• Create & Contribute effectively
Design so that everyone can…
75. "The biggest waste of all is
building something no one
wants"
- @ericries #LeanStartupMI via @MelBugai
76. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Look for patterns
• Read “between the lines”
• Know what you’ve got
– Sort, reorganize, review, repeat
– What refutes your expectations?
– Surprises?
– Outliers?
Transform Data
81. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• All interfaces have usability problems
• Limited resources to fix
• More problems than resources
• Less serious problems distract
• Intense focus on fixing most serious problems first
True Statements
Rocket Surgery Made Easy: The Do-It-Yourself Guide
to Finding and Fixing Usability Problems. By Steve Krug
82. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Developer Track:
– Focus is on production
– Whole team (including UX)
• Discovery/UX Track (Interaction Designer Track)
– Focus is on user contact
Agile Design Timing: Parallel Tracks
“Adapting Usability Investigations for Agile User-Centered Design” by Desirée Sy.
Journal of Usability Studies, Volume 2, Issue 3 http://www.uxpajournal.org/
Discovery/UX
83. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Iteration 1
“Adapting Usability Investigations for Agile User-Centered Design” by Desirée Sy.
Journal of Usability Studies, Volume 2, Issue 3 http://www.uxpajournal.org/
Discovery/UX
84. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Iteration 2
“Adapting Usability Investigations for Agile User-Centered Design” by Desirée Sy.
Journal of Usability Studies, Volume 2, Issue 3 http://www.uxpajournal.org/
Discovery/UX
85. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
And so on…
“Adapting Usability Investigations for Agile User-Centered Design” by Desirée Sy.
Journal of Usability Studies, Volume 2, Issue 3 http://www.uxpajournal.org/
Discovery/UX
86. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
1) Development work
– Maximize velocity to make working software
– Goal: Working software
2) Discovery work
– Learning velocity - fast learning and validation
– Goal: Learning
Reality Check – 2 Types of Work
Dual Track Development is not Duel Track, May 10, 2017 By Jeff Patton
http://jpattonassociates.com/dual-track-development/
87. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Dual Track Development is not Duel Track
Dual Track Development is not Duel Track, May 10, 2017 By Jeff Patton
http://jpattonassociates.com/dual-track-development/
88. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Between the two tracks
• Essential for success
• Not just hand-offs
• All at once – two tracks, not two teams
• All work will not move from discovery to development
Constant Communication
From Tutorial: Making UX Agile and Lean at UXPA 2016
by John Schrag, Carol Smith and Thyra Rauch
http://uxpa2016.org/event/making-ux-agile-and-lean
89. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Pros
– Space is made for discovery work
• Cons
– Can lead to BDUF and Waterfall
– Not a solo sport - need a team
Pros and Cons - Parallel/Staggered work
BDUF = Big Design Up Front
90. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Balancing Act
• Understand users, context, etc.
• Create personas, mental models, etc.
• Prepare for story mapping
and other sessions thoroughly
Strive for
UX Best
Practices
• Engineers need designs
to develop
• Research cannot continue forever
Meet
Production
Needs
Agile requires leaner methods
Time box and focus on outcomes
Slide from Tutorial: Making UX Agile and Lean at UXPA 2016
By John Schrag, Carol Smith and Thyra Rauch
http://uxpa2016.org/event/making-ux-agile-and-lean
91. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Representative users
• Doing real tasks
• Being observed
• Using prototypes
or live products
Usability Testing is…
http://creativecommons.org/licenses/by-sa/2.0/
http://www.flickr.com/photos/raphaelquinet/513351385/sizes/l/in/photostream/
http://www.flickr.com/photos/raphaelquinet/
92. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• There is a difference
• User testing infers testing people
– Can the participant figure out our design work?
• Usability testing puts emphasis on what is being tested
– Reduces the focus on the participant’s performance
– Is the product successful?
Usability NOT User Testing
93. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Regular Usability Testing
94. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Quick
• Bare minimum of effort
• Get needed feedback
• Provide recommendations
• Repeatable
Any UX Method Can be Adapted
95. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Small iterative changes
– Make it better now
– Don’t break something else
• Take something away
– Reduce distractions
– Don’t add – question it
Tweak, Don’t Redesign
Rocket Surgery Made Easy: The Do-It-Yourself Guide
to Finding and Fixing Usability Problems. By Steve Krug
96. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
1. Follow design best practices
2. Clear focus on specific users (not specific customers)
3. Ability to learn and iterate quickly
UX is better…
97. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Share What You Learn
98. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Recommended Readings
9
8
100. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
Recommended Sites
• Usability.gov
– https://www.usability.gov/
• W3C Web Accessibility Initiative
– http://www.w3.org/WAI/
• Accessibility Standards in US (Section 508)
– https://www.access-board.gov/
• Jakob Nielsen
– http://www.useit.com
• UXPA – User Experience Professionals Association
– http://uxpa.org/
• Information Architecture Institute
– http://iainstitute.org/
101. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
References
• Albert, Bill, Tom Tullis, and Donna Tedesco. Beyond the Usability Lab.
• Barnum, Carol M. (Jan. 2003). What’s in a Number? STC Usability SIG Newsletter, Usability Interface.
http://www.stcsig.org/usability/newsletter/0301-number.html Retrieved: 20080323
• Beyer, Hugh. User-Centered Agile Methods (Synthesis Lectures on Human-Centered Informatics)
• Cato, John. User-Centered Web Design. Addison Wesley Longman; 2001.
• Dini, Dino. (March 2008). Wikipedia: Design. 2005 Game Design and Technology Workshop, Liverpool JM University.
http://en.wikipedia.org/wiki/Design Retrieved on 2008-03-23. Retrieved: 20080323
• Faulkner, Christine. The Essence of Human-Computer Interaction. Prentice Hall PTR; 1997.
• Gale, S. A Collaborative Approach to Developing Style Guides. Conference proceedings on Human factors in Computing
Systems April 13 - 18, 1996, Vancouver Canada. ACM Press, (pp. 362-367).
• Gaffney, Gerry. (2000) What is Card Sorting? Usability Techniques Series, Information & Design.
http://www.infodesign.com.au/usabilityresources/design/cardsorting.asp
• Galitz, W. O. (2002). The essential guide to user interface design: An introduction to GUI design principles and
techniques (Second Edition). Wiley: New York, NY.
102. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
References
• Gothelf , Jeff. http://blog.usabilla.com/5-effective-ways-for-usability-testing-to-play-nice-with-agile/
• Grudin, J. 1989. The case against user interface consistency. Commun. ACM 32, 10 (Oct. 1989), 1164-
1173.
• Hackos, JoAnn T., PhD and Redish, Janice C. User and Task Analysis for Interface Design. Wiley; 1998.
• Henry, Shawn Lawton. Just Ask: Integrating Accessibility Throughout Design.
• Henry, S.L. and Grossnickle, M. Accessibility in the User-Centered Design Process. Georgia Tech Research
Corporation, Inc; Atlanta, Georgia, USA; 2004. http://uiaccess.com/accessucd/personas.html
• Henry, S.L. and Martinson, M. Evaluating for Accessibility, Usability Testing in Diverse Situations. Tutorial,
2003 UPA Conference.
• Kuniavsky, Mike. Observing the User Experience: a Practitioner's Guide to User Research. Morgan
Kaufmann, 2003.
• Krug, Steve. Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability
Problems.
103. IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
References
• Lewis, Clayton and Rieman, John. (1993, 1994) Task-Centered User Interface Design A Practical Introduction.
http://hcibib.org/tcuid/chap-4.html
• Mandel, Theo. The Elements of User Interface Design. Wiley; 1997.
• Neisser, Ulric. (1967) Cognitive Psychology
• Nielsen, Jakob and Robert L. Mack. Usability Inspection Methods. John Wiley & Sons, Inc. 1994.
• Powell, Thomas A. The Complete Reference: Web Design. Osborne/McGraw-Hill; 2000.
• Ratcliffe, Lindsay and Marc McNeill. Agile Experience Design: A Digital Designer's Guide to Agile, Lean, and Continuous.
• Rubin, Jeffrey and Dana Chisnell. Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests.
John Wiley & Sons, Inc.
• Schaffer, Eric. Institutionalization of Usability: A Step by Step Guide. Human Factors International, 2004.
• Slatin, John M. and Sharron Rush Maximum Accessibility: Making Your Web Site More Usable for Everyone. Addison-
Wesley Pub Co., 2002.
• W3C Web Accessibility Initiative - http://www.w3.org/WAI/intro/accessibility