fluentconf 2016: avoiding critical ux mistakes with philip lew

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

But Today is All About You


• Why are you here?

UX Lessons All Around Us


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 !!!


Why We’re Here Usability-UX and Its Importance


User Expectations •  User expecta)ons -‐> UX •  Behavior and expecta)ons have changed –  Subscrip)on economy –  Sharing economy –  Cloud –  Social – Mobile


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


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?


Understand Your Users Deeply - Context


Task Context

14

Importance of User Context

From: A Diary Study of Mobile Information Needs, Sohn, Li, Griswold, Hollan


Context of the User

15

From: A Diary Study of Mobile Information Needs, Sohn, Li, Griswold, Hollan


Mobile Context Funnel à What Context is Useful for You?

What other sensors can you

think of?


Context -‐ Social


•  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


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


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…


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…


Crea)ng Sa)sfac)on


An)cipate to Sa)sfy


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


Understand Your Users Deeply What are your users doing?

What is their goal?


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.


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?


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


Context Tasks Suited For Mobile

•  Deadline

•  Rapidly changing information

•  Privacy


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?


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?


User Experience and Trust


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


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?


Apps and Trust-‐-‐UX


What other methods can create trust or distrust?

Crea)ng Trust-‐Language

•  Using short language they can understand rather than lawyer talk


Create Trust – Ask First

•  Ask Permission •  Don’t give users the creeps


Basic UX Principles Are Just the Beginning


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


TYPING

What kinds of evalua)on criteria would be important here?


Typing

•  Typing can be quite difficult and time consuming

•  Reduce the cost of typing


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?


WIDGET ENTRY Dropdowns, bumons, boxes, links, lists, etc…


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


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


SEARCH Task First


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


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


NAVIGATION Where do you want to go today?


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


Required Clicks

•  Minimize clicks •  Compress steps

together – Again, think about what

their goal and task is


Swiping •  Let users know what they can and cannot do


DISPLAY AND VISIBILITY Monkey See Monkey Do


We will go here, via some examples… later.


•  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


Conclusion-Usability

•  Paramount for short attention spans.

•  Simple as possible. •  Navigation easy on

a small screen, thumb friendly,

•  Intuitive and Learnable as possible.


Let’s Step Through a Few Examples

Some Good Stuff and Some Mistakes


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


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


Fidelity •  Size and

Importance •  Easy to see what

they want you to do

•  Consistent icons on bottom – Simple – Not everything


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?


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


Smartwatches Who here has some sort of smartwatch for fitness tracker? •  Apple •  Garmin •  Pebble •  Motorola 360 •  Jawbone •  Fitbit •  Misfit



How Can We

Improve This?

List Your Top 5 Tasks (lookups, data interests)


•  How fast am I going now? And how does that compare with before?

•  What is …

Overall Status During and End

of Ride


•  Average Speed •  Total Distance •  Average Heart Rate •  Average Cadence

Doing a Cadence Interval


•  Lap Distance •  Lap Time •  Average Cadence •  Current Cadence

Doing a Power Interval


•  Lap Distance •  Lap Time •  Current Speed •  Average Speed •  Heart Rate

Climbing Interval


•  Lap Distance •  Lap Time •  Average Speed •  Average Cadence •  Heart Rate

What would make the UX better for

these tasks?


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