Mobile User Experience – Mobile devices have revolutionized how we live and perform daily tasks. We can not only access nearly any kind of content on mobile devices, but many modern smartphones allow us to perform actions like depositing checks, processing credit card payments, ordering food and paying for groceries, digitally signing documents, and even locking our home doors. This new technology, the smartphone, has simplified certain tasks.

Mobile-Research Project

Over the past seven years, we have conducted an ongoing, self-funded mobile-usability project involving multiple rounds of user testing on various mobile websites and applications. The project included 151 participants, primarily from the US, with additional sessions in Australia, Hong Kong, Netherlands, Romania, and the UK. Participants in all studies used their own mobile phones in our lab.

While initial studies encompassed a range of phone types (including touchscreen phones, non-touch smartphones, and feature phones), more recent research has concentrated on touch phones, reflecting current market trends. Furthermore, our latest studies focused specifically on phablets (touchscreen smartphones with screens larger than 5.3 inches). When relevant, we asked participants to show us their installed apps and then assigned tasks using either mobile apps or the web.

In addition to user testing, we employed other research methodologies such as diary studies and expert reviews. We have also evaluated numerous mobile sites and apps as part of client projects, though we cannot disclose specific findings from these studies. This confidential research informs and inspires our publishable research.

The mobile research discussed here was distinct from our research on tablet user experience. Despite some similarities (e.g., handheld touchscreens), tablets and phones have different usage patterns and interaction-design constraints, leading to distinct usability guidelines for each device category.

Mobile Limitations and Strengths

Mobile phones present both strengths and limitations. These factors influence the creation of effective mobile user experiences.

Small Screen

Despite the trend toward larger screens, the portability and convenience of mobile phones are largely due to their small size. Compared to desktop and even laptop screens, phone screens can display significantly less content. Consequently, screen size is a major constraint for mobile devices. Content that fits above the fold on a 30-inch monitor may require five screenfuls on a small 4-inch screen. This means mobile users must (1) expend greater effort to access the same amount of information and (2) rely on short-term memory to recall information not currently visible on the screen. It is therefore not surprising that mobile content is twice as difficult.

Each new design element or piece of content added to a mobile screen displaces something else (or pushes it below the fold). Careful consideration of the opportunity cost of each new element is crucial: What are the implications for users if element B is omitted to include element A? Is element A more critical than element B? Content and feature prioritization is essential. While this report offers general guidelines, the optimal approach often depends on the specific users and tasks involved.

“Chrome” refers to the user-interface elements that facilitate the use of a site or application. Users visit a site to find necessary information or complete a task, not to admire the aesthetics of buttons, navigation, menus, and other design elements. Content is always important (on both mobile and desktop), but while desktop screens offer ample space for both content and chrome, mobile designers often need to minimize chrome to maximize space for essential content.

This does not imply that chrome should be eliminated from mobile design. A usable interface requires some chrome. However, mobile screens necessitate a high content-to-chrome ratio.

Portable = Interruptible

Mobile phones are portable, easily fitting into a pocket or purse and accompanying us everywhere. Because we use phones in various contexts and situations, we are more likely to experience interruptions while using them: external events in the environment may demand our attention, forcing us to pause our activity on the small screen. Consequently, attention on mobile is often fragmented, and mobile sessions tend to be short. In fact, the average mobile session duration is 72 seconds. In comparison, our studies indicate an average desktop session of 150 seconds, more than twice as long.

Short mobile sessions necessitate designing for interruptions: saving user state and enabling users to save their progress.

Designers should preserve context and facilitate seamless context recovery and task resumption. Mobile apps or websites must consistently save state to accommodate interruptions. They should also strive for smooth transitions back to the app/website, minimizing the need for users to redo previously completed work.

Furthermore, mobile users may not always make immediate decisions and may prefer to revisit content later in contexts with greater bandwidth or on larger screens. Enabling users to save history, email information to themselves or others, or share information is important. It is also beneficial to allow users to access their data and actions across different platforms.

Designing for interruptions extends beyond saving state. It also involves prioritizing essential information and simplifying tasks and interactions. Due to fragmented attention, it is crucial to present users with what they need as quickly as possible. Overwhelming them with details and requiring them to sift through large amounts of text for relevant information is not conducive to interruption-friendly design. The core information should always precede the details. Simpler tasks are quicker to complete and easier to resume than complex ones with numerous steps and options.

Single Window

While some phone manufacturers are exploring the implementation of multiple windows on the screen, the limited screen size of mobile devices makes this approach impractical, even with today’s larger-screen phones. The vast majority of users can only view a single window (and thus a single application or website) at a time; they cannot split the screen (as on a desktop) to work with multiple apps simultaneously.

The single-window constraint dictates that designs should be self-sufficient: Mobile tasks should be easily completed within a single app or website. Users should not be required to exit an app (or website) to find necessary information that the app does not provide. It’s important to remember that pen and paper, even if available, are often impractical for on-the-go use. If users must transfer information between apps, they will likely need to copy and paste it (or, worse, rely on memory, increasing cognitive load); this makes the interaction more complex and prone to errors. Apps and websites should be self-contained and should not require external resources, whether physical or digital.

Touchscreen

Touchscreens offer both advantages and disadvantages. Gestures represent a hidden, alternative user interface (UI) that, when designed with appropriate affordances, can make interactions fluid and efficient and can conserve screen real estate. However, gestures can also suffer from low memorability and discoverability. Additionally, typing accurately on a small virtual keyboard can be challenging, and accidental touches are common.

Typing is a significant challenge: On a soft keyboard, users must constantly divide their attention between the text they are entering and the keypad area. Touch typing is impossible without haptic feedback, and keypads are small with crowded keys.

Another difference between touch input and input methods like a mouse is that the target size needed to optimize reach time and minimize errors is considerably larger for touch than for mouse interaction. Therefore, not only is the screen smaller than a laptop or desktop screen, but buttons and other interactive elements need to be larger than those on a regular monitor.

The presence of numerous target areas on a touchscreen increases the likelihood of accidental touches. These can disorient users and cause confusion about what occurred. The “undo” function, one of the original 10 usability heuristics, is even more critical on touch devices.

Variable Connectivity

Even with the prevalence of fast cellular networks and widespread Wi-Fi, coverage is not consistently available or reliable. Phone users frequently encounter connectivity issues. Each new page load can result in significant delays when the network is slow or unstable.

To ensure users can complete their tasks on your mobile site or app, it is essential to consider waiting times. Design lightweight pages that contain as much relevant information as possible to minimize the number of client-server round trips. Reduce the number of steps and, ultimately, the number of page loads.

GPS, Camera, Accelerometer, Voice, and Other Phone Features

While phones have limitations, they also offer unique features, some of which are accessible only to apps, while others are available to websites as well. The camera, microphone, and GPS are conveniently integrated and can simplify input and overcome some of the challenges of typing. Photographs can convey nuanced information that is often difficult to capture in text (e.g., describing a product). Notifications allow users to receive immediate updates about relevant events. Touch ID enables users to log in using a fingerprint, eliminating the need to type passwords. And technologies like Apple Pay and Google Wallet enable users to make payments in person or online using their phones, without entering credit card information.

If a phone has a camera, avoid requiring users to manually enter barcodes. If it has GPS, avoid asking them to enter zip codes. Leverage phone features whenever possible to minimize user effort.

New Research Report

Our extensive mobile-usability findings are compiled in our report “Mobile User Experience.” (This report has since been updated in a newer edition, incorporating subsequent events and research.) Many guidelines reflect current mobile patterns and interactions, and older guidelines have been revised with updated examples.

Visit Viartisan to read the latest and most in-depth articles on UI, UX, Branding, Develop, and Illustration!

This article has been edited from NNG with the title Mobile User Experience: Limitations and Strengths by author Raluca Budiu.