Más contenido relacionado Similar a FluentConf 2016: Avoiding Critical UX Mistakes with Philip Lew (20) FluentConf 2016: Avoiding Critical UX Mistakes with Philip Lew1. 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
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
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
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
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
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
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
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
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
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!!!
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
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
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