Latest revision as of 21:06, 3 June 2010

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

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.

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

Detail View Without an Image

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.

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

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 Add-on (restart needed)

Enabling an Add-on (restart needed)

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.

Installing an Add-on from the Add-ons Manager

Installing a Reviewed Add-on from AMO

Installing an Unreviewed Add-on from AMO

Installing an Add-on from Another Website

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

Notification of Add-on Installation from AMO or External Site

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.

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

Blocklists

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.

@@ Line 41: / Line 41: @@
 *Link to AMO Profile and developer's own add-on page
 *Rating
-*Add-on Preferences
+*Add-on Preference
 [[File:Detailed view 234234.png|500px]]
-== Themes and Personas View ==
+=== Detail View Without an Image ===
-((coming soon))
+[[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 =
@@ Line 53: / Line 59: @@
 == Main Functionality ==
-===Removing an Add-on from the Manager===
+===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.
@@ Line 59: / Line 65: @@
 [[File:Removing and addon 9143.png|500px]]
-===Disabling an Add-on===
+===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===
@@ Line 84: / Line 102: @@
 ===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.  No notification outside of the add-ons manager is given when an update occurs; only the "last updated" date of an add-on changes.
+By default, add-ons are updated automatically.  However, users can prompt for updates to be installed at any time.
-If a user wants to disable automatic updates for an add-on, they must uncheck the "Update automatically" checkbox in that add-on's preferences.  Once this box is unchecked, a button to manually check for that add-ons updates appears, through which the user can install an update.
+[[File:Just the preferences dropdown2323.png]]
+On each category view page, a button will open a drop down menu with three options:
-PIC
+# '''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==
@@ Line 99: / Line 143: @@
 [[File:Multipleimages.png|500px]]
-===Rating and Add-on from the Manager===
+===Rating an Add-on from the Manager===
 [[File:Rating stars balls.png]]
-********
+==Downloading and Installing Add-ons from AMO==
-old stuff below
-********
+[[File:Download_install_amo.png|800px]]
-==Downloading and Installing Add-ons from AMO==
+=Resources=
+=== New Theme Wireframes  ===
-[[File:Download_install_amo.png|800px]]
+<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>

Firefox/Projects/Extension Manager Redesign/design: Difference between revisions