Prototype, Action drawer overlaid, webOS v3+ Actionable Notifications

The prototype shows the frame of the HP Touchpad, the status bar from within an application, the notification area dropped down, and the action drawer opened.


A Balsamiq Mockups prototype for an action drawer overlay as an actionable notifications framework that evolves webOS v3.x’ much-lauded notification system.

This prototype is an exploration of one design direction for evolving webOS v3.x’ much-lauded notification system, arguably one of the best available in any mobile OS since webOS’ debut at CES 2009.

Striving to make webOS’ notifications actionable—that is, giving users the ability to take action on the app’s content about which they were notified directly from the notification without having to first open the related app and leaving the one they’re in—the proposed solution is to offer a default action that is directly available (i.e., as a tap target) and a set of actions that are available upon the expansion of an action drawer.

In this prototype, the action drawer opens as a translucent overlay over the notification for which it was invoked and on which the actions will apply. The actions for this email notification stack are, from left to right: Close Action Drawer, Help (invokes pop-up labels for each of the actions’ icons), Mark as Read, Recycle Notification, Mark as Spam, Flag, and Delete (which is the default action).

I had two other design directions (literally) that I wanted to explore—for the action drawer to open into a new row to expand below the relevant notification and for the action drawer to open to the right of the relevant notification.

Artifacts from other UX stages of this project include:

As a fan of webOS, I did this as a personal project. I will write a fuller article about the project, but my 39-page design vision document is available now. In it, I document the process that I followed from rationale to sketches and a couple of iterations of prototypes produced in Balsamiq Mockups.

Comments are closed