Everything is designed, yet some interactions are much better than others. What does it take to make a great experience? What are the areas that UX specialists focus on? How do skills in cognitive psycology, computer science and design come together? Carol introduces basic concepts in user experience design that you can use to improve the user's expeirence and/or clearly communicate with designers.
2. Making Great UX / @carologic / Scrum Pgh
Everything
is Designed
6. Making Great UX / @carologic / Scrum Pgh
Design is process of
• Identifying
• Classifying
• Selecting
… constraints
Art has fewer constraints
7. Making Great UX / @carologic / Scrum Pgh
Managing Constraints
• Non-negotiable - satisfy
– Technology
– Amount of content (sometimes)
• Negotiable - optimize
– Navigation wording
– Color, images
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. Making Great UX / @carologic / Scrum Pgh
Principles of good interface design
• Natural
– Appropriate, adaptive
• Consistent
– No surprises, reinforce learning
• Supportive
– Information, status
• Flexible
– Accommodating for preferences, ability
9. Making Great UX / @carologic / Scrum Pgh
Why are some digital
experiences so much
better?
10. Making Great UX / @carologic / Scrum Pgh
Why Designs are Better
1. Follow design best practices
2. Clear focus on specific users (not specific customers)
3. Ability to learn and iterate quickly
11. Making Great UX / @carologic / Scrum Pgh
Design Best Practices
12. Making Great UX / @carologic / Scrum Pgh
Cognitive Psychology = Information Handling
• Acquire
• Perceive
• Store
Transform
Use
Communicate
Ulric Neisser (1967) Cognitive Psychology
13. Making Great UX / @carologic / Scrum Pgh
Acquire, Perceive and Store via Senses
13
• Sight
• Hearing
• Taste
• Touch
• Smell
14. Making Great UX / @carologic / Scrum Pgh
Acquire, Perceive and Store via Perception
14
• From senses
• Knowledge in memory
• Relate new with old experiences and expectations
• Everything is seen through our past experiences
15. Making Great UX / @carologic / Scrum Pgh
Sensory Memory - Cocktail party phenomenon
• Absorb information
without paying attention
• Block out information to
focus
• Sensory memory
• New info replaces old
Ceramic frogs at cocktail party.com%2Fen%2Fparty-celebrate-drink-funny-frogs-
1234566%2F&psig=AFQjCNEzJcqc6pC10aXUB2WSxcQE1HV-
hw&ust=1500840550608946
16. Making Great UX / @carologic / Scrum Pgh
Short-term Memory (STM)
• Information recognized and perceived
• Passed from sensory to be processed further
• STM is held for 0 seconds to 2 minutes
17. Making Great UX / @carologic / Scrum Pgh
STM can be recalled
17
• Chunking - is our ability to group information
• Limited capacity of 7 plus or minus 2 items
– Remember 7 digit phone number to dial
– Will not remember the next day
• Recognition is better than recall
18. Making Great UX / @carologic / Scrum Pgh
Complications to perception
• Eye issues
– Colorblind, poor eyesight or blindness, dark room
• Hearing issues
– Reduced sensitivity, loud work area
• Reduced tactile sense
– Arthritis, Parkinson’s, thick gloves
• Mental disabilities
– ADHD, dyslexia, alcohol
19. Making Great UX / @carologic / Scrum Pgh
What is Accessibility?
Accessibility is designing
products so that people
can use them regardless
of ability or environment.
Consider temporary
and permanent conditions
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
20. Making Great UX / @carologic / Scrum Pgh
Design so that everyone can…
• Perceive
• Understand
• Navigate
• Interact
• Create & Contribute effectively
Curb Cut Image http://4sbccfaculty.org/lecture/2000s/lectures/Jan_Shapiro.html
21. Making Great UX / @carologic / Scrum Pgh
Gestalt Principles
of Design
24. Making Great UX / @carologic / Scrum Pgh
Closure
24
• Complete familiar objects that have gaps in them
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. Making Great UX / @carologic / Scrum Pgh
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. Making Great UX / @carologic / Scrum Pgh
Name this…
Grupo Firenze - FIAP 2008 - C:Fibonacci
https://commons.wikimedia.org/wiki/Category:Fibonacci#/media/File:Bromelia.png
28. Making Great UX / @carologic / Scrum Pgh
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. Making Great UX / @carologic / Scrum Pgh
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. Making Great UX / @carologic / Scrum Pgh
Figure-Ground – Image 2
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. Making Great UX / @carologic / Scrum Pgh
Style Guides Encourage Consistency
• 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
*Grudin (1989)
32. Making Great UX / @carologic / Scrum Pgh
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
33. Making Great UX / @carologic / Scrum Pgh
Graceful Degradation
and Responsiveness
35. Making Great UX / @carologic / Scrum Pgh
Influences on UX
• Computer Science
• Artificial Intelligence
• Ergonomics /
Human Factors
Engineering
• Linguistics
Psychology
Art & Design
Anthropology / Ethnography
Industrial Design
36. Making Great UX / @carologic / Scrum Pgh
User’s Experience
• Interaction with a product, service, or company
– Functional
– Sensorial
– Emotional
– Social
37. Making Great UX / @carologic / Scrum Pgh
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. Making Great UX / @carologic / Scrum Pgh
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. Making Great UX / @carologic / Scrum Pgh
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. Making Great UX / @carologic / Scrum Pgh
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. Making Great UX / @carologic / Scrum Pgh
X
Experience
Functional
Emotional
Sensorial
Social
Where They Overlap...
42. 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.
Definition from UXPA Usability Body of Knowledge:
http://usabilitybok.org/glossary/19#letteru
43. Making Great UX / @carologic / Scrum Pgh
Aspects of Usability
43
• Able to complete tasks
• Effectively and efficiently
• Learnable
• Pleasant to use and engaging
• Feeling of control and support
44. Making Great UX / @carologic / Scrum Pgh
Usability
is an important characteristic
of what makes a
good User Experience
45. Making Great UX / @carologic / Scrum Pgh
Minimize Human Cost
45
• Tiredness
• Discomfort
• Embarrassment
• Frustration
• Personal effort
Image: Woman holding face in hands in front of computer:
http://maxpixel.freegreatpicture.com/People-Male-Man-Sad-Happy-Face-Adult-
Emotions-371238
46. Making Great UX / @carologic / Scrum Pgh
Benefits of Good User Experience
• Increased Usefulness
• Increased Efficiency ($$$)
• Improved Productivity
47. Making Great UX / @carologic / Scrum Pgh
Benefits (continued)
• Fewer Errors
• Reduced Training Time
• Improved Acceptance
Natural Smile by Bradley Davis
https://www.flickr.com/photos/backpackphotography/1375817337
62. Making Great UX / @carologic / Scrum Pgh
Who will frequently, actively
use your product?
What do they need to do?
63. Making Great UX / @carologic / Scrum Pgh
Designing for Everyone
is
Impossible
64. Making Great UX / @carologic / Scrum Pgh
Who are the Primary users?
• What are their goals?
• How many are there?
• Common complaints/biggest issues?
• Most important/frequent tasks?
65. Making Great UX / @carologic / Scrum Pgh
Same Job Title, May Differ in…
UserExperience
Frequency of use
Priority of tasks Characteristics
Motivations
and attitude
Expectations
66. Making Great UX / @carologic / Scrum Pgh
Case Study
• Creating a site for University students
• Think about the student you are designing for
– What kind of program?
– How old are they?
– What else?
67. Making Great UX / @carologic / Scrum Pgh
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/
68. Making Great UX / @carologic / Scrum Pgh
Start with Quick Assumptions
• Loosely defined groups of Archetypes
• What differentiates them?
• Be honest about what you don’t know
• Only develop Personas with lots of research
69. Making Great UX / @carologic / Scrum Pgh
Interview the Experts
• Customer Service
• Marketing (Web statistics)
• Training
• Sales/Business development
70. Making Great UX / @carologic / Scrum Pgh
Include PWD in Research
• 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)
-@mollydotcom at #stirtrek 2011 via @carologic
71. Making Great UX / @carologic / Scrum Pgh
"The biggest waste of all is
building something no one
wants"
- @ericries #LeanStartupMI via @MelBugai
72. Making Great UX / @carologic / Scrum Pgh
Transform Data
• Look for patterns
• Read “between the lines”
• Know what you’ve got
– Sort, reorganize, review, repeat
– What refutes your expectations?
– Surprises?
– Outliers?
74. Making Great UX / @carologic / Scrum Pgh
Some experiences
are better!
Ability to learn
and iterate quickly
76. Making Great UX / @carologic / Scrum Pgh
True Statements
• 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
Rocket Surgery Made Easy: The Do-It-Yourself Guide
to Finding and Fixing Usability Problems. By Steve Krug
77. Making Great UX / @carologic / Scrum Pgh
Usability Testing is…
• Representative users
• Doing real tasks
• Being observed
• Using prototypes
or live products
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/
78. Making Great UX / @carologic / Scrum Pgh
Usability NOT User Testing
• 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?
79. Making Great UX / @carologic / Scrum Pgh
Regular Usability Testing
80. Making Great UX / @carologic / Scrum Pgh
Any UX Method Can be Adapted
• Quick
• Bare minimum of effort
• Get needed feedback
• Provide recommendations
• Repeatable
81. Making Great UX / @carologic / Scrum Pgh
Tweak, Don’t Redesign
• Small iterative changes
– Make it better now
– Don’t break something else
• Take something away
– Reduce distractions
– Don’t add – question it
Rocket Surgery Made Easy: The Do-It-Yourself Guide
to Finding and Fixing Usability Problems. By Steve Krug
82. Making Great UX / @carologic / Scrum Pgh
UX is better…
1. Follow design best practices
2. Clear focus on specific users (not specific customers)
3. Ability to learn and iterate quickly
83. Making Great UX / @carologic / Scrum Pgh
Share What You Learn
84. Making Great UX / @carologic / Scrum Pgh
Recommended Readings
84
85. Making Great UX / @carologic / Scrum Pgh
Contact Carol
LinkedIn: https://www.linkedin.com/in/caroljsmith
Twitter - @Carologic: https://twitter.com/carologic
Slides on Slideshare: https://www.slideshare.net/carologic
86. Making Great UX / @carologic / Scrum Pgh
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/
87. Making Great UX / @carologic / Scrum Pgh
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.
88. Making Great UX / @carologic / Scrum Pgh
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
89. Making Great UX / @carologic / Scrum Pgh
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