Mobile Websites and Apps: Essential

Usability Principles
MOBILE STRATEGY

Should You Go Mobile?

1.If your budget allows for a mobile platform (website or app), build one: your users
will do better with it.
2. Use site analytics to determine how many full-site accesses come from mobile
devices and to decide whether it’s worth building a mobile platform.
3. Build a mobile platform if people use your site to communicate with each other.
4. Build a mobile platform if people come to your site to kill time and browse.
5. If your site has content that changes often (e.g., once a day, or several times a
day), create a mobile platform.
6. Build a mobile platform if people do small, quick transactions on your site under
time pressure.
7. Build a mobile site if you provide content that is likely to be needed when people
are away from home.

Which Phone to Design for?

8.If budget allows, build a different mobile website for every major type of phone
(feature, smartphone, touch).
9.If you must build only one mobile site, build a site for the high-end phones (touch
phones and smartphones).
10. Consider feature phones for your design if (a) you have a browsing site; or (b) a
third or more of your users access your site on feature phones; or (c) your site is
used for communication (e.g., social networking).

Application Versus Website

11. Build an app for repeated and frequent usage.
12. Build an app to support one task.
13. Build an app if you need access to phone features beyond GPS (e.g., camera,
compass, calendar, email, gestures).
14. Build an app if your app needs to work offline.
15. Build an app if your data can be stored on the phone and does not change often.
16. Build a website for supporting several highly related activities.
17. Build a website if your data is accessed through a web server.
18. Use responsive design if you have the same content and tasks on desktop and
mobile.

1 Mobile Websites and Apps: Essential Usability Principles | Nielsen Norman Group
 19. When designing a mobile site, minimize the number of clicks required to complete a
task.

What to Include on Mobile

20. Tasks that have a deadline are more likely to be done on mobile devices.
21. Tasks that involve rapidly changing information are more likely to be done on
mobile devices.
22. Tasks that require privacy are more likely to be done on a mobile device.
23. Finding information about businesses is a task likely to be done on a mobile device.
24. Finding directions and public transportation information, as well as information
needed in an emergency are tasks likely to be done on a mobile device.
25. Tasks that require communication with others are likely to be done on mobile
phones.
26. The response to a user question on mobile and on desktop should be the same.

GETTING TO THE SITE

27. Detect if users are coming to your site on a mobile phone and direct them to your
mobile site.
28. Don’t ask users if they want to go to the full site or to the mobile site on a separate
page.
29. Include a link to your mobile site on your full site.
30. The link labeled “Mobile” on your full site should not point to information about your
mobile site.
31. Use the word “mobile” in the title of your mobile site.
32. Use SEO to increase the visibility of your mobile site.
33. Standard domain names and URLs (m.site.com, mobile.site.com, site.mobi,
www.site.com/mobile) should all point to your mobile site. If you can afford only
one of these domains, use m.site.com.

MUST-HAVE ELEMENTS OF YOUR MOBILE SITE

34.Include a link to full site.
35.On your mobile site, place the link to your full site at the bottom of the page. Call it
“Desktop site” or “Full site”.
36.On mobile sites, include company logo on every mobile page.
37.Include an explicit “Home” link on internal pages. Do not rely on the logo for taking
users to the homepage.
38.On mobile sites, include company phone number on homepage.
39.Include store locators and business hour information.
40.Allow saving and sharing of content seen during session (e.g., email, Facebook, wish
lists).

2 Mobile Websites and Apps: Essential Usability Principles | Nielsen Norman Group
INPUT
41.Use auto-complete and suggestions whenever users fill in a textbox.
42. Allow for typos and abbreviations.
43. Use personalization and history to provide good defaults for text that needs to be
input.
44.Whenever possible, allow users to input data by using the camera or their voice.
45. Use GPS information to detect location automatically and allow the use of current
location.
46. Allow users to easily delete default field values.
47. Where possible, compute field values rather than asking the users to enter them.
48. Do not make people memorize information from one page to another.
49. Make textboxes long enough so that users don’t have to scroll within.
50. Allow users to paste information into an input field.
51. Allow users to copy any content that you may present to them.
52.Clear placeholders when the user starts typing in the associated text box.
53.Use textboxes wide enough so that the users don’t need to scroll within.
54.Do not rely on user memory; prepopulate coupon fields for users rather than asking
them to memorize the coupon codes.
55.Link to a calendar when users have to enter a date.
56.Link to directions whenever an address is displayed.
57.Disclose in advance all the information that users need in order to fill in a field (e.g.,
length of field, characters allowed).

MENUS
58.Make sure that your menus look expandable. Use menu labels that clearly indicate
that they expand to a set of options.
59. Make sure that all the text of each option in a dropdown is visible.
60. Do not use dropdowns (or pickers) if you have many items and users need to scroll
a lot to read all of them.
61. When there are more than 4-6 options available, consider using accordion menus.
62. If most users will not use the content of an accordion menu, display it closed by
default.

CAROUSELS
63. Do not use animated carousels. Use carousels that can be controlled by users.
64. Do not separate the carousel controls from the carousel.
65. Use cues to show users that they can see more items in a carousel.
66. Do not display more than 4-5 screens in a carousel.

3 Mobile Websites and Apps: Essential Usability Principles | Nielsen Norman Group
FINDING CONTENT: SEARCH, FILTER, SORT

Search
67. Include a search box on your mobile website or in your app.
68. If your users are mostly browsers, consider making the search box less salient by
placing it at the bottom of the page.
69. Put the search box at the top of your screen unless your users are mostly browsers.
70. The length of the search box should be the largest possible size that will fit on the
screen.
71. Preserve search strings between searches. Use auto-completion and suggestions.
72. Do not use several search boxes with different functionalities on the same page.
73. If the search returns zero results, offer some alternative searches or a link to the
search results on the full page.

Lists
74.Unless the list is excessively long (e.g., more than 300 items), all the items on a list
should go on the same page if they are text only.
75. List of items that include images should be split into multiple pages or presented in
an expandable list format (we recommend between 20-30 items per download).
76. If the list contains only one item, take the user directly to that item.
77. In a long list organized alphabetically, allow users to easily jump to a certain letter.
78. In a long list, give users the option to type the name of the item.
79. Do not use a deck-of-cards model (i.e., one item per page) for lists.

Filter and Sort

80. If a list of items can be sorted according to different criteria, provide the option to
sort that list according to all those criteria.
81. If a list contains items that belong to different categories, provide filters to narrow
down the number of elements.
82. Place the sort/filter options above the search results. If extended space is needed
for the sort/filter options, either use an expandable menu or place them at the
bottom of the page, but use jump links from the top of the page to the bottom.
83. Submit all filters at once, rather than submitting them one by one as the user
selects them.
84.Use accordion menus for filters.
85. When narrowing down results, show facets and number of items in each category.
86. When users have narrowed down a list, indicate the selected filter or sort criteria.

FORMS
87. In a form, put the field description above the textbox. Use the colon “:” to indicate
that the description refers to the textbox below.

4 Mobile Websites and Apps: Essential Usability Principles | Nielsen Norman Group
 88. Make sure that all the fields in the form are aligned.
89. To signal an input error in a form, mark the textbox that needs to be changed.
90. The error message in a form should be next to the error (and not at the top of the
form).
91. Don’t use alerts or fading popups to signal an error.
92. On a website, minimize the number of submissions (and clicks) that the user needs
to go through in order to input information on your site.
93.For transactional forms, review all info on a single screen (no scrolling) before
having the users submit the form.

Logging in and Registering

94. Do not ask users to log in or register unless absolutely necessary for security
reasons.
95.Don’t ask users to log in or register (or enter extensive information) before
delivering any value to them.
96.Explain to users what benefits they get by registering.
97.Within apps, do not ask people to register to save information (e.g., favorites).
98. When logging in must be done, consider letting users define a numerical pin.
99. When logging in must be done, have an option that allows the user to see the
password in clear.
100.When users need to create a password, tell them if the password has to satisfy any
constraints (e.g., number of letters in the password).
101.Always have a guest checkout option.
102.The guest checkout/skip registration option should always be the first option
displayed on the checkout page.
103.Whenever registration is an option on mobile, require only the minimum information
to create an account. Let users add extra information at later times.
104.Don’t ask users to confirm their registration through email.
105.Place both the Sign In and Register buttons under the login form, one next to each
other on the same line.

NAVIGATION
107.Include navigation on the homepage of your mobile website.
108.Use navigation bars or menus on content-heavy, browsing sites.
109.Use the homepage as a navigation hub on task-oriented sites.
110.On homepages of browsing sites, give priority to new content over navigation links.
111.Include at a link to navigation on every page of your mobile website.
112.Avoid deep hierarchies on mobile.
113.Use breadcrumbs on sites with a deep navigation structure (many navigation
branches). Do not use breadcrumbs on sites with shallow navigation structures.

5 Mobile Websites and Apps: Essential Usability Principles | Nielsen Norman Group
 114.Place together links that are related to the same topic.

CONTENT
115.Use formatting and concise writing for quick reading.
116.Avoid splitting articles in many pages.
117.If an article spans several pages, use pagination at the bottom. Have a link to each
individual page, rather than just to the previous and the next ones.
118.Use links with good information scent (that is, links which clearly indicate where
they take the users) on your mobile pages.
119.Use links to related content to help the user navigate more quickly between similar
topics.
120.On browsing sites, new content should be given priority. Users should not have to
scroll to get to new content.
121.Use true article summaries on the headline page. Do not use the first few
sentences of the article.

IMAGES, ANIMATION, AND VIDEOS

122.Include images on your website only if they add meaningful content. Do not use
images for decoration purposes only.
123.Do not use image sizes that are bigger than the screen. The entire image should be
viewable with no scrolling.
124.For cases where customers are likely to need access to a higher resolution picture,
initially display a screen-size picture and add a separate link to a higher resolution
variant.
125.When you use thumbnails, make sure that users can distinguish what the picture is
about.
126.Use captions for images that are part of an article if their meaning is not clear from
the context of the article.
127.Do not shuffle text around as images get loaded.
128.Do not use images of text for navigation links.
129.Do not use moving animation.
130.If you have videos on your site, offer a textual description of what the video is
about.
131.Clicking on the thumbnail and clicking on the video title should both play the video.
132.Indicate video length.
133.Specify if the video cannot be played on the user’s device.

ERRORS
134.In a form, mark fields that need to be corrected to signal an error.
135.Do not make users download software or data that do not work on their phone.
136.Flash does not work on all phones; do not use it.

6 Mobile Websites and Apps: Essential Usability Principles | Nielsen Norman Group
 137.Make error messages salient and simple. Tell users (1) what the problem is, and
(2) what they can do to fix it.
138.After reporting an error, return to the state before the error.
139.Don’t report an error regarding a feature that is not in use.
140.Those features of the app that do not demand internet access should be functional
when the connectivity is absent. If possible, pull data when the user is online and
present it when they are offline.

PROGRESS INDICATORS
141.Whenever your app is downloading content, show a progress indicator.
142.Prefer progress bars to spinning gears or other indicators that don’t show real-time
progression.
143.For larger downloads (e.g., videos, magazines), give users an estimate of how long
the download it’s going to take.
144.Use progress indicators to show how long users have to wait. Prefer progress bars
for tasks that take more than 1-2s. Avoid making people wait for more than 15-20s.
145.If your download is longer than 15-20s, show a preview of the content being
loaded or find another way of maintain user attention.

7 Mobile Websites and Apps: Essential Usability Principles | Nielsen Norman Group