Improving the Mobile Application User Experience (UX)

If users can’t figure out how to use your mobile applications and what’s in it for them, they’re gone. Usability and UX are key factors in keeping users satisfied so understanding, measuring, testing and improving these factors are critical to the success of today’s mobile applications. However, sometimes these concepts can be confusing—not only differentiating them but also defining and understanding them. Philip Lew explores the meanings of usability and UX, discusses how they are related, and then examines their importance for today’s mobile applications. After a brief discussion of how the meanings of usability and user experience depend on the context of your product, Phil defines measurements of usability and user experience that you can use right away to quantify these subjective attributes. He crystallizes abstract definitions into concepts that can be measured, with metrics to evaluate and improve your product, and provide numerous examples to demonstrate the concepts on how to improve your mobile app.

1. Improving Mobile Application
User Experience

Philip Lew

ep XBOSOFT

Software

1

2. Meet Your Instructor

« Phil Lew
— Telecommunications network engineer
— Team Lead, Data warehousing product development
— Software product manager, Bl 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

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

or

4. Workshop/Session Spirit

* Interactive

* | won't read the slides...

« Slides for you as a take-away
* Ask questions... OR | will !!!

«o XBOSOFT

Software

5. Cone of Learning (Edgar Dale)

After 2 weeks Nature of
we tend to remember.!. Involvement
10% ofwhat we READ Verhal Receiving
20% of what we HEAR // HEARING WORDS
30% of what we SEE LOOKING AT PICTURES D
WATCHING À MOVIE A
LOOKING AT AN EXHIBIT
50% of what we Visual Receiving 3
HEAR and SEE WATCHING A DEMONSTRATION
SEEING IT DONE ON LOCATION
PARTICIPATING IN A DISCUSSION ivi
Receiving /
10% otwnat we sav GIVING A TALK Participating 2
90% ot whatwe DOING A DRAMATIC PRESENTATION =
both SAY SIMULATING THE REAL EXPERIENCE Doing 1.)
Zu DOING THE REAL THING

Edgar Dale, Audio-Visual.Methods jp Technology, Holt, Rinehart and Winston

6. Usability-UX and Its
Importance

gp XBOSOFT

7. 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 61% of Verizon users now have máltihotes
expectations have
+ XBOSOFT
© Soft „ment y

changed

8. What Users Do With Their Mobile

Rank Task

1
2

CONDOS

o

10

Phone calls (making, receiving)

SMS (Sending, receiving)

Email and Mobilie Utilities: Alarm, Calendar management, Adjusting
phone brightness, Changing phone profiles (such as silent, meeting,
flight mode, etc.)

Social Communication via social accounts such as Twitter, Facebook,
Google+, etc. (Social communication includes status updates, check-
ins, sharing multimedia, etc.)

Taking Photos, Making Videos, Browsing multimedia gallery
Searching, General browsing

Music, movies

Entertainment: Playing games, e-books, using local appstore

Instant Messaging (such as skype, whatsapp, MSN, gTalk or similar
apps)

Others (Online shopping, Weather updates, Sports scores updates,
Online betting, Health related, Financial apps, similar apps)
i, iii, + XBOSOFT

Software Quality Improvement

© XBOSoft, Inc. 2014 All Rights Reserved

8

9. Mobile Tasks

Importance
of User
Context
For Mobile
Apps

(GONTEXt
72%

What is context?

From: A Diary Study of Mobile Information Needs, Sohn, Li, Griswold, Hollan
XBOSOFT
Software Quality Improvement

© XBOSoft, Inc. 2014 All Rights Reserved 9

10. Context of the User

3

w
o

N
o

o

% Of Diary Entries

o

M Activity DM Location Mi Time MW Conversation

Contextual Factors

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

fiware Quality Improvement
© XBOSoft, Inc. 2014 All Rights Reserved a

10

11. 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 xe

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

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

o XBOSOFT

13

14. 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 What is your

mobile app task
.009 and is it suited

for mobile?

© XBOSoft, Inc. 2014 All Rights Reserved

15. Basic Usability Concepts

Usability Usability User

Design Effect Experience

Software Quality Improvement
© XBOSoft, Inc. 2014 All Rights Reserved 15

$ XBOSOFT

16. Design-Test and Evaluate

° What will the
mobileapp do? —

* Is ita conversion

of existing app?
. Test and Test and
¢ What functions
will a user really

access?
ep XBOSOFT
© XBOSoft, Inc. 2014 All Rights Reserved 16

17. Usability - Design Perspective

Understandability

Learn-ability If the user cannot
Operability figure it out in 30
Attractiveness seconds, they are
Navigation gone.

Responsiveness-performance

What else can you think of?

%
> XBOSOFT
© XBOSoft, Inc. 2014 All Rights Reserved

17

18. Usability-Effect

Degree to which specified
users can achieve specified

goals with effectiveness
efficiency and ¡satisfaction in a

specified context of use.

Source: ISO 25010

gp XBOSOFT
18

19. Usability-Effect

“Context” and “Specified”

* User role
+ Objective

+ Task 2 a

\ What else can you pki
+ Environment (M ss)
* Domain specified context of use

%
ge XBOSOFT
© XBOSoft, Inc. 2014 All Rights Reserve d 19

20. 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
If you are not involved in the design.... ASK + XBOSOFT

4 All Rights Re 0

21. Exercise

. Work in groups of 2-3

2. Examine one of your applications

—Or a common application

. Determine the objective of the
application

. Develop a list of 5 tasks

. Prioritize the tasks
«e XBOSOFT

21

22. Usability-Effect nn |
User Experience

. . Usability
+ Satisfaction + Efficiency

+ Effectiveness

— The degree to which users are
satisfied in a specified context
of use. Satisfaction is further

o. . Including many other
subdivided into sub- factors experienced over
characteristics: time and other channels

« Likability (cognitive satisfaction)
+ Pleasure (emotional satisfaction)

« Comfort (physical satisfaction)
Source: ISO 25010

gx! XBOSOFT

ve Quality Improv

© XBOSoft, Inc. 2014 All Rights Reserved

23. Apps and Trust--UX

SZ KAISER PERMANENTE. Close

LOCATIONS Username

ro USER v

MY ENTIRE USER NAME

neun username | Password
[Pf Remember my username
ember user ID in

Good to have this
option

„non Privacy Policy

014 All Rig

XBOSOFT

Software Quality Improvement

24. 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 Loy XBOSOFT,

ware Quality Improvement
© XBOSoft, Inc. 2014 All Rights Reserved

25. « Just having app/website is not enou

Mobile Usability Review

h
a.

+ What matters for users How many of you

have an

— Time to load the website m.companyname
.com site?
— User interface

— Accessibility of various functions
available — What is a key function?

Usability design needs to change,
otherwise usability effect and UX will suffer

%
¿e XBOSOFT
© XBOSoft, Inc. 2014 All Rights Reserved

25

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

gp XBOSOFT
2

6

27. Web-Mobile Integration

+ Poor integration

WIRELESS MIC « BUT Straightforward
REMOTE ANTENNAS about it

TOOL

This tool may not work on your mobile
device. For the best experience, please
view the desktop site.

At any time, you can switch between
mobile and desktop sites by clicking
“mobile site” or “desktop site" at the
bottom of the page.

«% XBOSOFT
© Software Quality Improvement
27

28. Mobile Usability Design

Usability Usability User

Design Effect Experience

Evaluation and Testing Criteria

ep XBOSOFT
© ty Impr a

© XBOSoft, Inc. 2014 All Rights Reserved

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

gp XBOSOFT

30. What kinds of evaluation criteria would be
important here?

TYPING

ve Quality Improv

x XBOSOFT

© XBOSoft, Inc. 2014 All Rights Reserved

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

gp XBOSOFT
1

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

X

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

© XBOSoft, Inc. 2014 All Right

(

Your Current Location

Don’t Allow OK

Friday, March 29, 2013 f

fould Like to Use [y

y]

34. Typing-Input
Characteristics or criteria would we evaluate/test for
UX
— Typing mistake tolerant
— Defaults provided
— Deletion of defaults
— Computed values
— What others to add?

gp XBOSOFT

35. Dropdowns, buttons, boxes, links, lists, etc...

WIDGET ENTRY

dy ABOSOFT

36. Dropdown Boxes,

Buttons, and Links
« Build in tolerance for

1K —
error Mileage Balance: 174,235 » Sign Out

— Leave space around En 4 check
widgets that need to be O es _

clicked (buttons, arrows Flight Status O My Account

for dropdown boxes, =
Airport Maps More
links, scrollbars) ©

« Be consistent in using
space around links and
widgets

Reservations

Un-frequent functions

XBOSOFT

re Quality Improvemen
© XBOSoft, Inc. 2014 All Rights Reserved "36

37. Lists and Scrolling
* All the items on a list should go ST

on the same page: O sanos x
— if the items are text-only, and | E3 srigntness >

— if they are sorted in an order us Walrarer >
that matches the needs of EB con ,

the task. I} Mail, Contacts, Calendars >

« Users are willing to scroll down Phone >
a list if they know how far along E4 sate >
they are and how much more Q messages >
work they have to do. Bl iPod >

— Sorted alphabetically

XBOSc

c. 2014 All Rights Reserved

38. Carousels

Use simple controls for dai
. > Select Departure Airpoi >
going back and forward.
= Select Arrival Airport >
— Manual carousel allows — —
the user to control the Anytime

carousel if decides to
use it.

Anytime -

Early Morning

ve Quality Improv

x XBOSOFT

© XBOSoft, Inc. 2014 All Rights Reserved

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

© XBOSoft, Inc. 2014 All Rights Reserved

Main Menu UNITED À ED)

Flight Information Search

Search by Flight Search by City

Select Flights:

Select Departure Airport O]

Select Arrival Airport

Departure Date:

Friday, March 29, 2013

Search

ve Quality Improv

Le ME XBOSOFT

40. Think of the
searches your
users will do?

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.
+ XBOSOFT

41. Lots of input! How do we handle this?

FORMS AND REGISTRATION/LOGIN

og XBOSOFT
E

42. Forms-Textboxes

Textboxes in a form
Log In to

should be long enough so ora
they fit on the screen and ss nn

accommodate user input.

alwlelrltivlulilole
AlslolrlelnlsiKlı
2 ]xle]vlaln [mE

© XBOSoft, Inc. 2014 All Rights Reserve: d

43. Form Field Descriptions

AAPL APPLE INC >

« 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. TM TOYOTA MOTOR CORP >

« OR use the technique GOOG GOOGLE INC >
shown here. NOK NOKIA (AB) OY >

GE GENERAL ELECTRIC CO >
MSFT MICROSOFT CORP >

CSCO CISCO SYSTEMS INC >

ra XBOSOFT

43

44. 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 Mals]ofr[s[H[y[x [1
features = BECuEno =
Registration incurs an extra
time/click cost on mobile
devices

© XBOSoft, Inc. 2014 All Rig

45. User Registration — Cont.

+ Offer the option of

Email address proceeding without
pere registration or sign
Password A

in

« What would you
give users access

to without and ID?

Not yet an Intervac member? You can still browse
our listings as a guest.
View listings ©, XBOSOFT
45

© XBOSoft, Inc. 2014 All Rights Reserved

© Remember me

46. Similar to sort and filter but little different-let’s see

SEARCH

re Quality Impros

Ge XBOSOFT

© XBOSOft, Inc. 2014 All Righ

46

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

gp XBOSOFT

48. Search Boxes

» Length of the search box >= average ss
search string. Use largest possible — =
i ill fi Of Symbet or company nane ] aa
size that will fit on the screen. — —
- Preseng search strings between Weil mae >
_ A pletion and GE GENERAL ELECTRIC CO >
suggestions. MSFT MICROSOFT CORP >
— Give history-based defaults. CSCO CISCO SYSTEMS INC >
« Do not use several search TM TOYOTA MOTOR CORP >
boxes with different functions GOOG GOOGLE INC >
on the same page. NOK NOKIA (48) OY >

— one for stocks by company symbol 4 . os
— one for stocks by company name
— one for search within their articles + XBOSOFT

t 8

A All Rights Rese!

49. Search — No Results

« lf the search returns no results,
offer alternatives
— No search results often due
to typo in query
— Inform user of search failure :
. QUOTE ERROR
— Offer results to alternative Symbol Not Found
searches
« Search by company name
(“Autodesk”) in the search-by-
symbol box > O search
results.
Zero search results should
have triggered a search by ¿Le XBOSOFT
name © XBOSoft, Inc. 2014 All Rights Reserved « a

50. Search Implementation

Sub-attribute Where to apply Evaluation: 2 — all, 1
— partial, 0 - none

Search box length
appropriateness

Auto-completion
appropriateness

Error handling

No Results handling

Le Xe XBOSOFT

re Quality Improve
© XBOSoft, Inc. 2014 All Rights Reserved

51. Where do you want to go today?

NAVIGATION

de XBOSOFT

1

52. Navigation

Users have different goals Sings vane qui
in mind and use apps in ss tacos ms ]
different context © y

Must easily find their way. Mein | Amalie | Boom
Navigation on desktop B Y vw
apps is standardized (by me ees “vs
MSFT defacto)

Navigation should be the
same on mobile. But its NOT
Due to the small screens,
adaptations required

53. Required Clicks

Minimize the clicks that a yet 7

the user needs to go
through in order to input

e
information on your site. © DA A
Compress steps together = o ee
ona single screen if a | ae | mon
appropriate rather than
separate screens. ad o 9

Write Tips to share short thoughts about your
favorite businesses.

>

y XBOSOFT

nc. 2014 All Rights Reserved

54. 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
navigation?

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

55. Keep It Simple Stupid
ERRORS

+ XBOSOFT
55

ware Quality Improvement

56. Errors - Prevention

+ Prevention is the first [et [Nice long search bar | 2
thing we want to do!

— Context sensitive Enter a Station, Landmark, or Address
he | p For example: "1600 Pennsylvania" or "Smithsonian"

— What other ways
can we prevent 1 m
errors? 0060400000

GOUGCOOE
+ BECUE0C =

«> XBOSOFT

57. Make Error Messages Simple

« Error messages need to be
seen and presented simply

« Tell the user where the error
happened (browser, = aici

Unable to download ¡story feed|from

website, application, etc.), paa RER 0
what does not work, and
what the user needs to do.

+ Explain where the error is
coming from.

Error loading content

gx KBOSOFT
re Quality Improı
© XBOSoft, Inc. 2014 All Rights Reserved

58. Errors-Status

ER Schedule Update EE Schedule Update

Embark DC Metro will remind you to try
to download the schedule update again
as soon as possible

Let the user know what's going on! Error or not

Download Complete!

Embark DC Met edules are now
up to date, and will automatically go into
effect immediately

OK

(Embark — Metro — Washington DC)

Lo XBOSOFT

Software Quality Imp

59. Error Handling

Form input error location notification
Error explanation and status

Error prevention

Other

What other Error
Handling

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

ep XBOSOFT
© ty Impr ls

© XBOSoft, Inc. 2014 All Rights Reserved

60. Monkey See Monkey Do

DISPLAY AND VISIBILITY

o XBOSOFT

61. Visibility
Images, Animation, Videos, Text

Include images only if they add meaningful

content

—Not for decoration: 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?

62. Image Sizes

« Do not use image sizes that e =
are bigger than the screen
> entire image should be RR,
viewable with no scrolling. I

Macarthur:

— Details are important but nee
only after the user has (Er

interest level in the 2am Mono
picture.

South San Francisco
San Francisco Int'l Airport

Bat XBOSOFT

63. Horizontal Scroll

O Vienna

@ Metro Center

What does
this tell you?

DC Metro de XBOSOFT

nc. 2014 All Rights Reserved

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

65. Special Mobile Application Domain
Considerations (Context)

* Location — Aware
* Shopping and Ecommerce
« Banking and Finance

o XBOSOFT

66. 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 x "pe gp XBOSOF

67. Location Aware Apps

» Give users a choice! Use Current Location

« Create TRUST “Embark DC” Would Like to

Use Your Current Location

——
Don’t Allow mr

Embark — Metro
Washington DC

gp XBOSOFT

68. 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. A + XB

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

70. 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 ques
to that confirmation number. X u

71. Let’s Step Through a Few
Examples

Usability and UX For Mobile
(time permitting)

Software Quality Improvement

72. LA

x ogle :
ES « What is wrong here?

Gardeners Moisturizing Hand Lotion
Soaps & Toiletries

$16.00

Quantity: 1

ADD TO CART

Tweet ou) EEE

isturizing hand lotion is nutrient rich to soothe and
s. Beautifully light and easily absorbed for effectiv

XBOSOFT

‘Software Quality Improvement

O XBOSof, Inc. 2014 All Rights Reserved

73. A robust kitchen and dining range in oiled
oak, blending clean simple lines with
exposed end grain for a natural rustic
appearance.

+ Solid oiled oak

+ Round dining table seats four people

Dimensions: H75cm W120cm D120cm

+ This product is self assembly and will not
be unpacked on delivery . Two persons are
required for correct assembly.

Your selection so far:

Product: Refectory Round Dining Table «> Change

Total price: £787.50 was £1050.00
Quantity: GED
Delivery We estimate your dining table wi be

delivered within 5 weeks.

© XBOSoft, In:

LA MS

« Consistent green
« Obviously want you to
click and add to the
bag
2014 All Rig! + AN

74. LA Mobile App

| Big buttons

E = Good for big fingers
“A A + Semi-meaningful

= m icons on the bottom

Lighting Bedding

— Note contextual
“ location
A à
«e XBOSOFT

© XBOSoft, Inc. 2014 All Right: 74

75. Buy or Share?

« No placement of
importance or priority

Summer Meadow Ready Made Curtains
£168.75 (WAS £225.00)

a

This is one place

With pretty butterflies in pink and purples dancing where general

across this ‘Summer Meadow fabric, these ready Sun . .

LE ee Cr NE Usability principles
apply!

Maybe on purpose?

x XBOSOFT

re Quality Improı
© XBOSoft, Inc. 2014 All Rights Reserved

76. Back LAURA ASHLEY

Summer Meadow Ready Made Curtains
£168.75 (WAS £225.00)

a

Way ADD TO BASKET
4, Y ADD AND CHECKOUT

(|

!

One Size on

Cancel Select a size & quantity Si

© XBOSoft, Inc. 2014 All Rights Reserved

Select Size

« Good navigation
« Good size buttons
« No priority

ware Quality Improveme

+ XBOSOFT
7

6

77. a ms |nmy Basket

Back LAURA ASHLEY <= =

+ What should | do
now?

« Buy or share?

¢ Indication of where
we are in the process

made curtains are fully lined with a
heading. 100% cotton.

re Quality Impros

+ XBOSOFT

77

78. Shopping Basket

LAURA ASHLEY Eat

CES var « Empty or Checkout?

What would you
recommend they
do here?

A Empty Checkout £168.75

J X80:

© XBOSoft, Inc. 2014 All Rights Reserved

79. Bloomberg

Æ News Headlines

y. Worldwide .
Dallara Says Greek Euro Exit May Simple Info App
Exceed 1 Trillion Euros E
B 5/26/12 49 minutes ago m Simp le colors

id to Plan Raising $1.3
Billion, Ci Job: .
piden Meaningful Icons
Rajaratnam Had P&G Board ‘ .
Gupta Trial Witness Says B ig enoug h to see
A 5/26/12 4 hours ago Ñ .
Asian Stocks Fall for Fourth Week on AND click on with
China, Europe Debt Concerns .
B 5/26/12 8 hours ago big fonts
Wen Call for Growth, Not Loan Push,
Echoed by Cabinet u Summary going to
so a 2 detail

Bloomberg @
News Markets My Stocks Stock Finder

XBOSOFT

Software Quality Improvement

79

80. @Fideli

==]

Fidelity

« Easy to use scroll
cueros (sous D 2
ee 4 - Thumb Friendly

+ Simple colors
« Very limited task

based functionality

Stop Limit

> XBOSOFT
« 5 80

© XBOSoft, Inc. 2014 All Rights Reserved

81. Fidelity

* Size and
| Importance
Order Type | Markt Order B « Easy to see what
mein Force: | On Open sl they want you to
= do
+ Consistent icons
nn on bottom

= -Simple

u —Not everything
ep XBOSOFT

82. Yelp

eh naa « Easy on the eyes

CA : :

= = « Semi-meaningful
© R

v ICONS
Nearby About Me Bookmarks

e vw

Check In Friends

8
Lis] © 6 Based on what we just

ER an pais learned, what attributes

- would this app score well
Write Tips to share short thoughts about your
favorite businesses. on?

y XBOSOFT
8:

2

83. Yelp

Home Nearby Monocle

{{ Restaurants

« Consistent
Y Bars . Í
æ Coffee & Tea ° Finger friendly

R Gas & Service Stations « Consistent location of

(h Drugstores icons on bottom

© Everything
@ Deals
# Check-In Offers

Similar to Fidelity

What does this mean?
= — m

® Hot New Businesses

Trade

ge XBOSOFT
8:

3

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

TA

24 Flight Check-in

Ö Flight Status

2

My Account

More Options

D

Smartphone Version

0101010110

re Quality Impros

en XBOSOFT

84

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

y XBOSOFT
8!

5

86. Web-Mobile Integration

E

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. | was at my desktop,
and opened the link and got the mobile version.

o XBOSOFT
8

6

87. What Is Designed, We Test

Understanding Design Leads to
Better Understanding, Evaluation,
and Testing
OR SOMETIMES WE MUST DETERMINE THE TEST CRITERIA

© XBOSoft, Inc. 2014 All Rights Reserved

88. 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?

+ XBOSOFT

89. Determine the Needs at Hand

+ Implement top scenarios @ Fidelity
users want and eo E
optimizing efficiency for Gite
those scenarios ONLY. Order Type; | Markt Order B

-Filling an order was a mente Onto Open B
scenario optimized Conditions: None
just for mobile.
— Only 4 data items to fill eS

tional Important Information

in, 2 being scroll

buttons, biggest button
indicates precisely the
task purpose. dy XBOSOFT

9

90. Mobile Usability Design

Summary Points
Quick - Can you read the text without zooming or
scrolling?
Simple Navigation-Task Oriented
Thumb Friendly Design for the small screen.

Don’t make users struggle to click tiny areas that

Visibility-Colors are much smaller than their fingers.
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 Boxe

91. 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.
«py XBOSOFT

91

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

93. de XBOSOFT

Questions 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 Philip Lew
y @xbosoft y @philiplew
408-350-0508 [email protected]

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

E www.facebook.com/xbosoft
dy XBOSOFT

© XBOSOft, Inc. 2014 All Rights Reserved 93