Here are the slides from XBOSoft CEO Philip Lew's presentation at the 2016 Fluent Conference in San Francisco (March 7-10, 2016). Lew covered how to avoid critical UX mistakes and how to keep your users coming back with more than just "pretty colors and buttons."

1. Avoid
Cri)cal
UX
Mistakes
and
Keep
Your
Users
Coming
Back
Philip Lew
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
1

2. Meet Your Instructor
• Phil Lew
– Telecommunications consultant and network
designer
– Team Lead, Data warehousing product development
– Software product manager, BI product
– COO, large IT services company
– CEO, XBOSoft, software qa and testing services
• Relevant specialties/Research
– Software quality process improvement
– Software usability evaluation
– Software quality in use / UX design
2
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

3. 3
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

4. But
Today
is
All
About
You
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
4
• Why
are
you
here?

5. UX
Lessons
All
Around
Us
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
5
What
UX
Lessons
Can
You
Find?

6. Key
Take-­‐Aways
For
Today
Avoiding
UX
Mistakes
• Understand
your
users
deeply
– Context
is
king
– Less
is
more
-­‐
tasks
are
cri)cal
• Basic
UX
principles
are
just
the
beginning
– Best
design
is
not
always
best
ux-­‐
user
expecta)ons
are
key
– Trust
is
a
key
element
of
UX
• Applying
UX
principles
to
our
daily
lives
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
6

7. SeXng
Expecta)ons…
• Interac)ve
• I
won’t
read
the
slides…
• Slides
for
you
as
a
take-­‐away
(lots)
• Ask
ques)ons
whenever
you
want…
– OR
I
will
!!!
7
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

8. Why We’re Here
Usability-UX and Its Importance
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
8

9. User Expectations
• User
expecta)ons
-­‐>
UX
• Behavior
and
expecta)ons
have
changed
– Subscrip)on
economy
– Sharing
economy
– Cloud
– Social
– Mobile
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
9
48% use or would like to use a smartphone to shop while in-store or on the go.
90% of people start a task on one device, then complete it on another.

10. What Users Do With Their Mobile
10
http://marketingland.com/smartphone-activities-study-email-web-facebook-37954
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

11. MobileApps
Are
and
Will
be
Dominant
Revenue
Source
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
11
12
26
35
29

12. Merging
of
Web,
Mobile
and
IoT
• UX
focus
not
just
for
smart
phones,
not
just
browsers
• Poll
– How
many
of
you
have
a
wearable
compu)ng
device?
– How
many
have
more
than
one?
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
12

13. Understand Your Users
Deeply - Context
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
13

14. Task Context
14
Importance
of User
Context
From: A Diary Study of Mobile Information Needs, Sohn, Li, Griswold, Hollan
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

15. Context of the User
15
From: A Diary Study of Mobile Information Needs, Sohn, Li, Griswold, Hollan
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

16. Mobile
Context
Funnel
à
What
Context
is
Useful
for
You?
What
other
sensors
can
you
think
of?
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
16

17. Context
-­‐
Social
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
17
• Do
you
let
your
friends
know:
– where
you
are
– what
you
are
doing
– who
are
you
with?
– What
you
ate?
– Where
you
ran?
• Why?

18. Context Enables Better UX
Through
Anticipation and Satisfaction
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
18

19. Source: ISO 25010
Usability-Effect
User Experience
• Satisfaction: Degree to which
users are satisfied in a
specified context of use.
– Likability (cognitive satisfaction)
– Pleasure (emotional
satisfaction)
– Comfort (physical satisfaction)
– Trust
19
Including many other
factors experienced over
time and other integrated
channels and platforms
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
Convenience
Anticipation

20. Context
Enables
An)cipa)on
• With
context
you
can
an)cipate/predict
what
your
clients/customers
want.
• Does
not
just
mean
selling
them
stuff…
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
20
UX in the future will be
dependent on providing
anticipatory services
without being creepy and
without destroying trust.

21. Crea)ng
Sa)sfac)on
An)cipate,
Ask
and
Listen
• Learn
about
your
users
• Let
them
know
you
are
listening
• And
what
you
want
to
know…
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
21

22. Crea)ng
Sa)sfac)on
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
22

23. An)cipate
to
Sa)sfy
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
23

24.
But
Don’t
Nag
And
don’t
Impose
or
Invade
Right
)me
and
place
for
no)fica)ons
and
ads
Pretend
you
are
the
user
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
24

25. Understand Your Users Deeply
What are your users doing?
What is their goal?
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
25

26. Source: ISO 25010
Usability-Effect
26
Degree to which specified
users can achieve specified
goals with effectiveness,
efficiency and satisfaction in a
specified context of use.
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

27. Usability-Effect
“Context” and “Specified”
• User role
• Objective
• Task
• Environment
• Domain
• …
27
specified
users
specified
goals
specified
context
of
use
What
else
can
you
think
of?
Who
are
your
users?
What
are
their
goals?
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

28. Optimize For Your Users’ Tasks
Prioritize tasks - Majority of app’s value is
provided by a small number of tasks.
• Highly specific
– You want to sell 20 shares of stock for a
security you know you own.
• Directed, but less specific.
– Find the stocks in my account/portfolio.
• Open-ended, but restricted to a predetermined
site or app.
– See where the stock market is today
28
If you are not involved in the design…. ASK
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

29. Context
Tasks Suited For Mobile
• Deadline
• Rapidly changing
information
• Privacy
29
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

30. Tasks Not Suited For Mobile
A
B
C
D
E
F
G
H
30
What
is
your
mobile
app
task
and
is
it
suited
for
mobile?
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

31. Tasks Not Suited For Mobile à
Tasks Suited for WebApps
A
B
C
D
E
F
G
H
31
How
can
a
user
have
an
integrated
experience
moving
from
one
pla@orm
to
another?
Understanding
clearly
what
can
be
done/not
done
on
what
pla@orm?
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

32. User Experience and Trust
32
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
User experience is not just
about UI efficiency, it’s also
about trust and relationship.

33. Source: ISO 25010
Usability-Effect
User Experience
• Satisfaction: Degree to which
users are satisfied in a specified
context of use.
• Likability (cognitive
satisfaction)
• Pleasure (emotional
satisfaction)
• Comfort (physical
satisfaction)
• Trust
33
Including many other
factors experienced over
time and other integrated
channels and platforms
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
Convenience
Anticipation
What is trust and how
do you create it?

34. Usability Design
Influencing Trust
• Understandability
• Learn-ability
• Operability
• Attractiveness
• Navigation
• Responsiveness-performance
34
What
else
can
you
think
of?
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

35. Apps
and
Trust-­‐-­‐UX
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
35
What other methods can create trust or distrust?

36. Crea)ng
Trust-­‐Language
• Using
short
language
they
can
understand
rather
than
lawyer
talk
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
36

37. Create
Trust
–
Ask
First
• Ask
Permission
• Don’t
give
users
the
creeps
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
37

38. Basic UX Principles Are Just
the Beginning
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
38

39. Usability - Excel at the Basics
• Typing/Input
• Entry Widgets (Drop downs, links, and lists)
• Sort and Filter
• Menus and Forms
• Registration
• Navigation
• Search implementation
• Error handling
• Visibility
39
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

40. TYPING
What
kinds
of
evalua)on
criteria
would
be
important
here?
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
40

41. Typing
• Typing can be
quite difficult and
time consuming
• Reduce the cost of
typing
41
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

42. Typing-Input
• Characteris)cs
or
criteria
would
we
evaluate/
test
for
UX
– Typing
mistake
tolerant
– Defaults
provided
– Dele)on
of
defaults
– Computed
values
– What
others
to
add?
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
42

43. WIDGET
ENTRY
Dropdowns,
bumons,
boxes,
links,
lists,
etc…
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
43

44. Dropdown Boxes,
Buttons, and Links
• Build in tolerance for
error
• Be consistent in using
space around links and
widgets
• Be consistent in colors
and sizing
44
Un-frequent functions
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

45. Carousels
• Use simple controls for
going back and forward.
• Make controls easy and
simple to use.
• Check your competitors
for the ‘defacto’
standard.
• Defacto varies by
domain
45
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

46. SEARCH
Task
First
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
46

47. Implementing Search Functions
• Think clearly about your users’ task at
hand
– What are they searching for versus
browsing?
• Browsing tasks
• Searching tasks
• Think execution and error handling
47
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

48. Search – Be Error Friendly
• If the search returns no results,
offer alternatives
– No search results often due
to typo in query
– Inform user of search failure
– Offer results to alternative
searches
• Search by company name
(“Autodesk”) in the search-by-
symbol box à 0 search
results.
• Zero search results should
have triggered a search by
name 48
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

49. Search Implementation by Task
Sub-­‐aNribute
Where
to
apply
EvaluaOon:
2
–
all,
1
–
parOal,
0
-­‐
none
Search
box
length
appropriateness
Auto-­‐comple)on
appropriateness
Error
handling
No
Results
handling
49
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

50. NAVIGATION
Where
do
you
want
to
go
today?
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
50
Sorry… We’re not
going anywhere
today!

51. Navigation
• Users have different goals
in mind and use apps in
different context
• Navigation on desktop
standardized (by MSFT
defacto)
• Navigation not
standardized on mobile
YET, but close!
• Due to the small screens,
adaptations required
51
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

52. Required Clicks
• Minimize clicks
• Compress steps
together
– Again, think about what
their goal and task is
52
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

53. Swiping
• Let
users
know
what
they
can
and
cannot
do
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
53

54. DISPLAY
AND
VISIBILITY
Monkey
See
Monkey
Do
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
54
We will go here, via
some examples…
later.

55. ©
XBOSo?,
Inc.
2016
All
Rights
Reserved
55
• Use
of
thumbnails
and
icons
• Meaningful
or
not?
• Include
images
only
if
they
add
meaningful
content
• Be
an
end
user!
Visibility
Images, Animation, Videos, Text

56. Usability Design Summary Points
56
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

57. Conclusion-Usability
• Paramount for short
attention spans.
• Simple as possible.
• Navigation easy on
a small screen,
thumb friendly,
• Intuitive and
Learnable as
possible.
57
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

58. Let’s Step Through a Few
Examples
Some Good Stuff and Some
Mistakes
58
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

59. ©
XBOSo?,
Inc.
2016
All
Rights
Reserved
59

60. Positioning
• Effectiveness of
application buttons
is affected by
position.
• Gain emphasis
– Remove clutter
– Place the button
where the user’s
eyes will mostly
likely be.
60

61. Using Color
• Color creates emphasis.
• Dependent on the importance of the
application’s function.
• Make easy to for user to see the most
important stuff.
• Color can affect usefulness.
61

62. LinkedIn - Color
• The ‘View Full Profile’ button
• Button has a unique color that isn’t shared with any other part of
the design.
• Page has tons of information, this button still stands out.
62
Create
an
account!!!

63. Don’t Overuse a Color
63

64. Size (and Color) Matters
• Time taken to point at an object is directly influenced
by the size of that object.
• Big is beautiful depending on function-what you want
the user to do.
• Size can dictate the button’s importance over
everything else on the page.
• Take the Firefox page for example, Mozilla don’t mess
around with subtlety here.
• Good design communicates priority.
• With one massive button on the page, that priority is
obvious.
64

65. Using Size AND Color
65

66. In my Basket
• What should I do
now?
• Buy or share?
• Indication of where
we are in the process
66
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
What goal(s) do you
want your users to
accomplish?

67. Bloomberg
• Simple Info App
• Simple colors
– What colors do your
users respond to/like?
• Meaningful Icons
• Big enough to see
AND click on with
big fonts
• Summary going to
detail
67
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

68. Fidelity
• Size and
Importance
• Easy to see what
they want you to
do
• Consistent icons
on bottom
– Simple
– Not everything
68
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

69. Yelp
• Less is More
– Easy on the eyes
– Semi-meaningful icons
– Boring is OK
69
Based on what we just
learned, what are the
critical areas for
improvement?
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

70. Less is More
Determine the Needs at Hand
• Implement top scenarios
users want and
optimizing efficiency for
those scenarios ONLY.
• What need is the mobile
application attempting to
mobilize?
• How can the workflow be
designed more efficiently
to accomplish the task?
70

71. Applying Good UX and
Usability Principles to Our
Daily Lives
71
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

72. Smartwatches
Who here has some
sort of smartwatch for
fitness tracker?
• Apple
• Garmin
• Pebble
• Motorola 360
• Jawbone
• Fitbit
• Misfit
72
©
XBOSo?,
Inc.
2016
All
Rights
Reserved

73. 73
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
How Can
We
Improve
This?

74. List Your Top 5
Tasks (lookups,
data interests)
74
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
• How fast am I going
now? And how does
that compare with
before?
• What is …

75. Overall Status
During and End
of Ride
75
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
• Average Speed
• Total Distance
• Average Heart Rate
• Average Cadence

76. Doing a
Cadence
Interval
76
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
• Lap Distance
• Lap Time
• Average Cadence
• Current Cadence

77. Doing a Power
Interval
77
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
• Lap Distance
• Lap Time
• Current Speed
• Average Speed
• Heart Rate

78. Climbing Interval
78
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
• Lap Distance
• Lap Time
• Average Speed
• Average Cadence
• Heart Rate

79. What would make
the UX better for
these tasks?
79
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
• Groupings of
information
• Position of
information
• Timing of information
• Context of information

80. What
We’ve
Covered
Today
1. Understand
your
users
deeply
1. Less
is
more
-­‐
tasks
are
cri)cal
2. Context
as
the
source
of
an)cipa)on
and
sa)sfac)on
2. Excel
at
basic
usability
principles
3. Best
design
is
not
always
best
ux-­‐
user
expecta)ons
are
key
Excellence
at
all
of
the
above,
you
get
a
bonus
!long
term
rela6onship
with
your
users
built
on
trust.
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
80

81. Thanks
Ques)ons
and
Answers
Philip Lew
@philiplew
philip.lew@xbosoft.com
81
Some resources: http://www.xbosoft.com/knowledge_center/
©
XBOSo?,
Inc.
2016
All
Rights
Reserved
www.xbosoft.com