Confirmed users
1,492
edits
Firefox:Add-ons Manager UI: Difference between revisions
→Current Design (2007-08-21)
No edit summary |
|||
| Line 19: | Line 19: | ||
=== Current Design (2007-08-21) === | === Current Design (2007-08-21) === | ||
==== | ==== Newly Open Manager ==== | ||
http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/thumb1.png | http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/thumb1.png | ||
http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/am1.png | http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/am1.png | ||
==== | This mockups depicts the case where a user who already has a few add-ons has just opened the Add-ons Manager. A maximum of three recommended add-ons are shown in the "Recommended" section -- users can install or dismiss these individually (using the in-line icons or buttons in the preview pane), or can dismiss the whole section. | ||
If the user did not yet have any add-ons (though even a new user will likely have a few "Players" (plugins)) the categories in "Your Add-ons" would be empty. We should probably offer some visual indication that a category is empty (grey out the closed twisty control, perhaps). | |||
Some category translation: | |||
Features = Extensions | |||
Players = Plugins | |||
Languages = Languages/Dictionaries (this deserves more discussion) | |||
Search Engines = as before | |||
Themes = as before | |||
==== Searching for Add-ons ==== | |||
http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/thumb2.png | http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/thumb2.png | ||
http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/am2.png | http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/am2.png | ||
==== | In this mockup, a user has decided to search for an add-on. He or she does so by means of the "Search All Add-ons" field and hitting enter -- the space below, previously occupied by the recommended list, becomes the search results space. It expands to the size of the coming content (5 lines worth of search results) and indicates that a search is in progress. | ||
Focus would not actually jump to the first installed add-on, but I shown it that way in the mockup in order to show the preview pane content for an installed add-on. The "Rate it" widget allows the user, unsurprisingly, to rate the add-on. "More Details" brings up the add-on's details page on AMO (all hyperlinks in the UI launch webpages whereas all buttons/icons launch Firefox UI). The buttons all correspond to functions currently available, though sometimes hidden, in the Fx2 Add-ons Manager. | |||
==== Search Results ==== | |||
http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/thumb3.png | http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/thumb3.png | ||
http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/am3.png | http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/am3.png | ||
==== | Here, a search having returned the top five results from AMO, the user can review the list. The preview pane contains the same information as it did for recommended add-ons. The user can install any of them by clicking on an inline install button or from the button in the preview pane. The full set of search results can be launched in a browser window by clicking on the "See all results" link. When the user is done with the search results, he or she can click the x in the search field or the close button at the bottom right of the result set. | ||
==== Installing an Add-on ==== | |||
http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/thumb4.png | http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/thumb4.png | ||
http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/am4.png | http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/am4.png | ||
==== | Here, the user has chosen to install one of the add-ons returned in by the search. The add-on in question leaves the list of search results, and shows up in its appropriate location in the "Your Add-ons" list with an inline installation-activity indicator and cancel button. More detail about the installation progress is shown in the preview pane (in practice, add-ons install fast enough that these won't be on the screen for very long). | ||
This process is the same for recommended add-ons. Installs initiated from the web are never present in the upper list, of course -- they simply show up, installing, in the list of "Your Add-ons." | |||
==== Install Complete - restart required ==== | |||
http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/thumb5.png | http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/thumb5.png | ||
http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/am5.png | http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/am5.png | ||
==== | When the add-on's installation is complete, it is shown as visibly disabled [probably the same visual indication as for fully installed but disabled add-ons] and with some inline indication that a restart is required (final form TBD). There is also an inline button to remove the add-on (also in the preview pane) -- this is all that can be done to the add-on until a restart is complete. | ||
On completion of the installation, a notification bar slides in at the bottom of the list offering the user a way to complete the installation. | |||
[ note: this notification bar button takes the place of the permanent restart button in the add-ons manager. For cases where the user dismisses this bar without restarting, we should add a "Restart Firefox" item to the File menu. ] | |||
==== Post-restart - single new add-on ==== | |||
http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/thumb6a.png | http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/thumb6a.png | ||
http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/am6a.png | http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/am6a.png | ||
==== | Post-restart, Firefox launches and the Add-ons Manager comes up on top. In the case where a user had installed only one new add-on, that new add-on is selected (we pre-scroll down to it) and it's options are therefore all visible in the preview pane. The user can configure if he/she wants to, and then closes the manager. The most important reason to have the manager up with the add-on selected is simply to give feedback that the restart actually accomplished something. For the new user, it also helps by demonstrating where they have to go in the future to configure add-ons. | ||
In this case, because the user never dismissed the search results, they are still there post-restart, minus the one that was installed. | |||
==== Post-restart - multiple new add-ons ==== | |||
http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/thumb6b.png | http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/thumb6b.png | ||
http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/am6b.png | http://people.mozilla.com/~madhava/files/addons/manager/2007-08-21/am6b.png | ||
In the case where multiple add-on installs have been completed by the restart, the manager comes up with the first of the new add-ons selected. All the other new add-ons are highlighted/glowing (conceptually, the first one is, too, though you'd never see it because the selection highlighting takes precedence) and do so until they are selected or the manager closed. In addition a notification bar comes up to let the user know how many new add-ons are installed. | |||
=== Older Redesign Versions === | === Older Redesign Versions === | ||