Add-ons Manager UI Update
August 29, 2010
I’ve posted quite a few mockups on this blog of Firefox’s redesigned add-ons manager’s features and interactions. What I haven’t shown are screenshots of how the manager will actually look in Firefox 4.0. The following are designs, based on Stephen Horlander’s work on the new Firefox theme, of the add-ons manager in OSX and Windows 7. The icons are still placeholders, but the rest of the design is pretty near finalized.
In the image below, you’ll see three windows for each operating system. The first row shows list view, where a short summary of each add-on and its description are shown. Buttons allow the user to disable an add-on or launch its preferences. Clicking “More” takes the user to detail view.
The second row shows detail view, where the user sees more information about a single add-on. The full description is displayed as well as a contribution box if the add-on’s author chooses.
Finally, appearance view shows installed themes and backgrounds (previously personas). Since these add-ons are primarily visual, the interface gives a large preview of each item and does not display a description.
Dave Townsend and Blair McBride have been working hard on implementing these visual changes as well as the slew of under-the-hood improvements that are making the add-ons manager faster and more stable. To see how it’s coming along, try running a nightly build in your operating system of choice. Hope you like it!
Jennifer Morrow's Blog 
August 29, 2010 at 9:12 am
Sad to see the navigation toolbar gone. Couldn’t you just make it a popup window like the old addons manager, if you don’t like it to be a tab?
Other than that, the new addons manager looks really great.
August 29, 2010 at 9:12 am
I imagine a back button in the top left corner in the Detail view, or some kind of stack showing that you’re in a submenu.
August 29, 2010 at 9:20 am
Very nice, but yet another tab…
August 29, 2010 at 9:53 am
So to uninstall an addon, you have to click on the “more” link at the end of the text description? That doesn’t seem very obvious…
August 29, 2010 at 9:58 am
So very pretty! Also, this really sells tabs on top. (I had been wondering how the chrome privileged panels worked with the URL bar, having completely forgotten about the decision to move to tabs on top.)
August 29, 2010 at 10:05 am
Looks nice!
Just something that catched my eye when looking at it closer:
How comes that the author of “Black Stratini” is listed as AmbientThemes? I thought it would be Patrick J Dempsey and indeed that’s what AMO says. The preview image even seems to be cropped from his screenshot #2, at least it matches to the pixel.
Is there a ‘fork’ of it? If there’s none and it is really the orginial “Black Stratini” then I wonder why you don’t give the credits he deserves for such a nice theme.
August 29, 2010 at 10:57 am
[…] Arbeiten am Theme von Firefox gehen weiter. Hier einmal ein paar Design-Ideen, wie der Erweiterungs-Manager in der finalen Version von Firefox […]
August 29, 2010 at 12:49 pm
Unlike the the tab-chrome in Google Chrome and Safari, this looks *right*, and this is why I like Firefox: you all do things right.
August 29, 2010 at 1:36 pm
What goes under “Languages”? Language packs and dictionaries?
August 29, 2010 at 2:10 pm
Hey where do i download Caffeinated Fox? Sounds Awesome.
August 29, 2010 at 2:13 pm
looks awesome, but what about linux love?
why only mac and windows gets all these cool new designs of old stuff, and we, linux users, don’t?
August 29, 2010 at 3:12 pm
Why has the button next to the search box no label and should some of the menuitems maybe shown as separate buttons?
By the way, there is a Dr. Evil at addons.mozilla.org, but his extensions aren’t evil.
August 29, 2010 at 5:09 pm
@linuxer
Download a nightly Linux build and you’ll see that the design is going in the same direction there.
August 29, 2010 at 7:50 pm
this blog post is not about the AMO content, its just for show.. its about the design, which looks great. I don’t get why we need so much white space to the left, but I understand some of the fonts might have be wrapped otherwise. Cannot wait to see this in nightlies.
August 29, 2010 at 10:41 pm
A couple of comments…
I understand you wanting to keep a clean look, but moving the Remove button to the drill-down detail view seems to make an unnecessary extra (tedious) step. I assume you’re going to ask for confirmation of the uninstall so ‘Are you really sure?’ isn’t the issue. The majority of users will have a wider window than these demos and the description can be clipped, so horizontal space shouldn’t be an issue in the list view.
All that to say that I really don’t *want* to have to drill down to uninstall and more importantly, it is non-obvious to your average Joe user who simply wants to uninstall but can’t see how.
In the same vein, I’m very concerned about the more link. Nowadays when I see the a ‘more’ link at the end of a short description it means that clicking it will expand the description and its area within the current view, not that I will be provided with a new view (iTunes being a prolific example of this, but others too). I’m concerned that many users will think that’s just what it is and never think to click there. I know it’s late, but I think this element should be rethought.
Otherwise, I really do like this design. It looks good & is aesthetically pleasing.
P.S. I was disappointed not to find a pile of cats at the bottom of the screen, but I suppose I’ll live :).
August 30, 2010 at 12:21 am
While the mockups don’t have it, current nightlies have a remove button next to the date in the detail list, you don’t have to drill down to remove the addon.
August 30, 2010 at 2:52 am
this isn’t really about the styling, but something I’ve wished I could do in the new addon manager is hide disabled add-ons, so I can just see what addons might be causing a problem. Just 2c for the next rev.
August 30, 2010 at 3:07 am
@Alex
Ah, ok, cool. I got the impression from Boriss’ intro that these were screenshots from from a recent nightly.
August 30, 2010 at 4:32 am
[…] Third and final Screenshot shows Appearance view which shows all themes and backgrounds installed for Firefox 4 .Hover the mouse on each theme will show large preview of theme. (via) […]
August 30, 2010 at 6:36 am
[…] Po vydání této zprávičky uveřejnil Jennifer Boriss ve svém blogu ukázky, jak by měla vypadat finální podoba jednotlivých částí Správce […]
August 30, 2010 at 8:20 am
Yeah, placeholders… I was a little shocked today to learn that my experimental extension which I never published had 5,341 downloads 🙂
As to the mockups – they look great, looking forward to seeing this design in the nightlies soon. What I find somewhat concerning however: why are we making it easier to turn off auto-updates for add-ons? The preferences button next to the search box is probably considered advanced functionality, that’s ok. But the huge “Automatic Updates” field in the detail view allowing to turn off updates for an extension selectively? Does it really have to be? Sure, extension updates aren’t quite as important as Firefox security updates – but I do think that keeping users on the latest extensions is still important. In particular because there is no way to indicate when an extension update fixes a security issue or a major compatibility problem.
August 30, 2010 at 9:19 am
The back/forward buttons are not necessary and navigating through nested components without exposing them is not intuitive for people who rely on visual cues to map location.
A good approach will be similar to any of the 3 programs:
1. Windows Explorer bread-crumbs
2. iTunes store navigation bar
3. GIMP open/save dialogue box
I believe this is something you showed before to that accord: http://blog.stephenhorlander.com/2010/06/01/in-content-ui-visual-unification/
I think you need to give a full screen of information like shown in the second “Caffeinated Fox 1.2” view but you need to show the nested path to this view.
Also merging the Add-ons and Preferences tab together will create one central location to manage Firefox. Many extensions have their own settings and will need a whole page to display options. Consolidating Add-ons and Preferences will streamline the experience users are accustomed to (browsing) and reduce the number of place people head to when setting something.
I wanted to suggest that the Firefox menu be a Firefox tab also containing Add-ons and Preferences but I think not all usability features will be accounted for.
September 16, 2010 at 3:01 am
One thing I would like to see is to have the back/forward page controls move to the right so they are left-aligned with the left edge of the frame that actually changes state. Having the controls over the menu selection does not seem intuitive and involves more mouse movement since the “browsing page” is the sub frame. I think they would be more recognizable as page controls above the part of the page that is actually changing state.
September 22, 2010 at 7:31 pm
@Harsh No such thing, but feel free to take the name and make something that injects caffeine into my bloodstream while I browse
September 22, 2010 at 7:32 pm
@linuxer We can’t specify colors and icons in Linux, so showing what it would look like on a particular build of Linux wouldn’t say much about anyone else’s. That said, we could show common themes on common distributions
November 4, 2010 at 5:31 am
[…] continues, some parts of the manager’s functionality have been adjusted and updated since I last posted mockups. Here are a few highlights of what’s been going […]
July 11, 2011 at 8:39 pm
Does it really have to be? Sure, extension updates aren’t quite as important as Firefox security updates – but I do think that keeping users on the latest extensions is still important.
December 18, 2011 at 11:15 am
[…] che ricopre il ruolo di “User Experience Designer” presso Mozilla, ha pubblicato alcune schermate semi-definitive dell’add-on manager […]
March 11, 2013 at 3:35 pm
[…] che ricopre il ruolo di “User Experience Designer” presso Mozilla, ha pubblicato alcune schermate semi-definitive dell’add-on manager […]
April 16, 2022 at 9:20 am
[…] Third and final screenshot shows appearance preview which shows all installed themes and backgrounds for Firefox 4. Hover over each theme to show a large preview of the theme. (by) […]