Tablet Website and Application UX

Design Guidelines for Improving the Usability of Websites Viewed on

Tablets and Tablet-Specific Apps

by Raluca Budiu and Jakob Nielsen

WWW.NNGROUP.COM 48105 WARM SPRINGS BLVD., FREMONT CA 94539–7498 USA

Copyright © by Nielsen Norman Group, all rights reserved.

To buy a copy, download from: http://www.nngroup.com/reports/tablets/
 Please do not post this document to the Internet or to
publicly-available file-sharing services
This report required hundreds of hours of planning, recruiting, testing, analyzing,
writing and production. We sell these reports to fund independent, unbiased usability
research; we do not have investors, government funding or research grants that pay
for this work..
We kindly request that you not post this document to the Internet or to publicly
available file-sharing services. Even when people post documents with a private URL
to share only with a few colleagues or clients, search engines often index the copy
anyway. Indexing means that thousands of people will find the secret copy through
searches.
If someone gave you a copy of this report, you can easily remedy the situation by
going to http://www.nngroup.com/reports and paying for a license.
We charge lower fees for our research reports than most other analyst firms do,
because we want usability research to be widely available and used.

Thank you!

Raluca Budiu and Jakob Nielsen, report authors

2 [email protected] Executive Summary

 Contents

Executive Summary ...................................................................... 6  

Revenge of the Frames .........................................................................6  

Web UX Bleedthrough...........................................................................6  

Gesture Problems .................................................................................7  

Dangers Ahead .....................................................................................7  

Research Overview ....................................................................... 8  

How People Use Tablets................................................................ 9  

Large versus midsize tablets ..............................................................10  

Tablets versus phones ........................................................................10  

Do You Need a Tablet App? ......................................................... 11  

Design for tablet, not for phone ..........................................................15  

Guidelines for Making Desktop Sites Tablet Friendly................... 21  

Targets ...............................................................................................28  

Plugins ...............................................................................................31  

Naming the App .......................................................................... 33  

Skeuomorphic Design ................................................................. 36  

Touch Targets ............................................................................. 40  

Input and Forms ......................................................................... 48  

Typing ................................................................................................48  

Dropdowns and pickers ......................................................................50  

Forms .................................................................................................60  

Registration and Login................................................................ 71  

Flow............................................................................................ 88  

Navigation and Tool Bars ............................................................ 94  

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 3

 Horizontal navigation and swiping.................................................... 108  

The Back button................................................................................ 116  

Feedback and Reversibility ....................................................... 129  

Search ...................................................................................... 133  

Lists.......................................................................................... 138  

Split Views, Popovers, Frames, Content Tabs ........................... 144  

Gestures ................................................................................... 155  

Gesture ambiguity ............................................................................ 155  

Learnability ...................................................................................... 161  

Tutorials and Tips ..................................................................... 163  

Content..................................................................................... 169  

Waiting Times and Latencies .................................................... 175  

Maps and Locations .................................................................. 178  

Sound Effects............................................................................ 180  

Tablet Orientation..................................................................... 181  

Other ........................................................................................ 183  

Browser views within apps ............................................................... 183  

Self-sufficient design ........................................................................ 184  

Errors ............................................................................................... 185  

Shopping .......................................................................................... 191  

Methodology ............................................................................. 193  

Usability Testing ............................................................................... 193  

Overview ................................................................................................ 193  

Participants and devices ............................................................................. 193  

Method ................................................................................................ 194  

Materials ................................................................................................ 195  

4 [email protected] Executive Summary

 Apparatus ................................................................................................ 198  

Design Reviews ................................................................................ 198  

List of Guidelines ...................................................................... 200  

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 5

 Executive Summary

After 6 rounds of usability studies with tablet users, the good news is that tablet
usability is reasonably good and has improved substantially since the initial batch of
whacky iPad apps where people often didn’t know what to do.
We’ve tested several generations of big and small iPads, as well as many models of
Android tablets (including the Kindle Fire) and some Windows tablets (including
Microsoft Surface). The common conclusion is that most websites are fairly usable on
tablets, and only need limited adjustments to this environment. (This is in contrast
to use of websites on mobile phones where the smaller screens necessitate many
more design changes.)
When we ask people how they use their tablets, it doesn’t come as a big surprise
that web browsing is universally mentioned as a top activity.
Tablet applications have plenty of usability flaws, but mainly of the same nature that
plague traditional application design: difficult features, mismatch with users’
workflow, and poor instructions that aren’t read.
Designing and building a high-usability application involve substantial work, and
there are some additional issues to consider for tablet apps, including the need to
modify the user interface for different tablet models. Combined with the popularity
and ease of using websites on tablets, this begs the question why companies would
have a tablet app in the first place. In fact, we advise most companies to stick to
their website and invest the resources in improving web usability, which still suffers
badly in most companies.
Only build a tablet app if you can offer value-added functionality over a website. This
is often the case when the app can be focused on supporting a single main task.
Conversely, don’t make your tablet app a scaled-up phone app. We’ve seen
hundreds of apps (mainly on Android) that misuse screen space to offer tablet users
the same basic design as phone users.

REVENGE OF THE FRAMES

In 1996, we condemned the use of frames in web page design. Sure enough, the
original terrible frames are rarely seen today, though better design techniques such
as inline frames and parallax scrolling are used to meet similar goals with better
usability.
But like zombies, certain bad designs come back from the dead to haunt users, and
frames-like concepts cause usability problems in many modern tablet designs. Two
common mistakes are split-screen designs and temporary frames for things like
search results.
Even though a tablet seems big compared with a phone, it’s still a small screen that
usually shouldn’t be subdivided into even smaller frames or split views. Every time
you split off part of the screen, there’s less left to show content.

WEB UX BLEEDTHROUGH
The web is such a dominant part of computer use these days that concept from the
web user experience bleeds through the platform divide and influences people’s use

6 [email protected] Executive Summary

 of tablet apps. Search dominance and heavy reliance on the Back button are primary
examples of this finding.
Users frequently want to search on tablets, and they also want to return to their
search results. Unfortunately many apps don’t provide a proper SERP (search engine
results page) as a primary navigation object that users can easily return to. Instead,
search results are shown in one of those zombie-attack frames with a fleeting screen
presence.
The Back button has long been users’ lifeline on the web, and if anything it’s even
more important on tablets where accidental activation is a common consequence of
the touchscreen interface. Unfortunately, testing revealed usability problems with
some apps that did offer Back: sometimes the feature was hard to find and
sometimes it didn’t have the expected ability to undo the user’s last action.

GESTURE PROBLEMS
Gestural user interfaces have several inherent problems that tablet apps need to
minimize:
• Accidental activation: people touch something by mistake and need a way
to get back.
• Swipe ambiguity: when the screen is divided into subregions (such as the
frames we caution against) the same gesture can have different effects,
depending on where it’s activated. This problem is exacerbated by the
trend toward flat design without clear demarcation of the regions.
• Invisibility: you can’t see the gesture you just made, and you sometimes
can’t even see where you’re supposed to touch. Again, this is made worse
by flat design.
• Low learnability: all these problems combine to making gestures hard to
learn and advanced gestures might as well not exist: only a few percent of
users employ anything beyond basic gestures like tap, swipe, drag, and
pinch
Despite these inherent problems, most of the tablet apps we tested employed
gestures reasonably well. The exaggerated skeuomorphism of the early days has
also subsided.

DANGERS AHEAD
The two main threats to tablet usability are:
• Flat design. Why not allow users to easily see what they can do? We need
a golden middle ground between skeuomorphism and the lack of any
distinguishing signifiers for UI elements.
• Rescaled design. Whether shoehorned down from a bigger screen or
grotesquely exploded from a phone screen, too many Android designs
simply don’t fit the size of the actual tablet they run on. (While also seen
on other platforms, poorly rescaled designs are less common on iPad and
Windows tablets, probably because of smaller device diversity.)
The first of these threats is a fashionable trend that will hopefully subside before it
hurts users (and companies) too much. The second threat will be with us longer,
because it’s caused by resource constraints and the naïve idea that a single design is
good enough as long as it can adapt itself to the available screen space.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 7

 Research Overview

The main purpose of this research was to understand how people use their tablets
and what makes tablet apps and websites usable. The result of our research effort is
a set of design guidelines for tablet apps and websites. The recommendations are
based on methodical observations and interviews, as well as expert reviews.
In this section we present a brief overview of our research project. For details about
the methodology, please refer to the Methodology section in this report. The
research project encompassed two different methods:
• Usability testing, and
• Design reviews carried out by a usability expert.
Usability testing. Over the course of 3 years, we carried out 6 separate usability-
testing studies and numerous design reviews. All the studies were done in the U.S.
In 3 out of the 6 studies, participants brought their own devices into our lab. The
remaining studies were centered around new devices and, for those studies, the
participants used our devices.
Where applicable, we asked participants to show us the apps that they had installed
on their tablets; alternatively, if the device was unfamiliar to the participants, we
gave them some time to familiarize with it. Then, we asked participants to complete
a series of tasks that involved either applications or websites. Please refer to the
Methodology section for examples of tasks.
We observed users as they worked and encouraged them to think aloud. Sessions
lasted 90 minutes. Overall, we had 67 participants; 48 of them brought their own
tablets into the lab. We studied 42 iPads (including 5 iPads mini), 9 Windows 8
tablets, and 16 Android tablets (out of which 7 were Kindle Fire tablets).
The 3 studies that revolved around unfamiliar tablets involved 19 participants. We
gave users one of the following three tablets: iPad (7 people), 7” Kindle Fire (4
people), and Microsoft Surface RT running Windows 8 (8 people).
Expert Reviews. The last source of information for our guidelines came from expert
reviews. Over the course of three years we reviewed many apps and websites on a
variety of platforms. The list of these has become too long to include in this report,
but the Methodology section contains a subset of sites and apps that were reviewed.

8 [email protected] Research Overview

 How People Use Tablets

When the iPad first came around, it looked like everything tablets supported could be
done equally well or even better with a laptop or a smartphone. Could this new
device find its place on the technology continuum? The answer seems to be yes. As
early as three years after the introduction of the iPad, slightly more than 30% of
Americans owned a tablet device, and that number seemed to be growing. (A June
2013 Pew Internet survey noted that a little more than 30% of Americans own a
tablet, whereas more than 50% of Americans have a smartphone).
Now we know that people use tablets mainly for entertainment and playing games,
as well as for consumption of information — checking the latest news, reading an e-
book, watching a movie. More and more people report that they do some basic
mobile banking (checking balances, transfers, occasional bill payments) and
shopping, in particular with big retailers such as Amazon or eBay.
Large screen tablets tend to be left at home (unless the owner expects to spend a
significant amount of time needing to kill time), shared with the other members of
the household, and available around the house for quick circumstantial tasks such as
checking facts while watching TV, browsing or shopping, as well as for catching up
with the latest episode of a favorite TV series. All these tasks could be done with a
laptop (and most of our tablet users owned a laptop or a desktop computer), but it’s
simply more convenient to do them with a tablet. And many of these tasks could be
done on a smartphone, yet the larger screen is, not surprisingly, more comfortable.
As one of our users noted, tablets are also more socially acceptable than laptops:
“for some reason, it’s less acceptable to use a laptop on the couch with others; it’s
almost as if the laptop separates me more from them than a tablet.”
Although many of our users tend to say about their tablet that it replaced their
laptop and they use it for almost everything, there are still activities that are hard to
do on a tablet. When we asked people to find a hotel in Barcelona that is close to the
Gothic Quarter, our users noted that they’d normally use a computer and open a
separate window with Barcelona’s neighborhoods. When we asked people to find
information about Harvard’s doctoral program in Psychology, many said that they’d
rather use a computer because it was too difficult to figure out under which of the
many Harvard schools Psychology fell. Almost any time when users needed to refer
to multiple sources of information (that is, multiple applications or websites
accessible in different windows), users said that they would rather use a computer.
As one user put it:
“Some of these tasks — I would never even consider doing on a tablet.
I could probably do them on my desktop in maybe 10% of the time I
am taking on the tablet — it’s just ridiculous. Once I have to click
more than 4-5 times to get to what I want it becomes really
unnecessary and the experience is just not good on a tablet. That’s
why I use my tablet mainly for media consumption. For anything more
complex such as booking a hotel […] I cannot think of a way when the
tablet would be better than a desktop.”
Many users are still reluctant to do significant purchases or more “serious” activities
on their tablets for fear of making a mistake. As one user put it:
“I don’t do important stuff on my tablet.”

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 9

 Yes, we did find that tablets can almost replace a larger-screen computer because,
for most people, the majority of the tasks they do can be supported reasonably well
on the smaller tablet screen. However, there is only so much information that can fit
on a 7” or even 10” screen; and for some tasks, that can be a serious limitation.

LARGE VERSUS MIDSIZE TABLETS

Many of our participants loved their midsize tablets and thought that their smaller
dimensions offered some unique advantages. The most important of those was
portability: midsize-tablet owners were more likely to report that they carry their
tablet with them during the day than the large-tablet owners. Some of them seemed
to also use them in a more spontaneous, circumstantial way — for instance, one of
our participants, a pharmacist, mentioned that he kept his Kindle Fire in his coat
pocket at work and used it to check drug information on the Internet as needed. He
said that the tablet was easier to access than the few dedicated computers in his
shop, especially since other co-workers may have needed access to those computers.
The midsize tablet was also a convenient way to kill empty time at work: people
reported that sometimes it was easier to check personal email or browse the Internet
on their tablet rather than on their work computer.
Several users stated that they liked to use their midsize tablets as e-readers: The
smaller size made them not only easier to carry around in a bag, but also easier to
hold.
At home, midsize tablets serve the same functions as the larger-screen tablets:
browsing the web, reading, watching videos and movies, or playing games.
Overall, both in terms of usage, size, and design constraints, midsize tablets place
in-between smartphones and large-screen tablets: their portability makes their use a
more contextual and shorter-timed than on a large tablet.

TABLETS VERSUS PHONES

According to a 2012 survey, 68% of smartphone users say that they cannot live
without their phones, while only 13% of the tablet owners say the same about their
tablets1. Smartphone users keep their phones with them at all times, and that
informs dramatically the usage differences between phones at tablets.
Because smartphones are available at all times (and connected at all times), phones
tend to be used for almost anything. That doesn’t mean that any type of task can be
reasonably completed on a phone. A Google multi-screen study2 showed that in fact
many tasks that are started on a smartphone are completed on a different device. It
just means that phone usage is more attuned to the contextual information needs
that people tend to have during the day.
Because phones are small, pulling them out of a pocket or purse and using them for
a few minutes at a time is a relatively low interaction-cost operation. Doing the same
with most tablets is not worth the time investment if you only have 2-3 minutes
available. Because of that, phone sessions tend to be shorter and more contextual;
they often tend to be interrupted by external stimuli. Tablets are less portable, and,
because many people use them at home or in an office, the sessions are often
longer. People feel that they are more relaxed and not rushed when using tablets.
1
http://onlinepubs.ehclients.com/images/pdf/MMF-OPA_--_Portrait_of_Smartphone_User_--
_Aug12_(Public).pdf
2
googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html

10 [email protected] How People Use Tablets

 Do You Need a Tablet App?

When the iPad first came out, we noted that full sites worked quite well on it, and
mobile sites felt sparse and wasteful. That finding holds today, too.
In fact, one of the recurring themes in our user studies was that, for a lot of tasks,
people prefer to use the browser and deal with a full site. It seems that we are past
the app craze: many users are protective with their time and with their device’s
memory, and they don’t want to go through the hassle of installing and maintaining
an app when a website could do the job just as well.
It doesn’t mean that people don’t use apps on their tablet: they usually go back to a
few apps that support a unique task. Examples include video-watching apps, recipes
apps, news apps, banking apps. An app has to have a secret weapon that
distinguishes it from the full website. Only then the app will add enough value to the
user to justify going to the trouble of installing it.
But apps that include a subset of the content or functionality available on the web
are losers: users stay away from them. If they get installed, they also get quickly
deleted or forgotten.
We are aware that the decision to create a tablet app is often a political one: a
manager or a CEO insists on having one because competitors also have one, and
thus the ball gets rolling. However, creating an app just to have a presence in an app
store is a poor investment of resources; the time and money would be better spent
on making changes to the full website to better support access on tablets.
When trying to decide whether you should build a tablet app or just change your full
website to make it more tablet friendly, start with a few questions:
(1) What functionality will we include in the tablet app? How does the
functionality compare to our existing full site?
If the functionality of the app is the same or more restricted than the full site,
then it may not be worthwhile building an app.

(2) Will the existence of the app enable our users to get a substantially better
experience in context than what they would get with a full site?
A car-repair app that can be easily used in the garage is probably warranted,
although the repair instructions may be available on the website as well.
A car-repair app that gives users directions to stores or lets people search for
parts is not that useful, if users can access similar functionality on a website.

1. If a tablet app replicates full-site functionality, then the tablet app

should have some unique added value.
Often the full website is accessible and fairly usable on the tablet, so a
simplified app that leaves out essential content from the full site is perceived as
worthless. As a result, large-tablet users will not install an app that does
nothing more (and maybe a lot less) than the actual full website.
Many of our users shared that they never bothered with the e-commerce apps
from big names such as Amazon or eBay; even though they had downloaded
those apps, they felt that they were lacking features that they found highly
useful and that were available on the website.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 11

 A Windows 8 user confessed that one of his hobbies was selling on eBay; he
complained that the Windows 8 app was designed purely for buyers, and did
not support sellers that well. In particular, when deciding how much to charge
for an item, he often tended to check prices for similar items that had been
already sold on eBay. He could easily search completed auctions on the full
website, but that feature was not available in the eBay app.

eBay for Windows 8: Users can filter by a variety of criteria; however,

not all criteria present on the full site are available in the app (for
instance, users cannot look at completed auctions only).

A Redfin user was disappointed that her search returned no results even after
trying to expand her search. She said:
“I would not keep playing with the app; I would just go to the website
where I know they have a lot more options. At this point I would just
delete the app to make space on my iPad.”
One of our participants complained that, although on Zappos.com it was
possible to log in using an Amazon account, this feature was not available on
mobile.

12 [email protected] Do You Need a Tablet App?

 Zappos app for iPad: Users cannot log in with their Amazon account;
however, this is possible on the full site (below).

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 13

 2. Users prefer apps to full websites when the app is supporting a single
main task.
None of our users said that they’d rather watch videos in the browser, or that
they’d rather read a book in the browser. Whenever an app was dedicated to a
unique task and it was highly adapted to that task, users appreciated it and
tended to prefer it to a website. Besides e-readers and video players, another
type of app that was fairly popular (at least for some users) was the cooking
app. Reading a recipe in the kitchen is easier when the font is big, the steps
are clearly delineated, and app offers voice control, like Crock-Pot for iPad
does.

14 [email protected] Do You Need a Tablet App?

 Crockpot for iPad: Simple voice commands allow the users to interact with
the app without touching the screen — a very useful feature in the
kitchen, when your hands are dirty.

DESIGN FOR TABLET, NOT FOR PHONE

One of the common misconceptions in designing for tablets is that they are just
phones with big screens. Often, we see simplified designs that are moved from
phone to tablet, with multiple pages of a phone app crammed within a single page in
a tablet app.
One difference between tablets and phones is that phone sessions are typically
shorter and more contextual. People keep their phones around in their pockets all
day, and take them out whenever they have a few minutes to kill. Most tablets are
less portable, and tablet sessions are often longer. As a result, people often expect
more complex content on the tablet and more details.
(We have a separate report with usability guidelines for designing for mobile phones.
Please see www.nngroup.com/reports/mobile-website-and-application-usability .)

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 15

 3. Tablet apps should have more in-depth functionality than phone apps.
Strive to give users access to details that may be not available on the
phone.

4. Do not design your tablet app or website by simply combining pages

from your mobile phone app.
Sometimes, the functionalities of the tablet and phone apps are very similar
(e.g., a mail app, a task management app), and then it makes sense for the
interfaces to be similar. But even in those cases, make an intelligent transition
to the larger screen and keep in mind the conventions and the usability of the
resulting design.
Mortgage Analyzer for the iPad consists of a single page, which combines all
the screens in the Mortgage Analyzer iPhone app. Except for the Feedback
screen, all the action happens on this page: this is where the data is entered
and where the results are displayed. Although having multiple types of
information present at the same time helps the user by minimizing the load on
their working memory, in this case many of the options add to the clutter and
to the information overload, since some users will not actually access them all
at once or from the beginning. More importantly, many of the targets on the
screen are too small and crowded, the text is hard to read, and the main
button Calculate is far away from the main form fields (Loan Amount, Interest
Rate etc.).

Mortgage Analyzer for the iPad consists of a single page. Except for the
Feedback screen, all the action happens on this screen.

16 [email protected] Do You Need a Tablet App?

 Mortgage Analyzer for the iPhone has exactly the same functionality as
the iPad apps, but it appropriately makes use of more screens.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 17

 5. Whenever possible, design a separate tablet app rather than making
the phone app available on the tablet or just replicating the phone-app
design in the tablet app.
Because tablets have larger screens, they can accommodate more complex
content and interactions. Applications that were designed for phones often
work on a tablet, but look impoverished and poorly designed. People typically
complain that they don’t want the “mobile version” on their tablet — rather,
they want better use of the space and more features and complexity. (Many
Android tablet apps are simply enlarged versions of the regular phone apps,
and although they can be tolerable on a midsize tablet, they are pitiful on a
large 10” screen).
The Costco example below illustrates the case of a phone app that was adapted
for a tablet. Because of the larger screen and the higher resolution, the icons
and the text appear small on the tablet. As one of our users commented, the
app has “a lot of negative space — they didn’t stretch out as needed.” In fact,
although on the tablet there is space for more icons at the bottom of the
screen, users have to swipe horizontally and go to the next screen and see
more icons. The empty space at the bottom of the screen makes people think
that the screen is “complete”, so they are very unlikely to discover the second
screen.

Costco app for Android on a mobile phone.

18 [email protected] Do You Need a Tablet App?

 The Costco app on an Android tablet. The tablet app is practically identical
to the phone version. As you can see, the design wastes space on the
larger tablet screen. Moreover, users still have to navigate to a second
screen to access the additional navigation options.

Baby Bump is an iOS app with two different version: iPad and iPhone. Although
the iPad version is separate from the iPhone one, the interfaces are exactly the
same, only bigger on the iPad. Unfortunately, although this type of design is
fast and economical, it is not often appreciated by the users, who feel that the
app does not take full advantage of their tablets.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 19

 BabyBump for iPad (top row) and for iPhone (bottom row). The app has an
identical interface on the iPad and the iPhone. Many screens look underutilized.

20 [email protected] Do You Need a Tablet App?

 Guidelines for Making Desktop Sites Tablet Friendly
When the iPad came around, one of our first usability findings was the read–tap
asymmetry: content from a full site is fairly readable, but not easily actionable
because it’s simpler to hit smaller targets with a tiny mouse cursor than with a fat
finger. Building a tablet-friendly site (or, better, adapting an existing desktop site) is
a fairly easy task; most of the work revolves around making it easier to tap.

6. If you don’t have a tablet version of your website, direct the user to
the full (desktop) version of your site and not to the mobile version.
Why not take tablet users to mobile sites? Most are already optimized for
touch, they have big targets and easy to read content, so making people use
them seems like an obvious choice.
That’s just in theory. In practice, we’ve seen many users complaining when,
instead of the full site, they got the mobile site on their tablet. The main reason
is that the mobile site looks empty and sparse, and people feel like they’re
missing out on important content. There is a lot of empty space and the screen
feels underutilized; users feel cheated when a tap buys them so little content.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 21

 Amazon.com: Full site on a tablet (top row) and mobile site on a tablet
(bottom row). Although the targets are big, the mobile site has a lot of
white space. The full site seems to make a better use of the large screen.

7. Consider using responsive design techniques to make the layout more

tablet-friendly.
Responsive design is a way to adapt your layout to different screen sizes and
orientation. Essentially, the design elements are laid out on a grid; the cells in
that grid can be rearranged to respond to different screen sizes.
We’ve found that responsive design is truly successful when it deals with a
small range of screen sizes (e.g., designs that span 7–12 inch sizes, or tablet
to desktop designs). For mobile, one can question whether it’s appropriate to
always have the same features present on desktop and on mobile; for tablets,
it’s a lot less arguable.
Many of the responsive design techniques give priority to content on a small
screen by compressing the navigation in menus or replacing the search box
with a search tool, or moving navigational elements around. As we will see
later in this report, some of these are less successful than others on a tablet.

8. Use jump links to take the user back to the top of the page quickly.
Because the tablet screen is too small to contain all the information needed for
most tasks, users may have to scroll down through a lot of screenfuls before
they get to the bottom of the page, and then they may need to go back to the
top of the page to access navigation or other action buttons. Make it easy for
them to go back to the top by including a jump link or a button at the bottom
of the page; consider making this jump link persistent so that users see it as

22 [email protected] Guidelines for Making Desktop Sites Tablet Friendly

 soon as they start scrolling. (Note that on the iPad, tapping the status bar
takes the user back to the top of the page, but few people are aware of this
feature).

Yahoo.com: The arrow at the bottom is persistent, and appears as soon

as the user starts to scroll down. The arrow takes the user back to the top
of the screen. Note also that the top navigation has been compressed in a
menu (top left corner) to occupy less space. The navigation button and
the search bar are persistent on the screen: they stay pinned at the top
even if the user scrolls down the page. (However, hiding navigation under
menus can be dangerous because some users may miss it — see our
section on navigation).

9. Use persistent buttons to make it easy for people to access important

features as they scroll down the page.
Navigation or Add-to-cart buttons tend to be placed at the top of the page.
When people scroll down on a page, it can be tedious to have to scroll back
again to access the features placed at the top. A jump link to the top can help,
but one extra step can be saved by making essential buttons persistent.
The Yahoo example in the previous guideline illustrates pinned-down navigation
and search. Amazon used to also pin down the Add to Cart button in older
versions of the website, but no longer does it. eBay adds a persistent search
button (as well as an arrow that takes users back to the top of the screen).

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 23

 eBay.com: The persistent search button in the top right corner, and the
name of the product (as well as the persistent arrow taking users back to
the top of the screen) make navigation easier for tablet users.

10. Avoid small fonts: They are hard to read on the web, and can be even
harder to read on a small screen.

11. Use good contrast to help users see the content in a variety of lighting
conditions.
Full web pages are relatively easy to read on a tablet screen provided that the
font size is reasonable. Once the font size becomes too small, people need to
zoom in to increase the font size, which leads to loss of global context and
horizontal scrolling.

24 [email protected] Guidelines for Making Desktop Sites Tablet Friendly

 Klm.com: Some of the links on the page have tiny text and are hard to
read. Note also that not all the buttons display well on the iPad.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 25

 Tiffany.com: The text is small and the contrast between the text and
background is poor.

12. Make sure that all the information that disambiguates a link is close to
that link or in the link text. Group related information.
Looking at a full site on a small screen is like looking through a magnifying
glass: some of the overall context in which content appears may not be present
on the screen. People may interpret information incorrectly when the proper
context is absent.
We had several participants getting lost on Harvard’s site when looking for
admission requirements for the Psychology doctoral program. Some found
themselves on Harvard Business School’s page, following the words “Doctoral”.
The page did not really mention to which program the listed requirements
corresponded; the only cue was the logo and the words “Harvard Business
School” listed at the top of the page. (And even if they noticed that, some
people may still wonder whether Psychology was part of the Business School.)
On pittsbrghkids.org (a responsive site), users had to check if there were any
discounts for AAA members. The discounts were all put together in a PDF
document that was at the bottom of the page. Because the PDF was far from
the actual place where the discounts were mentioned, it was easy to miss it
and think that a sloppy webmaster had forgotten to include it.

26 [email protected] Guidelines for Making Desktop Sites Tablet Friendly

 Pittsburghkids.org: Some people missed the list of discounts because it
was separated from the text describing the discounts.

Harvard.edu: Some participants looking for the doctoral program in

Psychology ended up on the Business School page. Note that the links and

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 27

 the text do not mention the doctoral program. The Harvard Business
School is only mentioned in the black banner.

13. Whenever appropriate, use the device GPS to detect the current
location.
People are more and more used to their device being able to take advantage of
the GPS to detect their current location. Initially, that was only possible in
native apps, but today most browsers can use GPS information. Take
advantage of that capability to make it easier for people to input information.

TARGETS
When it comes to reaching targets, both the mouse and the human finger are
subjected to Fitts’ law3. Fitts’s law is a famous human-computer interaction finding,
which says that the time depends on the distance to the target and the size of the
target. More specifically, the farther away a target is, the longer it takes to reach it;
and the bigger a target is, the faster it can be reached. For those mathematically
inclined, here is the actual formula:
= + log(2 ),
with being the distance to target, W the target width, and a, b two device-
dependent constants.
For our discussion, the two constants a and b are the main source of difference
between the optimal target size for mouse versus finger. In other words, human
fingers are fatter and thus need bigger target size in order to hit targets fast. But the
bigger target size is actually going to benefit mouse users as well.
If you are adapting your full site to tablets, change target size with touch in mind.

14. Make links and targets big enough. The touch-friendly size for buttons
and other widgets is 1cm x 1cm or larger. If that cannot be achieved,
you can compromise a little in height rather than width of the targets.

15. Leave space around links. Consider padding widgets to make them
easier to touch.
Parhi, Karlson & Bederson (2006)4 showed that, for touchscreen portable
devices operated with one hand, the optimal target size was a 9.6mm square
(approximately 1cm2) for discrete tasks (that is, tasks that involved an isolated
click, as opposed to a series of clicks; a series of clicks is more representative
of typing).

3
Fitts, P.M.(1954). The information capacity of the human motor system in
controlling the amplitude of movement. Journal of Experimental Psychology, 47,
p.381-391.
4
Parhi, P., Karlson, A. K., and Bederson, B. B. 2006. Target size study for one-
handed thumb use on small touchscreen devices. In Proceedings of the 8th
Conference on Human-Computer interaction with Mobile Devices and Services
(Helsinki, Finland, September 12–15, 2006). MobileHCI '06, vol. 159. ACM, New
York, NY, 203-210. DOI= http://doi.acm.org/10.1145/1152215.1152260

28 [email protected] Guidelines for Making Desktop Sites Tablet Friendly

 Therefore, all these interfaces must build in some tolerance to error by (1)
leaving generous amounts of space around widgets that need to be clicked
(buttons, arrows for dropdown boxes, links, scrollbars), and by (2) increasing
the target size of these widgets. The first condition ensures that people will not
accidentally click on the wrong widget. The second condition builds in some
room for reaching error.
Go back to your site and look at the links and buttons. Are they big enough for
touch? If not, try to resize them and space them so that it’s less likely to make
an error when on a touch screen.
Footers are often places with many tiny targets close to each other. Luckily,
the footer structure can be easily changed because the footer is the last thing
on the page and its redesign should not affect much the other elements on the
page.

Restaurant.com’s full website on a large-screen tablet. While many of the

buttons and links on the page are big enough for a touch screen, the links in
the footer are too close to each other. These links are hard to select on a
tablet.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 29

 16. Protect against accidental touches by asking confirmations for any
irreversible action (or action that may be hard to revert — e.g., placing
an order).
Because people often move their hands across the tablet surface in order to
reach a target, it’s really easy to accidentally touch something. Luckily,
browsers have a built-in back button, so, if the touch leads to navigating to a
new page, users can easily go back. Problems arise however when the touch
results in an irreversible action (e.g., delete, place an order, send an email).
One of the authors was checking her LinkedIn page on her tablet, looking for
new connections. The speed was quite slow, and she was trying to scroll down
to see more people. However, instead of carefully planning the scroll on the
side of the screen, she carelessly scrolled on top of the connections. As a
result, some of the Connect buttons got pressed inadvertently. Unfortunately,
LinkedIn does not ask for confirmation before sending an invitation to connect,
so the result was unintended and irreversible.

Linkedin.com: Scrolling on top of the Connect buttons inadvertently led to

some of these buttons being pressed. As a result, invitations to connect
were sent.

17. Do not use mouse-specific functionality (e.g., hover states, right

button clicks).
Some styluses have an extra button that is the equivalent of a right click on
the mouse. However, the majority of tablet owners use their fingers and do not
have access to anything else but a tap. Avoid relying on functionality that is
inaccessible on touch screens.

30 [email protected] Guidelines for Making Desktop Sites Tablet Friendly

 PLUGINS
Many of the technologies fairly common on the web do not work on certain types of
tablets. Avoid them whenever possible (or be aware that some may break).

18. Do not use Flash.

19. Test your Javascript code to make sure it works on tablets.

Although both iOS and Android support Javascript, there can be incompatibility
issues between their versions and those that run in desktop browsers. Thus,
certain Javascript-based features of your website may not work well on tablets.
eBay’s iPad app has an embedded browser that takes the users to a desktop
page to finish the registration as a seller. That page relies on a Javascript
version that is not supported by the tablet browser.

eBay for iPad. The within-app browser displays a Javascript-related error

message when a desktop page is displayed.

20. Do not use PDFs. They break the flow and some users have difficulty
reading them.
We recommend against PDFs on desktops and on tablets. We’ve seen people
struggling to read PDFs on tablets: some Android users had to check their

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 31

 Downloads app and access the PDF from there, then go back to the website
they were originally interacting with.
As one of our users put it:
“I really don’t like when a website makes me use a PDF. I really don’t
like them — it’s not 1990, put them on the web.”

32 [email protected] Guidelines for Making Desktop Sites Tablet Friendly

 Naming the App

The name of the app serves to enable the user to find the app in the app store, and
later on, after the user has installed in, on the user’s device. Some participants
associate apps with the name of the company that created it, especially if it is a well-
known brand (e.g., AAA, Amazon, Reuters). That association needs to be preserved
and reinforced when choosing a name for the app. You want users to find the app
when they search by company name both in the app store and on their own device.

21. Make sure that the name of the company is included in the name of the
app and in the keywords that are associated with the app, especially if
it’s a name that users are likely to know or recognize.
Although the icon for Reuters’ app “The Wider Image” contained the Reuters
logo (and the name Reuters was included in the splash screen, as well as the
description in the app store), when searching for Reuters on the iPad, this app
did not appear as one of the results.
Users may associate apps with the company, but may not remember exactly
the name of the app. For instance, in the case of Reuters, they may remember
that they have a news app and a photo essay app from Reuters, but may not
know exactly how these apps are called. If the names of these apps do not
include Reuters, it’s hard to find them either by search or by looking at a list of
apps.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 33

34 [email protected] Naming the App
 The Wider Image: The app is installed on the iPad, but does not appear in
the search results when searching for it using the query “Reuters” (top
screenshot). The icon (middle screenshot) and the app navigation bar
(bottom screenshot) all contain the Reuters logo (and the word “Reuters”
in the case of the app).

Sometimes companies use nonstandard abbreviations to shorten the name of

an app. One of our participants had a hard time finding a recipe app from
Better Homes and Gardens in the Play Store because he was searching for
“Better Homes and Gardens” and the app appeared as “BHG recipes” in the
Play Store. The participant commented that he was not familiar with the “BHG”
abbreviation.

22. When a company provides multiple similar apps, the icons and the
names should help the user differentiate between apps.
When all apps from a company have the same logo, it’s hard for people to
distinguish between them, both in the app store and on their own device. As
one user commented:
“Same icon for different apps — I am questioning myself, which should
I buy?”
Although the app name and the icon should include the logo and the
company name, some variation in design will help users differentiate
between these different products.

Three apps from Amazon. They all contain the Amazon logo in the icon
and the word “Amazon” is part of the app names.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 35

 Skeuomorphic Design

When the iPad first came out, with it came a wave of skeuomorphic (or immersive)
designs. Magazine apps were all designed to behave like real paper magazine. E-
books were lined up on shelves that look as if they were made of wood.
Skeuomorphism is a fancy word for design that mimics a real-world object. Beyond
the charm of an e-reader app in which e-books look like physical books, the
assumption behind skeuomorphic design is that users are already familiar with the
real-world object from their daily life, so they will naturally know how to use a digital
objects that replicates the look of the real one. This assumption is a reasonable one;
unfortunately it doesn’t always stand up in the digital world. There are three
situations when the skeuomorphic design typically crashes:
(1) The skeuomorphic design may not copy the real-world object closely enough;
(2) The skeuomorphic design may clash with the mental model of a digital object;
(3) The skeuomorphic design can make the user work more than a simpler design.

The Contacts app on iPad is an example of skeuomorphic design that creates the
wrong affordance by copying the look of an old-fashioned telephone book, but not
supporting flipping through the pages by swiping.
The original magazine apps clashed with the mental model of a hyperlinked
electronic document; for instance, the story titles on the cover were not tappable.
We talked about this issue at length in our first iPad report, and, luckily, it got fixed.
Most modern magazines have hyperlinking and managed to successfully walk the
fine line between the physical magazine mental model and the electronic document
mental model.
Finally, the third instance where skeuomorphic design fails is when it makes a
complicated interface of something that could be quite simple if it followed the
current standards and practices. This type of situation often arises from the need to
make an application unique and fun. An example is the popular bookshelf interface
for documents. The big disadvantage of this interface is that the titles can be a lot
harder to read and cannot be sorted easily. (Proponents of the bookshelf design
argue that people see more of the book cover in this interface, and that the book
cover helps identify the book. Unfortunately, with digital books, most users don’t
actually see the cover very often: they just restart the e-reader and continue to read
from where they left, without navigating to the bookshelf. Thus, unlike with a
physical book, they are not exposed frequently to the book cover, so their familiarity
with it and their ability to recognize the book by its cover are quite reduced.)

36 [email protected] Skeuomorphic Design

 Contacts for iPad: Because of the ressemblance with a book, users may
be tempted to swipe to turn pages. However, that gesture does not
work.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 37

 iBooks app for iPad is an example of skeuomorphic design. The books
are placed on real-looking shelves.

A more serious example comes from one of the apps that we tested, CVS for iPad.
The app used a brick-and-mortar–store-like navigation scheme that puzzled one of
our users, who wanted a search box to enter the product he was looking for. He did
not want to spend the time and guess what the different clickable areas in the virtual
store meant. The user commented:
“I am tempted to go to Google… What’s the point of these icons [+
signs] right here? I don’t shop at CVS so often to know what the
different aisles are… So this is the first screen that pops up? Not
good…”

38 [email protected] Skeuomorphic Design

 CVS for iPad: Users wanted a search box instead of this virtual shop.

Navigation like this is actually recommended for young children who don’t know how
to read and do not know how to use the Internet. Most adults are way past that
stage and don’t have the patience for egg hunting.

23. Make sure that your skeuomorphic design makes things easier for the
user rather than more complicated.
Unfortunately, first and foremost, apps have to be easy to use and to make the user
efficient at their task.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 39

 Touch Targets

In the previous section, Guidelines for Making Desktop Sites Tablet Friendly, we
talked about Fitts’ law and the recommended target size for touch screens. Of
course, those recommendations stand whether you want to design a tablet app/
website, or you just want to improve your existing site for touch screen users.

24. Make targets big enough. The recommended size is 1cm X 1cm.

Eat24 for Android: The icons for Search, Filter and menu categories are
tiny and too close to each other.

40 [email protected] Touch Targets

 Interior Design for iPad: The targets in the top right corner are too small.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 41

 Lennox icomfort: Most target sizes are big and easy to tap.

25. Avoid crowding targets.

We’ve pushed these guidelines since we published our first report on Mobile
Usability; they are still valid today. We still see designers succumbing to the
desire to make room for content by minimizing interface controls. While the
desire is laudable, it causes users a lot of grief.

26. Choose familiar icons and strive to have labels for all your icons.
Icons can be small and obscure, and may cause difficulty for users. Adding
labels to icons is a way to increase the target space and also disambiguate the
meaning of icons.

42 [email protected] Touch Targets

 Redfin on iPad: Some of our participants complained that the meaning of
the icons was not clear in this app. The top left icon led to filters and the
bottom down one stood for sorting. Note that separating filters from
sorting options is not a standard design choice.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 43

 Note Anytime for iPad: The icons are small, crowded, and have no labels.
It’s hard to guess what they stand for. However, note that the targets are
well signaled (they appear raised above the canvas).

27. Make sure that the targets stand out visually, so people notice them.
Avoid targets that blend with the background.
Busy backgrounds interfere with our ability to observe superposed objects.
Booking.com has a little button on the side of the map, allowing users to
search in the area displayed on the map. However, that button blends
completely with the map and is hard to notice.

44 [email protected] Touch Targets

 Booking.com for iPad: The button on the right expands to show some map
options. However, because it blends in with the map, it is hard to notice.

28. Build touch affordances by making sure that targets look tappable.

29. Do not build false touch affordances by adding 3D dimensionality to

elements that are not tappable.
It’s important to make sure that people know what they’re supposed to tap on.
The current trend towards flat design (exemplified by the Windows 8 interface)
makes it difficult to figure out which design elements can be tapped. It
becomes really important to settle on a set of tappability cues that are used
consistently for all targets in the design.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 45

 Android (starting with version 4.0 Ice Cream Sandwich) also favors a flatter
style of menus that can be sometimes hard to notice — check the little arrow
and the very subtle 3D cues that accompany buttons in the example below.

Target for Android. Many of the tappable targets on the screen are easy
to miss due to the flat design and to the fact that they blend so well with
the background. (Remember that users don’t get to see our nice
rectangles to direct attention to the proper part of the screen.)

In the Windows 8 example, some targets are accompanied by an icon and

some are not (they are just text). People didn’t always know how to distinguish
between titles and descriptions and targets.

46 [email protected] Touch Targets

 Homescreen on Windows 8: Many users did not realize that the “Change PC
settings” was tappable.

PADD for iPad: The app (built for Star Trek fans) has many design
elements that look like buttons, but are not part of the interface.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 47

 Input and Forms

TYPING
Typing on touchscreens is a hassle and most people hate it. Although the keyboard
keys are bigger on a tablet than on a smartphone, the process of typing on a tablet
is still quite tedious because of the lack of haptic feedback. Whenever people type on
a tablet, they have to switch attention between the keypad area and the area
containing the string that they are typing.
As one of our users put it:
“Typing on a tablet is horrendous compared to a computer… It’s a
hassle to have to type on the screen.”
Therefore, one of the basic principles on both tablets and mobile phones is to
minimize typing. We briefly enumerate here some of the ways in which it is possible
to make users work less at inputting information.

30. Minimize the amount of typing that the users need to do.

31. Whenever possible save searches and any kind of information that
people typed in a form field. Allow users to reuse that information later
on when they need to fill in a similar field.

32. Be tolerant of typos; offer auto corrections.

One user mistyped “bouillabaisse” and the BHG Must Have Recipes app wasn’t
able to find any result. The user corrected his typo, but noted that he wished
that the app “would have corrected my typo like Google does.”

33. Offer autosuggestions or autocomplete.

These often save users significant typing and they also relieve them from the
burden of correct spelling.

34. Allow the use of camera, voice, and GPS as input devices.
All these methods are quick ways to enter information. Many apps now support
voice input, and it’s become a standard to use GPS information to input a
current location. The camera is frequently used by apps to scan bar codes, and
even credit cards.

35. Whenever possible, compute information instead of asking people to

enter it.
The state and city can often be computed based on the zipcode; the credit card
type can be often inferred from the credit card number.

48 [email protected] Input and Forms

 36. Use sensible defaults based on history and personalization.

37. Allow users to copy and paste.

38. Make text boxes long enough so that users don’t have to scroll within a
text field.
Scrolling within a text box is best to be avoided on a touch screen. Always
make sure that a text box will be big enough for the majority of input strings.

Costco for Android: The email field is too short (left). The numerical
keyboard would be more appropriate for the membership number (right).

39. Make sure that the users can see what they type in both orientations.
Sometimes the text fields get covered by the keyboard or pushed outside of
the visible part of the screen. Typing on a touch screen is already difficult; not
seeing what you type can make it even more aggravating.
Sometimes the field is perfectly visible in portrait orientation, but is covered in
landscape orientation.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 49

 Facebook for iPad (older): In an older version of Facebook, the comment
field was covered by the keyboard.

40. Use the keyboard that is appropriate for the field type.
If the field is numerical, show a numerical keyboard.

41. Auto-format fields rather than asking people to type fields in a specific
format.
Don’t ask for spaces or dashes in a phone number; but let people use them if
they want and post-process the input to bring it to a desired internal format.

DROPDOWNS AND PICKERS

Scrolling through a long list within a small region of the screen can be tedious and
counter-productive. It may be a lot faster to type a few letters of the string than to
pick an option in a long list.

42. Do not use spinning pickers for dates. Consider a calendar widget to
input dates.
Spinning date-and-time pickers are slow and error-prone for tasks where users
are likely to need to specify a wide range of dates.
A calendar widget is usually more efficient for specifying a date, because it
shows an entire month at a glance. (Or even multiple months in certain
designs.) By visualizing the relationship between dates, calendar widgets also
reduce the frequency of certain user errors.

50 [email protected] Input and Forms

 OpenTable for iPad: The date picker is easy enough to use when making
restaurant reservations for today or tomorrow. But it’s awkward and
requires a lot of spinning when planning further into the future.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 51

 American Airlines for iPad: The calendar widget makes it easy to specuify
dates within a two-month window by a single tap. It’s also reasonably
efficient to slide the calandar up by a few months at a time to make
reservations further into the future. By showing two months at a time, the
design makes it highly likely that a round-trip ticket can be booked
without the need to further change the display for the return trip.
On the tablet, the touchable area for each date is only 8×8 mm, which is
smaller than the 1×1 cm we recommend. It would be better to enlagre
the calendar somewhat since there is room on the screen. But even with
the slightly-too-small touch targets, it’s still faster to specify a date with
this widget than by either typing or using a spinner. (Also note the ability
to redo recent searches by a single tap in the right margin: another way
AA reduces the need for users to enter input.)

52 [email protected] Input and Forms

 43. Use drop down boxes and pickers only when there are just a few
options available (4-6).
Both pickers and dropdowns have the disadvantage that they use only a small
fragment of the screen on iOS. The situation is somewhat better on Android,
but even there dropdowns do not cover the full screen. As a result, a long list
in a dropdown will require a lot of scrolling.

Hotel Tonight for iPad: Users must scroll through tiny pickers to select the
credit card expiration date (left). The country is also selected with a drop
down (right). In both cases typing would have been faster.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 53

 Big Oven for Android: Android dropdowns occupy a larger part of the
screen.

54 [email protected] Input and Forms

 eBay for Android: This dropdown on Android makes more efficient use of
the space.

44. Use field descriptions rather than placeholders.

Placeholders must be memorized; field descriptions are persistent. Especially if
an interruption occurs while the user is typing, when they come back to the
task they may need to remember what information they were supposed to fill
in.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 55

 Nordstrom for iPad: The labels for the text fields are placed in the fields
and disappear once the user starts typing. The user must memorize what
they’re supposed to type in that field.

56 [email protected] Input and Forms

 Hotel Tonight for iPad: Some of the fields lack proper descriptors; they
only have placeholders.

45. Whenever using placeholders, erase the placeholder when the user
starts typing in the field.
There’s nothing more annoying than having to erase the placeholder by hand.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 57

 Redfin for Android: The placeholder stays in place, although the user has
started typing.

46. Do not use sliders for fields that require precise values.
It’s pretty hard for people to use a slider when the exact value is known and
matters. For things like prices it is easier to type what the minimum or
maximum price should be than to find the desired point on a small slider. The
slider may not be sensitive enough to pick up a difference that is significant to
the user.

58 [email protected] Input and Forms

 For instance, the Redfin app for Android requires users to specify a price for a
house by using a slider. As users go the upper end of the scale, it’s harder to
specify prices in small increments — that is, your max price can be either $1.5
million or $1.75 million (these prices are quite common in places such as
Sillicon Valley or New York City). Thus, anybody whose limit is, say, $1.6
million is just unlucky — they will have to filter by hand the prices out of their
budget.

Redfin for Android. The real-estate app requires users to specify prices for
houses by using sliders for minimum and maximum prices. The maximum
slider is has bigger and bigger granularity as prices increase. It would
have been simpler to let the users type a desired price limit.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 59

 Booking.com for iPad: The slider makes it difficult for users to select the
exact price.

FORMS

47. The Submit button (or equivalent) on a form should be displayed under
the form fields rather than above them.
On iOS, the Done button is often displayed in a navigation bar at the top of the
page. Sometimes the form Submit button (whether called submit or something
else — e.g., Place Order) is also placed at the top of the form. This pattern has
started to trickle to Android apps as well.
Even on iOS we recommend against following this pattern for the simple reason
that it goes against the users’ tendency to scan down the page and then press
Submit. By placing the Submit button at the top of the screen, it gets
separated from the other fields of the form. As users fill in the form, they
usually do it top to bottom. When they get to the end of it, they expect to find
a Submit button right there, next to the last field they’ve completed. Most of
the times, when people don’t find it there, they get confused and start looking
around, not knowing what to do.
The examples below illustrate this pattern.

60 [email protected] Input and Forms

 Expedia for Android: The submit-type buttons (Search, Checkout) are in
the top right corner. Users can easily miss it, especially given the flat
visual design of these buttons.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 61

 Amazon for iPad. The Place Order button is positioned against the natural
flow of the page, at the top of the screen.

62 [email protected] Input and Forms

 Skyscanner app for iPad: Users naturally press the “Any Duration” button
that is shown under the picker, thus invalidating the selection they’ve just
made. The “Done” button is at the top of the form.

It’s a lot better to follow the natural flow of the page and place the Submit
button next to the last field of the form. If making that button accessible at all
times is important, then you can make it persistent, so that it’s visible at all
times.

eBay for Android. The Place bid buttons are correctly positioned at the
bottom of the form.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 63

 Target for Android. The Checkout button is placed at the bottom of the
screen and is persistent.

48. Distinguish between link buttons and Submit buttons. Submit buttons
are usually placed at the bottom of the form; when link buttons are
positioned there, they can create confusion.
Some forms contain buttons that lead to subforms. The placement and labeling
of these buttons is important because it can mislead users into correctly
understanding the purpose of the initial form.
In Taptu for Android, participants got to the page in the figure below. The
button at the bottom of the screen (Merge and remove Streams) is a link
button, but our participants thought it was a submit button and couldn’t figure
out how to indicate which streams to merge on this page. (In fact, they cannot.
They need to click the link button at the bottom of the page, and that will lead

64 [email protected] Input and Forms

 them to a new page where they can accomplish the merge). This page allows
users to change the stream order.

Taptu for Android. The button at the bottom of the screen (Merge and
remove Streams) was incorrectly interpreted by the participants to be a
Submit button, although it was in fact a link to a page where they could
merge and remove streams. As a result, they thought that the form in the
screenshot was for merging streams when in fact it was just for
reordering them.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 65

 49. Do not use non-modal dialogs for forms.
If the form is displayed in a non-modal dialog or popover, it’s easy for users to
accidentally dismiss it if they touch somewhere outside the form.
One of our users was trying to create a new house plan in the iPad app called
Interior Design; she accidentally tapped outside the form that had her select
the types of rooms and as a result she lost all her work — she had to reenter
all her data again.

Interior design for the iPad: the form for creating a new plan is displayed
in a non-modal popover; if the users touch somewhere outside the
popover, the form (and all the data entered so far) disappears.

66 [email protected] Input and Forms

 Net-a-porter for iPad. The filters are displayed in a nonmodal popover;
the values are lost if the user accidentally taps outside of it.

Amazon for iPad. The order form is viewed in a modal lightbox; people
must press a button to dismiss it, so there is less chance to accidentally
lose their work.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 67

 50. If you must use a non-modal dialog for a form, save the state of the
form, so that users could recover their work.
Make sure that people can go back to the form and continue what they were
doing in case they dismiss it by accident.

51. Do not use forms over forms in popovers or lightboxes.

Sometimes a form may contain other subforms. If that is the case, avoid the
temptation of stacking a set of lightboxes (corresponding to the different
forms) one on top of the other, especially if a button from a previous form is
visible in the most recent one.
Hotel Tonight exemplifies this situation. If the user wants to reserve a room, a
form detailing the reservation is displayed. The form has a big Add Payment
button at the bottom. If the user decides to change the name of the guest, a
new form is display on top of the first one. However, the old Add Payment Info
button is still visible on the screen, although it cannot be tapped.

68 [email protected] Input and Forms

 Hotel Tonight for iPad. If a user taps the Guest field in the first form, the
app display a second form for editing the guest information. The Add
Payment Info is part of the previous form and cannot be pressed, but is
visible on the screen and can confuse some users.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 69

 Soap.com for iPad: The Sign In form is displayed on top of the cart
lightbox. The controls from the background form are visible (although
dimmed).

70 [email protected] Input and Forms

 Registration and Login

Registration and login are special types of forms that deserve a separate treatment.
Over the many testing sessions that we witnessed, we never noticed a user happy to
have to create an account. Creating an account (as well as signing in with an existing
account, although to a lesser extent) was always perceived as a major chore. Here
are some quotes from our participants:
“One of the things I hate is when apps require you to register — I
mean, just take me here and when I want to do something that
requires registration, make me register.”
“Any time you have to create an account is no good.”
“I would normally not register”.
People avoid registrations as much as they can. It’s not only that filling in a
registration form is difficult on a touch screen; the other major problem is
keeping track of an extra password and remembering it at a later date. (Many
of our users report that they keep their passwords in a file on their computer
or even next to their computer — if they still happen to favor paper).

52. Don’t start the app with a request to sign in or register.

Registration is major time and effort investment for the users, and they will
only do it if they are highly motivated. Motivation can be increased if people
are shown the value proposition of the app first; if they can try the app and
decide it is useful and trustworthy.
When the news reader Trapit for iPad is first launched, users are asked to
register or sign in. They cannot try the app before they do so. Whereas having
to register may feel acceptable from a service such as a bank, it seems
unnecessary and gratuitous from a news app.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 71

 Trapit for iPad: Users are asked to log in or register before they can see
what the app is about.

72 [email protected] Registration and Login

 NARR8 for iPad. The first screen requires users to register or login in (but
they can skip it by clicking the Close button at the top).

Pose for Android: The first encounter with the app involves a login screen.
Note that the Facebook login is the most prominent; whereas the other
alternatives (Sign up with email and Login) are small at the bottom of the
page, a lot less likely to be noticed.

53. Request registration/login (1) for security purposes (e.g., to protect

financial information), (2) if users want to sync their data across
devices.
Most apps can function without a login. The true exceptions are banking apps
and other types of apps that involve managing an existing account.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 73

 You can allow users to login if they wish so (especially if they want to access
their data on several devices), but don’t force them to do it. And especially
don’t force them to access certain app features that do not inherently require
registration (e.g., saving favorites).
Big Oven requires users to login to add recipes to a list of favorites, to find the
nutritional information for a recipe, or to add a recipe to a grocery list. None of
these functions need to be tied to an account (all the data can be saved on the
local device and associate with that device).

Big Oven for Android. Many of the app features (favorites, nutritional
information, shopping list) are made available only to registered
members.

74 [email protected] Registration and Login

 Hipmunk, a travel search engine, has an interesting solution for syncing data
without requiring a login. They simply provide the user with a unique code
word that can be used on a different device to retrieve searches and complete
bookings.

Hipmunk for iPad. Users can finish their booking at their computer without
loging in, by typing in a unique code word.

For e-commerce apps always provide an option to checkout as guest. Even

people who already have an account may have trouble remembering the
password and may prefer to checkout as guest rather than going through the
hassle of recovering the password.

54. Offer people the option to sign in with a Facebook or Google account,
but don’t make those be the only options available.
Although some people like to share with another account, the majority is
reluctant for privacy reasons or because they are not sure what type of
information will be posted to that other account. That is why apps should

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 75

 always make it possible to sign up for an application-specific account rather
than using an existing Facebook/Twitter/Google account.

55. Give equal priority to registration and sign in fields.

56. If users make an error trying to sign in when they don’t have an
account, take them to the registration form but save the information
that they had entered in the sign in form.
Empty text fields act as user magnets: people often start typing right away:
they fill in whatever they think they are supposed to fill in without pausing to
(a) understand whether the form applies to them, or (b) read what they are
supposed to fill in. Often registration forms are filled out when people mean to
sign in or, vice versa, people sign in without having an account.

Costco app for Android: users started to fill in the first two fields of the
form, thinking that it was a sign-in form. They realized that it was a
registration form only when they were asked to confirm their password.
Only then did they parse the page more carefully and discovered the
Registered Shoppers accordion. In fact, one of our users made this
mistake twice — the second time, after he recovered his password from
his email and was trying to log in again.

76 [email protected] Registration and Login

 Modcloth for iPad. This app places the Sign In button at the top of the
screen, in the a less salient position. The two other Join buttons are more
prominent.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 77

 Amazon for iPad. This design is also problematic, because, although the
Create account is present and quite big at the bottom of the form, the
Sign in is still the more prominent one. More importantly, the attraction of
the empty text fields is still there, and users are likely to fill in the email
and password fields before they get to the two buttons. If they do so and
then press Create an account, the information that they typed in on this
page is lost and they have to reenter an email and a password on that
page (see below).

78 [email protected] Registration and Login

 Amazon for iPad. The registration page does not show the information
typed inadvertently on the first login screen (see above).

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 79

 Open Table for iPad. This design includes a Reserve as Guest button, but
it’s the least salient of the three buttons present on this screen. If the
user presses it after filling in the form above it, the email and password
are lost.

80 [email protected] Registration and Login

 LinkedIn for Android. This design avoids the trap of the empty fields by
asking users to disambiguate between registration and login before
entering their information. The slight disadvantage is that it introduces an
extra tap (for this first step), but in an app, this should only slow down
the flow minimally.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 81

 Big Oven for Android. The app correctly places the Join and Login Buttons
next to each other, giving them equal priority. Unfortunately, it does not
treat correctly the situation when the users fill in the two fields and then
press Join Us — the information typed on this page is not used on the
registration page.

82 [email protected] Registration and Login

 Redfin for Android. If the user is on the Sign In page (left) and fill in the
fields but then realize they need to join and press the top Join tab , Redfin
saves the email and password values and prepopulates the corresponding
fields on the registration form (right). (Note however that making Join
and Sign In two separate tabs is not an inspired choice, as people can
ignore those options altogether because they are too removed from their
focus of attention.)

57. Avoid taking people out of the app for registering.

58. If registration is not fully supported in your app, consider using a

browser view within the app to display the full site. Once users finish
the registration, take them back to the flow they were in before
starting it.
Many apps correctly assume that people will not take the trouble to register on
a tablet, so don’t have any app-optimized pages for registrations. In those
situations, they simply send the users to their full site.
This cost-benefit analysis, combined with the fact that full sites are relatively
usable on tablets, makes this solution reasonable. However, when
implementing it, do this within the app. Namely, instead of sending the user to
Safari, Chrome, or Internet Explorer, have a browser view within the app that
will present the full page to the user. Once the registration is completed, take
the user back to the flow they were originally in (for instance, if they were
purchasing something, take them back to the checkout flow).

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 83

 If the registration is done in a separate browser app, the user is burdened with
the task of recovering the flow — they need to go back to the app, and enter
their new credentials. We noticed that when people were taken to the web to
register, they often forgot to come back to the app. Most of the time, they just
completed (or failed) their task on the full site.

59. Minimize the number of fields in the registration form.

Because registration on a touch screen can be painful, try to make registration
forms as short as possible by only asking the minimum amount of information.
For e-commerce apps, as people enter information such as address and
payment method in their apps, you can ask them if they want that information
saved and linked to their account.

60. Remove duplicate fields (email, password).

61. Let people see their password in clear for both registration and login.
Many apps and websites ask users to type their email and password twice, in
the attempt to avoid errors. That is unnecessary: in the case of email, you can
simply ask people to go over their email address again and make sure it is
correct.
With passwords, a simple way to avoid errors is to allow people to see their
password in clear. This can be an option next to the password field — if users
don’t feel comfortable displaying it, they can always have it hidden.

84 [email protected] Registration and Login

 BigOven for Android. The app requests a username, an email and a
password (entered twice). It’s not necessary to ask users to type their
email and password twice. Also the ability to see the password unmasked
would help the user make fewer mistakes.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 85

 Amazon for iPad. Users can choose to see their password in clear when
they log in.

86 [email protected] Registration and Login

 Walmart for Android. Users don’t have to enter their email and password
twice and they can see their password in clear.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 87

 Flow

62. When an app supports several similar tasks, avoid making one of the
tasks the default flow.
We saw an example of this phenomenon with sign up and log in: whenever a
preference is given to one flow (e.g., log in over sign up), users tend to go with
it without realizing that they are on the wrong path. The reason is that the user
is so entrenched in his task, that he will simply fit into that task whatever is
given to him by the interface.
An example of default flow that causes problems is given by Expedia for
Android. The app supports hotel and flight searches; these are fairly similar
tasks. Our participants had to find a flight to Helsinki. However, all who
attempted this task were trapped by the interface, which defaults to searching
for a hotel — they started making selections and realized they were in the
wrong flow only when the reached the final button (Search for Hotels).

Expedia for Android: Searching for a hotel is the preferred flow. Several of
our users started fill in the information although they were searching for a
flight.

88 [email protected] Flow
 Kayak for Android. Users have to choose a flow before entering any data.

63. Always make all the necessary steps explicit. Avoid including steps
from different flows on the same page.
Sometimes apps are too clever in their attempt to save page loads and end up
confusing the user.
In the case of Expedia for Android, the app decided to combine the screen for
choosing a checkout method with the screen for checking out as a guest. As a
result, they included two options to log in, and a few steps belonging to the
third option, checkout as guest. Note that these options don’t have the same
visual weight.
One of our participants was trying to make a reservation through Expedia
without creating an account. She went on to enter the credit card info, but she
did not realize that she also had to enter the traveler’s information because the
calls to action were not clearly marked. In the end, she clicked the Log In with
Expedia button (the only clear call to action on the page) and gave up, thinking
that she could only purchase the ticket if she had an account:

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 89

 “This is pretty frustrating… They should have told me in the beginning
that I need an account in order to buy the ticket…”
In fact, she could have bought the ticket as a guest, but because that option
was not clearly marked and because it wasn’t clear to her what she had to do,
she ended up not being able to complete the task.

Expedia for Android (screenshot from usability testing video): The two
clear calls-to-action were Log in or Buy with Google. Our participant
wanted to checkout as a guest; she tried to select the payment type but
didn’t realize that she also had to add a traveler in order to be able to
complete the checkout. The checkout-as-a-guest option was not clearly
marked.

64. Use sensible defaults for app options.

Interior design for iPad is an app for building house plans and for decoration.
When laying out the plans, users can move and resize the different rooms that
they decided to include. However, by default, when resizing the rooms, they
could get an irregular shape (i.e., a shape other than rectangle). Most of our
participants struggled with that option, as they did not realize that they could
have turned it off (and forced all rooms to be rectangles).

90 [email protected] Flow
 Interior Design for iPad. By default, when users resize a room, the shape
can change. Most people want rectangular rooms, and making sure that
the rooms stayed rectangular was a big hassle for our users. The app had
a “Wall Mode,” which, when enabled, enforced that all the rooms were
rectangular; however, it was not turned on by default and people did not
discover it.

In the case of Booking.com, by default, the prices for different hotels are
offered in the local currency rather than in US dollars. Most of our (American)
users wished that they could see the prices in US dollars, and, although the
app did allow them to switch to USD, some users never found that option.
Instead, they thought they should go outside the app and convert the prices to
their desired currency.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 91

 Booking.com on iPad: Users need to go to settings to change currency or they
can hit the currency button at the bottom of the screen. Our participants did
not realize it was possible to do so.

92 [email protected] Flow
 Booking.com: The currency option would have been more visible if it were in
the popover that enabled users to set a price limit for their search.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 93

 Navigation and Tool Bars

65. Include a home button as a way for the user to start all over and go
back to a home base.
Many times when users were lost in the app, we noticed that they wanted to
start from scratch with a clean plate. It turned out that apps, in their
(legitimate) desire to save state for the user, did not let them do so. Users
tried to quit the app and launch it again; some even resorted to killing the app
from the list of recently run app, but even in those situations, sometimes the
app saved state and they could not start from the beginning.
One of our participants got lost in Reuters’ Wider Image and he complained
that there wasn’t an easy way to go back home. The home screen contained a
huge canvas with photo stories. When the participant selected one of them, he
could read and see the corresponding photos. Our participant decided to switch
tabs and go to Explore, and then wanted to return back to the home screen.
None of the tabs were titled home. When he tried “Latest” (the 1st tab), he got
back to the story and not to the home screen. Although the app does the right
thing by preserving state within tabs, a home button that took the user back to
the home screen would have helped him feel in control and gain a sense of
orientation in the app.

94 [email protected] Navigation and Tool Bars

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 95
 Wide

Wider Image for iPad: The first image shows the current page in the tab
called Latest; if the user navigates to a different tab (e.g., Explore in the
second image), and then they click on Latest, they are taken back to the
story they were reading. Although the app rightly preserves the state
within different pages of the app, some users felt the need of a Home
button that would take them back to the home screen (third image).

When using Redfin, some users where confused as they were navigating
through the app and wanted a way to start all over. There was no way for them
to return to a home base because the app did not have a homepage.
Open Table, an app for making restaurant reservation, also does not have a
homepage. As a result, global settings and account information are buttons
that appear arbitrarily on some pages (e.g., map), but are not present on
others. Since the choice of settings and account info on the map page is pretty
arbitrary, it’s unlikely for users to expect it there or remember that it’s there.

96 [email protected] Navigation and Tool Bars

 Open Table for iPad. The settings and account info appear on the map
page, but not on the restaurant page. There is no homepage to help the
user get oriented.

66. Crucial functionality (essential navigation options, search feature)

needs to be visible on the screen.
Out of sight is out of mind. If it’s not present on the screen, people often do
not discover that feature, or, if they discovered it once, they’re less likely to go
back at it again.
Unfortunately, hidden navigation plagues many apps or website, and the
motivation beneath it is well justified: saving space and prioritizing content
over chrome.5 Windows 8 exemplifies the prioritization of content over chrome
taken to extreme.
In Windows 8, the search function can be exposed by swiping over the right
edge of the screen. This is a convention at the operating system level, and
many apps obey it. Similarly, navigation and tool bars can be typically found by
swiping over the bottom or the top edge of the screen.
Unfortunately, these hidden features caused a lot of trouble in testing. People
did not discover them in an app (although they may have used them in a

5
By chrome we mean interface elements that help the user access the content they
are interested in. Users don’t use an app for the chrome; they use it for the content.
The chrome is a tool for facilitating the interaction with the app.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 97

 different app or at an operating-system level). And even for those who did
eventually discover them it wasn’t a quick process — only after fumbling
around and trying to discover these features in the app, it did occur to them
that swiping around the edges may be a good idea.
Luckily, Microsoft eventually realized that hiding the search box and the main
controls in apps is not a great idea, and took at least one step in the right
direction. In the newest version of Windows 8, some of the Microsoft apps
(such as Weather below) have visible search tools.

Weather for Windows 8. The original version of Windows did not include
the search tool in the top right corner. This caused users to be completely
lost, as they did not realize that they had to swipe around the edges to
expose controls and change the default city to a different one. In the
current version, the search tool is visible, but people can still expose
navigation by swiping over the top and bottom edges (see below).

98 [email protected] Navigation and Tool Bars

 eBay for Windows 8. After experimenting with various visibility settings
for the search and for the filters, eBay settled on the most sensible one:
the search tool is always visible on the screen and the filters are visible by
default (unless the user swipes over the bottom edge; that gesture makes
the filters disappear).

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 99

 Wikipedia for Windows 8. The search feature is not visible; users must
swipe on the right edge to expose it.

Applications on other operating systems also have problems with deciding

which functionality to keep visible.
Soundhound is an app that identifies songs. In the iPad version, the most
important button of the app (the “What’s that song” button) is hidden under a
menu instead of being prominent on the homepage.

100 [email protected] Navigation and Tool Bars

 Soundhound for iPad: The What’s that song button is hidden under the
home popover in the portrait orientation.

BHG Must Have Recipes for Android hides search under a lateral sliding menu
that is hard to find. Our participants had a hard time figuring out how to search
for recipes in this app; many ended up using the built-in visible navigation,
although it did not quite match their needs and required a lot more work.

BHG for Android: search is hidden in the lateral sliding menu.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 101

 67. Menus need to have good affordance.
If you are hiding options under a menu, you need to provide good visibility and
labeling for that menu so that people know what they will find there.
Unfortunately, sometimes apps try to minimize the menu label and end up
making the menu practically invisible.
An example is the sliding menu, a popular trend nowadays. Its big attraction is
that it saves space and may preserve context. However, in the attempt to save
as much space as possible, some apps make sliding menus hard to discover.
For instance, BHG Must Have Recipes for Android utilizes a left-hand side
sliding menu that is quite easy to miss. The only cue is a tiny arrow in the top
left corner of the screen. After struggling for a while with the app and finally
discovering the sliding menu, one of our users commented that “it’s not
intuitive at all that the swipe is there.”

BHG Must Have Recipes for Android: The sliding menu is signaled only by
a tiny arrow at the top of the screen.

102 [email protected] Navigation and Tool Bars

 Wimbledon: The sliding menu on the right is practically unnoticeable.

Wimbledon utilizes a sliding menu on the right that blends too well with the
map and is very hard to notice.
On Tripadvisor, the filters are a vertical pull-out on the map; the button is far
away from the list of results and visually it blends with the map, making it easy
to ignore.

TripAdvisor for iPad: The filter button blends in with the map and can be
easily missed.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 103

 Booking.com has a similar way of displaying filters, but the visual treatment
and the proximity to the search results is better, making the filter menu more
likely to be noticed.

Booking.com for iPad: A similar lateral pull-out black button for filters is more
noticeable.

The menu icon has become quite standard and the majority of people recognize
it, especially if the site uses good contrast. This menu is sometimes referred to

104 [email protected] Navigation and Tool Bars

 as the “hamburger icon” among user experience professionals, though we
recommend not using this term with users.

La Presse for iPad. A Canadian newspaper uses the standard menu icon in
the top left corner.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 105

 Currents for Android. The gray on white (modified) menu icon is placed in
a nonstandard position and is hard to see.

68. The icon for a menu needs to stay the same throughout the app.
The same menu needs to be designated by the same icon on different pages of
the app. Otherwise, users will have to learn what triggers the menu on every
page.
In iMDb, a sliding menu is accessed through the logo on the homepage and
through a menu icon on other pages. This inconsistency is puzzling and puts an
unnecessary burden on users’ memory.

106 [email protected] Navigation and Tool Bars

 iMDb for iPad. The same menu is accessed either by pressing the menu
icon on deep pages or by pressing the logo on the homepage.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 107

 HORIZONTAL NAVIGATION AND SWIPING

69. When using horizontal (deck of cards) navigation styles, make sure
that you give users cues so that they know how they can interact with
your app.
A popular alternative to vertical scrolling is the deck of cards model in which
people swipe horizontally to go to a different “card” (or section of the app).
Horizontal swiping has become quite standard; however, most often users need
cues in order to figure it out.
The cues can be arrows at the bottom of the screen, or fragments of the next
page peeking out at the sides.
LinkedIn structures the profile information in multiple cards; unfortunately,
although the cues for horizontal swiping are there, they are quite subtle and
easy to miss.

LinkedIn for iPad. The cues for horizontal swiping are subtle and can be
easily missed by users.

108 [email protected] Navigation and Tool Bars

 Crockpot for iPad: Users can swipe horizontally to get more recipes;
however, there are no cues to suggest that gesture to the user.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 109

 Eat24 for Android. You can swipe horizontally to see the lunch menu, but
the cues are very subtle (there is a Lunch Menu label at the top).

Windows 8 has made the horizontal swipe an integral part of its user-interface
style. The swipe is well signaled in many (but not all apps), by showing a
fragment of the content that is “on the other side” of the tablet edge.

110 [email protected] Navigation and Tool Bars

 Skyscanner for Windows 8. The illusion of horizontal continuity invites the
user to swipe for more.

Amazon for Windows 8. Unfortunately, the app does not give good cues
for horizontal swiping on its homepage; it’s not clear that there is more
content to the right.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 111

 70. Avoid using several navigation styles (horizontal, vertical) within the
same app. If several navigation styles must be used, be consistent in
how you assign them to different types of content.
Most people learn one style of interaction with an app and expect to stick with
it as they use the app. Different navigation methods on different pages
disorient the users and increase the memory load.
When magazine apps for iPad first came out, they tended to use a variety of
navigation methods, sometimes different in different orientation. More recent
apps have settled (mostly) on two ways to navigate throughout the magazine:
vertically within article and horizontally for moving to the next article.
Although this dual style of navigation is a little more complex, as long as it’s
consistently deployed, people can do well with it.

The New Yorker for iPad. Horizontal swiping moves from one article to the
next. Vertical scrolling moves within an article.

However, other news applications push the navigation variability a little too far.
For instance, Currents for Android, a news aggregator, requires several
different styles of navigation: (1) horizontal swiping for moving from one
source to another (although not all “cards” in this horizontal stack are really
sources — some are simply coverpages such as Business or Lifestyle for a new
set of sources); (2) vertical scrolling for seeing the article headlines within one
source; (3) horizontal swiping for reading the article page by page and for
navigating to the next article.

112 [email protected] Navigation and Tool Bars

 Currents for Android. Horizontal or vertical navigation is required, depending on the
context. Users must use horizontal swiping to get from one source to another or to read
the pages of the same article or to read the next article; they should scroll vertically if
they want to see all the headlines on a page. At least on the article pages the arrows in
the lower right point the user to the correct way to navigate (although they could benefit
from a stronger contrast with the white background).

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 113

 71. Do not use an infinite canvas for navigation.
The infinite canvas is appealing visually, but has the disadvantage of being
terrible to use. Users have no natural landmarks (beginning or end) and have
to remember the items on the canvas in order to realize whether they’ve
already seen the content presented to them or not. When the infinite canvas
can be moved in both directions (horizontally and vertically), the confusion is
amplified even more.

Hotel Tonight for iPad. The hotel pictures and information are organized in
an infinite canvas that can be scrolled horizontally and vertically. Users
have to remember if they have seen the pictures before.

114 [email protected] Navigation and Tool Bars

 72. Do not change navigation styles depending on the orientation.
Magazine apps used to vary navigation styles a lot depending on orientation:
horizontal swipe for landscape and vertical plus horizontal for portrait. We are
happy to report that the problem has been largely remedied, and we now find a
lot more consistency between orientations.
Remember that users don’t expect to learn a new interface when they change
orientations. They assume that the same behavior that they’ve learned so far is
going to hold valid.
Shopstyle by Popsugar uses different navigation styles depending on
orientation: horizontal swiping is used in landscape mode and vertical scrolling
in portrait mode. At the minimum, this causes users a wasted gesture each
time they turn their tablet. (At the worst, people repeat the expected command
to no avail and assume that the app doesn’t have any more to show them.)

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 115

 Shopstyle uses horizontal swiping in landscape mode and vertical scrolling
in portrait mode.

THE BACK BUTTON

On a large tablet touch screen, accidents are bound to happen: people will eventually
touch something by mistake and be puzzled by the new page. When the first iPad
apps first came out, many were plagued by the absence of a Back button. We
pointed out that problem, and we are happy to report that most apps nowadays
comply with our recommendation to include a Back button. Unfortunately, some
confusion still exists with respect to the meaning of the Back button.
The Back button is often interpreted in one of two ways: (1) undo; (2) up in a
hierarchy. Most of the problems in today’s (mostly iOS) interfaces stem from
implementing back as up instead of as undo.
Back as up will take the user up in the interface, on a page that is at the immediate
higher level in the page hierarchy. Back as undo will take the user back to the
previous page that they were on.

116 [email protected] Navigation and Tool Bars

 73. (iOS and Windows 8) Include a Back as undo button in your iOS app.
(Note: Android has a global Back button that eliminates the need for a
separate Back button in the interface).
We still include this guideline for apps like the Habitat magazine (below), which
are still not convinced of the need for a back button.

The Habitat magazine by the Australian Conservation Foundation. This

app has no back button at all. If a user accesses an article from the table
of contents, the only way to go back to the table of contents is the article
carousel at the bottom of the page.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 117

 74. (Android) Do not include a separate Back button if the operating
system provides one.
It seems hard to believe that an app would waste screen space with a Back
button instead of using a perfectly good one provided by the operating system.
Often, examples like the one below stem from trying to reuse the same design
for both Android and iOS platforms.

L’Occitane for Android. The global back button at the bottom of the screen
takes the user outside the app on any page. To go back, one must use the
soft Back button in the top left corner.

118 [email protected] Navigation and Tool Bars

 75. (iOS) Make sure that you include a Back button on your homepage.

76. (Android) On the homepage, the global Back button should take the
user back to the previous page and not outside the app.
As a result of implementing Back as up, most apps do not have a Back button
on the homepage. That is simply wrong. The homepage can (most often) be
accessed through a logo or a Home button from elsewhere within the app. With
the current implementation of Back as up, all history is lost once people reach
the homepage.
Android escapes some of the problems with the Back button because of the
virtual Back button that is provided by the operating system. However, even
with Android, the implementation of the Back button on an app’s homepage is
often incorrect, as it typically takes the user outside of the app instead of
taking them to the previously visited page.

Zappos for iPad. A Back button is provided on all pages, but not on the
homepage. Hitting Home from a product page takes the user on the
homepage, where they now have no ability to return to the product page.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 119

120 [email protected] Navigation and Tool Bars
 Zagat for Android. If the user runs a search, but then accidentally hits the
logo, they, get to the homepage. Hitting the Back button on the
homepage takes the user outside the app. The user has lost their original
search and must run it again.

Two years ago, Bing was the only app that had a Back button on the
homepage. Today, it’s still the only one that we know of.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 121

 Bing for iPad. The app has a back button on the homepage.

77. When there are multiple frames on the same page, avoid implementing
Back at the frame level.

78. When there are multiple frames on the same page, avoid having
multiple Back buttons — one for each frame.
When the screen is divided into multiple frames or panes, one question that
arises is: what is the meaning of Back? Some apps have addressed that issue
by picking a “main” frame and implementing Back within it.
Both these solutions can be confusing. Keeping track of multiple back buttons
and multiple histories is no easy task for the user. When people press Back,
they usually mean to revert the result of the last action they just did.

122 [email protected] Navigation and Tool Bars

 If solving this problem sound complicated, reconsider the frames that you have
on the screen. It may be that your division of the screen is too complex and
you need to reconsider the flow.
An example comes from iMDb for iPad. One of the problems with the app is
that they display search results in a small popover, and keep the background
fixed. The Back button acts at the level of the main frame only. So, if users run
a search, select a search result and then want to go back to the search, they
cannot use the back button, because the back button will only take the user to
the page previously shown in the main frame.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 123

124 [email protected] Navigation and Tool Bars
© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 125
 iMDb for iPad. When the user searches for a movie, the search results
appear within a small popover. If the user picks a result and then hits
back, she expects to go back to the list of search results, but instead
she will navigate to the previous page in the main frame. (The search
results do get preserved if the user tries to hit the search button again).

79. Avoid multiple Back buttons.

Trip Advisor has two back buttons, next to each other. The difference between
the two buttons is unclear — the arrow is a true, persistent Back button, and
the button underneath sometimes is Back, sometimes can be a different
button. When it’s a Back button, the functionality is identical to that of the
arrow above.

126 [email protected] Navigation and Tool Bars

 Even if the two buttons did the same thing always, it’d still be wrong to have
two because it makes users ask themselves: why are there two buttons and
what’s the difference between them? Which is the right one to use?

TripAdvisor for iPad: The two back buttons were identical in functionality.
The one labeled “Back to Map” was not present on every page (and the
name would vary to indicate to the user where they would be taken
back).

80. Place the back button in the top left corner.

In their attempt to fit a back button into their visual design, some apps end up
placing it in nonstandard locations on the screen. These locations are
unexpected for users and it takes them more time to find them.
One of our participants who was using Reuters The Wider Image for the iPad
got lost in the app, and it took him some time to discover the back button. The
reason was that the back button was not placed in the upper left corner (as
expected), but rather, it was embedded somewhere in the middle of a vertical
tab bar. (It didn’t help that the back button worked only within the Latest
section; when the user changed tabs to a different section, the back button
disappeared).
When a vertical tab bar is used instead of the more typical horizontal one at
the bottom of the screen, navigational buttons such as Back must be placed in
nonstandard positions and necessitate more work for the user.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 127

 Reuters The Wider Image: The back button appears in the Explore section
(positioned in the middle of the left tab bar — see the image above) but is
not present in the other sections (e.g., the Profiles section in the image
below).

128 [email protected] Navigation and Tool Bars

 Feedback and Reversibility

81. Whenever users press a target to take an action, give feedback to the
user about the result of the action.
One of the basic principles of usable design is give feedback about the state of
the system, so that users know what happened and what they’re can do next.
The feedback doesn’t need to consist of a message — visual cues (e.g., a
change of color in a button) can also signal that the action has been
accomplished.
Sometimes the feedback is there, but it may be ambiguous. In Panna, when
users add a recipe to their favorites, they get a lightbox with the name and the
picture of the recipe, and a link to share the recipe. It’s not clear whether the
recipe has been added to the list of favorites or not.

How to cook everything for iPad. A short message informs the user that
the recipe has been added to the list of favorites.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 129

 Epicurious for iPad. The star button gets becomes blue after the user has
tapped it, to signal that the recipe has been added to favorites.

Panna for iPad. The light box that prompts the user to share the recipe
appears when that recipe is added to the list of favorites; it’s not clear if

130 [email protected] Feedback and Reversibility

 the recipe was successfully added to favorites or not.

82. Always let users revert to the prior state.

Most often, this means having a back button. But it can also mean undoing
whatever they’ve done.
For instance, in Trapit, one of our users made a story tile bigger than the
others, and then tried for a while to get it back to its original size to no avail.
The only way to do so is by selecting another story, which becomes bigger
instead. The bigger size is meant to indicate which story is the one being
attended to; however, the user cannot revert to the original “none-selected”
state. One of our users spent a few minutes trying to figure out how to revert
the tiles to their original state.

Trapit for iPad: When the app is first started, all stories are presented in
equal-size tiles (above). If the user taps on a story, its tiles becomes
bigger (below) and the only way to get its previous size back is to tap on
a different story. In general, it’s likely to cause usability problems when
the only way to change object A is to do something to object B instead,
because users will have focused their attention on object A.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 131

132 [email protected] Feedback and Reversibility
 Search

To quote one of our users:

“A search feature is the best thing in the world.”

83. A search box needs to be present in any app that contains a significant
amount of content.
NARR8 on Android (a comic reader) does not have a search box, making it
really difficult to find specific content. Most of the users who were asked to look
for a particular comic gave up because they couldn’t find the search box; some
never attempted to browse in order to locate the content they were looking for.

NARR8: The Android version (left) does not have a search feature. The
iPad version (right) has a search box under the General Catalog tab.

84. Never hide the search feature under a menu.

We said before that crucial functionality needs to be visible. This is another
instance of that more general guideline. The search feature needs to be easily
accessible in any app with a significant amount of content. It’s never
recommended to hide the search box; put it in a prominent place and make it
easy to find.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 133

 85. Search icons are harder to notice than search boxes.
The desktop has trained people to look for search boxes; however, on mobile,
search boxes take up precious screen real estate and many apps try to save
space by replacing them with a search tool. Unfortunately, users have a harder
time discovering the search feature in the absence of a search box. Whenever
possible, try to keep the search box on the screen to ensure that people are
going to discover it easily.

Propublica.org is a responsive design site. On smaller screen sizes the

search box is replaced with a search tool. Unfortunately, the search tool is
blue on blue background and was less discoverable than a search box for
many of our users.

134 [email protected] Search

 86. Preserve the search query or the search parameters so that people can
adjust them and refine their searches. For filters, let people easily
access filters that they have selected in the past.
Often users modify searches that they’ve done in the past, or, for filters, use
the same parameters that they’ve used before.
Refin keeps the parameters of the last search so people can start from there
when they initiate a new one.

Redfin for iPad: The parameters of the last search are preserved, so
people can easily modify them if needed (without having to reenter those
filters that stay the same).

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 135

 Booking.com for iPad: Users have the option to use previously set filters
for a new search.

Nordstrom for iPad: Although the previous search was a shoe search, the

136 [email protected] Search

 app does not prioritize the filter values that were selected in the past
(e.g., for size).

87. Show search results in a way that helps the user differentiate them
from search suggestions.
Sometimes apps can be too eager to display the search results. The user may
be still typing and the search results are displayed below the search box.
Because the user expects a change of page when the results are loaded, they
may not pay attention to the results below and wait for them to appear.
One of our users was searching for a restaurant in Open Table; he repeatedly
pressed the search icon hoping to get the results and only later realized that
the text below was in fact the result and not a search suggestion. It would
have been better to display results in a more complete format (e.g., with
thumbnails, ratings, etc.) that signals to the user that the search has been
completed and they can tap on the results.

Open Table for Android: When users search for a restaurant name, the
results appear right away. Our users found the results, but some
commented that it took them a while to realize that these were not
suggestions but actual results.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 137

 Lists

Long lists can be hard to scroll through on a smaller screen. That is why it’s always
better to use the full screen for displaying a long list, as opposed to displaying the
list in a small window or frame.
Any type of controls that help users identify elements in the list is going to be useful
— whether this would be a field where they could type some of the letters of the
item they are looking for, or just some letters that users can pick to jump to the
right region of an alphabetically ordered list.

88. Do not display long lists in popovers or small frames. Use the whole
screen for long lists.

iMDb: The search results are displayed in a small popover; the screen
space is underutilized. When the keyboard is displayed, that popover is
truncated even more (see below).

138 [email protected] Lists

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 139
 Booking.com. Dividing the screen into maps and hotels make only 4
hotels visible at one time. Users have to scroll through many more.

140 [email protected] Lists

 Currents for Android. The list of headlines is displayed in half the screen,
covering the article page. Users can see about 3 article titles per page.

89. If a list is sorted alphabetically, let users jump to any letter in the
alphabet to see items starting with that letter.
This can be done either by having a search field where users can type the 1st
few letters of the name or by having links to the letters.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 141

 Wimbledon for Android: Users cannot jump to a letter in the list of names;
they must scroll to find the player of choice. If they use the search
feature, there are no auto-suggestions for the names starting with that
string.

142 [email protected] Lists

 Net-a-porter for iPad. Users can select a letter to jump to the brands
starting with that letter, or they can type the first few letters of the brand.
(Note, however, that using a popover for the brand list is suboptimal even
with these helpful controls.).

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 143

 Split Views, Popovers, Frames, Content Tabs

With the larger tablet screens, multiple frames and windows came around. Apps
started to fragment the screen into multiple regions, to preserve context and display
pieces of related information. Unfortunately, many apps abuse the partitioning of the
screens into regions, and make the user experience suboptimal by forcing the users
to scroll more in any of these regions.

90. Do not segment the screen into smaller windows unless the user needs
to look at all the windows at the same time in order to complete the
task.

91. Decide if you can display a piece of content in a window based on how
much scrolling the user would need to do to get to see all the content
in the window. Scrolling 1-2 times is ok; more than that can easily
become tedious.
Ask yourself: Does the user really need to see all this information on the screen
at the same time? If the answer is no, or even if the answer is “maybe, in
order to keep track of where they’re coming from”, you can safely discard
some of those windows. (Context, if really needed, can be shown in more
space-economical ways — for instance by using breadcrumbs).
In Reuters The Wider Image, for each photo essay there is a “cover page” that
remains visible at all times. The story is displayed in a partition of the screen.
One of the participants commented:
“That [partitioning] is silly — it doesn’t make any sense!”

144 [email protected] Split Views, Popovers, Frames, Content Tabs

 Reuters The Wider Image: The photo essay has a cover page; in order to
read the story users have to tap (or pull up) the little gray button at the
bottom of the screen.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 145

 Reuters The Wider Image: A fragment of the article cover page remains
visible on the screen at all time, as users have to scroll through the actual
article in the lower part of the screen.

146 [email protected] Split Views, Popovers, Frames, Content Tabs

 Wimbledon for Android: The list of players is shown in the bottom half of
the page, while the top half shows the details of the last seen player. The
page-split is unnecessary and makes the users scroll more to see the
player list.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 147

 Wimbledon for Android. Half the screen is taken by the news headlines
and half the screen by the article selected in the list of news. The user
doesn’t see much of the article displayed at the top (in fact, he sees less
than the content displayed in the actual headline, which also includes a
summary), and has to scroll in the small window to read the entire article.
It would have been better to take the user to a separate page where the
article could occupy the whole screen.

148 [email protected] Split Views, Popovers, Frames, Content Tabs

 Zagat for Android. The restaurant information is displayed in a small
column, on the side of the screen.

Food Network for iPad. The recipe is displayed in a window, while other
content remains visible at all times on the screen. The end result and the
time to prepare the recipe, the yield, and the difficulty level are all useful

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 149

 information, but do not need to be present on the screen while cooking. The
recipe needs to get the prime stage and the maximum amount of space.

Modcloth for iPad. The product information is displayed on only half the
screen. Users have to scroll down to read the product information and the
review. The space would have been beter utilized if the product page
occupied the whole screen and users could go back to the list of products
by pressing a Back button.

92. Avoid truncating or decreasing the font of the text in a frame in order
to fit more content in that frame.
If you need to make text small to fit more in the window, then consider not
using a window and displaying the text on the whole screen.

150 [email protected] Split Views, Popovers, Frames, Content Tabs

 How to Cook Everything for iPad. The list of favorite recipes is displayed in
a small popover; the font of the recipe titles is made smaller so that the
popover can fit more info.

93. Do not split content into multiple tabs if the pieces of content are
interrelated. Consider a split view or a popover instead.
Many recipe apps follow the practice of structuring recipes into ingredients and
steps. One of the advantage is that, as users follow through the steps, they can
easily access the list of ingredients to check on quantities, and then go back to
the step description.
Let’s take a look at a recipe in BHG Must Have Recipes for Android; in this app,
the ingredients and the recipe steps are presented in different tabs. A user who
encounters an instruction such as “add the brown sugar” may need to switch
tabs and go back to the list of ingredients to check how much sugar she needs
to add. Once she located the sugar, she must memorize the quantity and then
go back to the steps tab and find her place in the list of steps.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 151

152 [email protected] Split Views, Popovers, Frames, Content Tabs
 BHG Must Have Recipes for Android: The ingredients and the recipe steps
are split into two tabs; users must commute between tabs to cook the
recipe. Note also that the big picture in the Ingredients tab takes up a lot
of space.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 153

 Epicurious for iPad:The ingredients and the steps are shown on the screen
at the same time in landscape mode. This is a good use of a split screen.

154 [email protected] Split Views, Popovers, Frames, Content Tabs

 Gestures

Using gestures instead of visible interface controls can free up space for content, but,
unfortunately it has its risks. First and foremost, gestures are not easily discoverable
and most of them have no natural affordances — it can be quite hard for users to
remember to do a certain gesture. Another big problem with gestures is that, when
many are used at the same time, people mix them up and forget what each is
supposed to do. And last but not least — gestures can be difficult to produce and
replicate reliably. For instance, not many iPad users use multi-finger gestures that
are native to the device — sometimes because they don’t know or remember them,
but also because they involve more motor dexterity.
Windows 8 is again one example of gestures deployed not very successfully. In our
testing people had trouble remembering to swipe over the tablet edges in order to
expose controls. It’s easy to understand why — the swiping over the edges had no
cues to remind people about it; in other words, it had zero affordances.

GESTURE AMBIGUITY

94. Do not assign multiple meanings to the same gesture depending on

where the gesture is deployed on the page.

95. Avoid swipe (or other gesture) ambiguity.

In our previous reports on the usability of iPad apps, we noted the
phenomenon of swipe ambiguity, which occurs when users can swipe on
different parts of the page with different results. Windows 8 provides plenty of
examples of swipe ambiguity.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 155

 Windows 8 homescreen. Swiping horizontally advances the homescreen
and exposes other tiles (first screenshot); swiping horizontally across the
screen edge exposes the charms (second screenshot). Thus, the swipe
has two different meanings depending on where it is performed.

The problem with swipe ambiguity is that it requires people to pay more
attention to how they carry out a gesture. In the case of Windows 8, once
people become aware of the two types of swipes, they eventually learn to pay
attention to how they perform the gesture. But sometimes people may not
even be aware of swipe ambiguity.
The most typical example is when carousels are combined with deck-of-cards
page navigation. Consider, for instance, a magazine app that has a carousel as
an interactive feature on one page. Readers are used to swiping anywhere on
the page to go to the next article; but on this particular page (with the
carousel), they have to be careful where they swipe to avoid changing the
carousel and to trigger a page turn. We’ve seen users in this situation being
surprised that the page did not turn and not understanding that it was because
their swipe was moving the carousel instead.

156 [email protected] Gestures

 Photography Week for iPad. Users can swipe to get to the next article or
they can swipe to change the image in the center of the page. Often in
these types of situation, when the ambiguity is present only on some
pages, people are not aware of it and become stuck when they cannot
produce the behavior they desire.

96. Avoid assigning different meaning to the same gesture depending on

when the gesture is made.
Swipe ambiguity refers to overloading the same gesture on different regions of
the page. But sometimes the same gesture can mean different things
depending on the actions that were performed before that gesture.
In Interior Design for iPad, the drag gesture can mean two things: (1) it can
move the user around the canvas (similar to scrolling), or (2) it can move an
object around the screen. By default, dragging is used to scroll; however, when

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 157

 is preceded by an object-select operation, it means move. (Note that the move
gesture does not have to start on the object being moved).

Interior Design for iPad: The drag gesture scrolls the plan (above row) or,
if a room is selected in advance, changes the position of the room (below
row).

Drawing apps often have a conflict between scrolling around the canvas and
drawing — they both are traditionally done with the same gesture (drag). As a
result, many drawing applications either invent a completely different gesture
for scrolling (e.g., drag with two fingers) or, like Interior Design, use the
preceding actions to disambiguate between the two meanings.

158 [email protected] Gestures

 Skitch for iPad. This drawing and annotation app uses the (normal, one-
finger) drag gesture for drawing and a two-finger drag for scrolling around
the canvas.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 159

 Notability for iPad. This drawing app uses the arrows for scrolling when a
pen is selected; the drag gesture can be used for scrolling when a pen is
not selected (e.g., text is selected). This context-gesture pairing makes
remembering how to scroll in this app more difficult.

Gesture overload makes users work harder, because they have to remember
what they need to do in a given context in order to achieve their goal. Instead
of remembering just the pairing gesture–action, now they have to remember
the triplet context–gesture–action, combinatorially exploding their memory
load.

97. Use gestures consistently across different sections of the app.

This guideline is a version of the previous one, when the context is given by a
different page in the app.
One of our users was annoyed with how Interior Design implemented object
selection. When creating a plan of the house, users had to tap over an object
(i.e., room) in order to select it, and then they could move it elsewhere on the
canvas. However, when decorating the rooms, users could move furniture right

160 [email protected] Gestures

 away, without selecting it first. Tapping on a piece of furniture in fact opened a
larger view of the object. One of our users noticed that it was hard for her not
to tap on a piece of furniture to select it after getting used to this method for
object selection in the previous section — “the app has trained me too well!”

Interior design for iPad: In the Decorate section, users did not need to
select an object in order to move it in the room; they could simply drag it
from the list of objects. Users who, in other sections of the app, had
learned that they needed to tap on objects to select them first, were
confused by this inconsistency.

LEARNABILITY
One word about learnability. Many people ask us whether gestures get eventually
learned and then become easy to use. We didn’t aim to study learnability in most of
our studies. However, some of our studies were scheduled immediately after a tablet
came out on the market (sometimes as soon as one week after), so we ended up
making participants use our own device6 and thus could assess their initial learning
curve with new gestures.

6
In all these cases, our users had been exposed to other touchscreen devices
(usually phones) for at least 3 months before the study, so they were fairly used
with that type of interaction.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 161

 In all these studies, we gave participants some time to inspect and familiarize
themselves with the device.
In most our studies, the lack of exposure to the interface had a limited effect. The
only study were exposure to the interface might have had an effect is the Windows 8
study. Participants were totally lost in some Windows 8 apps, and we assumed that
part of the problem might have been the unfamiliarity with conventions created by
Windows 8 (swipe around edges to expose controls).
To mitigate for that, in some of the sessions we actually told participants in the
beginning that swiping around edges may be useful. They tried it at the beginning of
the session, and then promptly forgot about it as they were doing the various tasks.
The result may have been different if the swipe gesture would have been reinforced
more by repeated usage.
However, there are some lessons to be learned out of this:
(1) Getting tips or tutorials once in the beginning is not enough (see our section
on Tutorials and Tips).
(2) Learning doesn’t always generalize to a different context (our users had tried
swiping on the tablet home screen, but may have thought that it doesn’t
apply within apps).
(3) Even after being exposed to a tip once, the interface needs to be suggestive
and create the right affordances for gestures.
In most of our studies, test participants used their own tablets, which they had
usually owned for at least half a year (often a year or more, particularly when
counting earlier releases for those users who had upgraded to a new tablet). These
users still had not learned advanced gestures, which shows that the long-term
learning curve still doesn’t get most people to a stage where such gestures are easy
or second-nature.
Of course, we don’t know what will happen after ten or twenty years of tablet use,
but experience from other categories of user interfaces — from line-based command
systems to window-based GUI designs — shows that most users’ learning curve is
extraordinarily flat during long-term use: people don’t tend to pick up much
additional UI knowledge during multiple years of use.

162 [email protected] Gestures

 Tutorials and Tips

Most of the time users are not patient enough to sit through a tutorial. And often,
even if they were to carefully pay attention to a tutorial or instructional video, they
would be unlikely to remember most of its content. That type of instructional
information, presented all together, often before users have gotten a chance to
interact with the interface, is overwhelming.
For that reason, we recommend that you do not use lengthy tutorials when the app
is first launched. If you must give users instructions, offer them well-placed,
contextual tips.

98. Avoid content-dense tutorials when the app first launches.

The tutorial below is not even lengthy, but because the information is
presented out of context, it seems daunting. Most of the items have no referent
in the user’s mind when the app is first launched.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 163

 WebMd for iPad. The tutorial is hard to understand in the absence of
interface elements to refer to.

99. Do not use video tutorials.

Video tutorials are even worse than other types of tutorials, because users
must absorb the information at a constant pace. There’s no way to skip faster
during a part that is less relevant, and to spend more time on something that
seems more difficult.
The app Note Anytime has several video tutorials available. None of the
participants who tested this app bothered to watch the videos. One participant
said:
“I don’t want to sit and watch videos”.
(Note: When we tested the app, it had no tips or tutorials in the beginning, and
the only modality to learn the fairly complex interface was through the videos.
One week after testing, Note Anytime released a new version with tips and a 9-
page tutorial shown when the app was first launched.)

Note Anytime for iPad: Users could not be bothered with the instructional
videos.

164 [email protected] Tutorials and Tips

 100. Allow users to interact with tutorials.
Not only is learning-by-doing more effective than learning by reading all the
information in the tutorial, but many times users try to interact with tutorials
that look more visual.
Let people practice some of the tasks illustrated in the interface if they are so
inclined.

Clear Day for iPad: When first launch, the app shows a quick tutorial. One
of our users tried clicking on the different bubbles to get more
information.

101. Make it clear that tutorials are not actual parts of the interface.
When we test interfaces for children such as games, we often find that if the
game starts with an instructional video, kids are confused and think that the
game has already started. They want to interact with the interface and are
disappointed and think that the game is broken if that is not possible.
A similar thing happened with adults on tablets. First, people wanted to start
right away interacting with the app (and thought that the tutorials would be
interactive); and second, some users did not realize that they were dealing
with a tutorial and expected to be able to navigate starting from the icons
shown in the tutorial.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 165

 Wimbledon for iPad: Some users thought that the initial tutorial was
navigation and wanted to interact with it.

102. Don’t overload users in the beginning with a ton of instructions.

CVS starts with a 6-page tutorial that tells people what they can do with the
app and how to interact with. Unfortunately, a tutorial like that is hard to
memorize and users are not motivated to spend the time to go through the
tutorial.

166 [email protected] Tutorials and Tips

 CVS for iPad: The app starts with a tour explaining the different sections
of the app. Users were quick to exit the tour.

103. Use contextual tips that instruct users when they need help.
It’s a lot easier to understand and learn instructions when they are presented
one-by-one, at the right moment.
When we tested Note Anytime, there were no tips; users complained and it was
hard for them to figure out the app by themselves. As one user put it:
“There are no directions; I have to guess” [what I am supposed to do].
Since our test, Note Anytime has added tips and a tutorial to both the Android
and the iOS versions:

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 167

 Note Anytime for Android (newer version). The tip appears on the
relevant page, next to the widget that it describes.

168 [email protected] Tutorials and Tips

 Content

104. On a small screen structure content so that the user can get a high
level picture of the most important points. Then let them delve into
details if they wish.
Because the screen is small, it’s easy for people to lose track of the context in
which information is presented and misinterpret it.
For instance, we had one user who was looking for houses in Kings Beach, CA
using Redfin. For every single house that she saw, she thought it that the
house was not on the market anymore and was puzzled that Redfin would
show it to her. The houses were actually on the market, but each house page
had information about the previous sales. The participant saw the word “sold”
on these pages and thought that the house had already been sold, without
noticing the other content around that disambiguated the fact that the
information referred to previous sales.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 169

 Redfin for Android: Our participant was confused by the sales data,
thinking that the house had been already sold. Redfin should have
simplified the page and hidden the non-essential information (such as
Property History) in an accordion menu (or on a secondary page) so that
the user could focus on the essential details.

In contrast, IMDb below shows content that is better structured. The page
presents a short description of the movie, followed by links to other information
that may be of interest to various users.

170 [email protected] Content

 IMDb for Android. The information is nicely prioritized. A short description,
the main cast and the director are presented on the page (first screen).
All the other information is delegated to secondary pages and can be
accessed through links below the fold.

105. Use meaningful labels. Avoid jargon.

In Interior Design users were put off by the model numbers that were listed
next to each piece of furniture that they could select. As one user put it,
“model numbers don’t mean anything.”

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 171

 Interior Design for iPad: Model numbers next to furniture objects are
meaningless for users.

172 [email protected] Content

 Hipmunk for iPad: Users did not know what “agony” meant.

Taptu for iPad. Users commented that they’d like a search box, and did
not know what Stream Store or SteamStudio were. (In fact, StreamStore
was a fancy name for the search feature.)

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 173

 Taptu for Android. The Add button is a lot clearer than the equivalent
“Stream Store” on the iPad. However, DJ is quite obscure (it refers to
stream customization).

174 [email protected] Content

 Waiting Times and Latencies
106. When a substantial piece of content is being downloaded, let users
interact with it as soon as possible (before the whole download is
finished).
Users rarely have the patience to wait for a long time for a big download to
finish. Whenever possible, allow them to preview part of the content while they
wait.
When using NARR8 (a comic reader), participants complained that they had to
wait until the comic was completely downloaded and couldn’t start reading
before that.
In contrast, most magazine apps today have learned their lesson and allow
readers to start reading very soon after the download has started. The access
to the issue is limited, but users feel as if they use their time productively.

107. Whenever downloading data or requiring the user to wait for an action
to be completed, the app should display a progress bar to indicate to
the users an estimate of how much more they have to wait.
Some apps display a spinning gear (or the equivalent — like Hipmunk and
Expedia below) instead of a progress bar. Unfortunately, a spinning gear is not
good enough, because users have no idea for how long they still have to wait.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 175

 Hipmunk for iPad

Hipmunk does not display a progress bar. Although it does show the
equivalent of a spinning gear (the moving mascot), users don’t know how
much longer they have to wait to see the results.

176 [email protected] Waiting Times and Latencies

 Expedia for Android: No progress bar, just a subtle animation.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 177

 Maps and Locations

108. Do not aggregate points of interest on a map.

One of the challenging issues in displaying maps is: how do you show multiple
pins on a map, without crowding the map too much and without forcing the
user to make a mistake because they accidentally hit the wrong one?
Redfin tried to solve the problem by aggregating multiple points of interest.
Thus, if you are searching for houses within an area, instead of displaying all
the houses, Redfin is going to combine all the houses close to each other into a
single icon with a number inside. The number stands for the houses that were
aggregated into that icon.
The solution seems elegant, except for the fact that most users don’t get it.
People are utterly confused when they see the different numbers, and that
confusion only amplifies when, after tapping on one of these numbers, it gets
expanded into a few house icons and another number.

Redfin on Android: Houses are aggregated into numbers (left). When

people tap on a number, the area is zoomed into, and they may see some
house icons and some numbers, if some of the houses are still too close
to each other (right).

178 [email protected] Maps and Locations

 109. Adjust the zoom level on the map to include the current location and at
least a few points of interest, and to keep targets fairly spaced.
Instead of following Redfin’s solution above, a more intuitive solution involves
adjusting the zoom level so that it includes the current location and a few
locations of interest.
Zillow below starts with a comfortable zoom level that allows the houses to be
not too crowded.

Zillow for Android (left) starts with a higher zoom level than Redfin for
Android (right).

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 179

 Sound Effects

Unexpected noises can be bothersome and startling. We strongly recommend against

using transition noises in an app or starting videos without warning.

110. Do not startle users by starting the app with a noise.

111. Make sure that people can turn noise off in the app.
PADD for iPad, an app that simulates the PADD device from Star Trek, starts
with a noise. It then continues making arbitrary noises during the session (with
no way of turning them off). Even if these noises make for a more accurate
replica of the original device, it’s still possible that users may want to
occasionally use the app without sounds.

112. When people navigate to a new page, do not start playing a video
automatically.

Panna for iPad. When navigating to a new recipe page, a video starts
playing automatically. Users must know to tap on the video in order to
expose the controls and stop it.

180 [email protected] Sound Effects

 Tablet Orientation

Tablet users seem to report a slight preference for the landscape orientation, at least
for the larger screen tablets. People assimilate the landscape orientation with laptops
and computer monitors, so by association, some prefer the same orientation for their
tablets.
However, even people who have a preference, will not use their tablet in that one
preferred orientation at all times. Sometimes the task or the context may impose a
certain orientation (e.g., people may rotate their tablet to watch a video in
landscape). We noticed that people switch orientations to best adapt to the content
on the screen — for instance, they will switch to portrait if the picture is best seen in
that orientation; they may switch to landscape to avoid horizontal scrolling on a full
site.
That means that people don’t switch orientations just to see if there are any other
features or different types of data available in the other orientation. So it’s important
for the interface and the content to be consistent across orientations.
Two years ago these were important recommendations because many apps actually
changed their functionality depending on the orientation. Today, most app designers
have gotten the message and it is difficult to find substantial interface or content
changes from portrait to landscape.

113. Make the interface consistent across orientations.

114. Make the content consistent across orientations.

115. Strive to ensure that your app works in all possible orientations.
Supporting all orientations is ideal, as it gives the users the most flexibility.
However, many apps work in a single orientation (e.g., CVS for iPad only works
in landscape; Linkedin for Android only works in portrait). That is acceptable,
although not optimal — users may be annoyed occasionally, but the unique
orientation is unlikely to cause a major burden, because it’s relatively easy to
rotate a tablet.

116. Avoid forcing users to switch orientations often within the same apps.
If your app contain content that is best seen in one orientation (e.g., comics
panels, pictures) make sure, as much as possible, that all the items that are in
portrait are placed together and all the items that are in landscape are grouped
together as well, so the users won’t have to switch orientations too often.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 181

 New York Times for iPad. Four consecutive pictures in a slideshow;
portrait and landscape orientations alternate, forcing the user to change
orientation for optimal viewing.

182 [email protected] Tablet Orientation

 Other
BROWSER VIEWS WITHIN APPS

117. Whenever the app contains an embedded browser, make sure to give
users the same flexibility as the default system browser (e.g., Safari on
iOS, Chrome on Android).
Many apps have embedded browsers that deliver web pages to the user. This
feature can be useful in a variety of situations — for instance, to refer the user
to supplementary information on a website.
The app Note Anytime allows users to capture a webpage and then annotate it.
In order to take advantage of that feature, users need to navigate to the
desired web page using the in-app browser. However, this embedded browser
is a lot more restrictive than a regular browser — for instance, it does not
recognize URLs that do not start with “http:”. Our users did not realize what
the problem was and left the app frustrated because they were not able to
navigate to the desired webpage and they thought that the app did not work.

Note Anytime for Android: The embedded browser does not recognize
URLs that do not start with http://. Thus “cmu.edu” produces an error
(left), but “http://cmu.edu” works (right).

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 183

 SELF-SUFFICIENT DESIGN

118. Apps should be self-contained and present the users with all the data
necessary to make a decision.
Although many apps strive to partition the screen into multiple regions and
present different types of information at the same time, on iOS and Android
you cannot have two applications on the same screen at the same time. (In
Windows 8 it is possible to have two apps share the screen). Because of that,
when designing an app you must strive to offer all the info that the users might
need in order to complete the task supported by the app. Otherwise, people
will need to quit the app, find the information elsewhere, and then bring it back
into the app.
Here are a few examples of apps that are not self-sufficient.
Skyscanner, a flight search engine, lets people search for travel, but does not
show on what day of the week the travel dates fall.

Syscanner for iPad: The app does not show on what day of the week the
departure and return dates fall. Users need to go to a calendar and check the
date.

When trying to find a hotel in the Gothic Quarter in Barcelona, our users had
difficulties figuring out where the Gothic Quarter was on the map, and whether
a hotel was in that neighborhood or not. Several mentioned that they would go
to a search engine, figure out where the Gothic Quarter was, and then, based
on that come back to the app and select the appropriate hotels. Some said that
they’d rather do a task like that on a computer because they’d like to have all
the info in front of their eyes, in separate windows.

184 [email protected] Other

 A newer version of Booking.com on the iPad splits the screen into two windows,
one for map and one for hotels. The map does show the neighborhood names,
but some of the neighborhood names are obscured by the many targets that
are presented on the screen. Moreover, it’s hard to know exactly where the
boundaries of the neighborhoods are (and even, to the untrained eye, that
these represent neighborhoods). In this situation, a simple link to a map with
the various quarters would have helped; alternatively, the ability to filter hotels
based on the neighborhood would have also solved the problem.

Booking.com. The Android version (left) does not contain neighborhood

information on the map (although it does have a “district” filter — but the
Gothic Quarter was not among the offered options for that filter). The iPad
version shows neighborhoods in gray, but users did not notice them and
thought they had to go elsewhere to find the information.

ERRORS

119. Always have an error message rather than just marking the field that
caused the error.
In the absence of an error message, users have to guess what the problem is.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 185

 Expedia for Android: The exclamation points seem to signal that there is a
problem with the credit card and the email fields, but it’s not clear what
the problem is.

120. When writing an error message, be as specific as possible. Always let

the users know what the problem is rather than asking them to figure
out what the problem is.
None of our users figured out why they weren’t able to use Redfin to search for
properties in Incline Village, Nevada. They checked their spelling, they changed
“Nevada” to “NV”, but nothing seemed to help. And especially the error
message, which put the burden of figuring out what the problem was on the
user.

186 [email protected] Other

 Redfin for Android: The error message lets the users figure out what they
need to change.

121. The error message should attract users’ attention and should be
persistent. Where applicable, it should be placed immediately next to
the source of the error.
One of our Android users downloaded a PDF document and repeatedly tried to
open it. She did it several times, and nothing happened. Eventually, she
noticed the tiny error message “Cannot open files” below her Downloads dialog.
(The error message disappeared after a few seconds, so she had missed it

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 187

 before because she was looking at the Downloads window and not at the region
below it.)

Downloads on Android: The error message “Cannot open file” was far
away from the users’s focus of attention and she missed it several times.

122. In an error message, don’t instruct users where to go to solve the

problem; instead, provide a link that takes them there.
When Redfin finds no results to a search, it triggers an alert box with a big
button “Return to previous search”. Unfortunately, tapping that button
dismisses the alert and the user is left to figure by herself how to get back to
the previous search.

188 [email protected] Other

 Redfin for iPad: The button “Return to previous search” does not take
users to the screen containing the previous search parameters. Instead, it
just dismisses the alert.

123. Whenever an action performed by the user cannot be completed,

explain why, rather than just reverting the state of the app to the
moment before that action.
An explanation makes the user think she is in control; otherwise, if the app
seems stuck, the user will not know if the problem can be fixed or the app is
simply buggy.
Consider these cases “teachable moments” where you can grow the user’s
mental model of your application in a useful direction. Not only do you help the
user overcome the current impasse, but you improve their future use by
improving their understanding of the system and why certain things are
possible under certain conditions.
As our study participants attempted to draw their house plans in the app called
Interior Design, several struggled with the fact that occasionally they could not
move the rooms around the plan or change their shapes because the app did
not allow overlapping rooms; however, the users were left to figure that out by
themselves. The app would simply move the rooms back in their original
position whenever the user attempted to place them somewhere where they
overlapped a different room.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 189

 Interior design for iPad: The user selects the family room (above) and
then tries to move it away (below), but the family room automatically
moves back to the original spot (in the screenshot above) without any
explanation.

190 [email protected] Other

 SHOPPING

124. In an e-commerce app make sure that you include a shopping cart link
or button in a place that is easily accessible and discoverable.
It seems obvious that any shopping app should let customers quickly access
the shopping cart. In Costco for Android the only way to see the shopping cart
is to navigate to a product page and add the product to cart. Only then, a View
Cart button appears.

Costco for Android: The only way to view the cart is to navigate to a
product page and then add it to cart. Once the product is added to the
cart, a View Cart button appears. The Cart is present nowhere else in the
interface.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 191

 125. Alert customers to the fact that they placed an order.

126. On the confirmation page, give customers a way to cancel an order.

Because tablets have touch screens, it is easy to accidentally hit a button. To
avoid consequential mistakes, it’s always a good idea to confirm the placing of
an order, and also to give a way to quickly cancel it if it was placed in error.
One of our participants inadvertently submitted an order for a print in the CVS
app for iPad. He expected to have to enter a credit card to order, but the app
let him upload a photo and schedule a pick up without having him enter a
credit card. So he pressed the Submit order button thinking that it will ask for
payment information (or would not go through because he hadn’t entered any).
Sometimes too little information can hurt the app; when it comes to placing an
order, always confirm with the user (to make sure they haven’t pressed the
Submit button accidentally), and, on the confirmation page, let them quickly
cancel the order if they wish to.

CVS for iPad: Users could order prints without entering any payment
information. One participant was confused and unintentionally placed an order
for a print.

192 [email protected] Other

 Methodology

The guidelines discussed in this report are based on two types of studies carried out
over 3 years: traditional usability testing using the think aloud protocol, and design-
reviews.

USABILITY TESTING

Overview
The findings in this report are based on 6 usability-testing studies carried out over 3
years. All these studies used the think-aloud methodology; their purpose was to
understand the typical usability issues that people encounter when using applications
and websites on tablets. With the exception of one day of testing that took place in
Chicago, IL, all the sessions were located at our headquarters in Fremont, CA.
The six usability studies looked at a variety of tablets with a variety of form factors:
• Two early studies investigated the large-size iPad
• One study scrutinized the 7-inch Kindle Fire
• One study looked at Windows 8 tablets
• Two other studies investigated a variety of tablets with an assortment of
screen sizes
Some participants were briefly interviewed about their tablet-related practices at the
beginning of each session. They also showed us the apps that they had installed on
their devices. Occasionally we created tasks based on the apps that they had
installed and asked users to perform them.
All participants had to perform specific tasks on their tablet. A moderator sat next to
the participant, and observed, listened, and took notes. Users commented on:
• What they were looking for or reading;
• What they liked or did not like about the site or app;
• What made it easy or difficult for them to accomplish the task.
The participants’ interaction with their tablets was recorded using an Elmo document
camera. Each individual session lasted 90 minutes; participants were compensated
for their time, as well as for the cost of any paid apps that they were asked to
download or any purchases that they were asked to make during the session.

Participants and devices

A total of 67 people participated in our tablet studies. Out of these, 48 used their
own devices during the testing session. The remaining 19 participants used devices
that they did not own and that were very recent at the time (1–2 weeks after
release): the original iPad, the Kindle Fire, and the Microsoft Surface. These 19
participants were owners of other touchscreen phones or tablets and were familiar
with touch interactions. All participants were from the US.
The operating-system distribution was as follows:
• 42 iPads (including 5 iPads mini),
• 9 Windows 8 tablets,
• 16 Android tablets (out of which 7 were Kindle Fire tablets).

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 193

 Out of the 67 participants, 34 were male and 33 were female. The table below shows
the participants’ age distribution:

21–30 31–40 41–50 51+

15 23 19 10

The 48 participants who owned a tablet used it several times per week for a variety
of activities. The remaining 19 participants were also frequent users of touchscreen
devices (either phone or tablet) and used it several times per week, but had not
used the tablet they tested during the study session.
We screened out technical experts and people who worked in usability or marketing,
since they were not the target users for the apps and sites we tested and tend to
exhibit atypical behaviors due to their expertise.
The following is a partial list of participants’ occupations:
• Medical Historian
• Sanitation engineer
• Property manager
• Office manager
• Retired
• Attorney
• Pharmacist
• Chef
• Merchandiser
• Nurse
• Biologist

Method
Each session was divided in several parts:
1. Those participants who brought in their own tablet were asked a few questions
related to how they use it:
“Please tell me what kinds of activities you do on your tablet.”
“Is there anyone else who uses your tablet?”
“Do you take your tablet with you when you are away from home?”
2. If the participants had brought in their own device, they had to talk briefly
about different apps that they had installed on their tablet. We only inquired
about apps that (a) were designed specifically for the tablet; (b) were not
games. For some of these apps, the facilitator created some ad-hoc tasks and
asked the users to perform them.

194 [email protected] Methodology

 3. The facilitator gave the participant one task at a time and asked them to (a)
first download the corresponding app if they did not already own it; (b) carry
out each task as far as they would if they were on their own. The participant
was encouraged to think aloud while performing the task.
Each task involved a specific app or website. For a subset of the e-commerce tasks,
we gave participants money to shop for an item that they wanted to buy.
Each participant saw a subset of the available tasks. The order of the tasks was
randomized for each participant.
All participants were asked to connect to wireless network at the beginning of the
session.

Materials
Ad-hoc tasks. These tasks were created on the spot, as the users were showing us
the apps that they had already installed on their tablets (in part 2 from the Method
section). These tasks were similar to tasks that we had planned for our regular
usability testing part of the study; sometimes, the tasks were generated based on
participant’s interest in the topic (for instance, a participant told us that her spouse
had fainted earlier that day and that she was worried). The table below displays
examples of ad-hoc tasks and the corresponding apps:

APP TASK
Adobe Idea Draw a sketch of your apartment.

Bloomberg How do you display your favorite news topics on

the first page?

Fandango Find a movie you may want to watch during the

weekend and buy tickets for it.

NPR Listen to the last “Science Friday”.

USA Today Check the latest entertainment news.

WebMD Your spouse fainted earlier today. What might he

have?

Calorie counter Figure out how many calories you had for
breakfast today.

Groupon Find some food-related deals in your area.

Tasks. The following table shows some of the tasks that we used for the study (in
part 3 from the Method section). For some of the apps, we had users use a website
and for others they had to use an app. Occasionally, we asked them to do the same
task both using the app and the corresponding website — if that is the case, the
website is shown in parentheses next to the app name. In those situations, we made
sure to balance the presentation order so that the app would be first for some users
and the website would be first for others.

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 195

 APP OR WEBSITE TASK
ABC News Check the latest news.

Amazon Windowshop Look for a birthday gift for yourself.

(amazon.com)

Amazon Windowshop Look for a flexible iPad keyboard.

(amazon.com)

BigOven Find a recipe for lamb roast.

Bing Check the latest world news.

Bing You’re going to the movies on Friday night. Find a

movie to watch.

Flipboard Check the latest news. Set up the app to show

the news topics that interest you.

Fortune Figure out what makes the largest part of the cost
of an airplane ticket.

You've  heard  that  some  universities  have  started  

offering  classes  on  the  web  available  to  everybody.  Find  
if  Harvard  has  any  such  offerings.  Do  you  have  to  pay  for  
(www.harvard.edu)   enrolling  in  such  a  class?  Are  there  any  requirements?    

Book  a  trip  from  San  Francisco  to  New  York  for  the  last  
Hipmunk   weekend  in  July.  
Kayak Use  the  Kayak  app  to  find  a  room  in  a  5-­‐  or  4-­‐star  hotel  
in  Las  Vegas  for  the  Thanksgiving  weekend.  You  are  
looking  for  a  suite  with  3  or  more  beds  and  two  
bathrooms.  
LightTrack You want to take a photograph of the Golden Gate
Bridge from the vista point. What will the
direction of the sun be tomorrow at 12?

Maps app Use  the  Maps  app  to  find  directions  from  here  to  the  
San  Jose  Convention  Center.  

Martha Stewart Cookies Lite You have 1/2 pound of chocolate that will expire
soon. Find a recipe where you could use it.

NARR8   Find  an  comic  about  how  books  were  invented.  

NASA Find more info about Mars. When was water
discovered on Mars? Does it have any moons and
how are they called?

196 [email protected] Methodology

 Find  a  pair  of  running  shoes  that  you  like.  Have  your  
name  or  a  message  inscribed  on  each  of  them.  Purchase  
(www.nike.com)   the  pair  (Stop  just  before  completing  the  order.)  

Your  friend's  son  asked  you  to  draw  a  car  for  him.  Do  
Note  Anytime   your  best.  
Notetaker Imagine you need to explain to someone how to
get from your house to the grocery store where
you normally shop. Make a sketch to help that
person remember how to get there.

Pennant What were the most important moments of the

game between San Francisco Giants and San
Diego Padres, played on Aug 14th 2010?

Pennant Who pitched for the Giants?

Photoshop Express Go to Amazon.com and take a screenshot. Crop

the upper half part of the picture. Rotate the
picture and sharpen the contrast.

Find  information  about  what  you  can  do  as  a  patient  to  
(www.Propublica.org)   avoid  medical  errors  when  hospitalized.  
Pulse Check the latest news. Set up the app to show
the news topics that interest you.

QVC (qvc.com) Find a gift under $50 for a friend or a person you
care about.

Find  out  how  much  it  would  cost  to  buy  a  vacation  
Redfin   house  in  Kings  Beach,  California.  
Sears (sears.com) You want to buy a new dishwasher that saves
energy and water, and is as quiet as possible.
Find one that satisfies your constraints. Is there a
delivery cost? How about an installation cost?

Find  the  lyrics  and  music  for  Queen's  Bohemian  

Soundhound   Rhapsody.  
Time Find the best photographs of the week.

Trulia Find information about houses that have been

recently sold or are for sale in your neighborhood.

Vanity Fair Find who wrote the different articles featured in

the magazine.

Vanity Fair A friend has recommended an article about the

movie “All the President’s Men” starring Robert
Redford. Find the article and see if it is interesting

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 197

 to you.

Washington Post Check the latest entertainment news.

(washingtonpost.com)

Find  the  results  in  the  last  match  played  by  Maria  
Wimbledon   Sharapova.  What  is  her  next  match?  
Wine.com Friends are visiting from abroad and you want to
take them to Napa Valley for a day trip. Find 2–3
really good wineries where you could stop for
wine tasting.

Wine.com (wine.com) Your friend in Pennsylvania loves wine. Send him

a bottle of good California wine under $50.

Wired Find an article about how the perfect French fries

are cooked. Can you watch a video about that, as
well?

Wired What does Drano Prevention contain?

Zappos (zappos.com) Find a pair of shoes under $70 for yourself for the
summer. Stop short of actually making a
purchase.

Zillow Find information about houses that have been

recently sold or are for sale in your neighborhood.

Apparatus
For testing we used a setup similar to the one in our mobile usability testing. A
document camera recorded the tablet and streamed the recording to a laptop
computer, connected through the camera using an USB port. A webcam was used for
recording the participant’s face. The webcam was connected to the same laptop. The
laptop ran Morae, which put together the two video streams from the webcam and
the document camera. The laptop computer was also used so that the facilitator and
the observers could follow the participants’ actions without invading their personal
space.
The tablet was mostly kept on a small rectangular plastic pad, in landscape or
portrait position (depending on user preference). Users were free to change
orientation of the device and move it around, but we cautioned them that they
needed to move it above the plastic pad, to allow us to follow their actions.

DESIGN REVIEWS
For the design reviews, one usability expert reviewed the apps and websites
mentioned in the task table, as well as other apps and websites. We reviewed many
of the apps that were mentioned by the participants, as well as other apps,
including:
• Crackle
• AP News

198 [email protected] Methodology

 • Boutiques
• Shop Style
• Quickoffice
• Hermitage HD
• Life
• Ansel Adams
• National Gallery Love Art
• Popular Science
• The New Yorker
• Food and Wine
• Glamour
• ESQ
• JCPenney
• Toys R Us
• Sushi HD
• iCircuit
• Newsy
• MOMA Abstract Expressionists
• Dartfish Express
• Hotel Tonight
• ModCloth
• Fitness Class
• Geico
• Westpac NZ
• iCookbook
• Lennox iComfort
• ThinkerDeck
• Conrad Concierge
• Pinterest
• SunPower
• Home Away

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 199

 List of Guidelines

Do You Need a Tablet App? ......................................................... 11  

1.   If a tablet app replicates full-site functionality, then the tablet app

should have some unique added value................................................. 11  

2.   Users prefer apps to full websites when the app is supporting a

single main task................................................................................... 14  

Design for tablet, not for phone ..........................................................15  

3.   Tablet apps should have more in-depth functionality than phone

apps. Strive to give users access to details that may be not available
on the phone........................................................................................ 16  

4.   Do not design your tablet app or website by simply combining pages

from your mobile phone app. ............................................................... 16  

5.   Whenever possible, design a separate tablet app rather than making

the phone app available on the tablet or just replicating the phone-
app design in the tablet app................................................................. 18  

Guidelines for Making Desktop Sites Tablet Friendly................... 21  

6.   If you don’t have a tablet version of your website, direct the user to
the full (desktop) version of your site and not to the mobile version. .. 21  

7.   Consider using responsive design techniques to make the layout

more tablet-friendly............................................................................. 22  

8.   Use jump links to take the user back to the top of the page quickly..... 22  

9.   Use persistent buttons to make it easy for people to access

important features as they scroll down the page. ................................ 23  

10.   Avoid small fonts: They are hard to read on the web, and can be
even harder to read on a small screen. ................................................ 24  

11.   Use good contrast to help users see the content in a variety of
lighting conditions. .............................................................................. 24  

12.   Make sure that all the information that disambiguates a link is close
to that link or in the link text. Group related information..................... 26  

13.   Whenever appropriate, use the device GPS to detect the current
location................................................................................................ 28  

Targets ...............................................................................................28  

14.   Make links and targets big enough. The touch-friendly size for
buttons and other widgets is 1cm x 1cm or larger. If that cannot be
achieved, you can compromise a little in height rather than width of
the targets. .......................................................................................... 28  

200 [email protected] List of Guidelines

 15.   Leave space around links. Consider padding widgets to make them
easier to touch. .................................................................................... 28  

16.   Protect against accidental touches by asking confirmations for any

irreversible action (or action that may be hard to revert — e.g.,
placing an order). ................................................................................ 30  

17.   Do not use mouse-specific functionality (e.g., hover states, right

button clicks)....................................................................................... 30  

Plugins ...............................................................................................31  

18.   Do not use Flash................................................................................... 31  

19.   Test your Javascript code to make sure it works on tablets. ................ 31  

20.   Do not use PDFs. They break the flow and some users have difficulty
reading them. ...................................................................................... 31  

Naming the App .......................................................................... 33  

21.   Make sure that the name of the company is included in the name of
the app and in the keywords that are associated with the app,
especially if it’s a name that users are likely to know or recognize. ..... 33  

22.   When a company provides multiple similar apps, the icons and the
names should help the user differentiate between apps. ..................... 35  

Skeuomorphic Design ................................................................. 36  

23.   Make sure that your skeuomorphic design makes things easier for
the user rather than more complicated. ............................................... 39  

Touch Targets ............................................................................. 40  

24.   Make targets big enough. The recommended size is 1cm X 1cm........... 40  

25.   Avoid crowding targets. ....................................................................... 42  

26.   Choose familiar icons and strive to have labels for all your icons. ........ 42  

27.   Make sure that the targets stand out visually, so people notice them.
Avoid targets that blend with the background. .................................... 44  

28.   Build touch affordances by making sure that targets look tappable. .... 45  

29.   Do not build false touch affordances by adding 3D dimensionality to

elements that are not tappable. ........................................................... 45  

Input and Forms ......................................................................... 48  

Typing ................................................................................................48  

30.   Minimize the amount of typing that the users need to do..................... 48  

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 201

 31.   Whenever possible save searches and any kind of information that
people typed in a form field. Allow users to reuse that information
later on when they need to fill in a similar field. .................................. 48  

32.   Be tolerant of typos; offer auto corrections.......................................... 48  

33.   Offer autosuggestions or autocomplete. .............................................. 48  

34.   Allow the use of camera, voice, and GPS as input devices. ................... 48  

35.   Whenever possible, compute information instead of asking people to

enter it................................................................................................. 48  

36.   Use sensible defaults based on history and personalization. ................ 49  

37.   Allow users to copy and paste. ............................................................. 49  

38.   Make text boxes long enough so that users don’t have to scroll
within a text field................................................................................. 49  

39.   Make sure that the users can see what they type in both
orientations. ........................................................................................ 49  

40.   Use the keyboard that is appropriate for the field type. ....................... 50  

41.   Auto-format fields rather than asking people to type fields in a

specific format. .................................................................................... 50  

Dropdowns and pickers ......................................................................50  

42.   Do not use spinning pickers for dates. Consider a calendar widget to
input dates........................................................................................... 50  

43.   Use drop down boxes and pickers only when there are just a few
options available (4-6). ....................................................................... 53  

44.   Use field descriptions rather than placeholders.................................... 55  

45.   Whenever using placeholders, erase the placeholder when the user
starts typing in the field....................................................................... 57  

46.   Do not use sliders for fields that require precise values. ...................... 58  

Forms .................................................................................................60  

47.   The Submit button (or equivalent) on a form should be displayed

under the form fields rather than above them. .................................... 60  

48.   Distinguish between link buttons and Submit buttons. Submit

buttons are usually placed at the bottom of the form; when link
buttons are positioned there, they can create confusion...................... 64  

49.   Do not use non-modal dialogs for forms............................................... 66  

202 [email protected] List of Guidelines

 50.   If you must use a non-modal dialog for a form, save the state of the
form, so that users could recover their work. ...................................... 68  

51.   Do not use forms over forms in popovers or lightboxes. ...................... 68  

Registration and Login................................................................ 71  

52.   Don’t start the app with a request to sign in or register. ...................... 71  

53.   Request registration/login (1) for security purposes (e.g., to protect

financial information), (2) if users want to sync their data across
devices. ............................................................................................... 73  

54.   Offer people the option to sign in with a Facebook or Google

account, but don’t make those be the only options available. .............. 75  

55.   Give equal priority to registration and sign in fields. ............................ 76  

56.   If users make an error trying to sign in when they don’t have an
account, take them to the registration form but save the information
that they had entered in the sign in form. ............................................ 76  

57.   Avoid taking people out of the app for registering. .............................. 83  

58.   If registration is not fully supported in your app, consider using a

browser view within the app to display the full site. Once users
finish the registration, take them back to the flow they were in
before starting it.................................................................................. 83  

59.   Minimize the number of fields in the registration form......................... 84  

60.   Remove duplicate fields (email, password). ......................................... 84  

61.   Let people see their password in clear for both registration and
login. 84  

Flow............................................................................................ 88  

62.   When an app supports several similar tasks, avoid making one of the
tasks the default flow. ......................................................................... 88  

63.   Always make all the necessary steps explicit. Avoid including steps
from different flows on the same page. ............................................... 89  

64.   Use sensible defaults for app options. .................................................. 90  

Navigation and Tool Bars ............................................................ 94  

65.   Include a home button as a way for the user to start all over and go
back to a home base. ........................................................................... 94  

66.   Crucial functionality (essential navigation options, search feature)

needs to be visible on the screen. ........................................................ 97  

67.   Menus need to have good affordance. ................................................ 102  

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 203

 68.   The icon for a menu needs to stay the same throughout the app. ...... 106  

Horizontal navigation and swiping.................................................... 108  

69.   When using horizontal (deck of cards) navigation styles, make sure
that you give users cues so that they know how they can interact
with your app..................................................................................... 108  

70.   Avoid using several navigation styles (horizontal, vertical) within

the same app. If several navigation styles must be used, be
consistent in how you assign them to different types of content. ...... 112  

71.   Do not use an infinite canvas for navigation. ..................................... 114  

72.   Do not change navigation styles depending on the orientation. ......... 115  

The Back button................................................................................ 116  

73.   (iOS and Windows 8) Include a Back as undo button in your iOS app.
(Note: Android has a global Back button that eliminates the need for
a separate Back button in the interface). ........................................... 117  

74.   (Android) Do not include a separate Back button if the operating

system provides one. ......................................................................... 118  

75.   (iOS) Make sure that you include a Back button on your homepage... 119  

76.   (Android) On the homepage, the global Back button should take the
user back to the previous page and not outside the app. ................... 119  

77.   When there are multiple frames on the same page, avoid
implementing Back at the frame level. ............................................... 122  

78.   When there are multiple frames on the same page, avoid having
multiple Back buttons — one for each frame. ..................................... 122  

79.   Avoid multiple Back buttons............................................................... 126  

80.   Place the back button in the top left corner. ...................................... 127  

Feedback and Reversibility ....................................................... 129  

81.   Whenever users press a target to take an action, give feedback to

the user about the result of the action. .............................................. 129  

82.   Always let users revert to the prior state. .......................................... 131  

Search ...................................................................................... 133  

83.   A search box needs to be present in any app that contains a

significant amount of content. ........................................................... 133  

84.   Never hide the search feature under a menu...................................... 133  

85.   Search icons are harder to notice than search boxes. ........................ 134  

204 [email protected] List of Guidelines

 86.   Preserve the search query or the search parameters so that people
can adjust them and refine their searches. For filters, let people
easily access filters that they have selected in the past. .................... 135  

87.   Show search results in a way that helps the user differentiate them
from search suggestions. ................................................................... 137  

Lists.......................................................................................... 138  

88.   Do not display long lists in popovers or small frames. Use the whole
screen for long lists. .......................................................................... 138  

89.   If a list is sorted alphabetically, let users jump to any letter in the
alphabet to see items starting with that letter. .................................. 141  

Split Views, Popovers, Frames, Content Tabs ........................... 144  

90.   Do not segment the screen into smaller windows unless the user
needs to look at all the windows at the same time in order to
complete the task. ............................................................................. 144  

91.   Decide if you can display a piece of content in a window based on

how much scrolling the user would need to do to get to see all the
content in the window. Scrolling 1-2 times is ok; more than that can
easily become tedious........................................................................ 144  

92.   Avoid truncating or decreasing the font of the text in a frame in

order to fit more content in that frame. ............................................. 150  

93.   Do not split content into multiple tabs if the pieces of content are
interrelated. Consider a split view or a popover instead. ................... 151  

Gestures ................................................................................... 155  

Gesture ambiguity ............................................................................ 155  

94.   Do not assign multiple meanings to the same gesture depending on

where the gesture is deployed on the page........................................ 155  

95.   Avoid swipe (or other gesture) ambiguity.......................................... 155  

96.   Avoid assigning different meaning to the same gesture depending on

when the gesture is made. ................................................................. 157  

97.   Use gestures consistently across different sections of the app........... 160  

Learnability ...................................................................................... 161  

Tutorials and Tips ..................................................................... 163  

98.   Avoid content-dense tutorials when the app first launches. ............... 163  

99.   Do not use video tutorials. ................................................................. 164  

100.   Allow users to interact with tutorials. ................................................ 165  

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 205

 101.   Make it clear that tutorials are not actual parts of the interface. ....... 165  

102.   Don’t overload users in the beginning with a ton of instructions. ...... 166  

103.   Use contextual tips that instruct users when they need help. ............ 167  

Content..................................................................................... 169  

104.   On a small screen structure content so that the user can get a high
level picture of the most important points. Then let them delve into
details if they wish............................................................................. 169  

105.   Use meaningful labels. Avoid jargon. ................................................. 171  

Waiting Times and Latencies .................................................... 175  

106.   When a substantial piece of content is being downloaded, let users

interact with it as soon as possible (before the whole download is
finished). ........................................................................................... 175  

107.   Whenever downloading data or requiring the user to wait for an

action to be completed, the app should display a progress bar to
indicate to the users an estimate of how much more they have to
wait. 175  

Maps and Locations .................................................................. 178  

108.   Do not aggregate points of interest on a map. ................................... 178  

109.   Adjust the zoom level on the map to include the current location and
at least a few points of interest, and to keep targets fairly spaced. ... 179  

Sound Effects............................................................................ 180  

110.   Do not startle users by starting the app with a noise. ........................ 180  

111.   Make sure that people can turn noise off in the app........................... 180  

112.   When people navigate to a new page, do not start playing a video
automatically. .................................................................................... 180  

Tablet Orientation..................................................................... 181  

113.   Make the interface consistent across orientations. ............................ 181  

114.   Make the content consistent across orientations. .............................. 181  

115.   Strive to ensure that your app works in all possible orientations. ...... 181  

116.   Avoid forcing users to switch orientations often within the same
apps. 181  

206 [email protected] List of Guidelines

 Other ........................................................................................ 183  

Browser views within apps ............................................................... 183  

117.   Whenever the app contains an embedded browser, make sure to

give users the same flexibility as the default system browser (e.g.,
Safari on iOS, Chrome on Android). ................................................... 183  

Self-sufficient design ........................................................................ 184  

118.   Apps should be self-contained and present the users with all the
data necessary to make a decision..................................................... 184  

Errors ............................................................................................... 185  

119.   Always have an error message rather than just marking the field
that caused the error. ........................................................................ 185  

120.   When writing an error message, be as specific as possible. Always

let the users know what the problem is rather than asking them to
figure out what the problem is........................................................... 186  

121.   The error message should attract users’ attention and should be
persistent. Where applicable, it should be placed immediately next
to the source of the error. .................................................................. 187  

122.   In an error message, don’t instruct users where to go to solve the

problem; instead, provide a link that takes them there. ..................... 188  

123.   Whenever an action performed by the user cannot be completed,

explain why, rather than just reverting the state of the app to the
moment before that action................................................................. 189  

Shopping .......................................................................................... 191  

124.   In an e-commerce app make sure that you include a shopping cart
link or button in a place that is easily accessible and discoverable. ... 191  

125.   Alert customers to the fact that they placed an order. ....................... 192  

126.   On the confirmation page, give customers a way to cancel an order.. 192  

© NIELSEN NORMAN GROUP WWW.NNGROUP.COM 207

Evidence-­‐Based  User  Experience  Research,  Training,  and  Consulting  
 
Since  1998  Nielsen  Norman  Group  has  been  a  leading  voice  in  the  user  experience  field.  
• Conducting  groundbreaking  research  
• Evaluating  interfaces  of  all  shapes  and  sizes  
• Guiding  critical  design  decisions  to  improve  the  bottom  line  
 
We  practice  what  we  preach  
We  don’t  just  talk  about  the  importance  of  testing  with  real  users,  on  real  tasks,  in  real  life  business  situations:  
we  do  it.  Every  week,  somewhere  around  the  globe,  NN/g  team  members  are  conducting  research  that  informs  
the  three  pillars  of  our  business:  training,  consulting  and  research.  In  that  work  we  have:  
• Tested  over  2,000  different  interfaces  
• Observed  more  than  4,000  users—in  person—in  18  countries  and  on  5  continents    
• Analyzed  thousands  of  hours  of  recorded  user  observations  sessions  
• Conducted  countless  diary  studies,  focus  groups  and  remote  user  tests  

 
Our  collective  experience  will  save  you  time…  and  money  
Making  technology  easier  to  use  is  no  longer  a  nice-­‐to-­‐have.  Useful,  usable  products  make  money.  And  our  
expertise  can  help  your  team  achieve  their  design  goals  quicker  and  easier  than  going  it  alone.  Choosing  NN/g  
means  you  benefit  directly  from  our:  
• Finely  tuned  methodology:  We  have  an  arsenal  of  proven  tools  at  our  disposal  and  know  how  and  where  
to  apply  each  one,  taking  the  guesswork  out  of  how  to  achieve  the  optimal  design  solution  to  meet  your  
business  goals.  
• Comprehensive  body  of  knowledge:  We’ve  taken  the  results  of  our  decades  of  research  and  testing  and  
distilled  it  down  into  actionable  guidelines,  best  practices  and  proven  methodologies.  Our  research  
library,  containing  over  50  published  reports,  X  books  and  an  email  newsletter  archive  dating  back  to  
1995  is  unrivaled.    
• Practical  approach:  Our  approach  is  100%  practical,  useful  and  actionable.  Whether  you  attend  one  of  
our  Usability  Week  events  or  invite  us  to  consult  at  your  place  of  business,  the  training  you  will  receive  
can  be  put  into  action  immediately  so  that  you  can  see  the  results.  
 
Evidence-Based User Experience Research, Training, and Consulting

Our  people  are  the  best  in  the  business  

At  NN/g  there  is  no  “B  Team”.  When  we  dispatch  consultants  to  work  with  you  and  your  team,  or  when  you  
attend  a  Usability  Week  course,  you  are  learning  directly  from  some  of  the  best-­‐educated  and  most  experienced  
minds  in  the  business.  
• Our  principals  are  considered  pioneers  in  the  fields  of  user  research  and  interface  design.    
• Our  researchers  and  consultants  tackle  the  most  recent  and  relevant  topics  in  usability,  from  evergreen  
challenges  such  as  information  architecture  and  intranet  usability  to  emerging  trends  in  social  media  
and  mobile  usability.  
 

Stay  Informed  
Jakob  Nielsen’s  Alertbox  Newsletter  
Summaries  of  our  latest  research  and  insights  published  twice  per  month.  
To  subscribe:  http://www.nngroup.com/articles/subscribe
Evidence-Based User Experience Research, Training, and Consulting

TRAINING    
Usability  Week  Events  
Usability  Week  training  events  are  offered  in  the  U.S.,  Canada,  the  U.K.,  Europe,  Asia  and  Australia.    
Each  week-­‐long  event  features  full-­‐day,  immersive  training  courses  where  attendees  learn  practical  skills  directly  
from  experienced  practitioners  so  they  can  solve  complex  UI  problems  and  create  better  interface  designs.  

           
Over  40  courses  offered  in  these  categories:  
• Agile  
• Applications  
• Content  Strategy  
• Credibility  &  Persuasion  
• Email  
• Information  Architecture  
• Interaction  Design  
• Intranets  
• Mobile  &  Tablet  
• Non-­‐Profit  Websites  
• Prototyping  
• Social  UX  
• User  Testing  
• Visual  Design  
• Web  Usability  
• Writing  for  the  Web  
Available  courses  and  upcoming  locations:    www.nngroup.com/training  
 
In-­‐house  Training  
Many  of  our  courses  can  be  taught  at  your  location  and  customized  to  fit  your  unique  offerings,  methods  and  
resources.    
In-­‐house  training  is  ideal  for:  
• Large  teams  that  want  to  spread  user  experience  perspective  throughout  the  group  
• Teams  working  on  large  projects  that  need  to  kick  start  the  creative  process  and  head  in  the  right  
direction  
In-­‐house  training  information:    www.nngroup.com/consulting  
 
Evidence-Based User Experience Research, Training, and Consulting

REPORTS  
NN/g  has  published  over  60  reports  that  detail  thousands  of  evidence-­‐based  design  guidelines  derived  from  our  
independent  research  studies  of  websites,  intranets,  application,  and  mobile  interfaces.  

 
 
Over  60  reports  addressing  these  topics:  
• Agile  
• Applications  
• Audience  Types  (e.g.,  children,  college  students,  seniors,  people  with  disabilities)  
• B2B  Websites  
• Corporate  Websites  
• Ecommerce  
• Email  
• Information  Architecture  
• Intranets  
• Mobile  &  Tablet  
• Non-­‐Profit  Websites  
• User  Testing  
• Social  UX  
• Strategy  
• Web  Usability  
 
Shop  for  reports  here:  www.nngroup.com/reports  

 
 
Evidence-Based User Experience Research, Training, and Consulting

 
CONSULTING  
The  same  experts  who  conduct  our  research  and  teach  Usability  Week  training  courses  are  available  for  custom  
consulting  including:  
• Evaluating  your  website,  application,  intranet  or  mobile  interface  (average  cost  $38,000  USD)  
• Usability  testing  (average  cost  $35,000  USD)  
• Strategic  planning  (average  cost  $12,000  USD)  
• On-­‐site  training  with  your  team  (average  cost  $9,000  USD  per  day)  
Consulting  details:  www.nngroup.com/consulting