View source for Firefox/Projects/Extension Manager Redesign/design

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

[[File:Digest view 23453.png|500px]]

== 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.

[[File:Digest view expanded 23423.png|500px]]

== 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

[[File:Detailed view 234234.png|500px]]

=== Detail View Without an Image ===

[[File:Addon no pic.png|500px]]

== 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.

[[File:Personas and wallpapers mocks with previews at top.png|800px]]

= 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.

[[File:Removing and addon 9143.png|500px]]

===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.

[[File:No restart needed removing an addong from manager.png|500px]]

===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.

[[File:Disabling an addon 32423.png|500px]]

===Disabling an Add-on (restart needed)===
[[File:Disabling restartneeded emredesign.png|500px]]

===Enabling an Add-on (restart needed)===
[[File:Reenabling restart needed emdesign.png|500px]]

===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.

[[File:Just searching onescreen.png|500px]]

===Installing an Add-on from the Add-ons Manager===

[[File:Installation_from_within_addons_manager.png|500px]]

===Installing a Reviewed Add-on from AMO===
[[File:Trusted_amo_install.png|500px]]

===Installing an Unreviewed Add-on from AMO===
[[File:Unreviewed and from amo 324.png|500px]]

===Installing an Add-on from Another Website===
[[File:Unviewed and not from amo234.png|500px]]

===Upgrading Existing Add-on (from AMO or other Site)===
[[File:Addon upgraded source agnostic.png|500px]]

===Notification of Add-on Installation from AMO or External Site===
[[File:Addon installation notifications dropdown doorhanger.png|500px]]

===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.  

[[File:Just the preferences dropdown2323.png]]

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

# '''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.
#:[[File:Manually checking for updates with pref dropdown.png|800px]]
# '''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.
#:[[File:Manually look at recent updates34242.png|800px]]
# '''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.
#:[[File:Manual installation of addons with manual pref set23423.png|800px]]

===Blocklists===

* [http://docs.google.com/Doc?docid=0Ad7mAOXgEBZyZGRzNnZ3YjRfMThmZ3FoY2Y4dA&hl=en blocklist proposal]

===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.

[[File:Plugin manual update in addonsmanager2342.png|800px]]

==Other Functionality==

===Displaying Multiple Screenshots in the Add-ons Manager===
[[File:Multipleimages.png|500px]]

===Rating an Add-on from the Manager===
[[File:Rating stars balls.png]]

==Downloading and Installing Add-ons from AMO==

[[File:Download_install_amo.png|800px]]

=Resources=
=== New Theme Wireframes  ===

<gallery>
Image:Individual addon initial mockup423131.png|Single add-on
Image:Multiple addons in grid23423.png|Add-on grid
Image:Old manager style layout435634.png|Old style
</gallery>