February 26, 2021
Hot Topics:

Successful User Interfaces for Mobile Devices

  • By Grace Hays
  • Send Email »
  • More Articles »

Provide multiple paths to the same information. For instance, to find a specific phone number, allow the entry of a zip code or city/state information. Do not let the user proceed after entering improper information. If you ask for a date, for example, validate the date before accepting more information. This is the opposite approach from many Web sites that have plenty of display room to indicate erroneous fields all at once.

Another good practice is to construct and use informative titles (for example, dd/mm/yyyy) that communicate field type as well as format. Restrict length on input fields when possible, and distinguish between alpha and numeric fields. Users may be entering characters via a phone pad, so convey to the user what input you are expecting. Avoid relying on font type and color, and only use images or icons when they are necessary. They take up precious screen space and bandwidth and can make the card too busy and unclear.

Navigation Guidelines

As in most Web applications, an easy return path is useful in your mobile application as well. Backward navigation is almost a necessity in a well-designed mobile UI. When navigating backwards, avoid cards with input fields. Otherwise, as users press back/clear, they will erase the inputted values, which is probably not the desired result. Use intuitive links or softkeys, such as "previous" and "next" to guide the user linearly in the deck. Use "more" to indicate jumping to additional pages of the same data. Next implies jumping to the next card. Also, put navigation links at the beginning or end of a card. Avoid embedding links in text unless they are very context sensitive.

Map the safest or most common action to the "accept" or "OK" softkey. List link choices in the interface, not in the softkey options. Also incorporate a done softkey when possible to pop the user up to the next highest level.


Many tools are available for developing graphical user interfaces for computer applications. HP has developed such a tool, called HP mBuilder, for creating mobile Web user interfaces. This application allows users to manage UIs per protocol deployment, and is extremely useful when targeting multiple devices. It also includes a built-in simulator for visualizing the mobile UI on several devices. Developers build with UI elements rather than actual protocol tags, effectively supporting multiple protocols. The HP mBuilder application is currently available for Linux and Windows platforms. For more information, visit the mBuilder Web site.

Different Strategies Called For

User Interfaces for mobile Web applications are quite different from their browser siblings. However, many of the early experiences and skills developed at HP were subsequently folded into the HP mBuilder application and, by using it in conjunction with useful tips for producing better mobile user interfaces, developers can promote acceptance for new devices that the Internet continues to touch and connect.

Developers can also get deeper into the often subtle differences and access additional resources from Web sites or developer portals that some vendors support. For example, dspp the developer edge at the developers site is a portal to a wide variety of other reports and presentations for HP developers that provide specialized information to guide designing applications and interfaces especially for mobile devices.

Grace Hays is a Software Architect at Hewlett-Packard. She has ten years of experience in the computer industry, primarily in the Virtual Memory area of operating system design. Her current area of focus is in development tools for the mobile space.

Page 2 of 2

This article was originally published on May 23, 2002

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date