The Four Mobile Traps

THE
FOUR
MOBILE
TRAPS
The Most Common Mistakes
Made by Mobile Apps and Websites
SUMMARY
SUMMARY: FOUR COMMON

MISTAKES PLAGUE MOBILE APPS
AND WEBSITES
Companies creating mobile apps and websites often underestimate how different
the mobile world is. They assume incorrectly that they can create for mobile using
the same design and business practices they learned in the computing world. As a
result, they frequently struggle to succeed in mobile.
These companies can waste large amounts of time and money as they try to
understand why their mobile apps and websites don’t meet expectations. What’s
worse, their awkward transition to mobile leaves them vulnerable to upstart
competitors who design first for mobile and don’t have the same computing
baggage holding them back. From giants like Facebook to the smallest web
startup, companies are learning that the transition to mobile isn’t just difficult, it’s
also risky.
This whitepaper describes the four most common mistakes that companies make
in mobile apps and websites. The traps were identified through thousands of
mobile user tests run by UserTesting.com. The mistakes are common because
they grow out of some of the best practices that make a company successful in
the traditional computing world. The more successful you’ve been in traditional
computing, the more likely you are to make these mistakes in mobile.
In the pages that follow, we’ll describe the traps, how to recognize them, and what
you can do to avoid them.
The Four Mobile Traps 2 UserTesting.com

CONTENTS
INTRODUCTION: THE TRANSITION TO MOBILE IS DANGEROUS 4
TRAP #1 - CLINGING TO LEGACY: ‘PORTING’ A COMPUTER APP OR WEBSITE TO MOBILE 8
TRAP #2 - CREATING FEAR: FEEDING MOBILE ANXIETY 17
TRAP #3 - CREATING CONFUSION: CRYPTIC INTERFACES AND CROOKED SUCCESS PATHS 23
TRAP #4 - CREATING BOREDOM: FAILURE TO QUICKLY ENGAGE THE USER 34
USER TESTING IN ACTION 38
CONCLUSION: HOW TO AVOID THE FOUR TRAPS 40
THE TEN MOST IMPORTANT PRINCIPLES TO KEEP IN MIND WHEN GOING MOBILE 41
METHODOLOGY
The information in this report was drawn from thousands of real-world tests of mobile
applications and websites conducted by UserTesting.com. In the tests, users performed tasks
with mobile applications and websites while being recorded on video. Those tests were broken
into individual steps, and each step was categorized to identify issues including task success rate,
causes of any problem encountered, and effect on user’s emotional affinity toward the app or site.
The results were then aggregated to identify the most common problems and their overall impact
on usage and affinity. This paper presents the recurring problems that were identified most often
across many mobile tests.
Testing participants were recruited through a combination of UserTesting.com’s panel, other

online panels, and live intercepts.
INTRODUCTION
THE TRANSITION TO MOBILE IS

DANGEROUS
Platform transitions – paradigm changes in the ways that computers work and
are used – are often extinction events for software. Changes like the transition to
graphical interfaces in the 1980s and the rise of web apps in the late 1990s have
typically crippled the software leaders of the previous generation. Now the tech
industry is going mobile, and the same process seems to be happening again.
1980S: THE TRANSITION FROM DOS TO WINDOWS

When MS-DOS was the dominant operating system for computers, the leading
applications were Lotus 1-2-3 (spreadsheet), WordPerfect (word processing), and
dBase (database). All three seemed to be permanent standards at the time, and yet
none of them were able to become leaders in the world of graphical interfaces in
the 1980s. Despite huge engineering teams and massive financial resources, they
were beaten by companies that designed from the ground up for the new graphical
paradigm.
MS-DOS app leader Windows app leader
Word Processing Word Perfect Word
Spreadsheet Lotus 1-2-3 Excel
Database dBase Access/FileMaker
Fig. 1. The leading software applications for MS-DOS and Windows

INTRODUCTION
1990S: THE TRANSITION FROM WINDOWS TO WEB

By the late 1990s, the dominant software companies were the winners from
the graphical interface wars: Microsoft, Adobe, Symantec, etc. As the center of
software innovation moved from computers to the web, you’d expect that those
software leaders would have also become the leaders in the web; after
all, they had the most money, strong brands, and huge staffs of engineers. But
none of the GUI leaders were able to transition to an equally powerful position
on the web. Instead, new web-first companies took the lead: Google, Yahoo,
Facebook, Amazon, and so on.
Windows app leaders, 1995 Web traffic leaders, 2013
1. Microsoft 1. Google
2. Adobe 2. Facebook
3. Autodesk 3. Yahoo
4. Electronic Arts 4. Amazon
5. Intuit 5. eBay
6. Borland 6. Wikipedia
7. Symantec 7. Craigslist
Fig. 2. The software leaders for Windows and for the web
At left, the leading Windows application companies by revenue, as of 1995. At right, the leading US
consumer Internet sites by reach, as of 2013 (source: Alexa; subsidiaries excluded for clarity).

INTRODUCTION
TODAY: THE MOBILE EXPLOSION

Now computing is transitioning again, this time to mobile. Although the mobile
world is still very young and it’s too early to pick the ultimate winners, there’s
already strong evidence that mobile-first companies are taking the lead. Gaming
is probably the most developed mobile software category at this time, and it is a
good example of what’s happening. The chart below lists the top computer game
publishers on the left, and the top-selling iPhone games on the right, with their
publishers. Although some publishers show up on both lists, it’s clear that new
companies are playing a leading role in mobile gaming.
Top game publishers* Top iPhone games & publishers

by revenue, 2011 By Revenue, Q4 2012
Sony Rovio: Angry Birds

Microsoft Mojang: Minecraft
Nintendo Ninja Kiwi: Bloons
Activision Blizzard Disney: Wreck-it Ralph
Electronic Arts Activision: Wipeout
Konami Ndemic Creations: Plague Inc.
Namco Bandai Halfbrick Studios: Fruit Ninja
Square Enix EA: Need for Speed Most Wanted
Ubisoft Warner: Scribblenauts
Zynga Ammonite Design Studios: Slender Man
Leading computer and console game publishers vs. best-selling mobile games (publisher: game title)
Sources: Statists.com, Distimo.
*Computer/Console

INTRODUCTION
WHY ARE PLATFORM TRANSITIONS SO CHALLENGING?

Platform transitions disrupt existing leaders in two ways. First, they cause users
to re-think their software habits. This is a normal human reaction; when you’re
moving to a new computing platform or category of device, everything is new
and you’re naturally open to changing your habits. Second, platform transitions
change the features, design approaches, and business practices that make
software successful.
The old rules no longer apply. These two simultaneous changes mean that existing
software leaders have to not only re-sell themselves to their customers, but must
do so in unfamiliar conditions where the skills and development approaches that
made them strong in the past can turn into liabilities. On top of this, the leaders
usually underestimate the scope of the challenge until it’s too late to react. The
combination often cripples software leaders.
User tests conducted by UserTesting.com illustrate the challenge in mobile. These

tests, consisting of thousands of videos of people using real-world mobile apps
and websites, show that many companies fall into four common errors when going
mobile. These traps can ruin a company’s move to mobile, but they’re not obvious
until pointed out. In fact, they often look like logical moves unless you understand
how mobile is different from traditional computing.

Trap #1
Clinging
to Legacy
TRAP #1
CLINGING TO LEGACY: ‘PORTING’

A COMPUTER APP OR WEBSITE
TO MOBILE
It seems so obvious: you have a successful computer app or website, the users are
asking for mobile access to it, so you rewrite your current offering for mobile. Take
out the Flash graphics, rearrange the interface elements, change the font sizes, and
you’re done.
{ Porting an existing product or site to

mobile almost always produces an
awkward hybrid
Unfortunately, this sort of “porting” approach rarely succeeds. Most computer

apps and websites are carefully balanced products that have been optimized for
years to fit the conditions found on a computer: high speed continuous network
connections, large screen, powerful local processing, keyboard, and mouse.
Mobile has none of those features, but does have other features not found in most
computers, including location awareness and a touchscreen interface. Porting an
existing product or site to mobile almost always produces an awkward hybrid that
doesn’t work as well as the computer version. Plus any mobile-specific features
you add usually feel grafted on rather than fully integrated.

TRAP #1
THE FIRST PROBLEM: CHANGING NOTHING AT ALL

Some companies still ask smartphone users to deal with web pages formatted for
a computer screen. Many more give only a limited number of mobile-formatted
pages and then abruptly dump users back into computer-style pages when they
go to a less-used part of the website. These old-style web pages force the users to
pinch and zoom constantly, and also require a lot of horizontal scrolling.
Our tests show that users are extremely intolerant of these half-mobile sites. They
loathe four-way scrolling and constant zooming. The example below is from video
of a BlackBerry user who’s been asked to browse to a site that’s not formatted for
mobile.
“This is so small...If I go
to a site and I see that it’s
not formatted for my little
browser, then I leave it,
almost 100% of the time.”

TRAP #1
THE SECOND PROBLEM: RE-CREATING YOUR CURRENT USER EXPERIENCE

Failing to create a mobile version has become so notorious that most companies
do at least some mobile development. But that exposes them to the next part of
the trap: trying to faithfully recreate your computer app or site in mobile is almost
always a mistake.
This is a very common problem because your users will almost always say that
they want the full functionality of your website or app transferred into their mobile
devices. And in an ideal world that would be a great thing to do. But in reality,
the size and other limitations of a mobile device mean that it can’t handle the
same number of features and controls without making the mobile version far too
complicated. In addition, the absence of some functionality in mobile, particularly
Flash and a pointing device, means that it’s often impossible to fully replicate the
traditional computer experience no matter how hard you try.
So most companies compromise and trim down the web experience by deleting
less-used features or simplifying controls. But this creates its own set of problems
because it means you’re leaving out features that users have come to expect on
the computer version of your property. For example, in a commerce site, small
adjustments like changing quantities or filtering search results are easy to
implement on a large-screen computer, but much more difficult on a small screen.
So they’re often left out. Customers notice that and complain.
This is no-win situation for a developer: If you leave in all the features, your
product will be too complex. But if you remove features, users will be upset.

TRAP #1
HERE’S AN EXAMPLE OF HOW THIS DILEMMA CAN ENTRAP A COMPANY:
The computer version

has tooltips and a link
to a popup comparison
chart.
This comparison shows the subscription page for an online education service.
On a computer(above), there are two layers of explanation for the subscription
choices: a tooltip that comes up when the user hovers over a choice, and a
“compare plans” link that pops up a detailed comparison chart.
The mobile version has no tooltips

and no comparison chart. “What is
premium? What’s monthly premium?
I don’t know what premium is. There’s
no information here. What is what?”
On a smartphone (above), the same service lists the subscription options without
any explanation of what they include. In our tests, this didn’t only cause users not
to upgrade to the premium offer; the confusion caused them to not buy anything
at all.

What to do
Rethink: don’t port
The lesson from past industry transitions is clear: you need to rethink your app
or website for mobile, rather than just reformatting it. Mobile isn’t just a different
set of technologies; it’s a different set of user behaviors and expectations.
Computers are generally used in long immersive sessions focused on productivity
or entertainment. The user expects to dedicate some time to the session (it takes
a minute just to start up the computer!), and so is relatively tolerant of complexity
and involved processes.
In mobile, users expect immediate gratification. The user may have only a minute
available on a bus or between meetings, and so needs to get in, accomplish
something, and get out. That means the basic workflow of an app or website – its
purpose and structure, and the problems it solves for a user – must be rethought
by people who know mobile intimately. A variety of changes may be needed. In
some cases, it’s best to break the property into several separate apps or mobile
sites (Facebook has been doing some of this). In other cases, the right approach
may be to focus on only one area of functionality and completely ignore the
other features of the computer version. Or the company can choose a mixed
approach, with one app or website that’s feature-rich (for customers who want all
the features) and another rifle-shot that focuses on the most important mobile
functionality. The steps involved are:

TRAP #1
UNDERSTAND WHAT PROBLEMS USERS HAVE IN A MOBILE SETTING AND

WHAT CAN BE DONE TO SOLVE THEM.
This is a task for a skilled product manager. Users often can’t do this sort of
thinking for themselves, so the product managers need to focus on understanding
the users so thoroughly that they can think on their behalf.
SEPARATE THE VALUE YOU PROVIDE FROM THE WAY YOUR PRODUCTS AND
SERVICES WORK TODAY.
Because mobile has different usage patterns and features, people may use your
services very differently than they do in the computing world. You need to rethink
how your service or product works in the mobile paradigm, and that may mean big
changes in features and usage flow.
As an example, Microsoft struggled for most of a decade to replicate the Windows

experience on a smartphone, with a tiny Start menu and mobile versions of the
Office apps. After many years of struggle, the company abandoned all of that work
and redesigned from scratch for mobile. Unfortunately, that process took so long
that others had seized the leadership in mobile by the time Microsoft responded.
{ You need to rethink how your service or

product works in the mobile paradigm and
that may mean big changes in features...

TRAP #1
BE READY TO BREAK APART YOUR APPLICATION.

In computers, it’s commonplace to create a large application or website loaded
with features. Because of the relatively spacious screen and large local computing
power, it’s possible to create a single app or site that’s flexible enough to serve
many needs. But in mobile, an overly complicated app quickly becomes unusable.
It’s often better to start with an app or site that does a few things well, make sure
that works, and then gradually add more features. Or you may find that you’re
better off creating several small mobile apps or sites, each one dedicated to a
single function.
{ It’s often better to start with an app or site

that does a few things well...then gradually
add more features.
DESIGN FOR THE MAINSTREAM.

In the computer world, software companies are hyper-responsive to their most
enthusiastic, outspoken customers; the people who post frequently online and
send in the most comments. The features demanded by those customers get
added first, and their complaints get special attention. That can work successfully
in a computer app or website because you have a lot of screen real estate, and
computing power to burn. But in mobile, you have to make many more feature
tradeoffs.

TRAP #1
Designing for your top power users can easily cause you to create something that’s
too complicated and confusing for everyone else. It’s best to design for the mass
of your customers; the lower 80% rather than the top 20%. (This can create other
problems, though. The power users are also the people who create the most word
of mouth, so it’s important to keep them engaged. The most successful mobile
apps and websites find ways to do just enough to keep the power users happy
while focusing most of their time on meeting the needs of the mainstream.)
TEST THOROUGHLY, BEFORE AND AFTER LAUNCH.

It’s not enough to just do analytics on server logs since they won’t explain why
users do or don’t use a feature. Since mobile is a relatively new area, you should
not assume that you can guess why users behave the way they do; you need to test
their reactions and emotions directly.
This sounds like a huge amount of work, and it is. One of the reasons companies
from old software paradigms fail is because they underestimate the amount of
work and learning they need to do in the new world. It’s very hard to revisit your
assumptions unless you’re focused on that full time, so the best practice is to have
a separate development team dedicated to mobile.
In fact, the most successful mobile companies have a separate team for each OS:
Apple iOS, Android, etc. This is a difficult investment for many companies, so at a
bare minimum you should have a mobile-focused product manager who spends
full time rethinking what you need to do to succeed in mobile. That way you can
at least pick out the most important changes, and you’ll also know where you’re
vulnerable to attack by a competitor who designs for mobile first.

Trap #2
Creating
Fear
TRAP #2
CREATING FEAR: FEEDING

MOBILE ANXIETY
Although smartphones have been enthusiastically adopted by hundreds of
millions of people, they’re still relatively new, and many users are uncertain about
exactly what they’ll do in some circumstances. Our tests reveal that it’s common
for users to hesitate at some tasks because they’re afraid their smartphone might
do something they don’t want it to.
THE FIRST FEAR IS ALSO THE BEST KNOWN: FEAR OF HACKERS.

Users are sometimes reluctant to put personal or financial information into a
smartphone because they’re afraid it might be stolen over the wireless network.
This problem is especially acute because mobile devices involve several parties
– the software developer, OS company, hardware vendor, and mobile carrier – all
of whom must work together to ensure that the device is secure. We see cases in
which users say they’ll wait until later and perform a transaction on a computer
because they’re not sure it’s safe on mobile. Those delayed actions can easily turn
into lost business if the user forgets to do them on the computer later.
THE SECOND FEAR IS ANXIETY ABOUT ACCIDENTLY OPTING IN TO AN OFFER

OR AGREEMENT THAT THE USER DIDN’T WANT.
This is related to the small screen sizes of smartphones. To save screen space,
opt-out messages are often hidden or reduced in size, so it’s easier for the user to
miss them. This makes users fearful that mobile vendors are trying to trick them,

TRAP #2
and has resulted in complaints to the US government (below). As in the first fear,
there’s a danger that users may defer a transaction because they feel safer doing it
on a computer.
The US Federal Trade Commission (FTC) recently warned companies not to hide
or remove legally-mandated disclosures from mobile apps or websites. The
FTC generally doesn’t take actions like this unless there have been significant
numbers of consumer complaints.
THE THIRD FEAR IS ACCIDENTAL LOSS OF PRIVACY.

Many mobile apps are given away free, relying on viral messaging to increase
their user bases. The apps, and even many mobile websites, push aggressively
to get users to notify their friends or
share information with them. This
“As soon as I’m done with this test,
causes many users to be nervous about
I’m going to be on Facebook to see
touching any button that looks like it
what kind of posting it did.”
From a user during a test
“What are ‘social choices?’ Are

those apps I have to use with other
“I’m not going to press the Like or people, or apps my friends shared
Dislike buttons because I don’t know with me?”
what will happen.”

When confronted with a feature
called “social choices”
From a user during a test

TRAP #2
might send a message over a social network. In the example below, a user was asked to
submit some personal information on a mobile app.
He discussed the fears that creates, and says he would refuse to submit the information
unless he was assured that it was safe to do so.
“It should be expressed clearly

when you’re using the app that
this is kept on a secure server,
it’s encrypted, things of that
sort.”

What to do
Reassure & be clear
The best way to overcome users’ fears of mobile is through a mix of reassurance
and absolute clarity. In the early days of the web, it was popular to display trust
icons from security review services like TRUSTe on many sites.
Those icons are less popular today, and they’re left out of most mobile apps in
order to save space. Ironically, they’re actually much more important in mobile
because it’s so new. In our tests, the presence of a third party assurance icon
helps many users feel more at ease making a transaction or sharing personal
information.
OVERCOME THE USER’S FEAR

To overcome the fear of accidently opting in, make sure that opt-in messages are
clearly displayed. This is not a place to save space as it can cost you users (not to
mention legal trouble).

TRAP #2
COMMUNICATE WITH ABSOLUTE CLARITY

The final step, absolute clarity, means communicating exactly what your app or
website will do whenever a button is pressed. You don’t have tool tips, so consider
labeling buttons with text that explains their function. This is especially important
for any function that looks even remotely like it may communicate socially. If you
do communicate socially, when the user presses a button, tell them what it will do
and give them the option to opt out (at least on the first usage).
Anticipate anxiety. The

to-do application Any.DO
uses Facebook for login,
but reassures users that
their information will not be
shared on the network
And if a button doesn’t post on social networks, don’t scare users away by using
a graphic or words on it that appear even remotely social. For example, instead of
‘social apps,’ say something like ‘apps used by my friends.’ In the example above,
the task management application Any.DO uses Facebook for login services, but
reassures users that their information will not be shared in Facebook.

Trap #3
Creating
Confusion
TRAP #3
CREATING CONFUSION: CRYPTIC

INTERFACES AND CROOKED
SUCCESS PATHS
When users are confused by a mobile app or website, it’s usually due to one
of two causes:
1. Users can’t figure out how to use some of the controls in the
interface, or
2. They understand the controls but don’t understand what they’re
supposed to do with them (a problem that design experts
sometimes call an “unintuitive success path”).
COMMON SOURCES OF CONFUSION INCLUDE:UNREADABLE TEXT AND

GRAPHICS IN THE USER INTERFACE. In some cases text or pictures are displayed
at too small a size for easy reading, especially if a user doesn’t have perfect vision.
Companies also often make mistakes in contrast. Text colors that look stylish and
modern on a computer can become unreadable when a mobile user is outdoors
in bright sunlight, or when they have turned down backlighting in order to save
battery power. Light gray or blue on a white background is very problematic, as is
dark text on a black background:

TRAP #3
SOME UI WIDGETS DO NOT WORK WELL ON MOBILE DEVICES.

Small screens and large-fingered users make it very hard to use controls that
require precise adjustment. In our tests, the use of sliders for selecting quantities
can cause huge frustrations. The slider below looks reasonably usable...
...until you consider the size of an average fingertip.
SLOW RESPONSE TIMES ARE A MAJOR PROBLEM.

Mobile users are very impatient. If a mobile app or website doesn’t respond
instantly to a touch, the user generally assumes it’s broken and either moves on to
something else or rapidly punches a series of buttons, which can create all sorts of
other problems.
{ The user generally assumes it’s broken and

either moves on to something else or rapidly
punches a series of buttons

TRAP #3
INADEQUATE OR MISSING HELP

This is a common source of frustration for many users.
IT’S JUST NOT CLEAR WHAT THE USER IS SUPPOSED TO DO.

Sometimes the terminology used in the app is unclear; sometimes the steps a user
needs to take are not intuitive.
The underlying cause behind many of these problems is a tendency to emphasize

art over functionality. Apple’s focus on elegant graphics has led many companies
to focus on creating mobile apps and websites that look beautiful at first glance,
even if that sacrifices usability.
Although it’s obviously best to have a mobile property that looks great and works
well, the short attention span of most mobile users means that functionality has
to come first. If they can’t get something done with it, they won’t come back, no
matter how pretty it looks.
{ The underlying cause behind many of these

problems is a tendency to emphasize art
over functionality.

TRAP #3
HERE ARE SOME EXAMPLES

OF HOW MOBILE COMPANIES
CREATE USER CONFUSION
CONFUSING WORDS AND ICONS.
In the example below, the user is trying to share some content. There is no button
labeled “share,” so he explores the interface looking for a share button. Finally
he realizes that the two curved arrows (circled in blue below) mean share in this
application. He comments that they look like a “refresh” button, which is indeed
what that icon means in Android. But he’s using an iPhone.
“Oh, is that little symbol a share? Did I

not understand? Is this a share? Looks
like a refresh symbol not a share
symbol.”
Buttons and icons can be especially tricky in the mobile space because there is no
single standard for them. In computers, Windows is the dominant GUI standard,
and it shares many interface elements with Macintosh. But in mobile, there are two
major platforms (Android and Apple iOS) and several minor ones. The competing
mobile platforms use button and icon designs as part of their differentiation,
deliberately making them incompatible with each other.

TRAP #3
Although a few images are standard across most platforms (a magnifying glass
means search everywhere), many other buttons and images are conflicting. This
makes life difficult for app developers, who have to choose between standardizing
their apps across platforms or creating different versions for every OS. Many
developers choose to design their own controls, which makes the confusion even
worse.
The problem is even more severe for mobile web developers, whose sites may
be displayed on any platform. Below are some examples of the conflicting
iconography between Android and Apple iOS:
Apple Android
Refresh
Bookmark
Favorite
Share
More
Most Recent Add to Queue
Most Viewed Social Group
In the bottom two examples, Apple and Android use very similar icons to mean different things. The Apple
icon design is on the left and the Android design is on the right.

TRAP #3
The problem becomes especially acute when, as in the last two examples above,
similar icons mean conflicting things.
When the definitions of icons differ, they start to lose meaning altogether and
become just pretty pictures. This problem is compounded by the constraints of
a mobile device. On a computer, tool tips help to explain any unclear icons, and
icons are also usually displayed with a text label next to the graphic. In mobile, tool
tips don’t work, and there often isn’t space to display both text and graphics. So
users become confused, they slow down, and they lose interest.
HIERARCHICAL MENUS ARE ANOTHER SOURCE OF USER CONFUSION.

Even on computers, multi-level menus can be confusing. But on a mobile device,
where menus often take up the entire screen, it’s very easy to get lost. In the
example below, the user was trying to use a shopping site to compare prices for Blu
Ray players, but became hopelessly lost in the menu system.
“So Blu Ray DVD player, so that

this here...uh, now I got confused.
So I tried to look on that, DVD
Blu Ray player, I’m not sure what
this...I’d think if I did the plus it
would give me more information.”

TRAP #3
LACK OF RESPONSIVENESS IS ALSO A COMMON CAUSE OF CONFUSION.

If a mobile app or site doesn’t immediately respond to a tap, the user rapidly
becomes confused and frustrated. In the test below, a user attempts to upload
several hundred photos from her smartphone to a web server.
The application doesn’t make clear that the download is underway; there is no
progress bar and the interface does not change after the upload command is
issued. This leads the user to try to find out what’s happening by pressing buttons
at random. In the ensuing tap-storm, the user presses more than 30 buttons in a
two minute period.
“I am assuming it’s going to tell

me when it’s done because I don’t
see any updates of what it’s
doing.”

What to do
Design for funtionality
and give help
The first step in reducing confusion is to readjust your design priorities. In mobile,
the highest form of beauty is functionality. Make sure the app or site works
properly and is easy to navigate, then make that design as beautiful as possible.
Avoid conflicted user interface elements. When there’s an accepted standard for a
graphic, such as the magnifying glass icon, it’s fine to use it. But in other cases, it’s
probably better to label a button with text rather than using a graphic that people
may not understand.
These icons mean the same thing

on most mobile platforms:
These visually similar icons have

different meanings in different
operating systems:

TRAP #3
BE VERY CAREFUL WITH MULTILEVEL MENUS

If you find yourself using them, it’s probably a sign that you need to redesign.
TEST OUTDOORS.
To avoid readability problems, test your mobile app or website outdoors, in bright
sunlight, on a variety of devices with different quality screens. If you’ve been
testing only indoors in a sedately-lit room (which is what most companies do),
you’ll be amazed by the huge changes in color and readability.
{ To avoid readability problems, test your

mobile app or website outdoors, in bright
sunlight...
RESPOND INSTANTLY.
A mobile app or website should always respond instantly when a button is
pressed. Even if the response is just flipping the button color or displaying some
status text, the app should never appear to freeze.
In cases where the app needs to transfer information over the network, more
elaborate animation and screen redraws can be used to mask some of the latency.
And if all else fails, display a progress bar or spinner.

TRAP #3
GIVE HELP.
Even if you make all those changes, you need to accept that your users will
sometimes get confused. The limitations of the small screen and the absence of
tool tips make that inevitable. Therefore, the single most important usability
feature for a mobile app or website is a great built-in help system.
One of the first actions a mobile user takes when confused is to look for a help
button. The help system should be available anywhere in the app or website,
context-sensitive, and easily searched. Streamline everything to make help search
easy (for example, turn off automatic spelling correction for help search; users get
intensely frustrated when the help system decides to search for the wrong term).
Just as tool tips are the first line of defense for a computer interface, help is the
first line of defense for a mobile app or website.
Comprehensive help. The tour includes The app’s includes a

WebMD mobile offers callouts that work like link to Help, labeled
a quick tour when it’s tooltips in a computer with both text and
first started. application. an icon.

Trap #4
Creating
Boredom
TRAP #4
CREATING BOREDOM: FAILURE

TO QUICKLY ENGAGE THE USER
The other common cause of failure is mobile properties that fail to engage their
users – either because they’re boring, or because the user can’t do something
useful quickly enough to justify the time involved. A mobile app or website is
like a theater performance for a roomful of three-year-olds. Mobile users have
incredibly short attention spans. They’re on the go and have many other diverting
things they can do with their devices. An app or website needs to reward them
almost instantly to win their loyalty. Engagement is also important for traditional
computer websites and apps, of course, but they have much more time to
accomplish it. A user might spend a couple of minutes exploring something on
a computer, whereas it’s common for mobile users to make snap judgments in
seconds.
In think aloud user tests, it’s easy to identify the non-engaging apps and websites:
the users become unenthusiastic and take long pauses while trying to figure out
what to do. Sometimes you don’t even need to hear the words; just listen to the
tone of voice and speech patterns. The example below is a game that’s struggling
to engage the user.
“I was just kind of bored, just the same

thing repetitively, there didn’t seem
to be any change in it. The levels did
change, but all that did was make me
lose my money a little faster.”

What to do
Test for emotions,
not just numbers
The standard way to improve a computer app or website is through analytics and
usage logs. You track user actions, identify where they’re dropping out, theorize on
why it’s happening, try a fix, and then check the analytics again to see if behavior
changes.
This process can be effective for incrementally evolving a website , but it wastes
time if you don’t guess right, and it can’t tell you why users behave the way they
do, or how they feel about your property.
{ Think-aloud testing is a great complement

to analytics.

TRAP #4
To answer those questions, companies typically do tests of live users, including

think aloud testing. These tests are a great complement to analytics; they fill in
the gaps that usage stats can’t show you, and help you choose which modification
to try next. In mobile, user testing is even more important because the traditional
iterative development model breaks down. It can be difficult to get web-style
analytics for mobile apps, and even if you can get usage data, you can’t always
turn your applications quickly enough to do fast iterative development.
For example, the Apple App Store generally takes at least a week to review an
updated app before it gets released. Google allows more frequent updates on
Android, but users don’t always turn on automatic updating for their apps, so you
can’t necessarily control when they get updates. Even if users do allow you to push
updates to them, the updating process itself can annoy people if you do it too
often.
Besides, if your first reviews on an application store are terrible, it may not matter
how many changes you make, because it will be hard to ever get customers to
consider you again.
So in mobile development, you have to put a lot more thinking into every release.
Getting user feedback can be invaluable because it helps you identify the causes of
problems from the start rather than guessing about them. User testing also helps
you gauge users’ emotional affinity to your mobile app or site, which is critical to a
mobile product’s success.

CASE STUDY
USER TESTING IN ACTION

EVERNOTE: RAPID DEVELOPMENT FOR THREE SCREENS
Evernote uses think-aloud tests from UserTesting.com’s Enterprise service to make
its mobile development faster, and to monitor user engagement throughout the
process. Evernote worked with UserTesting.com to track users as they accessed
Evernote on tablets, personal computers, and smartphones (including multiple
Android variants). This helped Evernote tune all three products so the user could
move between them easily.
UserTesting.com helped Evernote target specific demographic groups, and

delivered test results in as little as an hour, enabling Evernote to evolve its apps
quickly. “On a slow Friday night, I have been able to push a build to UserTesting.
com and receive quality tester videos in 20 minutes,” said Evernote VP of Product
Philip Constantinou. “It’s addictive to find out almost immediately what people
think.”
{ “It’s addictive to find out almost immediately

what people think.”
Evernote VP of Product Philip Constantinou

CASE STUDY
The results were very important. Evernote increased user engagement, and its user
retention rose by double digits, a very significant change for a service that relies on
retention to get users to trade up to a paid version of the service.
“One of the primary goals of our application is to make people feel better about
themselves because they can remember things,” said Constantinou. “With
UserTesting.com, we knew when we’d gotten a feature right because the users
would perk up and say things like ‘I feel smarter.’”

CONCLUSION
CONCLUSION: HOW TO AVOID

THE FOUR TRAPS
The transition to mobile is an even bigger challenge than most companies realize.
It changes the rules of good development, makes users reconsider their default
choices in apps and websites, and increases the importance of user engagement.
{ The transition to mobile is an even

bigger challenge than most companies
realize.
In the past, transitions like this have usually crippled the leaders from a previous
generation of computing. Companies are vulnerable to new competition in mobile
when they rely on their conventional assumptions about what makes an app or
website effective.
To maximize your chances of success in mobile, keep the following ten principles in
mind:

CONCLUSION
THE TEN MOST IMPORTANT

PRINCIPLES TO KEEP IN MIND
WHEN GOING MOBILE:
1) RETHINK YOUR OFFERING FOR MOBILE
Don’t just transfer, or port, your computer app or website to mobile. Instead, you
need to rethink what problems people have when mobile and how you can best
solve them on a mobile device. That may mean creating a new service, delivering
only a subset of your computer functionality, or creating several separate mobile
apps.
2) DESIGN FOR THE MAINSTREAM

Focus your design on the mainstream 80% of mobile users, not the technophile
top 20%. The technophiles will lead you to add too many features and make your
app and site too complex.
3) AVOID CRYPTIC ICONS

Don’t assume that icons are self-explanatory. When in doubt, use text instead of a
picture.
4) BEWARE OF MULTILEVEL MENUS

They can easily create vast confusion.
5) THE HIGHEST FORM OF BEAUTY IS FUNCTIONALITY

Make sure your mobile property works well, then make it pretty.

CONCLUSION
6) RESPOND INSTANTLY
Your app or site should always respond instantly to button presses and other use
actions. Never leave a user uncertain about what’s happening.
7) GREAT HELP IS ESSENTIAL

A great help system is to mobile what tooltips are to traditional computing: the
first line of defense against user confusion. Mobile help must be easily found,
always available, and context-sensitive.
8) MAKE THEM FEEL SAFE

Reassure users that your system is secure, especially when conducting mobile
transactions or collecting personal data.
9) AVOID SOCIAL ANXIETY

Always notify people clearly before you share information from a mobile device
to a social network. Never make them guess about the social consequences of
pressing a button.
10) TEST FOR ENGAGEMENT, NOT JUST USABILITY

Don’t rely solely on analytics and logs to evaluate a mobile app or website. You
need user tests to tell you why users react the way they do, and what their level of
engagement is with your product.

For more information, visit UserTesting.com

The Four Mobile Traps

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

The Four Mobile Traps

Uploaded by

Copyright:

Available Formats

THE

SUMMARY: FOUR COMMON

The Four Mobile Traps 2 UserTesting.com

TRAP #1 - CLINGING TO LEGACY: ‘PORTING’ A COMPUTER APP OR WEBSITE TO MOBILE 8

TRAP #2 - CREATING FEAR: FEEDING MOBILE ANXIETY 17

TRAP #3 - CREATING CONFUSION: CRYPTIC INTERFACES AND CROOKED SUCCESS PATHS 23

TRAP #4 - CREATING BOREDOM: FAILURE TO QUICKLY ENGAGE THE USER 34

USER TESTING IN ACTION 38

CONCLUSION: HOW TO AVOID THE FOUR TRAPS 40

Testing participants were recruited through a combination of UserTesting.com’s panel, other

THE TRANSITION TO MOBILE IS

1980S: THE TRANSITION FROM DOS TO WINDOWS

MS-DOS app leader Windows app leader

Word Processing Word Perfect Word

Spreadsheet Lotus 1-2-3 Excel

Database dBase Access/FileMaker

Fig. 1. The leading software applications for MS-DOS and Windows

The Four Mobile Traps 4 UserTesting.com

1990S: THE TRANSITION FROM WINDOWS TO WEB

Windows app leaders, 1995 Web traffic leaders, 2013

The Four Mobile Traps 5 UserTesting.com

TODAY: THE MOBILE EXPLOSION

Top game publishers* Top iPhone games & publishers

Sony Rovio: Angry Birds

The Four Mobile Traps 6 UserTesting.com

WHY ARE PLATFORM TRANSITIONS SO CHALLENGING?

User tests conducted by UserTesting.com illustrate the challenge in mobile. These

The Four Mobile Traps 7 UserTesting.com

CLINGING TO LEGACY: ‘PORTING’

{ Porting an existing product or site to

Unfortunately, this sort of “porting” approach rarely succeeds. Most computer

The Four Mobile Traps 9 UserTesting.com

THE FIRST PROBLEM: CHANGING NOTHING AT ALL

The Four Mobile Traps 10 UserTesting.com

THE SECOND PROBLEM: RE-CREATING YOUR CURRENT USER EXPERIENCE

The Four Mobile Traps 11 UserTesting.com

HERE’S AN EXAMPLE OF HOW THIS DILEMMA CAN ENTRAP A COMPANY:

The computer version

The mobile version has no tooltips

The Four Mobile Traps 12 UserTesting.com

The Four Mobile Traps 13 UserTesting.com

UNDERSTAND WHAT PROBLEMS USERS HAVE IN A MOBILE SETTING AND

As an example, Microsoft struggled for most of a decade to replicate the Windows

{ You need to rethink how your service or

The Four Mobile Traps 14 UserTesting.com

BE READY TO BREAK APART YOUR APPLICATION.

{ It’s often better to start with an app or site

DESIGN FOR THE MAINSTREAM.

The Four Mobile Traps 15 UserTesting.com

TEST THOROUGHLY, BEFORE AND AFTER LAUNCH.

The Four Mobile Traps 16 UserTesting.com

CREATING FEAR: FEEDING

THE FIRST FEAR IS ALSO THE BEST KNOWN: FEAR OF HACKERS.

THE SECOND FEAR IS ANXIETY ABOUT ACCIDENTLY OPTING IN TO AN OFFER

The Four Mobile Traps 18 UserTesting.com

THE THIRD FEAR IS ACCIDENTAL LOSS OF PRIVACY.

From a user during a test

“What are ‘social choices?’ Are

Dislike buttons because I don’t know with me?”

what will happen.”

The Four Mobile Traps 19 UserTesting.com

“It should be expressed clearly

The Four Mobile Traps 20 UserTesting.com