Firefox/Projects/Extension Manager Redesign/design

From MozillaWiki
Jump to: navigation, search

For the purposes of development, this wiki is explicitly separating the visual design of the add-ons manager with the interaction design. The visual design section will have the most up-to-date mockups of how the add-ons manager will look, and the interaction design section will have the most up-to-date mockups of how the add-ons manager will behave. The reason for this separation is so that smaller changes to the design will not require re-doing all of the interaction design mockups. It can be assumed that the interaction mockups are up-to-date insofar as the highlighted behavior is effected.

Visual Design

The default Add-ons Manager view will be in a two-panel basic hierarchy view within the content area of the browser. Add-on categories will be in the left panel, and expanded view will be on the right.

The following are not pixel-perfect finals graphics, but mockups for placement. Graphics and colors should be assumed to be placeholders.

An add-on can be viewed in three ways in the right panel:

Digest View

Digest view shows a small amount of information, similar to what the current add-ons manager shows, which is visible when add-ons are viewed in a list. In this view, the following are visible for an installed add-on:

  • Add-on Name
  • Author name with link to AMO Profile
  • Partial add-on Description
  • Disable and Remove Buttons
  • Date last updated
  • Rating
  • Link to Expanded Digest View

Digest view 23453.png

Expanded Digest View

Expanded digest view gives the full add-on description, with links to the add-on's homepage, AMO profile, badness score, and Contribute link.

Digest view expanded 23423.png

Detail View

Details view shows one add-on in the full content area. The following are visible for an installed add-on:

  • Add-on Name
  • Author name with link to AMO Profile
  • Add-on Description
  • Disable and Remove Buttons
  • Date last updated
  • Contribute link
  • Link to AMO Profile and developer's own add-on page
  • Rating
  • Add-on Preference

Detailed view 234234.png

Detail View Without an Image

Addon no pic.png

Wallpapers and Themes View

Wallpapers (formerly "Personas") and Themes will both be displayed and configured within the Appearance pane of the add-ons manager. At the top of the pane, the current wallpaper and theme will be displayed. Users can replace a theme by dragging it to a current slot or by selecting "Use Theme" or "Use Wallpaper" on that item.

Personas and wallpapers mocks with previews at top.png

Interaction design

Main Functionality

Removing an Add-on from the Manager (no restart needed)

When the user clicks the Remove button on an add-on, that add-on disappears from their manager. A notification appears on the top of the page, alerting them that their add-on has been removed and including a link to undo that action.

Removing and addon 9143.png

Removing an Add-on from the Manager (restart needed)

When the user removes an add-on that requires a restart, the add-on fades as if disabled and the word (removed after next restart) are appended to its name. The "Remove" button becomes an "Undo Remove" button.

No restart needed removing an addong from manager.png

Disabling an Add-on (no restart needed)

When the user clicks the Disable button, the add-on's information fades to 50% opacity, and (disabled) is appended to the name. The Disable button becomes and Enable button.

Disabling an addon 32423.png

Disabling an Add-on (restart needed)

Disabling restartneeded emredesign.png

Enabling an Add-on (restart needed)

Reenabling restart needed emdesign.png

Searching from within the Add-ons Manager

A search can be initiated on any screen of the add-ons manager by entering a query in the search box on the top right. Searching returns add-ons that are both already installed and on AMO. This can be modified via the checkboxes on the top of the search page.

Just searching onescreen.png

Installing an Add-on from the Add-ons Manager

Installation from within addons manager.png

Installing a Reviewed Add-on from AMO

Trusted amo install.png

Installing an Unreviewed Add-on from AMO

Unreviewed and from amo 324.png

Installing an Add-on from Another Website

Unviewed and not from amo234.png

Upgrading Existing Add-on (from AMO or other Site)

Addon upgraded source agnostic.png

Notification of Add-on Installation from AMO or External Site

Addon installation notifications dropdown doorhanger.png

Updating Add-ons Automatically and Manually

By default, add-ons are updated automatically. However, users can prompt for updates to be installed at any time.

Just the preferences dropdown2323.png

On each category view page, a button will open a drop down menu with three options:

  1. Update Add-ons Now
    This will perform an update inline, updating all add-ons in all categories. After an update, users will see a link to view updates, which will create a "Recent Updates" tab.
    Manually checking for updates with pref dropdown.png
  2. View Recent Updates
    Selecting this option will create a new tab called "Recent Updates" with a log of all updates that have been recently applied to add-ons.
    Manually look at recent updates34242.png
  3. Update Add-ons Automatically
    This binary option, checked by default, will allow a user to change their add-ons from updated automatically to updating manually. If users choose to update add-ons manually, a new pane called "Available Updates" will be always visible in the add-ons manager. From this pane, users can update all add-ons at once or choose updates individually.
    Manual installation of addons with manual pref set23423.png


Plugin Updates

Plugins are the one item in the add-ons manager that can't be silently, automatically updated. So, we need a way to both notify users that they need to update plugins, and provide a relatively painless way for them to do it.

Users will discover that they need to update their add-ons via a doorhanger notification that appears when the user restarts once a week or each time the user restarts (whichever happens less). Dismissing the notification (via a click anywhere else) or pressing "Remind me Later" will dismiss the notification for another week. Pressing "Update" will take the user to an "Available Updates" pane in their add-ons manager, which will show the plug-ins that have updates available.

In a perfect world, from this screen the user would be able to install all plug-in updates by clicking "Install Updates." However, it's unlikely this will be possible (at least in the near future), and users will likely have to update plug-ins individually. Assuming this is the case, the "Available Updates" pane would show each plugin with a notice similar to those in the Plugin Check online for both the "potentially vulnerable" and "vulnerable" case.

If plugins can be updated in-line within the add-ons manager like other add-ons, they will be if the user clicks Update Now. If the plugin requires a download from an external site, the update button will link to the external site where the user can manually download and install the plugin.

Plugin manual update in addonsmanager2342.png

Other Functionality

Displaying Multiple Screenshots in the Add-ons Manager


Rating an Add-on from the Manager

Rating stars balls.png

Downloading and Installing Add-ons from AMO

Download install amo.png


New Theme Wireframes