Mais conteúdo relacionado Semelhante a Improving the Mobile Application User Experience (UX) (20) 2. 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
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
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
3
4. Workshop/Session
Spirit
• Interac2ve
• I
won’t
read
the
slides…
• Slides
for
you
as
a
take-‐away
• Ask
ques2ons…
OR
I
will
!!!
4
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
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
expectations have
changed
61% of Verizon users now have smartphones
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
7
8. What Users Do With Their Mobile
8
http://marketingland.com/smartphone-activities-study-email-web-facebook-37954
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
9. Mobile Tasks
9
Importance
of User
Context
For Mobile
Apps
From: A Diary Study of Mobile Information Needs, Sohn, Li, Griswold, Hollan
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
10. Context of the User
10
From: A Diary Study of Mobile Information Needs, Sohn, Li, Griswold, Hollan
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
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
11
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
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.
12
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
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
13
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
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
14
What
is
your
mobile
app
task
and
is
it
suited
for
mobile?
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
16. 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?
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
17. Usability - Design Perspective
• Understandability
• Learn-ability
• Operability
• Attractiveness
• Navigation
• Responsiveness-performance
17
What
else
can
you
think
of?
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
If the user cannot
figure it out in 30
seconds, they are
gone.
18. 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.
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
19. 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?
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
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
20
If you are not involved in the design…. ASK
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
21. 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
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
21
22. 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
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
23. Apps
and
Trust-‐-‐UX
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
23
What other methods can create trust or distrust?
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 24
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
25. 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?
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
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
26
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
29
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
30. TYPING
What
kinds
of
evalua2on
criteria
would
be
important
here?
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
30
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
31
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
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
32
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
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. 33
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
34. 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?
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
34
36. 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
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
37. 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
37
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
38. Carousels
• Use simple controls for
going back and forward.
– Manual carousel allows
the user to control the
carousel if decides to
use it.
38
©
XBOSo@,
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
39
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
40. 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?
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
40
42. Forms-Textboxes
• Textboxes in a form
should be long enough so
they fit on the screen and
accommodate user input.
42
LONG Input
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
43. 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.
43
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
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
features
• Registration incurs an extra
time/click cost on mobile
devices 44
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
45. User
Registra2on
–
Cont.
• Offer the option of
proceeding without
registration or sign
in
• What would you
give users access
to without and ID?
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
45
46. SEARCH
Similar
to
sort
and
filter
but
liele
different-‐let’s
see
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
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
47
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
48. 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
48
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
49. 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
50. 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
50
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
52. 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
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
53. 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.
53
©
XBOSo@,
Inc.
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
naviga2on?
• Tell
me
what
results
you
got
with
2-‐3
different
phones/OS
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
54
55. ERRORS
Keep
It
Simple
Stupid
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
55
56. 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
57. 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.
57
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
58. Errors-Status
Let the user know what’s going on! Error or not
(Embark – Metro – Washington DC)
58
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
59. 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?
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
59
61. 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?
61
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
62. 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
©
XBOSo@,
Inc.
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!
64
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
65. Special Mobile Application Domain
Considerations (Context)
• Location – Aware
• Shopping and Ecommerce
• Banking and Finance
65
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
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 on a map
66
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
67. Location Aware Apps
67
• Give users a choice!
• Create TRUST
Embark – Metro
Washington DC
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
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.
68
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
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 69
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
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 access
to that confirmation number. 70
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
71. Let’s Step Through a Few
Examples
Usability and UX For Mobile
(time permitting)
71
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
72. LA
• What is wrong here?
72
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
73. LA MS
• Consistent green
• Obviously want you to
click and add to the
bag
73
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
74. LA Mobile App
• Big buttons
• Good for big fingers
• Semi-meaningful
icons on the bottom
– Note contextual
location
74
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
75. Buy or Share?
• No placement of
importance or priority
75
This is one place
where general
Usability principles
apply!
Maybe on purpose?
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
76. Select Size
• Good navigation
• Good size buttons
• No priority
76
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
77. In my Basket
• What should I do
now?
• Buy or share?
• Indication of where
we are in the process
77
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
78. Shopping Basket
• Empty or Checkout?
78
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
What would you
recommend they
do here?
79. Bloomberg
• Simple Info App
• Simple colors
• Meaningful Icons
• Big enough to see
AND click on with
big fonts
• Summary going to
detail
79
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
80. Fidelity
• Easy to use scroll
– Thumb Friendly
• Simple colors
• Very limited task
based functionality
80
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
81. Fidelity
• Size and
Importance
• Easy to see what
they want you to
do
• Consistent icons
on bottom
– Simple
– Not everything
81
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
82. Yelp
• Easy on the eyes
• Semi-meaningful
icons
82
Based on what we just
learned, what attributes
would this app score well
on?
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
83. Yelp
• Consistent
• Finger friendly
• Consistent location of
icons on bottom
83
Similar to Fidelity
What does this mean?
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
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.
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.
85
86. 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
87. What Is Designed, We Test
Understanding Design Leads to
Better Understanding, Evaluation,
and Testing
OR SOMETIMES WE MUST DETERMINE THE TEST CRITERIA
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
87
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?
88
89. 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
90. 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.
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
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.
91
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
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.
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
92
93. 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
philip.lew@xbosoft.com
93
Some resources: http://www.xbosoft.com/knowledge_center/
www.facebook.com/xbosoft
©
XBOSo@,
Inc.
2014
All
Rights
Reserved
