min read

Best Practices for Designing Mobile Applications

by Pamela Gay , 26.08.2009

This article is re-posted from User Centric’s blog.

Mobile application interfaces offer unique challenges when designing for the user experience. Limited screen size, navigation restrictions and broad audience experience levels pose hurdles that, if not carefully considered, can derail even the most valuable applications. With developers and carriers racing to offer customers the ability to do just about everything on their mobile phones, observing some basic usability guidelines smooth the path for both application designers and end users.

User Centric (now GfK’s User Experience team) has been a frontrunner in the evaluation and design of mobile applications. Based on our insights from over 125 mobile projects and mobile application usability testing of 4,000 participants, here are some best practices for mobile application design:

Make scrollbars and selection highlighting more salient

Due to limited real estate on a mobile phone, scrollbars are often skinny and missed by users. This causes them to overlook any information that may be below the fold, including important calls-to-action. Enlarging the scroll bars so they are noticed by users can alleviate this issue.

One key difference between a touch screen device and a non-touch screen device is obviously the navigation. Having the ability to touch your selection versus using keys to indicate where you want to go emphasizes the importance of how choices are highlighted. It is important for the user to be able to distinguish which option is in focus. Utilizing color can help the user more easily recognize which option is currently selected. For example, if the highlighting is displayed as a border around a menu option, we recommend that the border appear as a sufficiently thick border in contrasting color so it is easily noticed. (It need not look jarring, of course.) Or if the entire menu option is displayed in a highlighted color, a different color should be used to indicate which option has been selected.

Increase discoverability of advanced functionality

Applications often include advanced functionality that will not be uncovered immediately by most users. For example, a mobile application may include the ability to move through additional screens by using left and right arrow hardkeys, but users may not discover this functionality and may overlook important information or features. Increase the element of “discoverability” by relying on onscreen objects with strong affordances, such as self-explanatory icons or visual design cues that indicate an action can be triggered by using a related hardkey.

Use clear and consistent labels

Some companies have used the labels for content areas and buttons as branding opportunities (e.g. “XYZ Browser” or “XYZ Music”), causing user frustration due to repetition of the brand in basic navigation. It is important that terms be recognized by all consumers regardless of which carrier they use. We also must point out that abbreviations should be used cautiously, if at all. Shortening a label to three letters just so it fits in a small tab or button does not add value if the user has no idea what it means.

Icons should not save space at the expense of user understanding

Although icons are often considered “small-screen device friendly” since text labels tend to take up more valuable screen real-estate, it is crucial to make sure that these icons translate properly across all languages and user groups.

Our research on multiple types of phones for a variety of carriers has repeatedly shown that users do not have a preference for either text or icons. Instead, they simply want to understand where the text or icon will take them. To ensure comprehension of icons, some devices include text descriptors in small font below the icon. This can be an excellent compromise since it helps novice users if they do not recognize the icon but does not impede expert users who are more likely to rely solely on familiar icons.

Support user expectations for personalization

If we were writing this article five years ago, this criterion might not have made the list. However, most users these days expect to be able to personalize everything. This includes their mobile applications.

For example, in the case of a news application, users assume they can set their location or decide what categories should appear on the first screen. If those options are not available, they often become frustrated and dissatisfied with the application. When designing an application, it is important to clearly indicate which items can be personalized and how users can personalize them.

Long scrolling forms trump multiple screens on mobile devices

Wizard-style form input is supposed to enable a “walk-up-and-use” experience. However, as mobile phone consumers become more experienced, our research has shown that they want to see all of the information they have to enter displayed on a single screen, even if scrolling is involved. In contrast, a wizard typically guides the user through a series of questions on multiple screens.

Our research has found that most users, especially expert users, would prefer to fill out one long scrolling form so they can more easily view all options available.

Although designing for both novice and expert mobile users can be a tricky process, mobile application interfaces can be easily validated through usability testing. Conducting mobile application usability testing throughout the development life cycle helps ensure that the final application design not only satisfies customers, but saves the company from costly redevelopment efforts.

Read our follow-up post, Best Practices for Designing Mobile Touch Screen Applications.