« Portfolio

Prototype, Action drawer to the right, 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 that opens vertically to the right 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 (with smooth animation) as a vertical array to the right of the notification for which it was invoked and on which the actions will apply. The actions for this email notification stack are, from top to bottom: Flag, Mark as Spam, Recycle Notification, Mark as Read, and Help (invokes pop-up labels for each of the actions’ icons). Delete (which is the default action), and the Close Drawer button (triangle) are in the same places where they were prior to expanding the drawer, for reasons of interface stabilty.

I had two other design directions (literally) that I wanted to explore—for the action drawer to open as a translucent overlay over the relevant notification and for the action drawer to open into a new row to expand below 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