Here’s a list of NN/g’s most useful articles and videos about the mobile user experience. Within each section, the resources are in recommended reading order.
- Designing for Mobile and Tablets: General Considerations
- Mobile Interaction Design
- Mobile Navigation
- Content on Mobile
- The Initial Experience on Mobile
- Gestures
- Other Mobile-Specific Features
- Multitasking
- Responsive Web Design
- Cultural and Individual Differences
- Other Devices Beyond the Smartphone
- Mobile Ecommerce
- Usability Testing on Mobile
- History
- Reports
Designing for Mobile and Tablets: General Considerations
This section discusses some general considerations about the strengths and limitations of mobile as a medium. Start with this section to get an overview of the field.
|
Number |
Link |
Format |
Description |
|
1 |
article |
Strengths and limitations of designing for mobile |
|
|
2 |
article |
Why following basic UX guidelines is even more important on mobile than on desktop |
|
|
3 |
article |
An overview of the general state of mobile user experience |
|
|
4 |
article |
Main design issues encountered in user research on tablets |
|
|
5 |
article |
The common channels, strengths, and context of use for mobile (and other) devices |
|
|
6 |
article |
Defining the different types of mobile apps |
|
|
7 |
article |
The phenomenon of feeling out of control over the amount spent online and on mobile devices |
|
|
8 |
video |
Mobile Interaction Design
The articles in this section discuss how to design basic user-interface elements for mobile.
|
Number |
Link |
Format |
Description |
|
1 |
article |
Recommended sizes for touchscreen buttons and other targets |
|
|
2 |
article |
Pros and cons of accordions on mobile |
|
|
3 |
article |
Research investigating the best icon to use for an accordion |
|
|
4 |
article |
Guidelines for when to use sliders on mobile and how to make them usable |
|
|
5 |
article |
Best practices for carousels on mobile |
|
|
6 |
video |
||
|
7 |
article |
Guidelines for designing a text field on mobile |
|
|
8 |
video |
How help users enter information on mobile by taking advantage of camera, GPS, and other phone features |
|
|
9 |
article |
Why dots, Submit at top, and the Plus (+) and Move icons create usability issues |
|
|
10 |
Accidental Dismissal of Overlays: A Common Mobile-Usability Problem |
article |
Why users often use the wrong method to dismiss overlays |
|
11 |
article |
Benefits and downsides of infinite scrolling |
|
|
12 |
video |
Mobile Navigation
Navigation can be a tricky subject on mobile due to the limited screen space that is available to the designer. Several of the resources below discuss mobile-navigation patterns and how to use them properly.
|
Number |
Link |
Format |
Description |
|
1 |
article |
A discussion of various mobile-navigation patterns and when to use each |
|
|
2 |
article |
How crosslinking on mobile can alleviate some of the problems of hidden navigation |
|
|
3 |
article |
Common patterns for implementing mobile subnavigation and when to use which |
|
|
4 |
article |
Why split buttons for navigation work poorly on mobile and what to use to accommodate submenus and category landing pages |
|
|
5 |
article |
Why text menu are preferrable to image grids at higher levels of the information architecture |
Content on Mobile
Content on mobile can be harder to remember and comprehend than on desktop. These articles discuss how to present a variety of content types on mobile so that they can be easily processed by users.
|
Number |
Link |
Format |
Description |
|
1 |
article |
A 2011 study that showed that comprehension was poorer on mobile than on desktop |
|
|
2 |
article |
A 2016 study that found that the desktop comprehension advantage disappears for easy passages, but is still there for hard ones |
|
|
3 |
article |
Research showing that mobile content needs to be trimmed down to the essential |
|
|
4 |
article |
Why only essential information should be presented to mobile users, with less important content available only upon request |
|
|
5 |
article |
Why designers should not waste space on mobile with big, uninformative illustrations |
|
|
6 |
article |
Structuring information in individual content units that allow users easily select the right one |
|
|
7 |
article |
Using in-page links to allow people to see the page structure and quickly access each individual content unit |
|
|
8 |
Banner Blindness Revisited: Users Dodge Ads on Mobile and Desktop |
article |
How banner blindness prevents users from noticing information that looks like an ad on both mobile and desktop |
|
9 |
article |
How to make ads more usable on mobile and prevent them from creating false floors |
|
|
10 |
List Thumbnails on Mobile: When to Use Them and Where to Place Them |
article |
When to use thumbnail images for mobile lists |
|
11 |
article |
Research showing that visual indicators attract attention best when they use different colors and icons |
|
|
12 |
article |
Diary study showing how people access newsletters on mobile devices |
|
|
13 |
article |
How to make mobile tables more usable |
|
|
14 |
video |
Why you may need to offer users more advanced table-manipulation techniques such as hiding and reordering columns |
|
|
15 |
article |
A comparison of the book-reading experience on Kindle vs. iPad book-reading apps |
|
|
16 |
article |
An example of a mobile-page redesign that follows several of our mobile-usability guidelines |
The Initial Experience on Mobile
When users first interact with a new application or website, they often encounter requests to log in or create an account, as well as walkthrough tutorials that get them familiar with the app.
|
Number |
Link |
Format |
Description |
|
1 |
article |
How to make registration and login less painful on mobile |
|
|
2 |
article |
Why you should not ask users to log in or create an account before they use your mobile app or website |
|
|
3 |
article |
An example of how to improve a poorly designed login wall |
|
|
4 |
Mobile Login Methods Help Chinese Users Avoid Password Roadblocks |
article |
How to use QR codes to make login easier on mobile and desktop |
|
5 |
Mobile-App Onboarding: An Analysis of Components and Techniques |
article |
When to use a separate onboarding walkthrough in a mobile app |
|
6 |
video |
||
|
7 |
article |
Why most mobile onboarding walkthroughs are a waste of resources |
|
|
8 |
video |
||
|
9 |
article |
How to present tips and help in mobile apps |
Gestures
Touchscreen devices support a multitude of gestures beyond tap. These articles discuss some of the common gestures, with an emphasis on swipe.
|
Number |
Link |
Format |
Description |
|
1 |
article |
How the use of horizontal swipe exposes users to issues caused by swipe ambiguity |
|
|
2 |
Scan and Shake: A Lesson in Technology Adoption from China’s WeChat |
article |
How QR codes and the shake gesture became widely adopted in China due to WeChat's popularity |
|
3 |
article |
Why contextual menus triggered by a swipe gesture are less discoverable |
Other Mobile-Specific Features
Modern mobile devices come with capabilities such as camera, voice recognition, GPS, push notification, augmented reality, and a variety of other features. These features, when used properly, can make the user experience better and more delightful.
|
Number |
Link |
Format |
Description |
|
1 |
article |
How unique user needs and device features should be taken into account when designing for mobile |
|
|
2 |
article |
Usability issues associated with including maps on mobile pages |
|
|
3 |
3 Design Considerations for Effective Mobile-App Permission Requests |
article |
3 components of effective permission requests: communicating why the permission is needed, asking for the permission at the right time, and allowing users to take back a permission |
|
4 |
video |
||
|
5 |
article |
Guidelines for designing effective push notifications |
|
|
6 |
article |
How to support short mobile sessions using push notifications, widgets, quick actions, and shortcuts or routines |
|
|
7 |
article |
Guidelines for implementing AR features in mobile apps |
|
|
8 |
article |
How AR features help users visualize a product in the environment where it will be used |
|
|
9 |
article |
How to help users calibrate the AR feature in your mobile app |
|
|
10 |
video |
||
|
11 |
article |
How to design onboarding flows in AR mobile apps |
Multitasking
Combining information from multiple applications at the same time can be challenging on mobile. This section discusses multitasking and application switching on small screens.
|
Number |
Link |
Format |
Description |
|
1 |
article |
An analysis of the usability of the Back-to-App button in iOS |
|
|
2 |
article |
An analysis of the UX of foldable-screen smartphone |
Responsive Web Design
Many websites today are responsive: their layout adapts to the screen size on which they are displayed. These articles discuss the challenge of designing for multiple devices and how it should be done properly.
|
Number |
Link |
Format |
Description |
|
1 |
article |
A definition of responsive web design |
|
|
2 |
Scaling User Interfaces: An Information-Processing Approach to Multi-Device Design |
article |
How to approach design for multiple devices by taking into account the capacity of the human-device communication channel |
|
3 |
video |
Why simplicity is overrated and design should take advantage of each device's strengths |
|
|
4 |
article |
How to adapt images intended for desktop to mobile size |
|
|
5 |
Small Pictures on Big Screens: Scaling Up from Mobile to Desktop |
article |
How to adapt images intended for mobile to desktop size |
|
6 |
article |
Research showing that hamburger menus do not work on desktop |
|
|
7 |
article |
Research showing that hamburger menus are used more on mobile than on desktop |
|
|
8 |
article |
The impact of responsive web design on mobile user experience |
|
|
9 |
article |
Discussion of when it makes sense to optimize for each platform vs. repurpose an existing design |
|
|
10 |
Mobile Websites: Mobile-Dedicated, Responsive, Adaptive, or Desktop Site? |
article |
Different kinds of mobile websites |
Cultural and Individual Differences
This section includes articles on the use of mobile devices by people with disabilities or by people in other countries.
|
Number |
Link |
Format |
Description |
|
1 |
article |
An analysis of how screen readers work on touchscreens |
|
|
2 |
article |
Research looking at users' mental model and usage of WeChat, a platform that hosts a plethora of services ranging from social networking and messaging to mobile payment |
|
|
3 |
article |
Guidelines for designing mini-applications embedded within a larger mobile platform like WeChat |
|
|
4 |
video |
Examples and tips for adding social features to your product |
|
|
5 |
article |
Research looking at the primary concerns of mobile users in India |
|
|
6 |
article |
How app lockers are used to ensure privacy, parental control, and data safety for phone owners in India |
|
|
7 |
article |
Using phones in restaurants in China to order food with no or little involvement from human servers |
|
|
8 |
How K-Pop Apps Create the Illusion of Private Messaging with Celebrities |
article |
An analysis of UX tactics used in mobile apps that allow fans to communicate with K-Pop stars |
Other Devices Beyond the Smartphone
These articles include findings related to the usability of the Kindle ebook reader, Windows 8 tablets, Kindle Fire, smartwatches, and large touchscreens (tablets or car dashboards).
|
Number |
Link |
Format |
Description |
|
1 |
article |
Comparison of reading speeds on iPad, Kindle book reader, desktop monitors, and paper |
|
|
2 |
Windows 8 — Disappointing Usability for Both Novice and Power Users |
article |
Findings from a usability study on Microsoft Surface tablets |
|
3 |
article |
Usability analysis of the Kindle 2 ebook reader |
|
|
4 |
article |
How optimizing for Kindle ebook reader involves balancing the demands of 3 different media: the web, print, and mobile |
|
| 5 |
article |
Usability analysis of the Kindle Fire touchscreen tablet |
|
|
6 |
article |
Usability analysis of the Kindle Fire HD touchscreen tablet |
|
|
7 |
Smartwatches Are the Future—But Samsung Galaxy Gear Only Partway There |
article |
A UX analysis of the Samsung Galaxy Gear smartwatch |
|
8 |
article |
A UX analysis of the Apple watch |
|
|
9 |
article |
Designing for large (24-inch) touchscreen tablets |
|
|
10 |
Very Large Touchscreens: UX Design Differs From Mobile Screens |
article |
An interview with a touchscreen-kiosk designer |
|
11 |
Tesla’s Touchscreen UI: A Case Study of Car-Dashboard User Interface |
article |
An analysis of the UX of Tesla's touchscreen UI |
|
12 |
video |
Advice on how to use usability testing to alleviate issues with current VR technology |
Mobile Ecommerce
Shopping on mobile is pervasive today. The articles in this section all relate to mobile ecommerce.
|
Number |
Link |
Format |
Description |
|
1 |
article |
Guidelines for designing the checkout process on mobile |
|
|
2 |
video |
||
|
3 |
article |
An analysis of the sales data on mobile vs. desktop, revealing the poor state of mobile UX |
|
|
4 |
How Community Can Drive Commerce: A Lesson from China’s Little Red Book |
article |
How China’s popular social-ecommerce app succeeds in building a mutually beneficial user community and bringing in a smooth shopping experience for users |
|
5 |
Transactional Notifications: Their Characteristics and When to Use Them |
Article |
When to use push notifications vs. SMS for transactions |
Usability Testing on Mobile
This section helps you with the setup of your own mobile-usability study.
|
Number |
Link |
Format |
Description |
|
1 |
article |
How to set up a mobile usability test |
|
|
2 |
video |
||
|
3 |
Article |
How to test AR safely and record the sesion successfully |
History
Over time, we have written many articles chronicling the usability of various mobile devices. If you are a history buff and want to see how mobile devices and mobile usability have changed over time, this section is for you.
|
Number |
Link |
Format |
Description |
|
1 |
article |
The UX of the early mobile phones (cca 2000) |
|
|
2 |
article |
The advent of more sophisticated phones such as Blackberries |
|
|
3 |
article |
A usability study of early mobile phones |
|
|
4 |
article |
Why the traditional key-based telephone interface is not suited for the mobile web |
|
|
5 |
article |
Early Japanese mobile phones with a decent user interface suited for browsing and viewing photos |
|
|
6 |
article |
2001 trends in mobile devices |
|
|
7 |
article |
Early SMS-based interactions that respond to simple user queries |
|
|
8 |
article |
A review of the Sidekick, a combined PDA and cell phone |
|
|
9 |
article |
A study reporting that it's more annoying to overhear other people's phone conversations than their in-person conversations |
|
|
10 |
article |
A review of the Palm Foleo, an early device in-between a laptop and a cellphone |
|
|
11 |
article |
Findings from our first mobile usability studies with iPhones, Android smartphones, and feature phones |
|
|
12 |
article |
State of mobile user experience cca 2009 |
|
|
13 |
article |
Findings from our first user research study with iPads |
|
|
14 |
article |
Why mobile apps should not ask users to register |
|
|
15 |
article |
An overview of the iPad usability 1 year after the iPad was launched |
|
|
16 |
article |
Findings from our second big study of mobile usability (2011) |
|
|
17 |
article |
An analysis of the UX of iOS 7, including a discussion of swipe ambiguity |
|
|
18 |
article |
The use of 3D touch on touchscreens and how it compares with long press |
|
|
19 |
article |
An evaluation of how mobile UX changed from 2015 to 2018 |
Reports
For a comprehensive set of guidelines and findings related to mobile usability, check out our reports:
