By Marta Rauch | Senior Member
Mobile devices are the new PC. With sales outpacing desktop systems in 2011, consumers increasingly use smartphones and tablets to access products and services. However, mobile usability lags behind desktop usability, and the user experience is often difficult and disappointing.
To meet the needs of mobile customers, information developers need to ramp up on mobile usability and learn to provide effective mobile user assistance. This article summarizes mobile usability guidelines and presents key requirements for user assistance on mobile devices, including tablets such as iPad, and smartphones such as Android and iPhone.
Analyze Mobile User Tasks
The first step is to determine whether the tasks performed in the application are appropriate for a mobile device. A Nielsen Research survey in July 2011 found that the most popular mobile applications are (in descending order): games, weather, social networking, maps/navigation/search, music, news, entertainment, video/movies, shopping/retail, dining/restaurant, sport, productivity, communication, food/drink, travel, health, education/learning, and household/personal/car.
In addition, Raluca Budiu and Jakob Nielsen found that the tasks commonly completed on mobile devices:
- Have a deadline
- Involve rapidly changing information
- Require privacy
- Involve finding information about businesses
- Involve finding directions or public transportation information
- Are performed in an emergency
- Require communication with others
Key requirement for user assistance: Determine whether your target audience will use your applications and documentation on mobile devices.
Determine the Target Mobile Device
Mobile designer Josh Clark notes that smartphones are held in one hand and used while on the go, so users have limited dexterity and a shorter attention span. In contrast, tablets are held with two hands while users are seated. This encourages “a more leisurely and contemplative mindset, with longer sessions and more attention … so applications should reflect that calmer mindset.”
The ergonomics of the device are also important. Clark observes that users typically hold smartphones from the bottom, with their thumb positioned at the bottom corner at the base of the phone. In contrast, they hold tablets from the top, usually with two hands, with the thumbs positioned at the top corners. Locate the controls where they are easiest to reach.
Key requirement for user assistance: Design user assistance for the devices used by the target audience, including touch devices if applicable.
Increase Usability for Smaller Displays
It is twice as difficult to read content on a mobile device. Nielsen asserts that this is due to the small screen size. Users cannot see the entire page to scan through text. Attention is diverted by the need to navigate, scroll, remember what was seen, and re-find the original location on the page. These distractions reduce reading comprehension.
To work around this, Noah Iliinsky recommends design techniques that help users understand the hierarchy of information on the screen. First identify the critical content, and then visually emphasize it by making it “bigger, bolder, brighter, more detailed, or called out with circles, arrows, or labels.” Likewise, de-emphasize less relevant content “with less intense colors, lighter line weight, or lack of detail.”
Another issue is the wide variation in display sizes for mobile devices. To ensure that content displays appropriately, Joe Welinske suggests using variables for the height and width of the display. For example, include a viewport tag in the section of HTML files, and specify viewport metadata such as width, height, initial scale, minimum and maximum scale, and user-scalability.
Key requirement for user assistance: Ensure that navigation controls for documentation are usable and that user assistance displays correctly on mobile screens.
Enhance Usability of Controls and Input Mechanisms
Mobile controls and input mechanisms present challenges. To improve usability:
- Place touch controls so that users can easily use their thumb to press the most common controls.
- Design applications so they can be used in either hand.
- For tap-intensive applications, such as a scientific calculator, provide an option for a right-handed or left-handed interface.
- Use appropriate size and spacing for touch control elements, to be sure users can tap them with their fingers.
Vendors do not have a unified definition for the tappable area. Apple's iOS Human Interface Guidelines recommends making targets “fingertip-size,” defined as “44 × 44 points,” the size of the virtual keys on the iPhone calculator. Microsoft defines the tap region as 9.12mm or 38 × 38 pixels. Google recommends a virtual measure called “density-independent pixels (dp),” which enables the region to scale to different screen sizes.
For documentation, ensure that the most critical controls are usable, such as those used to acquire, store, and select content, and to read, search, and navigate. The most important input mechanisms are bookmarking, highlighting, and adding and sharing notes. For touch device instructions, use appropriate verbs, such as swipe, flick, tap, and pinch.
Key requirement for user assistance: Implement the navigation controls and input mechanisms required by your users. For touch devices, include navigational gestures.
Consider Platform Differences
Platform standards vary widely. For example, iPhone applications typically include a Back button on the upper-left corner of the screen, whereas Android applications do not because Android devices have a printed Back control. At Developer Day 2010, Google advised that developers implement:
- A dashboard with recognizable icons for the main tasks that can be performed in the application
- An action bar that shows users what they can do with each feature
- A row of tabs at the top of the screen (instead of at the bottom of the screen, as on the iOS interface)
Usability can differ when an application is used on devices of different sizes. As described in “Usability of iPad Apps and Websites,” Budiu and Nielsen found that when users viewed an app on an iPhone, they used the controls on the tab bar at the bottom of the screen. However, when using the same application on the larger iPad, they did not notice them because their eyes were drawn further away from the controls.
Another consideration is screen size and resolution. For example, Apple's iPad has a 9.7-inch (diagonal) display and screen resolution of 1024-by-768-pixel resolution at 132 pixels per inch (ppi), whereas the iPhone 4 has a 3.5-inch (diagonal) display and 960-by-640-pixel resolution at 326 ppi.
For touch controls, the touch zone must be as large as the icon displayed on the screen. For example, when Android touch controls are displayed on a tablet, the touch zone must be large enough that users can activate the control by touching anywhere within the icon.
Key requirement for user assistance: Consider platform differences, and ensure that touch controls scale appropriately for different screen sizes.
Use Care with Navigation and Input Mechanisms
In “Usability of Mobile Websites,” Budiu and Nielsen found that the biggest usability issue is entering data without a mouse: “menus, buttons, hypertext links, and scrolling all take longer time and are more error-prone…. Text entry is particularly slow and littered with typos, even on devices with dedicated mini-keyboards.” Nielsen notes in “Mobile Usability” that the main obstacles are download delays, small screens, and awkward input mechanisms. In a study of iPad and iPhone users, Budiu and Nielsen found these general issues:
- Inconsistent interaction design
- Unusual interfaces without intuitive controls
- Linear navigation, which hampers users from jumping to different locations as they do with websites
- The use of “beautiful” interface elements that emphasizes form over function
- The frequent lack of a “Back feature, search, clickable headlines, and a homepage”
To improve mobile usability:
- Provide a search box and navigation controls on the main page.
- Use auto-complete and suggestions for textboxes.
- Allow for typos and abbreviations.
- Use personalization and history to provide defaults.
- Compute field values when possible.
- Make the target area at least 1cm × 1cm.
- Leave sufficient space around user interface elements.
- Ensure that textboxes fit on the screen, for example 30 characters for smartphones.
- In forms, provide field descriptions above the field.
- To signal an error in a field, mark the textbox that needs to be changed.
- Minimize the need to log in or register.
Key requirement for user assistance: To improve mobile usability, minimize the need to enter data, and implement design techniques that reduce errors and maximize success.
Include “Awkward Controls” When Necessary
Because mobile devices are portable, users carry them throughout the day. This introduces the risk that devices inadvertently turn on and perform tasks accidentally. For example, a smartphone jostled against other items in a handbag can accidentally make a call. To guard against this, implement “awkward controls” for certain key tasks. Because these controls are a little more difficult, they require more attention and minimize inadvertent actions.
As designer Josh Clark puts it, “Awkward isn't always bad…. By requiring awkward or challenging gestures at well-placed points of your interface, you can protect against miserable mishaps.” Examples of this design technique include the slide-to-unlock control used by Android and Apple, and Apple's slide controls to answer, power off, and delete.
Apple and Android also provide confirmation screens for key actions, such as deleting. For example, to shut down the device, Android requires a long press on a hardware button and then an affirmative response to a confirmation message. Another example of this type of a control is a multi-tap combination, such as Apple's triple-tap with three fingers to turn the screen curtain on or off.
Another technique for preventing errors is an Undo mechanism. To maximize screen space, include Undo buttons only for certain risky actions. For example, Google Gmail displays an Undo control for 5 seconds after users click Send.
Key requirement for user assistance: To guard against inadvertent actions on mobile devices, implement “awkward” user interface controls when necessary, and provide an Undo mechanism for critical tasks, such as deleting.
Create Prototypes to Validate the Design
To get feedback early in the development cycle, Joe Welinske recommends testing with simulators. For example, for Android, test with the emulator in the Android SDK (Software Development Kit) available on the Android Developer's Site (http://developer.android.com/sdk/index.html). For Apple iOS, test designs with the Interface Builder's Simulator.
Josh Clark recommends building rapid prototypes with HTML and CSS, and creating mock-ups with Keynote, Photoshop, or other tools. For example, Keynotopia (http://keynotopia.com/) provides helpful stencils of controls for iPad, iPhone, and Android.
Key requirement for user assistance: Create a prototype, and validate it to confirm usability.
Test the Design on Mobile Devices
Test on as many actual devices as possible. As Josh Clark advises, it is important to “get onto the device as quickly as possible, to get a sense of not just how your pixels look but how your pixels feel in the hand.” Commercial applications such as Google's map and Twitter's TweetDeck are tested on 100 versions of the Android operating system.
Other key test considerations for mobile devices:
- Test software on actual devices instead of just emulators.
- Run tests on a variety of devices, third-party software, and browsers.
- Check error messages in all languages.
- Test download speed.
It is also possible to test remotely through a device lab, such as Device Anywhere or Perfecto Mobile. Joe Welinske provides many practical tips and suggestions for testing on prototypes and actual devices in his book, Developing User Assistance for Mobile Apps.
Key requirement for user assistance: Know which mobile devices, operating systems, and browser versions your customers use most frequently, and test on as many of them as possible.
Consider Translation for Mobile Devices
Many translators have limited experience with user assistance for mobile devices, so it is important to get agreements with vendors early in the project. Translation issues include:
- Language-specific special characters
- Text truncation and dialog box resizing
- Line- and word-wrapping
- Abbreviated translations
- Localized screenshots of controls and the user interface
- The need to reduce file size for icons and screenshots
In “Localizing for Mobile Devices: A Primer,” Shailendra Musale advises that documentation must be small and compact, since file size is multiplied by the number of languages. Get agreement from translation vendors on:
- File size, which must be small due to limited disk space and memory on mobile devices
- File formats for localizable resources
- File-naming conventions
- Error message translation
- Translation for installers or setup applications
- The language for content development
- The language for gestures
Key requirement for user assistance: If the application is translated, ensure that translation vendors address mobile translation issues.
Consider Accessibility for Mobile Devices
Mobile vendors offer a variety of accessibility solutions. Apple's Accessibility Programming Guide provides guidelines for VoiceControl, Speech Synthesis, and VoiceOver. The gesture-based VoiceOver screenreader provides accessible support in 21 languages. Screen magnification and white-on-black (reverse video) provide better contrast for low vision users. Apple also provides accessible touch controls, and Braille displays are supported on iPad, iPhone 4, and iPhone 3GS.
Google's accessible design guidelines are provided on the Android Developer website. Google recommends testing with an accessibility service such as TalkBack, which comes preinstalled on many Android-powered devices and is available at no charge from the Android Market (https://market.android.com/).
Key requirement for user assistance: Build in accessibility features for mobile user assistance, and validate effectiveness by testing with assistive technology.
Provide a Mobile Website
For browser-based help on websites, a common issue is that sites are not optimized for mobile devices. Nielsen observes that usability improves when viewing mobile-designed sites.
To address this, provide a separate site that is optimized for mobile devices. The site should detect a user's device, and automatically direct mobile devices to the mobile site. Designer Luke Wroblewski takes it one step further and advocates for a “mobile-first design process to improve user experience on all platforms.”
Another best practice is to provide a link from the full site to the mobile site, and from the mobile site back to the full site. Nielsen recommends the link labels “Mobile Site” and “Full Site.” In addition, mobile users are impatient with slow download times, so it is important to reduce the size and number of graphics and screenshots.
A final recommendation is to optimize the site for the browsers and browser versions used by target users. As the W3C points out, mobile browsers often differ markedly from desktop browsers. For prototypes, designers can use the Firefox Mobile Emulator or the Safari browser's developer mode, which enables it to simulate different browsers. For the final website, test on a wide range of actual mobile devices, browsers, and browser versions.
Key requirement for user assistance: If a website is required, detect the user's device and direct it to a site that is optimized for mobile devices. Provide links between the full site and the mobile site.
Putting It All Together
The increasing proliferation of mobile devices means that we must learn to deliver effective mobile user assistance. To meet this need, this article examines usability guidelines throughout the development cycle: mobile task assessment; ergonomics; displays, controls, and input mechanisms; prototyping and testing; translation; accessibility; and mobile websites. Understanding these guidelines will help us provide effective mobile user assistance that meets our customers' needs.
Marta Rauch (marta.rauch@oracle.com) is a principal information developer at Oracle, where she leads the Planning ID team and helps drive innovations that enhance product quality and customer satisfaction, reduce time and costs for development, and increase revenue. She played a key role in her department's effort to convert documentation to Kindle format and in ID strategies for social media and online forums. In 2011, her conference presentations include STC Summit, Content Management Strategies/DITA, and IEEE PCS IPCC, and she presented STC webinars on innovative documentation and continuous improvement. With over 20 years of experience in technical communication, Marta has received 15 STC awards for individual and team projects at the local, national, and international level. An STC senior member and mentor for the Silicon Valley Chapter, she holds a Certificate in Technical Writing from the University of California Extension and a BA from Stanford University.
REFERENCES
Budiu, Raluca, and Jakob Nielsen. Usability of Mobile Websites: 85 Design Guidelines for Improving Access to Web-Based Content and Services through Mobile Devices. Nielsen Norman Group, 2011.
Budiu, Raluca, and Jakob Nielsen. Usability of iPad Apps and Websites, 2nd ed. Nielsen Norman Group, 2011.
Clark, Josh. Interview with Jared Spool. “UIE Spoolcast Transcript: Designing Tapworthy Mobile Apps.” 21 April 2011.
Clark, Josh. “iPhone App Design: When an Awkward Interface Makes Sense.” (8 March 2011), www.uie.com/articles/iphone-interface-design.
Iliinsky, Noah. “Beautiful Visualization: How to Make It Efficient,” User Interface Engineering. (8 March 2011), www.uie.com/articles/efficient-visualization/.
Musale, Shailendra. “Localizing for Mobile Devices: A Primer.” Localization Industry Standards Association, 2001.
Nielsen, Jakob. “Mobile Usability,” Alertbox. 20 July 2009.
Nielsen, Jakob. “Mobile Content is Twice as Difficult,” Alertbox. 28 February 2011.
The Nielsen Company. “Play Before Work: Games Most Popular Mobile App Category in US,” (6 July 2011), http://blog.nielsen.com/nielsenwire/?p=28273.
Welinske, Joe. “Developing User Assistance for Mobile Apps.” Writers UA. 9 June 2011.
Wroblewski, Luke. “Designing Mobile Web Experiences.” Presentation for User Interface Engineering's Web App Masters Tour, 12 May 2011.
