Usability of iPad Apps and Websites

2nd edition

By Raluca Budiu and Jakob Nielsen

WWW.NNGROUP.COM

48105 WARM SPRINGS BLVD., FREMONT CA 945397498 USA

Copyright Nielsen Norman Group, All Rights Reserved.

To get your own copy, download from: www.nngroup.com/reports/ipad-app-and-website-usability

This report is a gift for our loyal audience of usability enthusiasts. Thank you for your
support over the years. We hope this information will aid your efforts to improve user
experiences for everyone.
This report is free, but it is still copyrighted information that may be updated from time to
time, so please dont distribute this file or host it elsewhere.
Do not link directly to the PDF file (which may be rehosted at different cloud services).
Instead, we encourage you to distribute the following link to this reports summary page on
our website, in order to reduce PDF shock and to allow people to decide whether to
download it themselves:
www.nngroup.com/reports/ipad-app-and-website-usability
The research for this report was done in 2011, but the majority of the advice may still be
applicable today, because people and principles of good design change much more slowly
than computer technology does.
The first edition of our iPad report (from 2010) is also available for free download at this
website. Usually, when we publish a revised edition of a research report, we discontinue the
older editions. In this case, however, were keeping both the 1st edition and the 2nd edition
available, because they both provide interesting insights into iPad usability and present
quite different sets of screenshots and examples. Even though the first edition tested older
apps, its still worth remembering the lessons from the mistakes made in these early
designs. If you dont remember history, youll be doomed to repeat it.
Thus, if you find the current report interesting, we recommend that you also read the 1st
edition.

[email protected]

Executive Summary

Contents
Executive Summary ...................................................................... 4
Research Method .......................................................................... 8
How People Use the iPad .............................................................. 9
Website or App? .......................................................................... 10
The Touch Screen and Affordances ............................................. 23
The Big Screen ............................................................................ 42
Gestures ..................................................................................... 54
Navigation .................................................................................. 59
Orientation.................................................................................. 71
Initial Experience ........................................................................ 82
Workflow .................................................................................... 88
Case Study: Magazines on the iPad ............................................. 94
Methodology ............................................................................. 109
About the Authors ..................................................................... 114

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

Executive Summary
A year after our first usability study of iPad apps, its nice to see that iPad user interfaces
have become decidedly less wacky. Its even better to see good uptake of several of our
recommendations from last year, including apps with:

Back buttons,
broader use of search,
homepages, and
direct access to articles by touching headlines on the front page.

Even so, this years testing still found many cases in which users accidentally touched
something and couldnt find their way back to their start point, as well as magazine apps
that required multiple steps to access the table of contents.
One of the worst designs last year was USA Todays section navigation, which required
users to touch the newspaper logo despite the complete lack of any perceived affordance
that the logo would have this effect. During our new testing earlier this month, several
users had the same problems as last years test participants, even though we recruited
people with more iPad experience.
Happily, a few days after our test sessions, USA Today released a new version of their app,
with somewhat improved navigation:

USA Today section navigation. Left: As tested a year ago and in the 2nd study. Right:
The new design with an explicit Sections button.
One of our test users was a regular user of this app. Although he said hed eventually
discovered the section navigation on his own, during the test session he complained bitterly
about how difficult it had been to find. Users rarely remember the details of interaction
design widgets, which is one of the key reasons that its better to watch users than to ask
them about usability. The fact that this user recalled his troubles months later is testament
to how strikingly annoying the old navigation design was. Its also astonishing that it took a
full year to get this usability flaw changed after we originally reported it.

USER RESEARCH
Normally, it wouldnt be worth doing a new study this soon: usability guidelines change very
slowly because they derive from human behavior, not technology. However, in this case, its
reasonable to conduct new research now, a year after the iPad launch.
Our original research necessarily tested users who had no prior experience using iPads. A
complete lack of experience is obviously not representative of typical tablet usability. At this

[email protected]

Executive Summary

point, even first-time users of websites or apps will have visited many websites before on
the iPad and will have used many apps before opening a new app for the first time.
For the new study, we recruited users with at least two months experience using their
iPads. Typically, we recruit people with at least a years experience. However, because the
iPad was released only slightly more than a year before our study, anybody with a full years
experience would have been a very early adopterand thus completely unrepresentative of
mainstream users.
In any case, two months iPad use is definitely enough to learn the user interface
conventions and to have racked up substantial time using touchscreen apps.
A second difference between the two studies is that we originally tested the launch
applications that shipped at the same time as the iPad itself; they were thus developed by
teams working in isolation under Apple-imposed secrecy that prevented them from gaining
user feedback. In our first report, many of the bad designs we documented were due not to
bad designers, but rather to the inevitable outcome of non-user-centered design projects.
In contrast, the apps and sites tested in the new study were designed by teams that
benefited both from our original usability report and from whatever user feedback theyd
collected on their own during the past year.
In the new study, we systematically tested 26 iPad apps and 6 websites. We also tested
many apps that our test participants had installed on their iPads, but these tests were less
systematic, with typically only a single user per app.
In total, 16 iPad users participated in the new study. Half were men, half were women. The
age distribution was fairly even for fourteen users between the ages of 2150 years; we
also had two users older than 50. Occupations spanned the gamut, from personal chef to
realtor to vice president of human resources.
Our insights about iPad usability are further informed by findings from various client studies
and by many aspects of last years original research, which continue to be relevant.

REPLICATED FINDINGS
Many of last years usability findings were seen again this year:

Readtap asymmetry for websites, with content that was large enough to read
but too small to tap. We did see some examples across a few websites that were
designed to work well on tablets, with bigger touchable areas. For example,
Virgin Americas reservation page let users touch anywhere in the entire table cell
containing a desired departure, as opposed to having to touch the much smaller
area represented by the radio button (or even its label).

Websites worked fairly well in the standard iPad browser as long as users
didnt have complex tasks; focusing on reading and looking at pictures or video
was relatively easy. (If your service requires substantial interaction, consider an
app instead of a site.)

Touchable areas were too small in many apps, as well as too close together,
increasing the risk of touching the wrong one.

Accidental activation due to unintended touches again caused trouble,

particularly in apps lacking a Back button.

Low discoverability, with active areas that didnt look touchable.

Users disliked typing on the touchscreen and thus avoided the registration
process.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

Last years main finding was not a big issue this year: users werent as tormented by widely
diverging user interfaces. Apps have become more consistent and standardized, making
them easier to use.

NEW FINDINGS
We thought we had driven a stake through splash screens many years ago and eradicated
them from the Web, but apparently splash screens are super-vampires that can haunt users
from beyond the grave. Several new iPad apps have long introductory segments that might
be entertaining the first time, but soon wear out their welcome. Bad on sites, bad in apps.
Dont.
Swipe ambiguity plagued users when multiple items on the same screen could be swiped.
Carousels often caused this usability problem in apps that also relied on swiping to move
between pages. Many users couldnt turn the page because they swiped in the wrong spot.
Their typical conclusion? The app is broken.
Many apps squeezed information into too-small areas, making it harder to recognize and
manipulate. In a related problem, apps featured too much navigation. This design problem
was so prevalent that it deserves its own acronym: TMN. While its true that our seminar on
navigation design 1 covers 25 different navigation techniques, any given user interface
should contain only a few. These two problems interact, because a larger number of
navigation options gives each one less space.
One example of excess navigation is the content popovers that many apps use to display
thumbnails of available articles. Sometimes the popovers appear as menus or carousels,
and sometimes they work by scrubbing a slider. Whatever the implementation, these long
lists of thumbnails had lower usability than homepage-like tables of contents, which users
could return to when they wanted to navigate to different locations rather than simply
continuing with the next article.

TABLETS ARE SHARED DEVICES

Except for people who lived alone, our study participants uniformly reported sharing their
iPads with other family members. When we asked them to walk us through the apps on
their tablet, people frequently came across apps that someone else in their family had
installed.
The iPads shared nature contrasts with the much more personal nature of mobile phones,
which are typically owned and used by single individuals.
Obviously, tablets might become truly personal devices in the future as competition drives
down the prices. But for now, you should assume that youre designing for a multi-user
device. For example, users might be reluctant to stay permanently signed in on an app, and
theyll still forget their passwords. Its also important to design recognizable application
icons so theyll stand out in the crowded listings of several users apps.

WHAT ARE IPADS USED FOR?

The most common uses reported by our participants were playing games, checking email
and social networking sites, watching videos, and reading news. People also browsed the
Web and performed some shopping-related research. But most users felt that it was easier
to shop on their desktop computers. Some also worried about the security of e-commerce
purchases on the iPad.

NN/g Usability Week course on Information Architecture

6

[email protected]

Executive Summary

A common characteristic of all this iPad use is that its heavily dominated by media
consumption, except for the small amount of production involved in responding to emails.
About half the users carried the iPad with them frequently; the other half used it mainly at
home or on longer trips.
Weve come far in just a year. iPad usability is much improved, and people habitually use
many apps. As always, this is no reason to relax our vigilance; new usability problems have
appeared and the old ones havent been totally vanquished. Mainly, though, the future is
bright for touch-driven tablet user experience.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

Research Method
The main purpose of our research was to assess the state of iPad application design and
understand where the user interaction pain points are. Are there any common design
mistakes that affect the users? What is easy and what is hard for users of iPad applications
and websites?
This study comes one year after our first report on the usability of iPad sites and apps 2. At
the time of the first report, the iPad was one month old, and many of the apps freshly
designed for that platform were drafted in the blind, without the benefit of user testing. Has
there anything changed since then? After one year of using the iPad, do we know how to
design more usable apps? These were also questions that we hoped to answer with our
second study.
This section includes an overview of our research project. We used two different methods:

Usability testing, and

Expert reviews.

Usability testing. We conducted usability studies in Fremont, CA. We invited iPad owners
to the lab and had them do a variety of tasks using both apps and websites. We also
conducted a brief interview about their iPad-related habits, and asked them to show us
some of the apps they had already installed on their device.
We observed users as they worked on the activities and encouraged them to think aloud.
A total of 16 people participated in the study. Each one-on-one session was scheduled for
90-minutes. See the Methodology chapter starting on page 109 for more information.
Expert Reviews. This report also includes observations and recommendations from
conducting our own review of additional interfaces. We looked for both usability issues and
areas that could increase usability success.

Usability of iPad Apps and Websites, 1st edition, available for download at
http://www.nngroup.com/reports/mobile/ipad .
8

[email protected]

Research Method

How People Use the iPad

At the beginning of our usability testing session, we asked our study participants to tell us
what kinds of activities they did on their iPad. Because the sample is small, our data needs
to be taken with a grain of salt.

WHAT
The iPad was used mostly for media consumption; the only slight exception to the rule
being email. (Participants reported reading and also occasionally responding to email on
their iPads).
Almost all participants in our sample reported using the iPad for games. The next most
frequent activities were checking email and social network sites, watching movies and
videos, and reading news. Several users mentioned that the iPad has replaced their laptop.
A word about e-commerce: Most of our users said that they had not done any purchases on
the iPad. Some mentioned that they were unsure about how secure the iPad was, compared
to other devices. Others felt that it was easier to shop on the desktop computer, especially
on sites that were familiar to them. Shopping-related activities carried out on the iPad
included researching an item, browsing, checking classifieds (e.g., Craigslist) or auctions
(e.g., eBay).

WHO
All our participants who were not living alone mentioned that they shared their iPad with
other members of their family. Children were often allowed to play games or watch videos
on the iPad, but participants also shared their iPads with significant others. Because of that,
the iPad was perceived as less personal than the iPhone.
One participant was talking about her insurance app:
Most things on my iPhone I have logged in so they automatically go to
where I am going. I like that. Since different people use this [I am not logged
in] and I forgot my password
Many users had applications that they regarded as theirs, and applications that were
installed and used by someone else in their family. Often, they would not know what the
other persons apps were and would also not use those apps.
One of our users was showing us his apps:
Patent [app] This is all his stuff. The lawyer stuff is all his.
Occasionally, users did not know how to install an app or did not know their iTunes
password because their spouse was usually the one doing the app installation and purchase.
None of our participants came from families with multiple iPads, although two participants
mentioned that their spouse either used to have an iPad or was thinking to get one.

WHERE
About half of our participants carried the iPad with them frequently; the other users
mentioned using it mostly at home and on longer trips. Many said that they will take the
iPad with them if they anticipate long wait periods.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

Website or App?
The findings that we noted last year still remain valid: full websites, designed for desktop
computers, are fairly readable on the iPad and users can do a variety of consumptionrelated tasks easily. The readtap asymmetry, which we pointed out last year, still holds
true for most websites: the content is readable, but the links and widgets are too small to
touch reliably.
Some websites do a better job than others when it comes to target size. Virgin America is
an example: the sites relatively big buttons allow users to select options easily, especially
in landscape orientation. The site leaves room for error: the radio buttons on the flightselector page are padded, and users can touch anywhere in the rectangle containing each
flight choice.

Virgin America website on the desktop.

10

[email protected]

Website or App?

 NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

11

Virgin America site on iPad in landscape orientation. Target sizes are relatively big. Although radio buttons
look small, they are in fact padded: hitting anywhere in the corresponding box counts as a selection.

In our testing, a few tasks were performed both on the Web and using an application. In
these cases, our participants were always successful on the Web 3; a third of the
corresponding tasks that involved apps ended in failure. There were three reasons some of
the apps were less successful than the websites: The apps contained less content, the app
design was confusing, or the app made the user do more work.

The apps contained less content than the websites.

An example of that was the Sears app. Our participants were looking for an energy-saving,
water-saving, low noise dishwasher. The Sears app allowed users to select the dishwasher
category, but they could not narrow down the results in any way. Moreover, the app did not
have as much information as the website there were fewer specifications and also no
information about delivery or installation.

Sears app contains little information about this dishwasher. The specifications are not
included. Its not clear what the delivery or installation costs are.
Unlike the Sears app, the Sears website allowed users to narrow results according to
several criteria. It also included more information about the products, and
information about shipping and installation costs.

There was one exception where both the website and the app were not working properly,
because the Zappos server was down.
12

[email protected]

Website or App?

Sears app shows limited information in the search results. Product ratings are not
displayed, making it harder for users to select a product. There is no way to narrow
down the results.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

13

Filters enable users to

narrow down the list of
products.

Sears.com shows product ratings and also provides filters to narrow down the list.

14

[email protected]

Website or App?

The specifications
are included on the
website.

The product description starts

with the same paragraph as the
iPad description, but then
continues with 5 more
paragraphs (see below).

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

15

Sears.com (website) contains a lot more product information than the iPad app.

16

[email protected]

Website or App?

It looks almost like the Sears app was built for the mobile-phone user, who needs to get to
content quickly and rarely looks for a lot of details. 4 Unfortunately, most iPad users do not
use the iPad in truly mobile situations: you dont see many people walking in the store with
their iPad in their hands, trying to figure out whether its worth buying a dishwasher at
Home Depot or theyre better off going to Sears. Even users who take their iPad away from
home use them in relatively relaxed situations, when they are waiting, or in between
activities, or killing time. That kind of condensed, space-saving presentation of information
that we often recommend for mobile-phone design does not apply to the iPad.

The app design was confusing or the app made the user work more.
In the case of Amazon Windowshop, users were surprised that the look-and-feel was
different from the look-and-feel of the Amazon websites. Many users enjoyed the new
design, but some were overwhelmed by the pictures and by the different look-and-feel.
A user who was looking for an iPad keyboard picked an item that seemed to match her
requirements. Because the product name was incomplete and the photo was misleading (it
showed a keyboard), the item she had selected was in fact an iPad case. She tapped several
times on the same item without realizing what it was and was ready to buy it. Only at the
last minute, when reading the description more carefully, did she understand that the item
was in fact an iPad skin not an iPad keyboard. She ended up going to the Amazon website
and buying the product there.

For more information about mobile-phone usability, please see Nielsen Norman Group
report Mobile Website and Application Usability, which includes our research and design
guidelines for this smaller class of devices.
NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

17

Amazon Windowshop truncated the name of the products on the search results page.

18

[email protected]

Website or App?

Amazon Windowshop app. The product page did not show the full product name either.
The picture led the user to believe that the product was a keyboard, when, in fact, it
was an iPad case.
Another app that generated some failures was Washington Post. In order to access content,
the app required the users to register. Our users had little interest in doing so, and felt that
they could access the same content without registration by going to the Web.
One participant commented:
Its annoying to [have to] sign up. I dont want to give them my email [in
the app]. [] Why would I give them my email if I can access the site without
signing up?
To quote another user:
Sometimes apps are easier, but sometimes they lack features [compared to
the websites].
Whenever apps lack features, users quit them for the websites.

SHOULD ALL COMPANIES HAVE AN IPAD APP?

Given that websites are fairly usable on the iPad, the answer is no not everybody needs
to have an iPad app, at least not for usability reasons. (There may be other reasons, such
as marketing or even internal politics, for which companies may feel compelled to build an

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

19

iPad app simply so that they can say that they have one even if it doesnt do customers any
good.) Most users still access websites through search, and even though people may fall for
the ad for an iPad app on your website and may install that app, it doesnt mean that they
are going to use it.

If you need an iPad app

1.

Design for repeat users.

Our mobile research shows that apps work best when they are designed for repeat
users: customers who are already fans of the brand and engage with it on a regular
basis. To decide if you need an iPad app, look first at the data: how many people
access your full website on an iPad? What do they do there? Are they able to get
where they want? Are these people repeat customers and how often do they come to
your site?

2.

Your iPad app should have a secret weapon compared to your website.
If you decide to have an iPad app, make sure that the app delivers extra value,
compared to the website. The apps secret weapon can be superb usability, or just
enough usability as to make a repeated task bearable. Look, for instance, at the
Epicurious app on the iPad. The app offers essentially the same content as the
website, but its a lot more usable than the website in the kitchen. You can read the
recipe without much scrolling and zooming in, or touching the screen all of these
are quite annoying tasks in the kitchen, when your hands are dirty.

The recipes in the Epicurious app are displayed in a format easy to read in the kitchen.
20

[email protected]

Website or App?

Often, the secret weapon needs to be more than just superb usability: maybe the app
can offer special discounts or some other feature unavailable on the Web. Examples
include flash-sale apps such as Rue La La and Gilt, or auction and classified sites,
which allow regular users to buy products fast; magazine apps that can be
downloaded on a plane and read in the absence of an Internet connection; ecommerce sites (e.g., Zappos) that offer free 1-day shipping through the app 5.
Think also if there is a need that you may be able to fulfill with an app, but that your
website doesnt already address. For instance, you have a lot of Flash content on your
site, and users fail to access it on their iPad. Or you show many maps on the website,
and users have a hard time using them on the iPad.
3.

Do not make users work more in your iPad app than on your website.
Rarely will users accept to download and use an app if they have to work more for it.
For instance, a lot of newspapers offer free access on the Internet, but ask users to
register in order to use the app. Our participants were very reluctant to do so.

4.

Do not design an iPad app as if it were an iPhone app.

Do not make the mistake to design an iPad app as if you designed an iPhone app: its
not only that the iPad has a bigger screen, but, equally important, the context of use
is different. Much noise has been made around the assertion that the iPad is not
mobile; the truth is that it is and it isnt. Although people may carry their iPad with
them, there is less of the pressure of immediate, local response that users expect
from their smartphone.
We often hear users saying that the iPad has replaced their laptop. That does not
mean that they suddenly started coding or creating PowerPoint presentations on their
iPad, but some of the more complex information-finding tasks are migrating from the
laptop to the iPad. Users may attempt to research vacation spots or new products on
the iPad, whether they decide to make a purchase on the spot or not. Most users dont
even think of doing such a task on the smartphone; instead, they might limit
themselves to simple, contextual information needs such as finding the closest hotel if
they got stuck in a snow storm.
Killing time is the other major use for smartphones, and that is shared with the iPad.
Killing time is often device-driven rather than user-driven: the user may have a very
general goal (e.g., read news, browse through a magazine) and is happy to take
roughly whatever content the device is offering. However, even for killing time, the
uses are slightly different: the time that is usually available on the smartphone is
much shorter and more fragmented than the one available on the iPad. On the
smartphone, users may look for a quick article to kill the 3 minutes of waiting for the
train; once on the train, they may take out the iPad for the hour it takes them to ride
home.
As one user put it:
I am not in a rush when I use this device.

For one of the authors of this report, the Zappos app did at least offer free 1-day shipping;
that offer was not valid on the website.
NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

21

Making your website iPad-friendly

If you dont need or cannot afford an app what can you do to make your look decent on
the iPad?
First and most importantly, you should test your site. See what the pain points are and then
address them. Often fixes will improve the overall usability of your website on the desktop,
as well. Some of the more obvious fixes include:

22

Getting rid of Flash content

Creating bigger targets and pad targets so that they tolerate touch better

Spacing links wherever possible

Detecting location

Minimizing the need for typing

Grouping controls or pieces of information that are related (to avoid having
content ignored because its below the fold)

[email protected]

Website or App?

The Touch Screen and Affordances

TARGET SIZE
In our first iPad report last year, we deplored the use of small targets in apps. Because the
iPad is a touchscreen device, it has the fat-finger problem: its hard to get to small
targets. Even though people may be able to eventually hit the desired target (either by
being more careful 6 or by zooming in), small targets make them work more.
Research has shown that the best target size for widgets is 1cm x 1cm for touch
devices; however, we still see some apps that have tiny targets, far below that
recommended limit.
Heres an example from USA Today, which contains some tiny targets on the article page:
the home icon in the top left corner (see below), as well as the arrow for navigating to the
next article. Granted, the app did allow for an alternative means of navigation to the next
article (swiping the page); however, some of our participants, although they were familiar
with the app, where not aware of that option and they tried hard to press the small arrow at
the bottom of the page.

Fittss Law from HumanComputer Interaction (HCI) says that the time to reach a target is
longer if that target is smaller. When the target is small, users are slowed down because
they need to pay extra attention to hitting the right spot. For more information about Fittss
Law and other HCI concepts and findings, please see our one-day course User Interface
Principles Every Designer Must Know.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

23

This Home icon was

small and easy to miss.

The tiny arrow

takes users to the
next article.

USA Today. Users must tap the tiny arrow to move to the next article. The label
(Article 6 of 31) has poor information scent: it doesnt tell users what the article is
about.
Small targets are not only hard to press; sometimes, they are also hard to discover. Here is
a participant talking about the Home button (top left) on the article page of USA Today:
The only thing that was confusing when I first started using it [the USA
Today app] is going back to the homepage. I was hoping for some Back
button on this. I eventually found this small newspaper icon right here, but
that was hard to find.
We applaud ABC News for including a search box in their app. (This was one of our
recommendations from last years report). However, the search box was so tiny that it was
hard to select it and to see what was typed in. Discoverability is further reduced by the nonstandard positioning of search at the bottom of the page instead of the preferred top-ofpage location.

24

[email protected]

The Touch Screen and Affordances

ABC News. The tiny size of the search box makes it difficult to select and to see what's
typed in it.
The NASA app was also guilty of targets that were sometimes too small. The home screen of
the app was a beautiful image of the solar system. Touching each of the celestial bodies led
to a relevant information page. The celestial bodies were (presumably) drawn to scale;
unfortunately that meant that some of these targets (Pluto, Mercury, or Moon) were too tiny
for most human fingers.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

25

NASA app. Some celestial bodies (Pluto, Moon, Mercury) were too small and could not
be selected reliably.

CROWDING TARGETS
Another fat-finger issue that we encountered frequently is placing targets too close to each
other.
When targets are placed too close to each other, users can easily hit the wrong
one.
We can see an example of that in the previous NASA screenshot: the Moon is very close to
Mars and Earth, so its easy to accidentally tap the wrong spot.
Pennant is an impressive app for baseball aficionados, that has some interesting visual
features. The app does suffer from grouping targets too close to each other, as the following
screenshots indicate.

26

[email protected]

The Touch Screen and Affordances

The timeline is used to

navigate to a particular
year.

Users can tap on a bar to find out

what happened at that moment in
the game.

Pennant app. The lines on the various timelines are tappable, but they are too close to
each other (and sometimes too small) to select precisely.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

27

In Pennant, users can tap the timeline to select a year and find more information their
favorite teams performance for that year. Each bar on the timeline is tappable, and of
course, the bars are too close to each other, making it hard to select one particular year.
Pennant uses this timeline navigation in other cases, too for instance, to indicate events
of various levels of importance from a particular game. On a side note, some users found it
annoying to have to slide their finger around the circle to find information about the game,
and said they would have preferred a more textual synopsis of the game.
Paprika, a recipe-management app, also crowds many icons in a small space. The toolbar on
the recipe page contains several icons that are very close to each other.

28

[email protected]

The Touch Screen and Affordances

Paprika. The recipe toolbar is too crowded; although users may guess what the icons
stand for, they are too close to one another.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

29

PADDING
One solution that app designers have found for small targets is padding: although the
visible part of the target may be small, there is some invisible target space surrounding it,
so that if a user hits that space, their tap would still count.
Our research with touch devices indicates that users expect padding in tabular
views.
When several items are listed in columns, one on top of another (see the Time example
below), users expect to be able to hit anywhere in the row to select the target
corresponding to that row. Whenever a design does not fulfill that expectation, it is
disconcerting for users.
The table of contents page in the Time magazine app was split into two columns: the
column on the right followed the padding convention mentioned above, but the column on
the left did not. To navigate to articles from the left column, users had to tap on the red
icon next to the headline. This lack of consistency counts as a double usability problem and
was particularly confusing to users.

Users expect to be able to

tap anywhere in this row to
get to the article. This
expectation was fulfilled by
headlines in the right
column.

For the headlines on the left,

users had to tap on the icon
to the left of the headline in
order to navigate to the
article.

Time Magazine App. The table of contents uses padding inconsistently, only for some
of the stories.

30

[email protected]

The Touch Screen and Affordances

AFFORDANCES
Same findings from last year still stand: users dont know that something is touchable
unless it looks so.
Our participants did not discover the reviews feature in the Sears app because the link to
the reviews did not look tappable. While the blue color traditionally indicates a link on the
Web, in this instance it was identical with the color of the product name, making users
believe that it was just a design choice rather than a tappable element. The link to reviews
was also too close to the blue icon.

Sears. Users did not discover that they could tap on the word "Reviews" to see the
product reviews.
Also in the Sears app, one of our participants did not realize that Featured products in the
top right corner was a link it did not look tappable. He thought, instead, that it was a
label for the icon next to it (which corresponded, in fact, to an account-related menu).
Let me see what Featured products is okay, that has nothing to do with
Featured products, its more like a my profile.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

31

The icon was in fact very close to the Featured products link. Whats worse is that,
because the profile menu was not a modal dialog 7, when the user tapped Featured
products to dismiss the menu, he ended up on the Featured products page. The
applications behavior seemed completely erratic to our participant.

Featured products did not look

tappable. Users thought it was a
label for the icon next to it.

On the left, the

text was in fact a
label for the icon
next to it.

This dialog was not modal:

hitting Featured Products
dismissed the dialog and it
also took the user to the
Featured Products page.

Sears. The Featured Products link did not look like a link; users mistook it for an icon
label (similar to the labels in the top left corner).
In the Martha Stewart Makes Cookies app, one of our participants noticed that the recipe for
chocolate chip cookies did not list chocolate among the ingredients. Was this an oversight
on Marthas part? Did she forget to mention chocolate? No. If only the user had noticed the
lighter text color for the last ingredient in the box and taken it as a signal to scroll down,
they would have discovered the chocolate. Unfortunately, she did not detect that subtle cue.

A modal dialog prevents interaction with the other elements on the screen until the dialog
is dismissed. Modal dialogs in iOS are often dismissed by touching any area outside the
dialog, a behavior that most users expect.
32

[email protected]

The Touch Screen and Affordances

Martha Stewart Makes Cookies Lite. The ingredients box is scrollable, but there is no
affordance for scrolling.
Another example of lack of affordance is the USA Today app. Last year, when we tested this
app, we found that users never discovered that they could change the sections by tapping
on the logo. This time, we did not test the app anymore. However, some of our participants
had it installed on their iPad and showed it to us. Even those who were familiar with the app
and were using it fairly often were not always familiar with this tapping-on-the-logo feature.
NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

33

And some of those who had discovered the navigation hidden under the logo still
remembered the painful experience of finding it:
Going out to different categories was at first hard to find out; originally, I pressed
the refresh button right here [top right corner]. [...]Then I found the little i [top left
corner] that wasnt it either, and then I just started tapping and this [the sections
popover] came out Ok, but if somehow they would have told you how to go back to
the sections, it would have been helpful.

Tapping the logo exposes the

navigation to various sections.

USA Today (at the time of the study). The navigation is hidden under the logo and
difficult to discover.
The problem with USA Today is twofold: (1) the logo looks flat (and not touchable), and (2)
the label on the logo has no connection with the current task (finding the news sections).
As we were writing this report, USA Today came out with an update: an explicit button with
the label Sections has been placed above the logo in the new version. We havent tested
this new design, but it cant help being better than the old one which doesnt work as
weve known for a full year since the data from our first study.

34

[email protected]

The Touch Screen and Affordances

The updated version of USA Today shows the word "Sections" above the logo.
Another app that uses the logo for navigation is The Daily: tapping the logo takes users
back to the front page in the carousel view. In our testing, most users did not discover that
feature. The only exception came from a user who was so persistent, that he swiped back to
the first page and read the instructions to figure out how to navigate quickly to the table of
contents. (He was still not satisfied, but he figured out that from the carousel he could get
to the table of contents with one more tap.)

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

35

Tapping the logo takes

you back to the front
page. Users did not
discover this feature.

36

[email protected]

The Touch Screen and Affordances

The Daily also hides a navigation option under the logo.

Whats the lesson learned from these examples?
Build affordances by making buttons look tappable and relevant to the task they
accomplish. This means choosing the right icons and labels for those buttons or
action links.

INPUT AND REGISTRATION

Although typing on the iPad is easier than typing on a touch phone, most people still dont
enjoy doing it. The main reason is that typing on the iPad is pretty much a hunt-and-peck
endeavor: users must split their visual attention between finding the keys on the screen and
reading what they typed; moreover, the keys offer no tactile feedback.
In our testing, typing often spoiled the fun we often heard comments such as:
I type a lot faster on my computer.
I am not good at typing on this.
Our participants were more tolerant of typing when they perceived the need for it
for instance, when they were completing a purchase and had to type in their
information. They didnt like the typing when they had to create an account for the
purpose of accessing information (as in the case of Washington Post).
Big Oven upset one of our participants because, in order to see the caloric
information for a recipe, it asked him to create an account. The user went ahead and
created it, but after the account was created and he wanted to check the calories, he
was denied access and told that he needed to upgrade to the paid version in order to
get that information:
Oh, that is annoying! I dont like that! So even if you sign in, you have to
pay 16 bucks a year That is bull!
We advise against these kinds of tactics to get access to users email. In this case,
the users effort to create an account was wasted and he felt tricked. Users should be

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

37

told in advance what they need to do in order to get access to a feature (in this case,
sign up AND upgrade).

Users of Big Oven were asked to sign in to get access to the detailed caloric content of
a recipe or to add the recipe ingredients to a shopping list. Once they signed in, they
discovered that they also needed to upgrade to the paid version of the app (see
below).

38

[email protected]

The Touch Screen and Affordances

One of our participants was annoyed with the QVC app, because after he typed in his
address several times, the address was still not recognized. There was no explanation
of what in the address caused the problem and no attempt to suggest a fix.
To minimize user input on the iPad:
1. Compute information for the users.
For instance, ask only for the ZIP Code and calculate state and town; possibly offer a
list of towns if there are more under the same ZIP Code.
2. Be tolerant of typos and offer corrections; dont require users to type in
complete information.
For example, accept 123 Main instead of 123 Main St.
3. Save history and allow users to select previously typed information.
4. Use defaults that make sense for the user.
Zappos and QVC do a good job of saving information in the app; once the user is
logged in, they can easily go through the process of ordering without entering any
extra information.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

39

The Zappos app saves shipping addresses and payment information from previous
sessions.
Should apps save login information or should they require users to log in each time?
If the app does not store any information that is sensitive (e.g., credit card), then
the user should definitely be kept logged in.
The option to log out should be presented clearly on the screen, in case a different
user is accessing the app.
If the app does store credit card information, the app should allow users to decide
if they want to be kept logged in or if they want to log in again each time they use
the app.
An example of app that asks is the flash-sale app Rue La La.

40

[email protected]

The Touch Screen and Affordances

Rue La La allows users to decide whether they want to be kept signed in.
Ideally, when the user opts to be kept logged in, they should get a message
informing them of the possible risks.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

41

The Big Screen

Many apps use the (relatively) big iPad screen inefficiently: the screen contains little
information, and users have to take extra actions to get to the content.
An example is the ABC News app, which displays a big globe on the homepage. The story
titles can be read one at a time (the others are distorted). If a story gets selected, the app
shows the first lines of the story; to read it, you need to tap one more button. Compare that
with the list view in the same app: once you tapped a story headline, the article view
appears immediately.
Many of our participants were at first excited about the unusual presentation in the ABC
News app, but, after a while, they got bored. Some felt that they could read the news better
in the alternative list view:
I like this [the globe], but I prefer the standard view. Its just easier to read,
its flat, the other one is kind of cool to look at, but I like the clean lines [of
the standard view], its very easy to understand, its very simple.
I don't like the globe; I like the grid better - less stressful on the eye.

ABC News. The globe view allowed users to read one story headline at the time. To
read a story, they needed to tap on it and then tap on the Read More button in the
popover.

42

[email protected]

The Big Screen

ABC News. The list view made more efficient use of space. Tapping on any headline
leads directly to the corresponding article.
The homepage of the Ansel Adams app has a lot of white space. Users can see only a few of
the navigation options available to them at a time. And the labels for the navigation options
are in a small font that is hard to read (granted, the low contrast between the text and the
background also does not help).
Similarly, the AP News app shows the various headlines in small label-like boxes, placed
irregularly on a canvas. Some of the headlines are only half-shown, and there is a lot of
wasted space.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

43

(a)

(b)

(a) Ansel Adams app. The homepage shows just a few navigation choices at the time,
opting instead for a lot of white space.
(b) AP News app. The headlines are placed in white boxes spread randomly on a canvas.
The Weather Channel app manages to use an entire screen to display very little information.
Most users have familiar locations as defaults; a map of the location is unnecessary. A more
detailed weather forecast would be more appropriate; right now, users must tap a few more
times to get, for instance, tomorrows weather.

44

[email protected]

The Big Screen

Weather Channel shows little useful information on the first screen.

POPOVERS FOR DISPLAYING INFORMATION

Popovers are frequent culprits for underutilizing the space. Too often we see relevant
content crammed in a small popover window, while all the other space underneath remains
unused.
Below is an example from Epicurious. Users have to scroll through the options in the control
panel, while the ample space underneath is taken by a (beautiful) picture. It would have
been better to lay out all the various navigation choices in a table view and show them on
the whole screen.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

45

Epicurious. The Control Panel is packed in a small popover, while the background screen
is not used.
Another example comes from NASA. One of the icons in the top navigation bar 8 displays a
popover with information about the various space missions. Each space mission in the
popover comes with a big picture, and users have to scroll in the small window to find a
mission of interest. The popover does come with an alphabetic selector on the right;
however, none of our participants noticed or used it, possibly because of the low contrast of
the letters. Even with the selectors, the popover is just too small for the interaction, and
there are no benefits from having the picture of the solar system in the background.

Several participants commented that they had no idea what the icons meant.
46

[email protected]

The Big Screen

NASA. The popover for the space missions contained a long list of missions, through
which users had to scroll.
Before using a popover to display information, ask yourself:
How much information do I need to display?

If its just a few lines and the user does not need to scroll to see it, then its okay
to use a popover.

If its a lot of information, then its better to use a table view or some other type
of view that is suitable for the content.

Does the user need to see any information on the current screen in order to use
the popover?

If no, you are probably better off using a different view.

If yes, will the popover actually block that information or not? If not, then its
okay to use a popover.

Are the items in the popover visible in enough detail so that the user can make a
decision?

If some of the items in the popover contain thumbnails, youre probably better off
using a regular table view on a separate page.

If the text font needs to be small so that items fit into the popover, the popover
is not appropriate.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

47

Often, news applications use popovers (or split-views in landscape mode) to save users the
extra step of going back to a hub page and selecting a new story. That model assumes that
users are going to spend very little time in the popover and most time reading articles.
From our testing of news and magazine apps, it turns out that most users read just a few
articles per session, and spend most of their time scanning headlines and summaries for
something of interest. Thats why its important to support the browsing activity better by
giving it extra space, especially if there are a lot of news stories to go through.
Reuters News Pro app does pass some of our criteria for using a popover, but unfortunately
not all. The app displays the news headlines in a popover, but the users almost never have
to scroll because the app always displays only 10 stories. Unfortunately the font of the
headlines in the popover is on the small side, and browsing could have been supported even
better if the headlines had summaries underneath. (In that case, in order to avoid scrolling,
they probably would have had to be presented on a separate page).

Reuters uses a popover that does not require users to scroll. However, the font is in
the popover is small and can be hard to read.
The NPR app commits another type of popover sin: the popover is persistent after the user
has chosen an action and it blocks information important for the task. To listen to an NPR
program, the user needs to navigate through several popovers until one of them contains
the button Listen now. When that button is pressed, the popover does not disappear, but

48

[email protected]

The Big Screen

the audio starts playing. If the users need to stop the audio quickly, they have to dismiss
the popover first, and then tap on the pause button underneath the popover. (An equally
severe problem with the NPR app is that the audio starts playing audibly when the iPad
volume button is off).

(a)

(b)
NPR. The popover in (a) blocks the pause button in (b). To stop the audio, the user
must first dismiss the popover.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

49

SMALL MODAL VIEWS

Sometimes a smaller-than-screen modal view is used to display an article, a product, or
some other type of information. Again, the question to ask when tempted to use such
a view is whether there is enough space to display all the needed information.
Reuters Marketboard and Sears use a small modal view to display charts and product pages,
respectively. In Marketboards case, although one perhaps could argue that a bigger graph
may have offered more detail, the chart is clear enough and users can easily interact with it.
In Sears case, the application could definitely benefit from a larger product page: the
description does not fit the dialog, and there is more product information that users may
have found useful that is absent from the app.

Marketboard. Stock charts are showed in a smaller-than screen modal view.

The chart is clear and users can easily interact with it.

Sears. The modal view does not fit the product description entirely.

50

[email protected]

The Big Screen

Amazon Windowshop. The product information is displayed in a modal view; the

various product categories are still visible in the background, with the current category
highlighted. The shopping cart is also visible in the top right corner.
Sears, Amazon Windowshop (which also uses popovers for product pages), and other ecommerce apps that use modal views for product information may be motivated by the fact
that part of the interface (such as navigation or shopping cart) are often still visible in the
background and that those cues might keep users oriented within the app.
Indeed, when Amazon Windowshop displays the product popover, it also shows the various
product categories at the top of the page (in background), with the current category
highlighted. However, for both Sears and Amazon Windowshop, users in our study were far
from satisfied by the amount of product information or by the way this information was
presented. In the case of Windowshop, for instance, users had to select a different product
tab to see a description of the object, and, in several cases, they just taped on the picture
hoping to see more information about the object.
We think the solution chosen by Zappos or QVC is preferable. They designed a separate
product page, and the image was big and shown next to the product description. They also
incorporated navigation items such as a search box or tab bar in the product page.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

51

Zappos product page showed a big picture near a text description of the product and
included several navigation buttons (for home, search, shopping cart, etc.).

52

[email protected]

The Big Screen

QVC. Product information is on a separate page that also contains several navigation
options.
In conclusion:
If you have a lot of content (such as product information) to display, use a
separate page rather than a modal view.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

53

Gestures
SWIPING TO TURN THE PAGE
Some apps (such as Bing) use the swipe gesture to navigate forward and backward. This
gesture has relatively low discoverability, although users are more likely to try it in certain
kinds of apps (especially magazines) that have a strong resemblance to physical books.
Bing displays tips to first-time users to make sure that they actually discover this gesture.
Other apps that use the swipe gesture give users cues such as arrows to indicate the
direction of navigation. The Daily and Wired are two examples below. Users loved these
hints and commented that they helped.

The Daily: The arrow indicates the direction of navigation.

54

[email protected]

Gestures

Wired also uses an arrow to suggest the direction of navigation.

One problem with using the swipe gesture to move back and forth is that it can interfere
with other elements on the page that require horizontal navigation (in particular, with
carousels). Most of the time when users flip the page, they do not position their finger
consistently in a particular spot on the page (e.g., lower right corner); instead, they tend to
do it as if they used a physical book. If there are any spots on the page where the swipe
gesture does not work, the user will perceive the application as erratic.
In our testing, there were two instances where Bing ran into problems because of the swipe
gestures:
(1) The navigation bar at the top. If the user swipes in the navigation bar, nothing
happens.
(2) Carousels. If the page contains a carousel, moving forward to a different page can be
done only if the user touches the screen outside the carousel area
One of our users, who was initially enthusiastic about the swipe gesture (I like it its a
neat effect), tapped on an article in the News section of Bing. He then wanted to swipe
back to the News headlines, but failed because he kept hitting the top left corner (in the
navigation bar). His sentiments toward the app changed:
On second thought I would like a Back button there because it didnt work
when I wanted it to.
We also encountered several users who had trouble moving forward in Bing because they
were swiping in the carousel area.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

55

Users trying to swipe

in this area failed.

Users trying to swipe

in the carousel area
failed.

Bing uses the swipe gesture to move back or forward. Unfortunately, the spot where
the gesture is initiated influences whether the gesture is successful or not.
Does that mean that the swipe gesture is doomed? That we should simply stay away from
it? No, it just means that we have to take into account the fact that users wont necessarily
hit a specific spot. (If we want them to hit a specific spot, then were better off providing a
button). What we do know about swiping gestures is that they are typically made close to
the sides of the screen (although where on the sides we cannot tell), in the same way in
which people turn the pages of the book. That means that leaving some margin of safe,
non-interfering space (not necessarily whitespace, just not a carousel) around the vertical
edges of the screen will be good-enough in most situations. Not covering the page with
carousels is the other thing that we can do: if the carousel occupies only a small proportion
of the page, the chance that the user will hit it when swiping will decrease.
An example of successful swiping comes from Washington Post. Although, as in Bing,
swiping does not work in a narrow strip at the very top of the screen, Washington Post
avoids the problems that Bing ran into by ensuring that most of the screen space allows
swiping.

56

[email protected]

Gestures

Swiping does not

work here.

Washington Post. Swiping allows users to move between sections (as well as between
articles within a section). Although swiping doesnt work in the top navigation bar or in
the area at the bottom, it works elsewhere on the page.
Recommendations for using the swipe gesture:

Give users visible cues (arrows, tips) that they need to use the swipe
gesture.

Make sure that the page contains enough space safe for swiping next to
the two vertical sides.

Avoid covering the page with carousels and other design features that
interfere with swiping.

GESTURES IN PRODUCTIVITY APPS

Several productivity apps use gestures to allow users to perform various operations. For
instance, in Adobe Photoshop Express, users had to use various gestures to manipulate
pictures. The gestures worked well for all our participants they were able to easily
complete their tasks and pleased with the application. One thing that helped was that Adobe
offered tips whenever users attempted an operation. The gestures were relatively simple,
and they did not require the use of more than one finger.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

57

Adobe Photoshop Express required gestures to manipulate photos and displayed tips to
make the gestures more discoverable. This particularly helped users understand how to
use features that had no perceived affordance: in this example, theres no explicit UI
widget like a slider to manipulate for changing the extent of the photographs Soft Focus
adjustment. (Instead, youre supposed to move your finger back and forth directly on
the photo itself until you like the way it looks.)

58

[email protected]

Gestures

Navigation
ACCIDENTAL TOUCHES AND THE BACK BUTTON
In last years report, we argued for Back buttons on touch screens: with a large screen such
as the iPad its easy to accidentally touch something. In the absence of a Back button, users
get lost.
Were happy to report that many magazine apps have been converted, and many of them
have added a Back button to their navigation bar. Examples include Time, Vanity Fair, New
Yorker, and Wired.

Wired magazine. The navigation bar at the top includes a Back button that allows
users to easily undo the consequences of accidental touches.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

59

Time Magazine. The Back button is part of the top navigation bar. The page viewer
presents thumbnails of the various articles in the magazine; users can browse through
the page viewer to select a new article.
A Back button is required whenever the app allows users to jump back and forth between
pages. Magazine apps often have page viewers (as in the Time screenshot above) and
contents popovers that make it easy to navigate from article to article. The Back button
saves the user the effort of browsing again through the magazine to find the previous
article. Magazine apps also contain hyperlinked content for instance, most magazines link
from the table of contents page to the various articles. In the screenshot below, which is
taken from a recent issue of The New Yorker, the various subsections of Goings about the
town can be visited through hyperlinks; using the back icon in the top navigation bar, users
can quickly go back to the previous article that they visited.

60

[email protected]

Navigation

Various subsections of
the column can be
accessed through
hyperlinks.

The New Yorker. Various subsections of the Goings on About Town column could be
accessed through hyperlinks. The top Back button supports the retracing of the
sequence of visited articles.
A lot of newspaper apps do not use Back buttons. The Telegraph is one of the few
newspapers that uses a Back button and has a navigation bar on every page, enabling users
to move between various sections without going back to a news-listing page.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

61

The Telegraph. The navigation bar and the Back button allow users to quickly retrace
their steps or go to a new section.
Many apps have a hub-and-spoke navigation model that requires users to read an article
and then go back to a listing page. The article is often displayed in an overlay, and that
makes the Back button apparently unnecessary (since the user can dismiss the overlay and
return to the list of articles).
However, sometimes the page contains other hyperlinks that can be accidentally touched.
These links may include top navigation bars, settings links, or any other kinds of links that
often look unrelated to the natural task flow of the app, but that can be accidentally
touched.
We go back to the Sears app with an example from our testing. One of our users performed
a search for a dishwasher and got a long list of results. He then looked around the page for

62

[email protected]

Navigation

some filtering options. He tapped the Featured products link, but he was taken to a
completely different page and lost his search.

Sears app. A user tapped Featured Products and lost his search results. He had to run
his query again because the app had no Back button.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

63

Some e-commerce sites that display product information on a separate page also use the
Back button to allow users to navigate back to the search results.

The Zappos Back button took users to the search results page.
Many of the sites that have a Back button (including Zappos), however, stop the back chain
on the homepage. This problem is the same as the one Sears had in the example above: if
users hit Home accidentally, they lose the search results or the product that they were
inspecting.

64

[email protected]

Navigation

Zappos' homepage did not contain a Back link. If people accidentally hit the Home icon
from the product page or search results, they lose their product or search results.
For this reason, we recommend including a true Back button that protects the user against
accidents.
If your app will have sections with no Back button, at least make sure that the links to these
sections are less likely to be accidentally touched. In the case of Zappos above, it means
putting the Home link far away from the Back link.
Bing is one of the few apps that actually had a Back button on the Home screen (but not on
the other pages, where it relied on the back swipe gesture to go back). Because of that
navigation feature, it is possible to reconstruct a navigation sequence even if the user hit
the Home button elsewhere in the app.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

65

Bing has a Back button on the home screen, allowing users to reconstruct navigation
sequences that ended by pressing the "Home" icon elsewhere in the app.
To summarize:

66

Include a Back button in your app to allow users to undo any accidental
touches.

Make sure that the Back button also works on the home page.

[email protected]

Navigation

HORIZONTAL NAVIGATION: THE CAROUSEL AND HORIZONTAL SCROLLING

Horizontal navigation seems to have reached its apogee with the iPad: lots of apps make
use of horizontal navigation, either in the form of carousels or of the deck of cards (where
users flip through various pages of content).
In last years report, we noted that both these ways of navigation were quite successful: the
deck of cards model seemed to work well in magazine and even newspaper apps, once
users understood that the mental model of the app followed that of a paper newspaper or
magazine. The carousel was also easy to use, if the affordance of horizontal swiping was
good.
We discussed some of the problems with using deck of cards models in our section on
gestures (page 54). Here we focus mostly on carousels and horizontal scrolling.
A plethora of apps use carousels. Many news apps displayed rows of pictures plus text, and
several of our users commented that they liked that kind of display because they could get
information from both the picture and the story title.
A user commented on the Bing app:
[The carousel] is my favorite type of design you slide to see what you
need. It shows the most amount of information without being intrusive.

Bing uses carousels for each News section.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

67

In general, the problem of carousels is that they only display a small number of
items at a time. There are situations where that can be okay; however, carousels are
not appropriate for long lists.
The Wine.com app uses a carousel to display the search results; unfortunately, that
means that users have to flip through all the results in order to find one that they
like. Information such as rating or price, often used to visually select items from a
list, is not available in a carousel display.

Wine.com app. The list of search results is displayed using a carousel. Users need to
flip through all the 127 wines to make a selection.
Newsy also uses a carousel to display news videos; users need to swipe through the
videos, one at a time. The user who had Newsy installed on his iPad commented:
I like the flow of this that you can just swipe through. Its really simple to
navigate, easy to understand. But I dont use this [app].
Although the display may seem exciting in the beginning, swiping through a lot of videos
gets tiring quickly, especially because there is not a lot of content to be read about each of
them (so the users end up swiping almost continuously).

68

[email protected]

Navigation

Newsy (in landscape orientation) shows video descriptions in a carousel.

Apps such as Amazon Windowshop use a two-dimensional carousel, where users can scroll
horizontally and vertically. Some of our participants were overwhelmed by the many
pictures and the horizontal navigation. While using Amazon Windowshop app, one of our
participants remarked:
Horizontal drives me nuts. Why do they have horizontal processing? I cannot
concentrate.
Another person commented;
I would like a grid separator to make it look more uniform
Another problem with the Amazon Windowshop display was that there was no natural order
for scanning the various products: users sometimes looked horizontally across categories
and sometimes they looked within one category. No user exhibited a single strategy (e.g.,
going only within one category). With that kind of display, it is easy to forget which items
were visited and go in circles; in fact several users went back and forth and revisited
products. (The fact that certain items were listed in multiple categories did not help either).
As one user put it:
I wish they had history I forget what I looked at.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

69

Amazon Windowshop. The same products are repeated multiple times (in different
categories). Users can scroll horizontally and vertically to navigate. This display makes
it hard for people to remember the items that theyve visited before.
Heres the summary about carousels:

70

Carousels are not appropriate for long lists (for instance, for search
results).

Many carousels on the same page can visually overwhelm some users.

Two-dimensional carousels make it harder for users to remember which

items they already visited.

[email protected]

Navigation

Orientation
PREFERRED ORIENTATION
Participants in our study sessions were told in the beginning that they could use whatever
iPad orientation was most comfortable to them and could switch orientations as they saw fit.
Most of the time, our participants picked an orientation at the beginning of the session and
used it for the entire session. They rarely switched orientations spontaneously, and when
they did so, it was because they thought they would get a better look at a picture or see the
text in a larger font or watch a video full screen. Sometimes the application forced them to
work in a different orientation.
Slightly more users mentioned that they preferred the landscape orientation for the iPad. A
seemingly-related factor was whether they were using an iPad cover; those who did
mentioned that they often propped their iPad up in landscape orientation.
My computer screen at work and my laptop screen at home is landscape.
Intuitively, when I am looking at an electronic screen, my mind tells me to
look at it in landscape mode. I try to play around with landscape versus
portrait in the context of photos. [For] anything like reading or viewing a
video, I automatically switch to landscape mode.

CONSTRAINING ORIENTATION
Some apps only work in a single orientation, forcing the user to turn the iPad in that
orientation. For instance, QVC only works in portrait and Amazon Windowshop only works in
landscape.
Users were not terribly bothered by having to use the iPad in one orientation (although they
may be bothered more in naturalistic contexts, where they would not be sitting at a table).
One user tried to change orientations for the QVC app and noted that it didnt work; then
she commented that changing orientation is not very reliable on her iPad and wondered
whether there was any issue with the device.
Another participant who normally preferred the portrait orientation, said that he was not
bothered by having to use Amazon Windowshop in landscape mode:
I like this orientation I didnt think I would; it makes it so seamless and
stylized I like it this way.
Does that mean that designers should pick one orientation and stick with it? No. As
mentioned before, users tend to switch orientation when an impasse occurs
and, if the app doesnt support them, their flow is going to be disrupted and they are
going to wonder why its not working.

INCONSISTENT NAVIGATION (HORIZONTAL AND VERTICAL) ACROSS

ORIENTATIONS
Some applications use a different navigation direction in the two orientations; for instance,
they use horizontal navigation in landscape and use vertical navigation in portrait.
An example is Shop Style. To navigate, users have to swipe horizontally in landscape mode,
and swipe vertically in portrait.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

71

(a)

(b)
Shop Style uses horizontal navigation (swipe scrolling) in landscape and vertical
navigation in portrait.

72

[email protected]

Orientation

Although users do tend to stick to an orientation during one session, that doesnt mean that
they may not switch or that during the next session they will use the same orientation.
When people change orientations, they expect the same kind of interaction from the app
switching orientations should not mean switching apps. Inconsistent navigation across
orientations also degrades the learnability of the app: its harder for users to associate any
particular navigation scheme with that app.
Magazine apps sometimes have different navigation schemes in the two orientations. Time
is an example: in portrait mode, users scroll down to read an article and swipe forward to
move to the next article. In landscape they swipe through the pages of the magazine.
Users are slightly more likely to change orientation when using a magazine app than other
types of app, mostly because these apps contain content that has a preferred orientation
(e.g., pictures or videos). In our testing, participants fumbled a bit with Time until they
discovered what they were supposed to do when they changed orientations. Switching from
portrait to landscape was especially painful, because users attempted to scroll vertically to
no avail.

(a) Landscape version of Time. Users must swipe horizontally to read the next page of
the article. There is no cue on the screen to help them figure it out.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

73

The text (Scroll

for more) does
tell users what
they are supposed
to do.

(b) Portrait version of Time. Users must scroll vertically to read the article (see also
instruction on screen). Forward or backward swipe leads to the next, respectively
previous, article.
Our recommendation:
Use the same navigation scheme in both landscape and portrait orientations.

INCONSISTENT CONTENT ACROSS ORIENTATIONS

In last years report, we talked at length about how some apps do not have the same
content in the two orientations and how users do not necessarily think of changing
orientations to get to additional content. The BBC News app still has different sections
available in landscape and in portrait orientation.

74

[email protected]

Orientation

Many news topics in BBC News are available only in landscape.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

75

The problem affects magazine apps in particular, because they work with different layout
constraints in the two orientations. To satisfy these layout constraints, they end up
tweaking the content (especially photographs) so that it works well for each orientation.
This solution probably involves high costs on the production side (as the magazine has to
come up with two layouts for each issue), and also frustration on the user side. When users
change orientation to get a better view of a picture, it is frustrating to suddenly not find the
picture anymore and have to search for it (possibly without success).
The example below comes from the latest issue of Wired: the landscape and the portrait
view of the same article contain different photos.

This photo is available only in portrait.

This photo is available

only in landscape.

Some pictures in Wired magazine are available only in a single orientation.

76

[email protected]

Orientation

When content is not available in one orientation, tell users that they may find extra
information when they turn the tablet. This is exactly what The Daily does: when one of
their interactive features was only available in portrait mode, they had an icon in landscape
to suggest users to switch orientations. Note also how The Daily does not shy away from
telling users how they are supposed to interact with their feature.

The icon and the text at The Daily tell users to turn tablet in portrait mode.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

77

The Daily. The interactive feature is only available in portrait. Instructions on the
screen tell users how to operate the interactive feature.

78

[email protected]

Orientation

When users switch orientations in the middle of an article in the Time app, they are
suddenly taken back to the beginning of the article and have to find their way back to the
content they were interested in. This breaks the general HCI principle 9 of perceived stability
and thus risks disorienting users and/or making them feel that they have lost control of
their own user experience.

If users change to landscape on this page in the Time app, they are taken back to
the beginning of the article.

Our training seminar User Interface Principles Every Designer Must Know covers human
computer interaction guidelines.
NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

79

Fortune does a good job of keeping the content at the page level consistent across
orientations. They are not perfect, but they choose wisely: they found some memorable
break points (e.g., questions, quotes, new paragraphs) on the page and made sure those
break points were persistent in both landscape and portrait.

Fortune magazine app: portrait version of an article page.

80

[email protected]

Orientation

Fortune magazine app: landscape version of the same page. Note that the same
questions and quotes are present on the page; the content is very close in the two
orientations.
To summarize:

Keep the same content available in both orientations, at both article level
and page level. To make the content consistent at the page level, look for
natural break points (e.g., new paragraph) and keep those in both
orientations.

Keep users at the same location (within the content) when they change
orientation. In particular, when users rotate the tablet back to the
previous orientation, reestablish the previous view.

If a feature is only available in one orientation, tell users that they will
find extra content by turning the tablet.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

81

Initial Experience
DOWNLOAD TIME
We often get asked to estimate for how long users will suffer through a download. The
answer is roughly 20 seconds. After 20 seconds, they become impatient and start thinking
about doing something else.
The time to download content depends on a variety of factors, many of which are beyond
the apps control. What can you do to make sure that your users will not abandon your app?
Display a progress bar (not a spinning gear).
Even though you may estimate that your content will download in a millisecond, its
absolutely vital to display a progress bar that tells users clearly how far the download
has progressed, and, very importantly, that the app is working.
One of our users waited for more than 10 minutes for an issue of Vanity Fair to
download (or at least, thats what she thought). In fact, the app got stuck before the
download had even started; the app kept displaying a spinning gear and the user was
wondering whether it was really working or whether there was a problem with the
app.
If, once the user has started it, your app needs more than 20 seconds to download
content and become fully functional, think seriously about how you are going to
entertain the user during that download time.
Some possibilities:

Show a preview of the content that is downloaded.

Show content that is downloaded so far.

Show instructions and tips about how to use the app. Indeed, from our
smartphone research, we know that, although people dont care much about
instructions, they will read tips if they dont have anything else to do.

SPLASH SCREENS, NOISE, AND VIDEO

Beside horizontal navigation, splash screens are another ancient-Web practice that has
suffered a revival in the iPad era.
Re-labeled as launch screens, the splash screens often contain no information about how
long the app is going to take in order to load, have no progress indicator, and bear no
relationship whatsoever to the first screen of the app.

82

[email protected]

Initial Experience

Toys'R'Us launch screen

Washington Post launch screen

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

83

Many apps feel compelled to start with elaborate graphics. Sometimes complex animations
that can take quite a few seconds are involved. Whereas a cute animation can bring a smile
the first time the apps is started, by the fifth time it becomes annoying.
Some apps take a step beyond and add video or noises to the splash screen. Wired is often
guilty of this technique, but other apps such as Martha Stewart Makes Cookies and Al Gores
Our Choice also start by playing a video. Others, such as Boutiques and Gilt, make a noise
when the app is started.
We strongly advise against startup sounds. Users do not expect to hear noises when they
start an app (and often they may do it in circumstances where noises are inappropriate
imagine a Welcome to MovieFone heard suddenly in the middle of a meeting).

The first time Al Gore's app Our Choice starts, it shows a video of Al Gore.

84

[email protected]

Initial Experience

Martha Stewart Makes Cookies (Lite) starts the first time with a video of Martha
Stewart, followed by an animation involving cookies and the letters in the word
Cookies. The animation is present each time the app is started (although the video is
not); the app takes about 1 minute to start.
So, what should you do about launch screens?

If you must have one, follow Apples recommendation and make it as

close as possible to your first functional screen.

Do not use animations, noises, and videos when the app is launched.

INSTRUCTIONS AND TIPS

Some users do read instructions. They might even deliberately seek them. They typically
are the users who feel more unsecure and less experienced (perhaps they just have
acquired an iPad). (From our research on the Web, we find that younger children, who have
less experience with the Web, tend to read instructions more than children who are older.
Older, less experienced adults also process websites more carefully than younger adults and
sometimes are able to complete tasks that more experienced users might fail.)
However, some users do not care about instructions and will simply ignore them, skipping
quickly through instruction pages to get to the content. As one user put it:
I will always skip the instructions where is the fun if you have to read the
instructions?
Indeed, wheres the fun if you have to study in order to use an app?!

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

85

Even people who dont read instructions normally may do so in two circumstances:

If the instructions are shown during a dead time, when they must wait for
content to be downloaded; or

If the instructions are so simple that they can get the gist of the instruction
without actually reading them.

The gentleman who said that he never reads instructions actually dismissed quickly
the tips that Bing showed about using the swipe to move back. However, the tips
were graphical enough that he got the information in the tip without actually having
to pay a lot of attention to the message. Immediately after, he tried the swipe
gesture and was able to use it successfully.

Bings instructions are clear and simple. They focus on a single feature.
Ideally, the app should be functional without instruction. If you must use
instructions, they should be memorable and simple. Do not swamp the user with a
lot of information at a time; have that information available, but never force the user
to sit through it, especially when the app is first launched.
Moleskine starts with a page of instructions the first time is started. Unfortunately,
users do not have the patience to delve into the details of those instructions. Nobody
is going to memorize what all those options do. Its better to focus on one or two
features that are important to get the task started. For instance, the Moleskine
instructions do not talk at all about the most important thing in this app: the
workflow. That was a major problem with the app, but even users who went back to
the instructions did not get help on that issue. As one use put it:

86

[email protected]

Initial Experience

This isnt helping me. I am not sure how to start drawing.

Moleskine instruction screen.

To summarize:

If you must use instructions, make them clear and simple.

Focus on a single feature at a time.

Present only those instructions necessary for the user to get started.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

87

Workflow
Occasionally in our testing, participants ran into problems because the workflow was not
transparent enough: users did not know what to do next, how to approach a task, or what
they saw on the screen did not match their expectations.
In the Zappos app, one of our users who had just created his account was trying to
complete a purchase. He was confused about where to enter payment information. When he
tapped the Checkout button again, he got a message asking for payment information and
he wasnt sure where to put it.

One person was confused by Zappos.com because he didnt know where to enter the
payment information. The problem was amplified when he pressed Submit My Order
and the error message mentioned a payment method.
The apps designers expected the user to fill in the shipping address; after that, the app
would have displayed its request for payment information. The user was worried because
there was no clear indication that he would do that later.
Moleskine, a note-taking app, caused a lot of troubles for our participants. They struggled to
figure out how to create a new file. When they pressed the little plus icon at the top, a new
line (highlighted in red) appeared at the top of the list of files. Several users did not notice
that they were supposed to enter something in that line. Those who did were confused by
the options they saw next: selecting a category or creating a new category for the new file.
As if the convoluted workflow was not enough, some of the arrows on the selection screen
were supposed to be buttons and some were supposed to be navigation cues.

88

[email protected]

Workflow

Moleskine. When users press the + icon in the top navigation bar (left), they must
enter the name of the new file in a line above the list of files (right).

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

89

Creating a new file with Moleskine: Users must create a new category for the file,
select a color, then finally choose a label for the category.

90

[email protected]

Workflow

This is a button that can be

tapped.

These are navigation

cues and are not
tappable.

Moleskine uses controls inconsistently. The same arrows can either be targets
that need to be tapped or they indicate the direction of navigation (and users
have to scroll down or up to select the next option).
Users shouldnt be forced to make decisions about non-essential tasks (e.g.,
category, color scheme, label, and even file name) when they are trying to draw or
write down a note.
The flow in the NoteTaker HD app is much more natural. The app lets users start
drawing almost immediately; later on, when they are finished, they can concern
themselves with more sophisticated decisions.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

91

When users tap the + icon in Note Taker HD, they must first choose an option, such
as Default Blank Page, in order to start writing.
In the Wine.com app, all the search fields are at the bottom of the screen. The GO button
that starts the search is above those fields, contrary to the natural direction of flow (down).
Because of that lack of logical flow (and the busy background that blends in with the
background for the GO button), our participants needed some time to find that button and
initiate the search.

92

[email protected]

Workflow

Wine.com. The GO button is above the search fields. It also blends in with the
background and was not noticed by some participants.
To summarize:

The design and position of the elements on the screen must support
the task flow.

The task flow should start with actions that are essential to the main
task.

Users should be able to start the task as soon as possible.

The controls that are related to a task should be grouped together and
reflect the sequence of actions in the task.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

93

Case Study: Magazines on the iPad

Many of the magazine apps we evaluated have made a lot of improvement compared to last
years design. We found that, whereas last year there was a frenzy of new gestures and
attempts to create an immersive experience that lacked any visible interface widgets,
todays magazine apps have made some compromises and consequently meet users
expectations better. We were happy to see that several of the recommendations made in
the first report were followed: the navigation is more transparent, almost all magazines
have one-tap access to tables of contents, they include a Back button, and make a lot more
use of hyperlinks, on the cover and elsewhere throughout the magazine.
The previous sections in this report discuss some of the issues that still generate problems
for the users: the swipe-based navigation, the lack of consistency in content and navigation
across orientations, the long downloading times. Here are a few more design elements that
can cause difficulties.

NAVIGATION BAR
To make the experience more immersive and the magazine app look similar to a paper
magazine, many magazine apps have one or two navigation bars that are hidden. These
navigation bars are displayed if the user taps on the page. (Sometimes tapping in the upper
or lower part of the page is necessary to make the navigation bar show up).
When participants were shown these navigation bars immediately after they loaded a new
issue, they were more likely to know how to use them. When apps such as Wired did not
show these navigation bars in the beginning, users had a harder time finding them
sometimes they first browsed through the magazine pages and an accidental touch revealed
the navigation bar. In some cases (for instance when a user showed us his version of Food
and Wine), the user never discovered the navigation bar.

94

[email protected]

Case Study: Magazines on the iPad

Food and Wine. The navigation bar is exposed by tapping the screen; some users did
not discover it.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

95

Fortune uses a visible navigation bar that is present on the screen at all times users
are just one tap away from any of the navigation options available to them.

96

[email protected]

Case Study: Magazines on the iPad

The Dailys navigation buttons are also shown at all times.

TABLE OF CONTENTS
In a paper magazine people rarely use the table of contents: they typically just browse
through the magazine, even when they search for a specific article. Unlike for paper
magazines, users of iPad magazines tend to use the table of contents a lot more: they often
go back to it to find articles and treat it as hub, even when given ample time and no definite
task other than finding some articles of interest.
Because the table of contents plays a much more important role in magazine apps than in
paper magazines, it is important to make it:

easy to access, and

easy to scan and to read.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

97

Indeed, whenever users did not have a direct link to the table of contents (in apps such as
The Daily or Esquire), they complained. They were annoyed to have to flip through the
magazine or through the page viewer in order to find the page containing the table of
contents.

The Esquire Contents icon opens the article-viewer carousel at the bottom, instead of
going to the table of contents as recommended.

98

[email protected]

Case Study: Magazines on the iPad

Some apps (Time, Fortune) make the Contents link point directly to the table of contents
page in the magazine. Others (examples include Wired, Vanity Fair, Glamour, The New
Yorker) show a popover with all the various article titles.

Tapping the Fortune Contents link in the navigation bar takes the user to the table of
contents for the magazine.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

99

Tapping the Glamour contents icon opens a popover that contains article titles.
The Contents popovers suffer from all the disadvantages discussed in our Popover section:
first, users have to scroll a lot in a small space, and second, the article titles are usually not
explanatory enough for the users to be able to select an article based on them.
In our testing, many participants did not bother to look for an article in the popover they
simply selected Table of Contents in the popover and went there instead. Compare, for
instance, the popover titles with the table of contents descriptions in the latest iPad issue of
Vanity Fair (below).

100

[email protected]

Case Study: Magazines on the iPad

Compare the article information presented in the Vanity Fair content popover to the
article descriptions on the table of contents page. What is Goldmans Alpha War?
The TOCs blurb tells you; the popover doesnt.
The table of contents in the iPad magazine shouldnt be identical with that in the paper
version, because it carries a much bigger load. When users go back to the table of contents,
they treat it as if it were a regular Web page: they scan through the content cursorily and
they often read just the beginning of the sentences. Thats why its important to create
clear, explanatory headlines that convey what the articles are about. The headlines also
need to be consistent with other descriptions of the article that the users may have
encountered elsewhere in the magazine (e.g., on the cover page). And finally, because
users tend to scan text rather than read it carefully, they need to start with content-loaded
keywords and be formatted according to the rules of writing for the Web.
One of our users was searching the Wired magazine for an article about cooking the perfect
French fries; from the table of contents, they selected Mad Science: Nathan Myhrvolds
insatiable hunger to solve our biggest problems, based purely on the word hunger in the
article headline. They did not realize that the word hunger was used metaphorically in the
headline. (Luckily, the article was indeed about using science to cook French fries.)
We recommend:

The navigation bar should contain a table of contents link.

The table of contents link should take the users to the table-of-contents
page in the magazine.

The information in the table of contents should be scannable,

explanatory, and clearly formatted.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

101

SLIDER AND PAGE VIEWER

Most magazines provide a page viewer for the benefit of the user. The page viewer is
essentially a carousel that contains page (or articles) thumbnails; the user can browse
through the page viewer or through the magazine directly.

Time page viewer (portrait mode) is a carousel that shows thumbnails of the first
pages of various articles.
Our participants used the page viewer when they were looking for a specific article
(especially for an article that they had seen before and could recognize by the thumbnail).
The page viewers can vary in sophistication. Time has designed different page viewers for
landscape and portrait mode, to reflect the different navigation schemes in the two
orientations (essentially, Time includes a page in the time viewer if it can be reached
through a swipe gesture).

102

[email protected]

Case Study: Magazines on the iPad

Wired has a two-dimensional time viewer that indicates article length, as well as title,
description, and keywords related to the article.

Wired has a two-dimensional, detailed page viewer.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

103

The New Yorker. Sliding the finger on the page slider displays a box with an article title
and thumbnail.
Some magazines also provide a page slider that permits users to navigate quickly through
the magazine. Almost nobody in our study attempted to use it. (There was one exception, in
the old version of the Vanity Fair app: the user did not notice the navigation bar at the top,
and struggled to navigate using the slider).
The page slider is pretty much useless for several reasons:
(1) It offers very little precision (if you want to go to page, say, 30, you will have to
fiddle a lot with the slider), so basically it can only be used for navigating to a
random page.
(2) Users dont care to navigate to a random page.
(3) Its functionality can be much better accomplished with the other navigation tools
already available (table of contents and page viewer).
(4) It is difficult to use (the user needs to keep a finger on the slider while looking at
the pages).
Because of that, we recommend:
Do not use a page (article) slider.

104

[email protected]

Case Study: Magazines on the iPad

SEARCH BOX
None of the magazine apps that we tested or reviewed had a search box. Users repeatedly
asked for search boxes in the magazines: they wanted to be able to quickly access an
article that they had read a while back, as well as articles that were perhaps recommended
by friends and colleagues.
A search box is also a marketing opportunity for magazines. We think its place should be in
the library of available issues.
Users who could not find the content they were looking for could be directed to results that
are present in other magazine issues that were not downloaded or on the magazine website.
In the absence of an Internet connection, the search could limit itself to the issues that are
already downloaded on the device.

MULTIPLE NAVIGATION SCHEMES

One final word about navigation in magazines: Most magazine apps today seem to have
settled for a dual navigation model: swipe to get to the next article, scroll vertically to read
the article. This model takes users some time to discover, but overall it seems not to cause
major hurdles, as long as the application uses it consistently.
Problems arise when the application imposes a navigation scheme most of the time, only to
violate it occasionally.
In the section on orientation (page 71), we saw examples of inconsistency in navigation
across orientations. Sometimes, however, apps use different navigation schemes depending
on the article. One frequent culprit is the slideshow article (see the example below from
Time): for this type of article, apps often choose to depart from their regular twodimensional navigation and instead go for horizontal navigation.

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

105

Time magazine. Slideshow (as well as a few other articles) violated the normal dual
navigation scheme of the magazine. Users tried to scroll down to see more pictures
and took some time to figure out that they needed to scroll horizontally.
In conclusion:

Do not use multiple navigation schemes in the same app (in different
orientations or in one orientation).

Do not use horizontal navigation for your slideshow if your app supports a twodimensional navigation scheme elsewhere.

SPLASH ARTICLE PAGES

In a dual navigation model, users often browse horizontally through the magazine, looking
at the various pages and deciding whether they want to scroll down to read more. Because
of that, it is important that the first page of the article conveys the right information about
the article. Often a picture, as well as a paragraph, is necessary to give users enough detail
about the article content. Users can read the paragraph and get absorbed by the article, or
decide its not for them.

106

[email protected]

Case Study: Magazines on the iPad

Vanity Fair. The first page of the article is not descriptive enough: what is this article
about?

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

107

Wired. The first page shows a picture but also a paragraph from the article. Users can
decide more easily if they want to read the article or not.

108

[email protected]

Case Study: Magazines on the iPad

Methodology
The guidelines discussed in this report are based on two different studies: a traditional
usability-testing study using the think aloud protocol, and a design-review study. Next we
discuss each of these studies individually.

USABILITY TESTING
Overview
We conducted a traditional usability study using the think aloud methodology. The purpose
of the study was to understand the typical usability issues that people encounter when using
applications and websites on the iPad. All participants were iPad users who had owned an
iPad for at least two months. The study took place at our location in Fremont, CA.
At the beginning of each session, we briefly interviewed participants about their iPad-related
practices. Participants also showed us the apps that they had installed on their iPad.
Sometimes we created tasks based on the apps that they had installed and asked users to
perform them.
In the second part of the session, we asked users to perform specific tasks. 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 the iPad was recorded using a document camera (Elmo TT02RX). 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
A total of 16 people participated in our study: 8 males and 8 females. The following table
shows the age distribution of the test users.

2130

3140

4150

51+

All participants owned an iPad and used it several times per week for a variety of activities.
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.
Following is a partial list of participants occupations:

Realtor

Personal chef

Commercial property manager

Office manager

Homemaker

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

109

VP of Human Relations

MBA student

Method
Each session was divided in several parts:
1. Participants were asked a few questions related to how they use their iPad:
Please tell me what kinds of activities you do on your iPad.
Is there anyone else who uses your iPad?
Do you take your iPad with you when you are away from home?
2. Participants were asked to talk briefly about various apps that they had installed on
their iPad. We only inquired about apps that (a) were designed specifically for the
iPad; (b) were not games. For some of these apps, the facilitator created some adhoc tasks and asked the users to perform them.
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 their
iPad apps (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 participants 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.

Amazon Mobile

Find a birthday gift for yourself.

Bloomberg

How do you display your favorite news topics on

the first page?

The Daily

Find a story of interest and make sure you can

get back to it later.

Fandango

Find a movie you may want to watch during the

weekend and buy tickets for it.

Indian Vegetarian Restaurant

Look for a vegetarian restaurant around this area.

Kayak

Book a flight from San Francisco to Dallas for the

first weekend in June.

110

[email protected]

Methodology

Netflix

Add a movie to your instant queue.

NPR

Listen to the last Science Friday.

USA Today

Check the latest entertainment news.

WebMD

Your spouse fainted earlier today. What might he

have?

Tasks. The following table shows some of the tasks that we used for the study (in part 3
from the Method section). All the apps that we tested were specifically designed for the
iPad. For some of the apps, we had users 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.

APP OR WEBSITE

TASK

ABC News

Check the latest news.

Amazon Windowshop
(amazon.com)

Look for a birthday gift for yourself.

Amazon Windowshop
(amazon.com)

Look for a flexible iPad keyboard.

BigOven

Find a recipe for lamb roast.

Bing

Check the latest world news.

Bing

Youre going to the movies on Friday night. Find a

movie to watch.

The Daily

Find the latest news about the earthquake in

Japan.

Flipboard

Check the latest news. Set up the app to show

the news topics that interest you.

Fortune

Find an article about the President's plan to deal

with the housing crisis.

Fortune

Figure out what makes the largest part of the cost

of an airplane ticket.

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?

Marketboard

Check the stock price for Bank of America. How

did that change in the past year?

Martha Stewart Cookies Lite

You have 1/2 pound of chocolate that will expire

soon. Find a recipe where you could use it.

Moleskine

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

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

111

person remember how to get there.

NASA

Find more information about Mars. When was

water discovered on Mars? Does it have any
moons and how are they called?

NASA

Find some pictures taken by Cassini, a spacecraft

that has completed several missions to explore
Saturn.

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.

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.

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?

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 various articles featured in the

magazine.

Vanity Fair

A friend has recommended an article about the

movie All the Presidents Men starring Robert
Redford. Find the article and see if it is interesting
to you.

Washington Post
(washingtonpost.com)

Check the latest entertainment news.

Wine.com

Friends are visiting from abroad and you want to

take them to Napa Valley for a day trip. Find 23
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.

112

[email protected]

Methodology

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 and in our first
iPad study. A document camera (Elmo TT-02RX) recorded the iPad and streamed the
recording to a laptop computer, connected through the camera using an USB port. A
webcam was used for recording the participants 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 iPad 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 REVIEW
For the design reviews, one usability expert reviewed the apps and websites mentioned in
the task table, as well as other iPad apps and websites. We reviewed many of the apps that
were mentioned by the participants, as well as other apps, including:

Crackle
AP News
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

NIELSEN NORMAN GROUP

WWW.NNGROUP.COM

113

About the Authors

Raluca Budiu, Ph.D. is a User Experience Specialist with Nielsen Norman Group. At NNG,
she conducts usability research and regularly presents seminars on a variety of topics,
including mobile website design, mobile phone and tablet app design, as well as cognitive
psychology and research in humancomputer interaction. She also consults for a variety of
clients from industry and the government. She previously worked at Xerox PARC, doing
research in humancomputer interaction. At PARC, she built computational models of how
people search for information in visualizations of large data structures. She also explored
new ways of measuring information scent and conducted research on interfaces for social
bookmarking systems and on the cognitive benefits of tagging. Budiu has also been a user
researcher at Microsoft Corporation, where she explored future directions and made
strategic recommendations for incorporating user-generated content and social web
features into MSN. Budiu has authored more than 20 articles and conference presentations
on humancomputer interaction, psychology, and cognitive science. She holds a Ph.D. in
Computer Science from Carnegie Mellon University.
Jakob Nielsen, Ph.D. is a principal of Nielsen Norman Group. He is the founder of the
discount usability engineering movement, which emphasizes fast and efficient methods for
improving the quality of user interfaces. Nielsen, noted as the worlds leading expert on
Web usability by U.S. News and World Report and the next best thing to a true time
machine by USA Today, is the author of the best-selling book Designing Web Usability: The
Practice of Simplicity (2000), which has sold more than a quarter of a million copies in 22
languages. His other books include: Hypertext and Hypermedia (1990), Usability
Engineering (1993), Usability Inspection Methods (1994), International User Interfaces
(1996), Home page Usability: 50 Websites Deconstructed (2001), Prioritizing Web Usability
(2006), and Eyetracking Web Usability (2010). Nielsens Alertbox column on Web usability
has been published on the Internet since 1995 and currently has about 200,000 readers.
From 1994 to 1998, Nielsen was a Sun Microsystems Distinguished Engineer. His previous
affiliations include Bell Communications Research, the Technical University of Denmark, and
the IBM User Interface Institute.

114

[email protected]

About the Authors

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 dont 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 usersin personin 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: Weve 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 Nielsens 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