HP webOS Developer Blog

Greetings, webOS developers!

On September 28th, 2009 we updated the Application UI Checklist, which you should use to cross-check your app’s UI before submitting it to the App Catalog. The checklist is mainly intended for standard applications, to ensure that they work, look and feel like other standard webOS applications. But there are other kinds of applications – apps that provide an “immersive, customized” user experience, like what we commonly see in games. Does the UI Checklist apply to those apps? We’ve been asked that a lot lately.

While reviewing “immersive applications” over the last few months, we’ve noticed that:

• Immersive app developers commonly use custom controls (instead of standard webOS framework controls).
• Immersive app UI designs (especially for games) are complex, and commonly contain tap targets that are smaller than what we recommend (minimum size = 48 pixels).
• Immersive app developers commonly include buttons in their UI that navigate to different scenes in their app hierarchy, including buttons like “Back,” “Next” and “Home.”
• Performing the back gesture feels “natural” when in Portrait orientation, but not in Landscape.

We’ve given this a lot of consideration and have the following advice for developers who are creating apps that provide immersive user experiences:

Use one style of controls consistently:

• If your app uses custom controls in a scene, use those exclusively.
• If your app uses framework UI controls in a scene, use those exclusively.
• Do not mix custom controls and framework UI controls.

When displaying a standard scene in your app:

• Include required UI elements like the App Menu and its standard items (Edit, Help) and the standard Help scene.
• Support required behaviors users expect, like the Back Gesture.
• Ensure that your app displays banner notifications and popup notifications from other apps, when they occur.

When displaying a scene in full screen mode:

• Provide all the UI controls a user needs to navigate to different scenes in the app.
  • It’s okay to include Back or other scene navigation buttons in an immersive full screen UI.
    • If the fullscreen scene is in Portrait orientation, you must support the Back Gesture.
• Provide visual tap feedback.
  • When a user taps a button, make sure it changes so the user knows the app received the tap.
• Make sure tap targets are large enough to tap.
  • In standard apps, we recommend tap targets be no smaller than 48 pixels. Developers have told us they think this is “kind of big” for game UI’s, where every pixel is precious. If you must use smaller graphics, increase the size of the DIV they’re enclosed in whenever possible, to increase the size of the tap target. Don’t ever make the tap target smaller than 32 pixels, because targets smaller than that are difficult to detect reliably.
• Design your UI to run on each webOS device
  • The Palm Pre is a 320 x 480 pixel device. The Palm Pixi is 320 x 400. Make sure your app runs on each. For tips regarding how you can optimize your design for each device, read the document Designing for Flexibility and Responsiveness.
• Test your app on each webOS device
  • Test your app on the webOS device it’s intended to run on. This is especially important for developers porting apps from other mobile platforms. Try your apps and make sure everything in your UI still feels big enough to tap.

We’re providing these guidelines here for you now, and will add them to the App Checklist in time. For now, you can rely on these as our official recommendations when designing and implementing apps that use fullscreen mode to provide users with an “immersive user experience.”

The Palm UI Design Team