Visual Dictionary of Mozilla UI

dictionary.md

A Visual Dictionary of Firefox User Interactions

• see: https://gist.github.com/2563007 for the proposal
• see: https://gist.github.com/2563011 for the actual work.

Catalog of elements

banner / notification box

100% wide bar in a tab. One displays at a time. Stays until user closes or uses buttons. Different colors and styling based on "priority" (warning, info, etc.)

In the wild: used by telemetry opt-in. Was used more before.

Limitations: Constrained (no arbitrary html) to icon|text|buttons . Buttons have to be text.

Recommended Uses:

panel

(from addon-sdk) Floating, unanchored (or anchored to ) html content.
By default, styled platform-specific. Allows arbitrary HTML content.

Limitations: Hides when user clicks anywhere else (with no obvious way of recovering)

Recommended Uses:

doorhanger

(from lind's moz-ui) A panel that is anchored on a chrome (usually!) element. It looks like a comic-book "quote box". Implemented from panel.

Limitations: Hides when user clicks anywhere else.

notification / growl

"toaster" popups. In addon-sdk these are notify.

Limitations: Annoyingly on OSX, this is 3rd-party provided. If the user doesn't have "Growl", it goes to the console log! Unpredictable how long these message stick around.

Recommended Uses:

nag

A notification (of any sort, but panel is most common), that reappears on a schedule if the user misses it.

Limitations: Home rolled implementation involving a persistent queue.

toolbar button

button on the toolbar.

Limitations: Persistent in current implmention. No current code in the sdk.

addon bar button

addon-bar at the bottom of the browser. Can be image or text. "widget" in the sdk.

Limitations: None.

menu entries

right-click selection entries

color flash

Limitions: Doesn't really exist! Sound / flashing and such have not been used much with Firefox. It might be time to revisit these things, especially on mobile platforms.

Open Questions / Specific Recommendations

What should doorhangers anchor to?

(in order of preference)

• extension specific addon bar button
• extension specific toolbar button
• functionally related button (for something tab related, 'new tab')
• home button (if nothing else fits)
• (give up, either plan for it being a panel or use another notification system)

Someone clicked away from my panel / doorhanger. What does that mean?

Either they wanted to say no or yes or they ignored it. You might want to consider the "nag" option above. Gregg's (naive) assumption is that you try 3 times (because 3 is mystical), 1 minutes, 1 hour, and 1 day later (because 1 is also mystical). If they miss all three, make a decision that both maximizes user sensitivity and user benifit. When that fails, just try not to do anything evil, even if that means you miss out on something that benefits you.

I like to make my notifications LOUD. What should I use?

First things first. Does your application really need that volume? Hint: you probably don't. (see elsewhere/TBD for recommendations)

on appropriate notifications for different tasks)

Supposing you actually do need it to 'go to 11', here is how you do it.

(remember that you can combine forces for extra loud. Also this list is probably wrong, and needs UR validation).

(for desktop, might be different on mobile)

• sound / visual bell
• Banner in every tab
• doorhanger in every tab.
• (thing x in every tab)
• Banner
• doorhanger
• system notification
• panel? (and other ephemeral content)
• (x in background tab)
• console.log (debug only)

My feature is the awesomesauce. Where can I put it for most visibility?

• overlay on every page
• location bar button
• addon bar button(widget)
• menu
• right click / context / selection menu
• about:config
• about:

I have fantasy / blue-sky features that aren't in firefox!

Me too! Some of mine:

• notifications that involve movement. Could an addon button pulse when it needs attention?
• more use of color animation. What if Fx pulsed to red when it needs a security update?