Avoid Cri)cal UX Mistakes and Keep Your Users Coming Back
Philip Lew
© XBOSo?, Inc. 2016 All Rights Reserved 1
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 © XBOSo?, Inc. 2016 All Rights Reserved
But Today is All About You
© XBOSo?, Inc. 2016 All Rights Reserved 4
• Why are you here?
UX Lessons All Around Us
© XBOSo?, Inc. 2016 All Rights Reserved 5
What UX Lessons Can You Find?
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
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
Why We’re Here Usability-UX and Its Importance
© XBOSo?, Inc. 2016 All Rights Reserved 8
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.
What Users Do With Their Mobile
10
http://marketingland.com/smartphone-activities-study-email-web-facebook-37954
© XBOSo?, Inc. 2016 All Rights Reserved
MobileApps Are and Will be Dominant Revenue Source
© XBOSo?, Inc. 2016 All Rights Reserved 11
12
26
35
29
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
Understand Your Users Deeply - Context
© XBOSo?, Inc. 2016 All Rights Reserved 13
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
Context of the User
15
From: A Diary Study of Mobile Information Needs, Sohn, Li, Griswold, Hollan
© XBOSo?, Inc. 2016 All Rights Reserved
Mobile Context Funnel à What Context is Useful for You?
What other sensors can you
think of?
© XBOSo?, Inc. 2016 All Rights Reserved 16
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?
Context Enables Better UX Through
Anticipation and Satisfaction
© XBOSo?, Inc. 2016 All Rights Reserved 18
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
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.
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
Crea)ng Sa)sfac)on
© XBOSo?, Inc. 2016 All Rights Reserved 22
An)cipate to Sa)sfy
© XBOSo?, Inc. 2016 All Rights Reserved 23
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
Understand Your Users Deeply What are your users doing?
What is their goal?
© XBOSo?, Inc. 2016 All Rights Reserved 25
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
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
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
Context Tasks Suited For Mobile
• Deadline
• Rapidly changing information
• Privacy
29 © XBOSo?, Inc. 2016 All Rights Reserved
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
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
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.
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?
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
Apps and Trust-‐-‐UX
© XBOSo?, Inc. 2016 All Rights Reserved 35
What other methods can create trust or distrust?
Crea)ng Trust-‐Language
• Using short language they can understand rather than lawyer talk
© XBOSo?, Inc. 2016 All Rights Reserved 36
Create Trust – Ask First
• Ask Permission • Don’t give users the creeps
© XBOSo?, Inc. 2016 All Rights Reserved 37
Basic UX Principles Are Just the Beginning
© XBOSo?, Inc. 2016 All Rights Reserved 38
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
TYPING
What kinds of evalua)on criteria would be important here?
© XBOSo?, Inc. 2016 All Rights Reserved 40
Typing
• Typing can be quite difficult and time consuming
• Reduce the cost of typing
41 © XBOSo?, Inc. 2016 All Rights Reserved
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
WIDGET ENTRY Dropdowns, bumons, boxes, links, lists, etc…
© XBOSo?, Inc. 2016 All Rights Reserved 43
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
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
SEARCH Task First
© XBOSo?, Inc. 2016 All Rights Reserved 46
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
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
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
NAVIGATION Where do you want to go today?
© XBOSo?, Inc. 2016 All Rights Reserved 50
Sorry… We’re not going anywhere today!
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
Required Clicks
• Minimize clicks • Compress steps
together – Again, think about what
their goal and task is
52 © XBOSo?, Inc. 2016 All Rights Reserved
Swiping • Let users know what they can and cannot do
© XBOSo?, Inc. 2016 All Rights Reserved 53
DISPLAY AND VISIBILITY Monkey See Monkey Do
© XBOSo?, Inc. 2016 All Rights Reserved 54
We will go here, via some examples… later.
© 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
Usability Design Summary Points
56 © XBOSo?, Inc. 2016 All Rights Reserved
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
Let’s Step Through a Few Examples
Some Good Stuff and Some Mistakes
58 © XBOSo?, Inc. 2016 All Rights Reserved
© XBOSo?, Inc. 2016 All Rights Reserved 59
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
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
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!!!
Don’t Overuse a Color
63
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
Using Size AND Color
65
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?
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
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
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
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
Applying Good UX and Usability Principles to Our
Daily Lives
71 © XBOSo?, Inc. 2016 All Rights Reserved
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 © XBOSo?, Inc. 2016 All Rights Reserved
How Can We
Improve This?
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 …
Overall Status During and End
of Ride
75 © XBOSo?, Inc. 2016 All Rights Reserved
• Average Speed • Total Distance • Average Heart Rate • Average Cadence
Doing a Cadence Interval
76 © XBOSo?, Inc. 2016 All Rights Reserved
• Lap Distance • Lap Time • Average Cadence • Current Cadence
Doing a Power Interval
77 © XBOSo?, Inc. 2016 All Rights Reserved
• Lap Distance • Lap Time • Current Speed • Average Speed • Heart Rate
Climbing Interval
78 © XBOSo?, Inc. 2016 All Rights Reserved
• Lap Distance • Lap Time • Average Speed • Average Cadence • Heart Rate
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
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
Thanks Ques)ons and Answers
Philip Lew @philiplew [email protected]
81
Some resources: http://www.xbosoft.com/knowledge_center/
© XBOSo?, Inc. 2016 All Rights Reserved www.xbosoft.com