iPad Usability Best Practices Checklist

5
August, 2011 iPad Usability Best Practices Checklist LUON | www.luon.com 1 Introduction In 2010, the year the iPad launched, The Nielsen Norman Group conducted a first usability study reporting how real users actually used a broad variety of iPad apps as well as websites accessed on the iPad. In 2011, they did a second round, fine- tuning their previous findings. The results are two +100 pages reports containing their findings, recommendations and screenshots. This document synthesizes these recommendations onto 5 pages for use as a quick reference or checklist. The full reports can be downloaded for free from the Norman Nielsen Group website: http://www.nngroup.com/reports/mobile/ipad/ Geert De Laet Technology evangelist LUON

Transcript of iPad Usability Best Practices Checklist

Page 1: iPad Usability Best Practices Checklist

August, 2011

iPad Usability Best Practices Checklist

LUON | www.luon.com 1

Introduction

In 2010, the year the iPad launched, The Nielsen

Norman Group conducted a first usability study

reporting how real users actually used a broad

variety of iPad apps as well as websites accessed on

the iPad. In 2011, they did a second round, fine-

tuning their previous findings. The results are two

+100 pages reports containing their findings,

recommendations and screenshots.

This document synthesizes these recommendations

onto 5 pages for use as a quick reference or

checklist.

The full reports can be downloaded for free from

the Norman Nielsen Group website:

http://www.nngroup.com/reports/mobile/ipad/

Geert De Laet

Technology evangelist

LUON

Page 2: iPad Usability Best Practices Checklist

iPad Usability Best Practices Checklist

LUON | www.luon.com 2

Features

Assume you’re designing for a multi-user device

iPads are more a family device than a true personal

device.

Design for repeat users

Apps work best when they are designed for

customers who are already fans of the brand and

engage with it on a regular basis.

Your iPad app should have a secret weapon

compared to your website, it should deliver extra

value

Do not make users work more in your iPad app

than on your website

Example: don’t make users pay or register for an

app containing freely available content from the

website

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

app.

The iPad is less ‘mobile’ than the iPhone and used

in another context where a condensed, space-

saving presentation of information does not apply.

If a feature is only available in one orientation, tell

users that they will find extra content by turning

the tablet

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

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

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

Provide a search box

Content

Make sure your app contains enough content for

research.

Especially for e-commerce apps, people are unsure

about how secure iPad is compared to other

devices. Hence they will not very often buy via

their iPad, but rather browse and research items

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 breaking points (e.g. new

paragraph) and keep those in both orientations.

Epicurous.com secret weapon: recipes in a

format easy-to-read in the kitchen

Page 3: iPad Usability Best Practices Checklist

iPad Usability Best Practices Checklist

LUON | www.luon.com 3

If you must include instructions, make them clear

and simple

If you must include instructions, focus on a single

feature at the time.

Present only those instructions that are necessary

for the user to get started

Design

Beware of read-tap asymmetry

Read-tap asymmetry is the effect that content is

readable, but the links and widgets are too small to

touch reliably

The best target size for widgets is 1cm x 1cm for

touch devices

Don’t place targets to close to each other

Use padding as a solution for small targets

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

devices, users expect padding in tabular views!

Make buttons look tappable

Users don’t know that something is touchable

unless it looks so

Make efficient use of the big screen

Use popovers only

if the content is only a few lines and there is no

scroll

if the user needs information from the

underlying page (in which case it should be

readable)

Otherwise, use a tabular view on a page

Bing instructions are clear and simple.

They focus on a single feature.

Tapping anywhere inside the cell will

activate the button

An example of a popover with few lines and

no scroll.

Page 4: iPad Usability Best Practices Checklist

iPad Usability Best Practices Checklist

LUON | www.luon.com 4

Use small modal views only if there’s enough space

to display all needed info

Otherwise, if there’s a lot of content to display like

for example on product pages, use a separate page

If you use swipe gesture for navigation,

make sure that the page contains enough space

safe for swiping next to the two vertical sides

avoid covering the pages with carousels and

other design features that interfere with swiping

During the initial download of the app, display a

progress bar, not a spinning gear

The controls that are related to a task should be

grouped together and reflect the sequence of

actions in the task.

Do not use startup sounds, animations or videos

Navigation

Don’t use the logo for navigation

If you use swipe gesture to navigate, give visible

cues (arrows, tips) to indicate the direction of

navigation

Add a back button to the navigation bar, and make

sure that it also works on the home page

Use the same navigation scheme in landscape and

portrait mode

For iPad magazines, the navigation bar should

contain a table of contents link taking the user to a

table of contents page in the magazine.

Especially for iPad magazines, where the table of

contents is often used, make sure that it is

easy to access

scannable, explanatory & clearly formatted

Use navigation bars built into the actual page

rather than the iPad’s tab bar at the bottom.

The iPad’s tab bar at the bottom is far less

frequently used than its iPhone equivalent.

When designing a carousel for navigation, it is

important to move the carousel display so that it

starts or is centered around the product or article

that the user is inspecting

Modal views are little ‘popup’ windows that block the underlying page until closed

A carousel is an interface element used for scrolling through items on part of the page.

Page 5: iPad Usability Best Practices Checklist

iPad Usability Best Practices Checklist

LUON | www.luon.com 5

User input

Minimize user input on the iPad:

Compute information for the user

Be tolerant of typos and offering corrections

Save history and allow users to select previously

typed info

Use defaults that make sense for the user

Keep the user logged in if the app doesn’t store any

sensitive information

Allow the users to decide if they want to be kept

logged in if the app contains sensitive info

About LUON

LUON is a customer relationship marketing agency.

By developing campaigns and programs based on

smart ideas, relevant content and a matching

experience, we help brands benefit from a fruitful

relationship with their customers. It's all a matter

of making the right offer at the right moment in the

customer’s lifecycle, across all relevant interactive

media.

Every project we work on is based on clear and

measurable objectives. Which helps us in our

burning ambition to achieve extraordinary Return

On Marketing Investment, together with great

clients such as Unilever, Sony Ericsson, Vaillant,

Tech Data, Thomas Cook, Microsoft, Fnac and Ello

Mobile.

Contact

Geert De Laet

Technology evangelist

[email protected]

@geertdelaet

Gert Lintermans

Client Services Director

[email protected]

+32 478 32 46 00

LUON bvba

Brusselsesteenweg 560 - 3090 Overijse – Belgium

T +32 2 686 00 10 - [email protected] - @LUON

http://www.luon.com/