Visual Dictionary of Mozilla UI Proposal

proposal.md

A Mozilla Visual Dictionary (Project Proposal)

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

Questions this helps solve

• I want to communicate with users. How do I do it with appropriate insistence?
• Where to put things ui, such that they are likely to be clicked on?
• How does my code "fit in" with other addons and existing Firefox idioms

Proposed Work Products

• (from ux) Recommendations / consensus for how to achieve different user interaction effects on different platforms
• (from addons - or ur) Code examples of how to do this
• (from ur) Additional research to validate assumptions

(see Project Phases below)

Assumptions

• consistency within platform (on Fx desktop, an 'info banner' should be mean 'X'
• no backward compatibility is assumed. If we want to start from Australis, that is fine.

Project Phases

Phase 1 (catalog)

• enumerate and categorize existing interactions. For each, decide consistent naming, link to examples and images, demonstrations in code, and technical limitations / sharp edges.
• start consensus building with addons, UX, UR.
• moz-ui.js addon kit, with functions like "notify", "doorhanger" and the like. (some new functionality, mostly

Phase 2 (moods and feelings)

• Reframe the discussion from the technical aspects to the mood aspects.
  (analog with html "[bold]" or "[italic]" --> "[strong]" or "[emphasis]")

• moz-ui.js gets wrapped functions like "warn" or "softnotify" or "nag" that give platform appropriate UI elements. This lifts the burden from developers to know the cross-platform details, and encourages consistency within a platform.

  As a contrived example require('moz-ui').freakout("OMG!") might cause:

  • (mobile) system notification and phone buzz / flash
  • (desktop) a banner in every tab.