Improving the Mobile Application User Experience (UX)

Improving Mobile Applica2on User Experience

Philip Lew

© XBOSo@, Inc. 2014 All Rights Reserved 1

Meet Your Instructor •  Phil Lew

– Telecommunications network engineer – 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. 2014 All Rights Reserved

Agenda

•  What is usability and UX and why important? •  Usability and UX Design and Testing

Concepts – Web – Mobile

•  Some Exercises mixed in for testing and evaluating applications

•  Q&A


Workshop/Session Spirit

•  Interac2ve •  I won’t read the slides… •  Slides for you as a take-‐away •  Ask ques2ons… OR I will !!!



Usability-UX and Its Importance


Mobile User Expectations •  Business models have

changed –  Instead of paying

upfront and ‘owning’ the software

– Pay as you go, pay by subscription

•  Cloud and mobile convergence

•  Behavior and expectations have changed

61% of Verizon users now have smartphones


What Users Do With Their Mobile

8

http://marketingland.com/smartphone-activities-study-email-web-facebook-37954

© XBOSo@, Inc. 2014 All Rights Reserved

Mobile Tasks

9

Importance of User Context For Mobile Apps

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


Context of the User

10

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


Mobile Usability Challenges •  Limited attention – people often multi-tasking •  User needs triggered by context

– Application needs to provide what they want at the “right” time and in a form appropriate to the current context.

•  Require access to personal data, obtained either through web-based services or their personal devices.

•  Require sensitivity to the task at hand, context, and requirements for personal and public data


Mobile Task Considerations •  Small screen and slow interaction

–  slow download speed and/or small keypads

•  What functionalities of your full app need to be transferred to mobile? – More items >> less attention for each of them

•  Task workflow on mobile should require just 1- 2 clicks – Each click is an opportunity for a dropped

connection or slow downloading user experience.


Tasks Suited For Mobile •  Tasks that have a deadline

–  Buying a gift at the last minute –  Paying bills during vacations –  checking bank balances before writing a check

•  Tasks that involve rapidly changing information –  Traffic, flight information, movie schedules, directions

•  Tasks that require privacy –  Small screens ideal for private activities –  Check personal email or doing non-work related tasks –  Social networking


Tasks Not Suited For Mobile •  Involve a large amount of complexity and/or very

time consuming – Research – Large amounts of reading – Comparison of many options – Advanced transactions

14

What is your mobile app task and is it suited for mobile?


Basic Usability Concepts

User Experience

Usability Effect

Usability Design


Design-Test and Evaluate

Design

Test and Evaluate

Release

Test and Evaluate

16

•  What will the mobileapp do?

•  Is it a conversion of exis2ng app?

•  What func2ons will a user really access?


Usability - Design Perspective

•  Understandability •  Learn-ability •  Operability •  Attractiveness •  Navigation •  Responsiveness-performance

17

What else can you think of?


If the user cannot figure it out in 30 seconds, they are gone.

Source: ISO 25010

Usability-Effect

18

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

19

specified users

specified goals

specified context of use

What else can you think of? Who are your users? What are their goals?


Design and Test For the Task Prioritize tasks - Some tasks more important than others.

–  Majority of app’s value is provided by a small number of tasks.

Examples •  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 market is today

20

If you are not involved in the design…. ASK © XBOSo@, Inc. 2014 All Rights Reserved

Exercise

1. Work in groups of 2-‐3 2.  Examine one of your applica2ons

– Or a common applica2on 3.  Determine the objec2ve of the

applica2on 4.  Develop a list of 5 tasks 5.  Priori2ze the tasks


Source: ISO 25010

Usability-Effect User Experience

•  Satisfaction – The degree to which users are

satisfied in a specified context of use. Satisfaction is further subdivided into sub-characteristics:

•  Likability (cognitive satisfaction) •  Pleasure (emotional satisfaction) •  Comfort (physical satisfaction) •  Trust

22

Including many other factors experienced over time and other channels


Apps and Trust-‐-‐UX


What other methods can create trust or distrust?

Mobile Usability

•  What we have learned so far: •  What is usability/UX •  Design considerations

•  What’s next •  Special considerations for mobile devices •  Integration •  Evaluation and testing criteria 24


Mobile Usability Review •  Just having app/website is not enough •  What matters for users

– Time to load the website – User interface – Accessibility of various functions

available – What is a key function? •  Usability design needs to change,

otherwise usability effect and UX will suffer

25

How many of you have an

m.companyname.com site?


Mobile Usability Different Platforms Need Different Design

•  Horizontal swiping now universal –  Include a visible cue when people can swipe –  Avoid swipe ambiguity: don't use the same swipe gesture to

mean different things on different areas of the same screen or within same app.

–  Use the same meanings for mobile phones and tablets –  Mobile-device (iPad) users typically expect to horizontally swipe

while desktop websites avoid horizontal scrolling

•  Mobile sites should perform better than full sites when used on a mobile device.

•  Mobile apps should integrate with the desktop version

26

Web-‐Mobile Integra2on

•  Poor integra2on •  BUT Straighcorward about it

27

Mobile Usability Design

Evaluation and Testing Criteria

User Experience

Usability Effect

Usability Design


Evaluation and Testing Criteria •  Typing/Input •  Entry Widgets (Drop downs, links, and lists) •  Sort and Filter •  Menus and Forms •  Registration •  Navigation •  Search implementation •  Errors •  Visibility


TYPING

What kinds of evalua2on criteria would be important here?


Typing •  Typing can be quite difficult for mobile

users – Reduced keypad – Big fingers for big people – Lessened dexterity (older users –

MORE AND MORE) •  Save as much of the users’ typing work

as possible •  Reduce the cost of typing


Typing-Use Personalization and History to Provide Defaults

•  Defaults can be based on what the user has

typed or submitted in the past (e.g., zipcodes, names, addresses) – Don’t use 0 as the default for a telephone

number or zip code. – Remember the last value last typed for

their zip code and use for subsequent entries.

•  Allow Easy Deletion for Defaults


Compute/Fill In Values •  Compute and fill in for the user

if possible and appropriate –  i.e. detect location for location

aware apps – Zip code à compute other

information automatically – Adding postage costs to the

total costs •  Users often expect location

information determined automatically.


Typing-Input

•  Characteris2cs or criteria would we evaluate/test for UX – Typing mistake tolerant – Defaults provided – Dele2on of defaults – Computed values – What others to add?


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


Dropdown Boxes, Buttons, and Links

•  Build in tolerance for error –  Leave space around

widgets that need to be clicked (buttons, arrows for dropdown boxes, links, scrollbars)

•  Be consistent in using space around links and widgets

36

Un-frequent functions


Lists and Scrolling •  All the items on a list should go

on the same page: –  if the items are text-only, and –  if they are sorted in an order

that matches the needs of the task.

•  Users are willing to scroll down a list if they know how far along they are and how much more work they have to do. – Sorted alphabetically


Carousels

•  Use simple controls for going back and forward. – Manual carousel allows

the user to control the carousel if decides to use it.


Sorting and Filtering •  Many ways to sort the

same list, depending on the user and the task

•  For different sort criteria, provide the option to sort that list according to all criteria


Exercise •  Exercise: Find out if a flight from Munich to

London is on time for today. Try 2 diff airlines. – Don’t have the number of the flight or

the exact time – Look through the list of arrivals at

London Heathrow Airport •  Exercise: Do a search on Wine Spectator

to see what search criteria you can use.

Think of the searches your users will do?


FORMS AND REGISTRATION/LOGIN Lots of input! How do we handle this?


Forms-Textboxes

•  Textboxes in a form should be long enough so they fit on the screen and accommodate user input.

42

LONG Input


Form Field Descriptions •  Small screen – easy to

lose context and become disoriented so descriptions are important.

•  Description critical in a form, where many fields have to be filled in.

•  OR use the technique shown here.


Login/User Registration •  Passwords and usernames

are hard •  Do not ask people to register

on a mobile device – Sign in is different than

registration •  Skipping registration should

be the default option, but less features

•  Registration incurs an extra time/click cost on mobile devices 44 © XBOSo@, Inc. 2014 All Rights Reserved

User Registra2on – Cont. •  Offer the option of

proceeding without registration or sign in

•  What would you give users access to without and ID?


SEARCH Similar to sort and filter but liele different-‐let’s see


Implementing Search Functions

•  Search takes space and grabs user’s attention, distracting from other tasks

•  Think clearly about your users’ task at hand – Browsing tasks – Searching tasks – Execution oriented


Search Boxes •  Length of the search box >= average

search string. Use largest possible size that will fit on the screen. –  Preserve search strings between

searches. –  Use auto-completion and

suggestions. –  Give history-based defaults.

•  Do not use several search boxes with different functions on the same page. –  one for stocks by company symbol –  one for stocks by company name –  one for search within their articles


Search – No Results •  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 49 © XBOSo@, Inc. 2014 All Rights Reserved

Search Implementation Sub-‐a9ribute Where to apply EvaluaDon: 2 – all, 1

– parDal, 0 -‐ none

Search box length appropriateness

Auto-‐comple2on appropriateness

Error handling

No Results handling


NAVIGATION Where do you want to go today?


Navigation •  Users have different goals

in mind and use apps in different context

•  Must easily find their way. •  Navigation on desktop

apps is standardized (by MSFT defacto)

•  Navigation should be the same on mobile.

•  Due to the small screens, adaptations required

52

But it’s NOT


Required Clicks •  Minimize the clicks that

the user needs to go through in order to input information on your site.

•  Compress steps together on a single screen if appropriate rather than separate screens.


Exercise

•  Break into small teams of 2-‐3 people •  Complete the task of returning a phone call

– Start from home screen •  What criteria would you use to rate naviga2on?

•  Tell me what results you got with 2-‐3 different phones/OS


ERRORS Keep It Simple Stupid


Errors - Prevention

•  Prevention is the first thing we want to do! – Context sensitive

help – What other ways

can we prevent errors?

56

Nice long search bar

Make Error Messages Simple

•  Error messages need to be seen and presented simply

•  Tell the user where the error happened (browser, website, application, etc.), what does not work, and what the user needs to do.

•  Explain where the error is coming from.


Errors-Status

Let the user know what’s going on! Error or not (Embark – Metro – Washington DC)


Error Handling •  Form input error loca2on no2fica2on •  Error explana2on and status •  Error preven2on •  Other

What other Error Handling

characteris2cs would you use for YOUR app to evaluate/test it?


DISPLAY AND VISIBILITY Monkey See Monkey Do


Visibility Images, Animation, Videos, Text

•  Include images only if they add meaningful content – Not for decora2on: How does the image contribute to the content, task or message?

– Benefit versus cost -‐ they take space on the page and download slowly for online app.

– Do thumbnails really add value or just look cool?


Image Sizes •  Do not use image sizes that

are bigger than the screen à entire image should be viewable with no scrolling. – Details are important but

only after the user has interest level in the picture.

62 Bart


Horizontal Scroll

63

What does this tell you?

DC Metro © XBOSo@, Inc. 2014 All Rights Reserved

Displaying Content

People rarely read all the text •  For information apps, new content should be

given priority. •  Summarize content: When users click on the

summary/headline, they are taken to more detail that does not repeat information in the summary.

•  Concise, direct language •  Format, use of bullets •  Think about context!


Special Mobile Application Domain Considerations (Context)

•  Location – Aware •  Shopping and Ecommerce •  Banking and Finance


Maps and Location-Aware Applications

•  Location aware applications are becoming more prevalent on mobile applications.

•  Whenever you have location information in your app, link it to a map and include a way of getting directions.

•  Cutting and pasting is inconvenient or impossible.

•  Don’t just give users an address without a way to find it on a map


Location Aware Apps

67

•  Give users a choice!

•  Create TRUST

Embark – Metro Washington DC


Ecommerce Apps •  With products, use image thumbnails that are big

enough so that the user can recognize what it is –  Use an image size that fits the screen.

•  Provide option to email a product to a friend. •  Provide option to save that product and return to

it later. •  Provide option to save the product in a wish list. •  Allow users to save the items that they like, so

that they could go back to them on a larger screen (integrate with desktop app) and inspect them more closely.


Ecommerce Apps

Always Provide Critical Information: •  Locations and opening hours (if applicable) -

checking location information, business hours, and order status are most frequent types of mobile based ecommerce activities

•  Shipping costs - Make sure easily accessible and noticeable.

•  Phone number-Make the phone number easily findable so users feel comfortable they can call if there is a problem with their order

•  Order status 69 © XBOSo@, Inc. 2014 All Rights Reserved

Banking Apps •  Mobile banking and financial transactions growing •  Provide clear understanding of mobile app

security •  Users hesitant to make transactions that involve

any significant amount of transaction – Enable confirmation by emailing a message to

themselves. – Confirmation are hard to write down when you

are ‘mobile’. – Give users comfort they will have later access

to that confirmation number. 70 © XBOSo@, Inc. 2014 All Rights Reserved

Let’s Step Through a Few Examples

Usability and UX For Mobile (time permitting)


LA •  What is wrong here?


LA MS •  Consistent green •  Obviously want you to

click and add to the bag


LA Mobile App •  Big buttons •  Good for big fingers •  Semi-meaningful

icons on the bottom –  Note contextual

location


Buy or Share?

•  No placement of importance or priority

75

This is one place where general

Usability principles apply!

Maybe on purpose?


Select Size •  Good navigation •  Good size buttons •  No priority


In my Basket

•  What should I do now?

•  Buy or share? •  Indication of where

we are in the process


Shopping Basket

•  Empty or Checkout?


What would you recommend they

do here?

Bloomberg •  Simple Info App •  Simple colors •  Meaningful Icons •  Big enough to see

AND click on with big fonts

•  Summary going to detail


Fidelity •  Easy to use scroll

– Thumb Friendly •  Simple colors •  Very limited task

based functionality


Fidelity •  Size and

Importance •  Easy to see what

they want you to do

•  Consistent icons on bottom – Simple – Not everything


Yelp •  Easy on the eyes •  Semi-meaningful

icons

82

Based on what we just learned, what attributes would this app score well on?


Yelp •  Consistent •  Finger friendly •  Consistent location of

icons on bottom

83

Similar to Fidelity

What does this mean?


Making Assumptions

•  Sense the platform and switch to a ‘mobile site’ to provide mobile users with more efficient web experience.

•  Don’t make too many assumptions regarding the users’ expectations.

•  For full United.com site, we need to scroll to the bottom to find the link.

84

Give a Choice to Avoid Making the Wrong Assumption

•  Managing user expectations of how the application should behave needs to be thought out carefully.

•  Context of the user and their expectations is key.

•  LinkedIn appears to be one step ahead and gives you a choice when accessing their site; an optimized mobile experience via an mobile-app, or just their ordinary website.

85

Web-Mobile Integration

•  Overall integration of web-apps needs to be thought out carefully with mobile scenarios in mind.

•  Friend wanted to show me a product at www.costco.com. •  He sent me a link from his iPhone. I was at my desktop,

and opened the link and got the mobile version.

86

What Is Designed, We Test

Understanding Design Leads to Better Understanding, Evaluation,

and Testing OR SOMETIMES WE MUST DETERMINE THE TEST CRITERIA


Determine the Needs at Hand

•  What need is the mobile application attempting to mobilize?

•  How can the workflow be designed more efficiently to accomplish the task?

•  How can the specific features and characteristics of a mobile device improve and complement the experience in contrast to the normal web-based application or other mobile platforms?

88

Determine the Needs at Hand •  Implement top scenarios

users want and optimizing efficiency for those scenarios ONLY. – Filling an order was a

scenario optimized just for mobile.

– Only 4 data items to fill in, 2 being scroll buttons, biggest button indicates precisely the task purpose.

89

Mobile Usability Design Summary Points

•  Quick - Can you read the text without zooming or scrolling?

•  Simple Navigation-Task Oriented •  Thumb Friendly •  Visibility-Colors •  Easy to Convert/Complete the task •  Contextual •  Integrate-Seamless with webapp •  You must limit the number of features to those

that matter the most for the mobile users 90

Design for the small screen. Don’t make users struggle to click tiny areas that are much smaller than their fingers.


Conclusion-Usability and UX •  Paramount for today’s applications with

users’ short attention spans. •  UX is heavily influenced by expectations. •  Designs should be as simple as possible

for the user. – Make navigation easy on a small screen,

thumb friendly, and as intuitive as possible. – Avoid swipe ambiguity

•  If the user cannot figure it out in 30 seconds, they are gone.


Conclusion (last one!!) Don’t Mobilize Everything

•  Mobile-app versus your web-app - differentiate and discern access from each platform.

•  Determine the features you really need and optimize screens for certain workflows rather than trying to do it all.

•  Think about the tasks!! •  Better to have an half of an application that kicks

_____ rather than a half ____ application.


Ques2ons and Answers

Please fill out an evaluation form and drop it in the collection basket

located at the back of the room.

www.xbosoft.com @xbosoft 408-350-0508

Philip Lew @philiplew [email protected]

93

Some resources: http://www.xbosoft.com/knowledge_center/

www.facebook.com/xbosoft


Technology

Improving the Mobile Application User Experience (UX)