Mobile App Usability For Touchscreen Phones and Tablets: Best Practices: Cheat Sheet

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 6

Mobile App Usability for

Touchscreen Phones and Tablets


Best Practices: Cheat Sheet
MOBILE APP STRATEGY
1. Choose app names that are unique, recognizable, and memorable.
2. Choose an application icon that is descriptive and easy to recognize.
3. Your app description should clearly explain what the purpose of the app is and if it
has any special features compared to other apps (and especially, to the free or paid
version of the same app).
4. Your app description should not be too long.
5. Advertise the app on your mobile website. Make sure that you promote the right
platform on the right device.
6. Advertise the app as a link on your homepage rather than on a separate page.
7. Full websites work reasonably well on large-screen tablets such as the iPad.
8. Find a core function and design around it.
9. Keep the app functionality simple.
10. Don’t add features that are unrelated to your core function.
11.Make the task flow as simple as possible. Include only the actions that are essential
for accomplishing the task.
12. Do not implement your full desktop app on mobile.
13. For the phone variant of your desktop app, choose only a small subset of features
that revolve primarily around consuming rather than producing content.
14. Design for a continuous experience across platforms (desktop, tablet, mobile).
15. Stay true to the conventions of each operating system (Android, iOS, etc.).
16.Don’t use an immersive app if you cannot make it completely coherent with the
users’ expectations.
17.Even if the app is not completely immersive, well-selected immersive elements can
make it more enjoyable.
18. Make sure that the immersive elements make the users’ task easier rather than
harder.

INPUT: THE TOUCH SCREEN


19. Widget target area (i.e., tappable area) should be at least 1cm X 1cm.
20.Do not crowd targets. Leave generous amounts of space around widgets such as
radio buttons, arrows for dropdown boxes, checkboxes, scrollbars, and links.
21.Do not rely on small padded targets.
22. Use padding for tabular views.
1 Mobile App Usability for Touchscreen Phones and Tablets
Best Practices: Cheat Sheet | Nielsen Norman Group
23. Create the right touch affordance for targets: make them look tappable.
24. When a design element looks like a button, users will expect it to be a target.
25.(iOS) Build a back-as-undo button into your app. For other platforms, make sure
that the physical back button works properly as an undo button and allows users to
return to the previous page.
26.(iOS) Have a back-as-undo button on the homepage.
27. Place destructive buttons far away from the physical device buttons.

GESTURES
28. Use only the more familiar gestures (tap, drag, swipe). Do not rely on users
knowing and remembering more complicated gestures.
29. Avoid assigning different functionalities to similar gestures.
30. Take advantage of the natural affordances for gestures.
31. If you must use less familiar or less discoverable gestures, add some redundancy in
the interface.
32.Use contextual tips to make gestures more discoverable.
33. In most situations, users need cues to figure out that they’re supposed to use the
horizontal swipe gesture.
34. Don’t use the horizontal swipe gesture for navigation on a new screen and for
carousel navigation on the same page.
35. On touchscreens, users expect to use the swipe to control a carousel.
36. In content-reader apps, it should be possible to turn pages both by tapping the
page margins and by swiping horizontally.
37. When displaying images (or video) full screen, allow users to get to controls by
tapping on the image.
38. When displaying images full screen, start by showing the controls, then fade them
away.

ORIENTATION
39. Support both phone orientations (landscape and portrait) whenever possible.
40. Don’t make users switch between orientations often.
41. Most apps should not display different content (or different interface widgets) in
different orientations.
42. Apps that display data can use landscape to fit extra detail.
43. Whenever an app uses landscape for extra information, it should let users know
(e.g., by displaying a tip or a message).
44. Do not ascribe different content to the two possible landscape orientations (physical
buttons left or right).
45. With the exception of using landscape for detailing a chart or similar information,
display the same content in different orientations.
46. Keep navigation consistent in all orientations.

2 Mobile App Usability for Touchscreen Phones and Tablets


Best Practices: Cheat Sheet | Nielsen Norman Group
LOCATION AND MAPS

Current Location
47. Avoid asking repeatedly for permission to use the current location.
48. Avoid asking for permission to use the current location when the app is first
launched.
49. Users must know why the app needs the current location before giving permission
to use it.
50.Trigger the current location alert just before that feature is necessary.
51.Include a setting in your app that allows users to permit the use of the current
location.

Locator Forms
52. If your company has one brick-and-mortar location, list it in your app or mobile
website. If the company has multiple locations, include a locator form in your mobile
app or on your mobile website.
53.In a locator, use two possible values for location: automatically-detected current
location and location specified by user.
54. In a locator form, always give priority to the current location.
55. Allow users to easily change location.

Displaying Location Information


56.Whenever you have location information on your website, link it to a map and
include a way of getting directions.
57.When displaying location information, show address, distance from current location,
link to map and directions, phone, and opening hours (if applicable).
58. When displaying locations on a map, start with a zoom level that enables the user
to see his current location (or the location specified by the user) and at least one of
the locations of interest.
59.Allow users to switch between a list view and a map view of locations.
60.If locations have different attributes of interest to the user, provide the list of
locations by default.
61. If locations are all equivalent (except for distance), provide a map view of locations
by default.
62.In a list of locations, show how far locations are from the current location. List
locations in the order of distance from current location.

STRUCTURING YOUR APP

Navigation
63. (iOS) Do not have more than 5 items (7 for tablets) in the tab bar.
64. Avoid using a More tab in your tab bar.

3 Mobile App Usability for Touchscreen Phones and Tablets


Best Practices: Cheat Sheet | Nielsen Norman Group
65. If you have a More tab, only functions less essential to your app should be under
that tab.
66.When you have many navigation options, consider using a list or a grid instead of a
tab bar.
67.(Android) Avoid migrating toolbars and tab bars under the menu physical button or
under the action overflow.
68.(Android) Avoid changing menu-button/action-overflow functionality within the app.
69.(Android) Consider putting only non-essential options under the menu button or
under action-overflow.
70. All frequently-used or important navigation options should be visible on the screen.
71. Get users to content as soon as possible rather than asking them to move through
long sequences of navigation layers.
72. Don’t hide contextual settings (that depend on users’ selections or actions) under
global navigation options.

Search
73.Include a search function if your app deals with a lot of data.
74.Whenever search is central to an app, include a visible search box on the screen.
75.Do not hide search under the More tab.
76. (Android versions older than 4.0) Use the physical search button to search within
the app rather than the Web.
77. Don’t make search contextual. The scope of the search should be the same across
the app.

INITIAL EXPERIENCE
78.Keep launching time to a minimum.
79. If users must wait for more than 20 seconds, give them something to do while
waiting.
80. Don’t use a launch screen if possible.
81. If you must use a launch screen, make it similar to the first screen of the app.
82. Don’t start with a video or a sound effect.
83. Preload data for the first launch.
84. Update data for the users.
85. Don’t ask users to delete an app and install it again.
86.Save state: if users come back to an app, continue the session from where they left.
87.Make the app functional without login.
88.Deliver value before asking users to enter any information.
89. Do not ask users to accept push notifications when they first launch an app.
90.Avoid displaying an end user license agreement whenever possible,

4 Mobile App Usability for Touchscreen Phones and Tablets


Best Practices: Cheat Sheet | Nielsen Norman Group
INSTRUCTIONS AND HELP
91. User manuals are not useful, nor should they be necessary on mobile.
92. Users cannot read the help and use the app at the same time.
93. If you decide you absolutely need a user manual, make sure that it’s easy to read.
94. Meaningful, contextual tips can be helpful.
95. Do not flood users with tips.
96.Do not overwhelm users with information when they first start an app.
97. Present tips when the app is launched or when data is loading.
98. Allow users to disable tips.
99.If a user has used a feature 2-3 times in a recent session, don’t show a tip for that
feature anymore.

TYPING AND FORM CONTROLS


100.Show a keyboard appropriate for the input that the user is supposed to type.
101.Whenever a long list of options is present, allow users to type the name of the
selected option.
102.In long forms, separate edit from selection to avoid covering the form with the
keyboard.
103.Use the phone features (camera, GPS, voice recognition, accelerator, etc.) to let
users input text faster.
104.Group related controls.
105.Place the Submit button under the form rather than at the top.
106.Do not use spinwheels for items that don’t have a natural order.
107.Do not use sliders for inputting precise values. Only use sliders when the exact
value is not important.

ALERTS, MODAL DIALOGS, POPOVERS, AND TOASTS

Alerts
108.Use alerts infrequently to indicate a change in the app or the device.
109.Do not use alerts as a result of users’ recent action (e.g., to signal an error in a
form).
110.Alert message should be succinct.
111.Use two buttons for alerts.
112.Do not use alerts to display instructions or to advertise content.

Modal Dialogs and Popovers


113.Don’t use dialogs within modal dialogs.
114.Don’t cram a lot of information in a popover.

5 Mobile App Usability for Touchscreen Phones and Tablets


Best Practices: Cheat Sheet | Nielsen Norman Group
115. Popovers should not block background content that is needed in order to complete
an action within that popover.
116. Don’t use popovers if the user will need to scroll to see all the data in the popover.
117. Make sure that the items in the popover are displayed in a readable font.

Toasts
118.Use toasts to display light, contextual tips or feedback.

NOTIFICATIONS
119.Do not ask people to accept push notifications the first time they launch an app.
120. When asking users to accept notifications, tell them what the notifications will be
about.
121.Avoid turning on sound notifications unless people explicitly turn them on.
122.Make sure that people can easily turn notifications on or off.
123.(iOS) Do not ask users to go to the iPhone Settings to turn on notifications. Allow
them to turn notifications on within the app.
124. Keep the notification content brief.
125. Don’t abuse notifications.
126. Use notifications for time-sensitive updates or communication-related updates.

HYBRID APPS
127.Do not send users to a full website from an app.
128.If the app takes the user to an in-app browser, don’t present an ad for the same
app again.

6 Mobile App Usability for Touchscreen Phones and Tablets


Best Practices: Cheat Sheet | Nielsen Norman Group

You might also like