Paper Sketch, Actionable notifications for webOS v3+

One idea, three directions, literally, for the design--an expandable action drawer on top, below, and to the right

Bookmark.

webOS notifications were largely regarded as a great design, from webOS version 1.x to 2.x to 3.x. But even they could be improved. In this sketch, I explore three ways to evolve webOS notifications more “actionable” in a tablet.

webOS notifications were regarded as being among the best on any mobile OS when they were first introduced as part of Palm’s 2009 CES webOS and Pre presentation. Their three primary user experience strengths as I saw them were that they 1) were unobtrusive and non-modal when they appeared, 2) shrink quietly into a still-visible notification area when completely ignored through user inaction, 3) can be easily recalled to larger form in a “dashboard view” (through a single tap).

webOS 2.x added indicators of the numbers of notifications for each application, and webOS 3.x for tablets, added the ability to dismiss the top notification in an application’s stack of notifications to see the next notification.

Homebrew patches to webOS and some applications’ innovative use of their own notification space gave users the option to actually do things to an application’s data directly from that notification, like delete an email (vs having to first go into the email app), while allowing users to stay “in” the application they were in.

In designing a framework for actionable notifications as an evolution to webOS v3.x, I sought a standard solution to the question of how any application could offer a set of sensible actions to users from that app’s notification. The idea hinged around offering a default action—available directly—and a set of other actions available via an expandable action drawer.

The sketch above shows the seeds of literally three different directions for that drawer—to expand as a translucent overlay over its notification, to expand as an additional row under its notification, and to expand as a vertical array of actions to the right of its notification.

I then explored these directions more fully as Balsamiq mockups, both as interaction flows (action drawer as overlay, action drawer below, and action drawer to the right), as a set of Balsamiq Mockups prototypes (e.g., action drawer as overlay, action drawer below, action drawer to the right), and as 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.

Leave a Reply