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

The Four Mobile Traps

4

UserTesting.com

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

The Four Mobile Traps

5

UserTesting.com

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* by revenue, 2011

Top iPhone games & publishers
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

The Four Mobile Traps

6

UserTesting.com

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.

The Four Mobile Traps

7

UserTesting.com

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.

The Four Mobile Traps

9

UserTesting.com

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

The Four Mobile Traps

10

UserTesting.com

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.

The Four Mobile Traps

11

UserTesting.com

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.

The Four Mobile Traps

12

UserTesting.com

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:
The Four Mobile Traps

13

UserTesting.com

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

The Four Mobile Traps

14

UserTesting.com

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. The Four Mobile Traps

15

UserTesting.com

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.

The Four Mobile Traps

16

UserTesting.com

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,

The Four Mobile Traps

18

UserTesting.com

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 people, or apps my friends shared

“I’m not going to press the Like or

with me?”

Dislike buttons because I don’t know what will happen.”

When confronted with a feature called “social choices”

From a user during a test

The Four Mobile Traps

19

UserTesting.com

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.” The Four Mobile Traps

20

UserTesting.com

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

The Four Mobile Traps

21

UserTesting.com

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.

The Four Mobile Traps

22

UserTesting.com

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:

The Four Mobile Traps

24

UserTesting.com

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

The Four Mobile Traps

25

UserTesting.com

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.

The Four Mobile Traps

26

UserTesting.com

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.

The Four Mobile Traps

27

UserTesting.com

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.

The Four Mobile Traps

28

UserTesting.com

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

The Four Mobile Traps

29

UserTesting.com

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.” The Four Mobile Traps

30

UserTesting.com

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:

The Four Mobile Traps

31

UserTesting.com

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.

The Four Mobile Traps

32

UserTesting.com

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.

The Four Mobile Traps

33

UserTesting.com

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

The Four Mobile Traps

35

UserTesting.com

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.

The Four Mobile Traps

36

UserTesting.com

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.

The Four Mobile Traps

37

UserTesting.com

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

The Four Mobile Traps

38

UserTesting.com

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.’”

+

The Four Mobile Traps

39

UserTesting.com

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: The Four Mobile Traps

40

UserTesting.com

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.

The Four Mobile Traps

41

UserTesting.com

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.

The Four Mobile Traps

42

UserTesting.com

For more information, visit UserTesting.com