Making Great User Experiences at Cleveland C# .Net Meetup July 27 2017

Cleveland
C# / VB.Net User Group
July 27, 2017
Making Great
User Experiences

IBM Watson / Making Great UX / Cleveland C# VB.Net / @carologic
• Identifying
• Classifying
• Selecting
… constraints
Art has fewer constraints
Design is process of

• 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.

• Natural
– Appropriate, adaptive
• Consistent
– No surprises, reinforce learning
• Supportive
– Information, status
• Flexible
– Accommodating for preferences, ability
Principles of good interface design

Why are some digital
experiences so much better?

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

Cognitive Psychology is all about Input
• Acquire
• Perceive
• Store
• Transform
• Use
• Communicate
Ulric Neisser (1967) Cognitive Psychology

• Sight
• Hearing
• Taste
• Touch
• Smell
Acquire, Perceive and Store via Senses
13

• 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

• Sensory
• Short-term
• Long-term
Input is stored in memory

• 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

• Information recognized and perceived
• Passed from sensory to be processed further
• STM is held for 0 seconds to 2 minutes
Short-term Memory (STM)

• Limited capacity of 7 plus or minus 2 items
– Remember 7 digit phone number to dial
– Will not remember the next day
Chunking
18

• 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)

• 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

Elements of Design (by J6 Design)
© 2015 J6 design http://www.j6design.com.au/6-principles-of-design/

Principles of Design (by J6 Design)
© 2015 J6 design http://www.j6design.com.au/6-principles-of-design/

• 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

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

Name this…
Grupo Firenze - FIAP 2008 - C:Fibonacci
https://commons.wikimedia.org/wiki/Category:Fibonacci#/media/File:Bromelia.png

Fibonacci Sequence

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/

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

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/

• 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)

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

Graceful Degradation
and Responsiveness

Influences on UX
• Computer Science
• Artificial Intelligence
• Ergonomics /
Human Factors Engineering
• Linguistics
• Psychology
• Art & Design
• Anthropology / Ethnography
• Industrial Design

• Interaction with a product, service, or company
– Functional
– Sensorial
– Emotional
– Social
User’s Experience

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

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

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

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

X
Experience
Functional
Emotional
Sensorial
Social
Where They Overlap...

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

• Able to complete tasks
• Effectively and efficiently
• Learnable
• Pleasant to use and engaging
• Feeling of control and support
Aspects of Usability
43

Usability
is an important
characteristic
of what makes a
good User Experience

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

• Increased Usefulness
• Increased Efficiency ($$$)
• Improved Productivity
Benefits of Good User Experience

• Fewer Errors
• Reduced Training Time
• Improved Acceptance
Benefits (continued)
Natural Smile by Bradley Davis
https://www.flickr.com/photos/backpackphotography/1375817337

IBMDesignThinking
Human-centered outcomes at speed and scale

Understand people’s needs.
IBMDesignThinking
© 2016 IBM Corporation | IBM Confidential

Form intent.
IBMDesignThinking

Deliver outcomes
at speed and scale.
IBMDesignThinking

IBMDesignThinking
TheLoop
TheKeys
Principles

IBMDesignThinking
TheLoop
Principles
TheKeys

Focus on user
outcomes
Multidisciplinary
teams
Restless
reinvention
IBMDesignThinking
Principles

Principles
IBMDesignThinking
TheLoop
TheKeys

IBMDesignThinking
TheLoop
Observe Reflect Make

TheLoop
Principles
IBMDesignThinking
TheKeys

Hills Playbacks Sponsor
users
IBMDesignThinking
TheKeys

Again - why are some
much better?
Clear focus on specific users
(not specific customers)

Who will frequently, actively
use your product?
What do they need to do?

Designing for Everyone
is
Impossible

• What are their goals?
• How many are there?
• Common complaints/biggest issues?
• Most important/frequent tasks?
Who are the Primary users?

Same Job Title, May Differ in…
UserExperience
Frequency of use
Priority of tasks Characteristics
Motivations
and attitude
Expectations

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/

• 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

• Customer Service
• Marketing (Web statistics)
• Training
• Sales/Business development
Interview the Experts

• 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

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

Accessible and Usable by Everyone
Curb Cuts
Universally Accessible
Packaging
Curb Cut Image http://4sbccfaculty.org/lecture/2000s/lectures/Jan_Shapiro.html

• 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…

• Loud warehouse, public transportation
• Distraction - kids in background
• Wireless devices not receiving signal
• Slow internet connection
• Small Screen
Environmental Factors – Limiting Conditions

• Perceive
• Understand
• Navigate
• Interact
• Create & Contribute effectively
Design so that everyone can…

"The biggest waste of all is
building something no one
wants"
- @ericries #LeanStartupMI via @MelBugai

• Look for patterns
• Read “between the lines”
• Know what you’ve got
– Sort, reorganize, review, repeat
– What refutes your expectations?
– Surprises?
– Outliers?
Transform Data

Some experiences
are better!
Ability to learn
and iterate quickly

Experience Driven Agile:
Develop Up to an Experience,
Not Down to a Feature
- Kaleb Walton & Brian Anderson

Create a great,
usable, accessible,
and relevant experience

• 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

• 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

Iteration 1
Discovery/UX

Iteration 2
Discovery/UX

And so on…
Discovery/UX

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/

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/

• 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

• 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

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

• 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/

• 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

Regular Usability Testing

• Quick
• Bare minimum of effort
• Get needed feedback
• Provide recommendations
• Repeatable
Any UX Method Can be Adapted

• 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

1. Follow design best practices
2. Clear focus on specific users (not specific customers)
3. Ability to learn and iterate quickly
UX is better…

Share What You Learn

Recommended Readings
9
8

Contact Carol
in/CarolJSmith
@Carologic
slideshare.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/

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.

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.

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

Making Great User Experiences at Cleveland C# .Net Meetup July 27 2017

More Related Content

What's hot

Viewers also liked

Similar to Making Great User Experiences at Cleveland C# .Net Meetup July 27 2017

More from Carol Smith

Recently uploaded

Making Great User Experiences at Cleveland C# .Net Meetup July 27 2017