Mobile devices have transformed the way we live and conduct everyday activities. Not only can we access almost any type of content on mobile, but with most mobile smartphones today we can deposit checks, accept credit cards, order food and pay for groceries, sign digital documents, and even lock our house door. Some of these tasks have become easier because of the existence of this new technology: the smartphone.
Mobile-Research Project
Over the past 7 years, we have carried on an ongoing, self-funded mobile-usability project that involved doing repeated rounds of user testing on a variety of mobile websites and apps. Overall, 151 participants were part of this project: most of them were in the US, but we also ran sessions in Australia, Hong Kong, Netherlands, Romania, and the UK. In all these studies, participants brought their own mobile phones into our lab.
While initial rounds included all types of phones (ranging from touchscreen phones, nontouch smartphones, and feature phones), more recent studies focused on touch phones only, reflecting the current market-penetration figures. Moreover, the last of our studies exclusively involved phablets (touchscreen smartphones with screens larger than 5.3 inch). Where applicable, we asked participants to show us the apps that they had installed on their phones, and then we gave them tasks to complete using either mobile apps or the web.
Besides user testing, we also used other research methods such as diary studies and expert reviews. We have also tested a large variety of mobile sites and apps as part of client projects, but we can’t report specific findings from these studies. We obviously do use this confidential research to inspire and inform our publishable research.
The mobile research discussed here was separate from our research on tablet user experience. Even though there are some similarities (e.g., hand-held touchscreens), tablets and phones are used somewhat differently and have slightly different interaction-design constraints, leading to different usability guidelines for designing for the two classes of devices.
Mobile Limitations and Strengths
Mobile phones come with strengths, but also limitations. These strengths and limitations play out in good mobile user experiences.
Small Screen
In spite of the modern trend towards larger-screen phones, what makes mobile phones so convenient and portable is their small size. Compared with desktop and even laptop screens, phone screens accommodate a lot less content. As a result, screen size is a serious limitation for mobile devices. The content displayed above the fold on a 30 inch monitor requires 5 screenfuls on a small 4-inch screen. Thus, mobile users must (1) incur a higher interaction cost in order to access the same amount of information; (2) rely on their short-term memory to refer to information that is not visible on the screen. It’s thus not surprising that mobile content is twice as difficult.
Whenever you include a new design element or a new piece of content on the mobile screen, something else gets pushed out (or below the fold). Think hard of the opportunity cost of each new element: what does it mean for the users if you leave out element B in order to include element A? Is element A more important than element B? Content and feature prioritization is key. Although we provide general guidelines in this report, your answer likely depends on the kinds of users and tasks that you have.
“Chrome” denotes the user-interface elements that are instrumental in using a site or application. Users come to a site to find information that they need or to accomplish a task, not to contemplate the beauty of buttons, navigation, menus, and other design elements. Content is always of interest (whether on mobile or on desktop), but whereas on desktop there is enough screen space for both content and chrome to coexist, often, on mobile, designers must downplay the chrome to make space for essential content.
That doesn’t mean that chrome should disappear from mobile. In fact, it’s hard to create a usable interface with no chrome. However, designers need to accommodate a high content–to–chrome ratio on the mobile screen.
Portable = Interruptible
Mobile phones are portable: most fit easily in a pocket or purse and they tend to follow us everywhere. Because we use phones in a variety of contexts and situations, we are more likely to be interrupted when using such devices: an external event in the outside environment may demand our attention and require us to stop whatever we were doing on the small screen. As a result, attention on mobile is often fragmented and sessions on mobile devices are short. In fact, the average mobile session duration is 72 seconds. In comparison, our own studies show that on desktop, the average session is 150 seconds: more than twice as large.
Short mobile sessions mean that we must design for interruptions: save state for users and allow users to save state.
Designers should save context and make it easy for users to recover context and resume an interrupted task. The mobile app or website must save state at all times and be prepared for such interruptions. It should also try to do the transition back to the app/website as smooth as possible, so that the user doesn’t have to redo work already done before the interruption.
Moreover, mobile users don’t always make definitive decisions, but may want to return to certain content in contexts with larger bandwidth or screen. Allow users to save history, as well as to email or share information with themselves or others. And also allow them to return to their data on other platforms and access any actions they may have carried out on mobile.
But designing for interruptions doesn’t only mean saving state. It also means prioritizing the essential and simplifying tasks and interactions. Because attention is fragmented, strive to show users what they need as soon as possible. Flooding them with details and asking them to parse walls of text for relevant facts is not interruption friendly. The gist should always come before the minutiae. A simple task is easier to finish quickly. It’s also easier to resume than one with many steps and alternatives.
Single Window
Although some phone manufactures are trying to accommodate multiple windows on the screen at the same time, the limited size of the mobile screen makes that goal quite unpractical, even with today’s larger-screen phones. The vast majority of users only see a single window (and thus a single application or website) at a time; they cannot split the screen (as on the desktop) and work with two different apps simultaneously.
The single-window constrain means that design should be self-sufficient: Any mobile tasks should be easy to complete in a single app or on a single website. Users should not have to leave an app (or website) to find information that the app requires, but that it doesn’t provide. Remember that pen and paper, even if available, are often unusable on the go. If users must move information from one app to another, it’s likely that they will need to copy–and–paste it (or worse, rely on their memory and increase their cognitive load); the interaction will become more complex and error prone. Apps and websites should be self-sufficient and should not necessitate any external props, be them physical or virtual.
Touchscreen
Touchscreens come with many blessings and sins. Gestures represent a hidden, alternate user interface (UI), that, when built with the right affordances, can make the interaction fluid and efficient and can save screen real estate. But they also suffer from low memorability and discoverability. On the other hand, it’s hard to type proficiently on a tiny virtual keyboard and it’s easy to accidentally touch the wrong target.
Perhaps the biggest problem is related to typing: on a soft keyboard, users need to continuously divide attention between the content that they are typing and the keypad area. Touch typing is impossible in the absence of haptic feedback; plus, keypads themselves are small and keys are crowded.
Another difference between touch and other types of input such as mouse is that the target size required to optimize the reaching time and minimize errors is considerably larger for touch than for mouse. So not only is the screen smaller than a laptop or desktop screen, but buttons and other targets need to be larger than those on a regular monitor.
Because on a touchscreen there can be many target areas, it is easy to make accidental touches. Some can leave the user disoriented and unsure of what happened. Undo is one of the original 10 usability heuristics, and it is even more important on touch devices.
Variable Connectivity
Even in the era of fast cellular networks and ubiquitous Wi-Fi, coverage is not universal or equally good. Phone users frequently complain about connectivity problems. Every new page load translates into a significant waiting time when the network does not cooperate.
If you want users to finish their tasks on your mobile site or in your app, mind the waiting time. Design pages that are light, yet contain as much information as possible, to avoid many back–and–forth trips from client to server. Minimize the number of steps and, ultimately, the number of page loads.
GPS, Camera, Accelerometer, Voice, and Other Phone Features
Phones come with many limitations, but also with many unique features — some of them available only to apps, others also accessible for websites. The camera, microphone, and GPS are conveniently integrated into the device and can be easily used to make input easier and get around some of the difficulties of typing. Photographs can transmit more nuanced information that often cannot be easily captured in text (think of describing a product that you are looking at). Notifications enable users to be updated immediately of events that are relevant to them. Touch ID allows users to log in using a fingerprint, without typing passwords. And Apple Pay and Google Wallet enable users to use their phones to pay in real life or online, without entering a credit card.
If the phone comes with a camera, don’t ask users to type in barcodes. If the phone has a GPS feature, don’t have them enter zip codes. Use the phone features as much as possible to lessen users’ work.
New Research Report
Our many mobile-usability findings are captured in our new report Mobile User Experience. (Now published in a newer edition, reflecting events and research since this article was written.) Many guidelines reflect the current mobile patterns and interactions; old guidelines that were still retained were revamped with new examples.
