Human Interface Guidelines

The HP webOS platform is built on webKit, which means that anyone who can design a website using HTML, CSS, and Javascript can create a webOS application. You can also make use of advanced technologies, like AJAX and HTML 5 data storage. And to top it off, your app will be able to connect with and make use of the other applications running on the platform quickly and easily.

Who should read this document?

This document is intended for designers and developers who want to design a webOS application. It contains:

1. An introduction to the webOS platform

   ...describing what the webOS environment and its applications look like, how they work, and how users can interact with them.

2. HP's webOS Application Design Philosophy & Guidelines

3. Examples of "Good Design"

4. Details about UI Controls you can use in your application

If you need information about the webOS platform, its technologies and architecture, read the HP webOS Overview.

Get to Know the webOS Platform

The best way to gain an understanding of how webOS applications work (and how they work together) is to use them, but we realize that you may not have a device yet. It's easy (and free) to download the HP webOS SDK, which includes the webOS Emulator, and try the apps and the OS yourself. It runs on Windows, Mac, and Linux platforms. Using the applications will help you understand how the webOS platform delivers an outstanding user experience, and will give you ideas that you can use in your own applications. While using the apps, notice:

• How easy it is to interact with the device, using your finger to perform simple, natural gestures

• How you can run multiple applications at once, and quickly switch between them

• How applications work together, to simplify your workflow

• How you can quickly search for any data, on your phone or on the web

• How applications notify you when important things happen

Take Some Apps for a Test Drive

Once you've installed the Emulator or have a webOS device, follow the instructions below to try a few of the applications. Screenshots are provided to help you see how the system works.

Launch & Switch Between Applications

• Tap the Contacts icon in the Quick Launch bar.
  • Use it to create a new Contact.
  • Edit the phone number, address, email address and IM address.
  • Exit the contact using the "Back" gesture (right to left stroke, under the screen, but above the Center button).
  • Then press the Center button. The Contacts app minimizes to a "Card."
• Tap the Calendar icon in the Quick Launch bar.
  • Create a new appointment by tapping on a date and typing the event name.
  • Tap the "i" to set details for the event.
  • Press the Center button again. The Calendar app minimizes to a card.
• Tap the Email icon in the Quick Launch bar.
  • Input your account settings and connect to your email service.
  • Setup an account for another service, as well (if you have a second email account).
  • The email app fetches your email, and allows you to browse your mail account-by-account, or all emails together in a single list.
  • Press the Center button again to minimize the application.
• Now flick left-to-right over the cards, to scroll through them. Tap the one in the center to bring it forward.
  • The webOS operating system is a multitasking environment. Even when an app is not maximized (occupying the whole screen), it's still working in a card or in the background.

Polite Notifications

Imagine that you're browsing a web page, and you get an email or a text message. The webOS platform allows any running application to display a small notification at the bottom of the screen. These notifications politely let you know that what happened, without interrupting your work and insisting that you tap them before you can return to whatever you might have actually been doing.

Urgent Notifications

Imagine that you're writing an email and you've lost track of time, and it's time to leave for an important meeting. The webOS platform allows any application to display a popup notification, to inform you of the really important thing it needs to tell you. In the example, the Calendar application would have displayed a popup notification to let you know that it's almost time for the meeting. Popup Notifications slide up from the bottom of the screen. As a developer, you can display anything in them. The Calendar app uses them to remind users of upcoming events. Users can "Dismiss" the reminder (which causes it to disappear) or "Snooze" it (to minimizes the notification to a Dashboard Summary icon, so the user can still see the reminder while they continue working with the current application).