Prototype, Action drawer overlaid, webOS v3+ Actionable Notifications
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:
- a paper sketch, in which the seeds of these three directions were brainstormed
- three sets of Balsamiq Mockups prototypes, from which this prototype comes. Samples from the other two: action drawer to expand below and action drawer to expand to the right)
- one interaction flow diagram for each of these design directions: action drawer as overlay, action drawer to expand below, and action drawer to expand to the right)
- a clickable PDF prototype (download; action drawer to the right)
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.