By Jorge Garcia of Gate3 Technology Consultants Des Plaines, IL - Talk given at the Des Plaines Public Library May 18, 2016

1. What is User Experience?

2. Agenda
o What is UX?
o Cognitive friction
o UX myth busting
o Principles & tactics
o Current Apps and Sites
o Want to learn more about UX?

3. UX != UI
UX
UI/UXUI

4. UX != UI
UI
Design &
Technology
Science & Research

5. UX != UI
CXUX

6. What is CX?
“How a person feels about
interacting with a brand.”

7. What is UX?
“How a person feels about
interacting with a product.”

8. What is UX?
“How a person feels about
interacting with an application.”

9. What is its purpose?
Happy
Satisfied
Productive

10. Why do we care?
• Word of mouth
• Increase sales
Happy
• Increase loyalty
• Less support requests
• Ideas vs complaints
Satisfied
• AdvocatesProductive

11. What is UX?
“The measure of friction between a
user and their goal.”

12. Types of Friction
Cognitive
Emotional
Physical

13. Cognitive Friction
o Needless brain activity
o The brain’s CPU cycles
o Conscious
o Subconscious

14. Cognitive Friction Example
• Legacy application
• Slow performance
• Increased complexity
• No immediate feedback
• Difficult to use
• Required hidden fields

15. Cognitive Friction Example
• Increased performance
• After user testing,
feedback indicated that
users complained about
the new system being
slower and asked to have
the old system back !?!!

16. Cognitive Friction Example
• Visual noise
• All fields shown by
default
• A lot of scrolling
• Navigation “helpers”
were ignored
• Saved button not visible

17. UX myth busting
• Developers are thought to believe these myths
• Incorrect or outdated information
• Least at risk
o Web developers
o Mobile developers
• Most at risk
o Experienced developers
o Enterprise developers
• Knowledge is power!

18. 10 UX Myths
Counting Clicks
“The user should never have to click
more than n times to do something”
• We are not robots
• They will click as long as…
o The cognitive friction is low
o They are getting close to their goal
• Clicks matter in highly repetitive
tasks
o Why does the user have to do that so much?

19. 10 UX Myths
Whitespace
“White space is wasted space! We need
to show the user as much data as
possible”
• Fear of whitespace comes from
o Days of terminals and low-res displays
o The mythical “Power User”
o Not knowing the user’s goals
• It can lower Cognitive & Emotional
friction
o Helps the brain process the screen
o Help user focus on goal
o User is more relaxed

20. 10 UX Myths
Scrolling is bad
“Everything should fit on one screen.
Users hate to scroll!”
• Vertical scrolling is no big deal
• Even users that say they hate to
scroll do it
• Be careful with horizontal scrolling

21. 10 UX Myths
Small details do not matter
“It’s good enough like this. Let’s just
ship it!”
• Small details can dramatically
improve UX
o Reducing the user’s friction
o Focusing the user’s attention on their goal
• Especially important if you are
selling something
o The $300 million button
• Visual details are registered by the
brain
o Quality is skin deep – to the brain

22. 10 UX Myths
More choices
“The user may want to do this or
that. Power users want it all!”
• Presents roadblocks to users
o Instead of a straight path user faces forks
o Choices can really raise Cognitive Friction
• Slow users down and make UI
harder to learn
• Users will often say Yes to more
choices
o Stop offering!
o Give them one really good way to do
something.

23. 10 UX Myths
Users make good choices
“The user knows what they need.
They will select the right option.”
• Most decision making is
subconscious
• Multiple choices can paralyze the
thought process
• Some users just guess
• Users may make choices that
lessen the UX
• Low Cognitive Friction

24. 10 UX Myths
Users know what they want
“The customer is the king! They will
drive the features and requirements.”
• Want != Need
• They will request more than they
can handle
• People are horrible at estimating
the value of features
• Beware of requests made in group
settings
• Find out the user’s goal

25. 10 UX Myths
Usability > Beauty
“Users just care if it’s usable. They
don’t care what it looks like.”
• Users judge the initial quality and
credibility by its appearance
o For web and mobile apps, users may abandon
them before discovering the good stuff
• Good visual design lowers
Emotional Friction which improves
the overall UX

26. 10 UX Myths
Let’s do it like…
“Apple, Microsoft, Google, Amazon,
etc. They spend billions on R&D!”
• Amazon’s menu system may not
be appropriate for your
application
• Do not follow them blindly
• It makes sense when you are
integrating into their platform

27. 10 UX Myths
UX is a project step
“The code is done. Let’s UX the UI
and ship it!”
• Improving the user’s experience is
a continual iterative process
• The earlier you start in the
development process, the better
results you’ll get!

28. Principles & tactics
o Understand the user’s vision
o How the brain “sees”
o Individual tactics
o Better together
o Incremental UX Improvements
o Lower Cognitive Friction

29. Shapes
• Breakdown items into a series of shapes
• Match it to data encoded in memory
• Review finer details

30. Applying Tactics

31. Shapes

32. Whitespace
• A crowded UI requires the user’s brain to use central
vision which makes cognitive friction HIGH
• Using whitespace allows the user’s brain to use peripheral
vision
• It allows the brain to rest while processing the UI
• It helps users focus on important information

33. Whitespace

34. Grouping
• Make UIs easier to understand by grouping information
• Avoid crowded groups
• Avoid repeating groups without visual separation

35. Grouping

36. Alignment
• Misalignment increases Cognitive Friction
• The brain can detect small misalignments
• There are many alignment options
• Be consistent
• Align with reading direction

37. Alignment

38. Attention
• Movement in peripheral vision is powerful
• If user focus is needed
o Movement in peripheral vision will DISTRACT
o Keep the UI CALM
• If the user attention is needed
o No movement in peripheral vision will not ATTRACT
o Use movement to get the user’s ATTENTION
• Signal important changes using subtle animations

39. Attention

40. Color
• Clashing colors make Cognitive and Emotional Friction
HIGH
• Avoid text/background color combinations
o Blue or Green Text on Red Background
o Red or Green on Blue Background
• Contract between text and background color keeps
Cognitive and Emotional Friction LOW

41. Attention

42. Current Apps and Sites

43. Current Apps and Sites

44. Current Apps and Sites

45. Current Apps and Sites

46. Want to learn more about UX?

47. Want to learn more about UX?

48. Want to learn more about UX?

49. Thank you!