The “Single UI Element”

Myk Melez

One UI to contain them all, and in the browser find them

Your Convenient Life, Brought to you by standardization

Each day we are surrounded with triumphs of standardization, most of which are taken for granted. Perhaps none immediately come to mind? To help understand what I mean, let’s envision an alternate world that lacks some of the common forms of standardization we have come to rely on.

As you wake up in this alternate world, you turn to get out of bed and notice your clock is missing – time is after all a standardization. Not knowing when you should be (or should have been) at work you race into the bathroom to get ready. Feeling refreshed, you open your dresser drawer but don’t recognize any of the clothes in it. In a rush, you select the first shirt that looks like a winner – to your dismay, it doesn’t fit. In frustration, you look for tags (you’re a standard Men’s Large after all) but find none. After trying on 5 shirts, you find one that fits – unfortunately for you it’s a purple bowling shirt.

Whew! Now that you’re done getting ready, you grab your keys and run out the door. After a life-threatening drive in a car with no speedometer, streets with no signs, and intersections where each traffic signal has different rules for which light means “Go”, you arrive at work and take a seat at your desk. The last irksome thing you remember as you begin to awaken from this standardization nightmare is that each of the sleek, metal-wrapped devices on your desk in this alternate world required a special adapter to operate…well I guess some things never change

Here’s what we’re thinking…

The fanciful scenario above illustrates the fact that standardization is clearly essential to good usability in all areas of human interaction. Standardization can be achieved in many ways, for instance, the provision of an expected outcome or pattern, categorization by common traits, representative characters or symbols, or as in our extension UI case – a constant and predictable location for what the user is seeking. In Firefox, or any browser for that matter, imagine if the navigation buttons (back, forward, refresh etc.) were strewn about the application in random places – this would certainly be a poor usability choice. As we develop APIs for Jetpack, we have been thinking a lot about how these same usability issues apply to the persistent UI elements created by extensions within Mozilla apps.

One usability enhancement we will be offering to extension authors is a “Single UI Element” API. This API will allow extension authors to expose a UI element that represents their extension in a common, standardized extension bar. A presence in the extension bar will maximize both the user experience and discoverability of extensions. This does not mean we are removing the ability of the developer to modify the interface of Mozilla apps. Developers will continue to have the ability to interact with our application UI in the same ways they do now.

A “Single UI Element” presence in the extension bar is not the optimal choice for all extensions, some would benefit from other forms of UI, for example, a text-selection extension that use a context menu. The decision to take advantage of a this upcoming API will be left to the developer, but we think many extensions will greatly benefit from it.

What it could look like:

The image below is a proof-of-concept for what an extension bar might look like when it is populated with a few extensions. The API and design are still being developed, but it gives you a general idea of what we’re shooting for:

Extension Bar Concept

What do you think? Join the conversation on the Jetpack Google Group, we welcome your comments and suggestions!

- Daniel Buchner, on behalf of the Jetpack team.