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!
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.
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.
Very nice, but yet another tab…
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…
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.)
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.
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.
What goes under “Languages”? Language packs and dictionaries?
Hey where do i download Caffeinated Fox? Sounds Awesome.
@Harsh No such thing, but feel free to take the name and make something that injects caffeine into my bloodstream while I browse
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?
@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
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.
@linuxer
Download a nightly Linux build and you’ll see that the design is going in the same direction there.
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.
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 :).
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.
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.
@Alex
Ah, ok, cool. I got the impression from Boriss’ intro that these were screenshots from from a recent nightly.
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.
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.
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.
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.