Confirmed users
1,492
edits
Mobile/Fennec/Extensions/UserInterface: Difference between revisions
Jump to navigation
Jump to search
Mobile/Fennec/Extensions/UserInterface (view source)
Revision as of 17:25, 22 September 2009
, 22 September 2009→Fitting in Fennec's user-interface
| Line 103: | Line 103: | ||
===Anatomy of the Fennec UI=== | ===Anatomy of the Fennec UI=== | ||
Different sections of the Fennec UI will be better or worse for your add-on, depending on how and when your add-on is most used. | |||
==== Titlebar ==== | ==== Titlebar ==== | ||
| Line 109: | Line 109: | ||
[http://www.flickr.com/photos/menros/3841092292/in/set-72157622096371190 http://farm3.static.flickr.com/2514/3841092292_61ac017bfc_m.jpg] | [http://www.flickr.com/photos/menros/3841092292/in/set-72157622096371190 http://farm3.static.flickr.com/2514/3841092292_61ac017bfc_m.jpg] | ||
The titlebar | The titlebar is present when the application is first started, and also at the beginning of every new page load, so it makes sense to put things here that are needed at the beginning of a browsing task. It scrolls off the screen as a user pans down a webpage, so it is not a useful place to put items that are needed in the middle of a browsing task. | ||
It contains information about the page you are currently on (page title and further site identity information | |||
====Control Bar==== | ====Control Bar==== | ||
| Line 131: | Line 134: | ||
====Notification Bars==== | ====Notification Bars==== | ||
[http://www.flickr.com/photos/menros/3859611222/ http://farm3.static.flickr.com/2310/3859611222_f0811a17ae_m.jpg] [http://www.flickr.com/photos/menros/3858823055/ http://farm3.static.flickr.com/2509/3858823055_682e88abc4_m.jpg] | [http://www.flickr.com/photos/menros/3859611222/ http://farm3.static.flickr.com/2310/3859611222_f0811a17ae_m.jpg] [http://www.flickr.com/photos/menros/3858823055/ http://farm3.static.flickr.com/2509/3858823055_682e88abc4_m.jpg] | ||
Use a notification bar to ask the user a question related to the site that he or she is currently on. In other words, if the browser or add-on is helping the user to control his/her interaction with a site ("will you allow this site to install software?" or "can this site know your location?"), then a notification bar is the UI component to use. They are attached to the titlebar so that the user knows who he or she is being asked about. | |||
Notification bars will persist, so the user doesn't not have to make a decision immediately. | |||
Try not to use notification bars to give the user information that is not related to current site (i.e. browser or system upkeep questions), or that does not _require_ user feedback. To communicate a bit of information the user may find helpful, but that does not require user intervention, use an alert (next section). | |||
====Alert Boxes==== | ====Alert Boxes==== | ||
[http://www.flickr.com/photos/menros/3910981334/ http://farm4.static.flickr.com/3472/3910981334_422f282f13_m.jpg] | [http://www.flickr.com/photos/menros/3910981334/ http://farm4.static.flickr.com/3472/3910981334_422f282f13_m.jpg] | ||
These are transient (they pop up and go away on their own) information boxes that Fennec uses to communicate things that the user should know, but doesn't necessarily have to make a decision about. Some examples: new tab opened in background, download started/complete, add-on installed, new update available. | |||
They typically are also used more for messages about the browser or system, rather than about the page the user is on -- for the latter, especially if some action is required (block a popup? remember this password?, etc.), use a notification bar because it is attached to the site-identity-containing titlebar. | |||
If an alert is related to something that is situated in a particular place on a sidebar (tab bar or control bar), try to line the alert up vertically with that thing. Examples: "tab opened" is aligned with the opened tab thumbnail; alerts relating to the add-ons manager, downloads, or prefs are aligned with the Browser Tools button in the control bar. | |||
Use a symbol/icon to associate the alert with the button or area it refers to. | |||
====Site Menu==== | |||