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!

29 Responses to “Add-ons Manager UI Update”

  1. Jesper Kristensen Says:

    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.

  2. Ernst Says:

    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.

  3. mmc Says:

    Very nice, but yet another tab…


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


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

  6. Mic Says:

    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.


  7. [...] Arbeiten am Theme von Firefox gehen weiter. Hier einmal ein paar Design-Ideen, wie der Erweiterungs-Manager in der finalen Version von Firefox [...]

  8. Josh Says:

    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.

  9. Says:

    What goes under “Languages”? Language packs and dictionaries?

  10. Harsh Says:

    Hey where do i download Caffeinated Fox? Sounds Awesome.

  11. linuxer Says:

    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?

  12. Archaeopteryx Says:

    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.

  13. Says:

    @linuxer
    Download a nightly Linux build and you’ll see that the design is going in the same direction there.

  14. cuz84d Says:

    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.

  15. Mark Says:

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

  16. Alex Says:

    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.

  17. David Ascher Says:

    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.

  18. Mark Says:

    @Alex
    Ah, ok, cool. I got the impression from Boriss’ intro that these were screenshots from from a recent nightly.


  19. [...] 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) [...]


  20. [...] 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 [...]


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


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

  23. Mike Clackler Says:

    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.

  24. jboriss Says:

    @Harsh No such thing, but feel free to take the name and make something that injects caffeine into my bloodstream while I browse

  25. jboriss Says:

    @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


  26. [...] 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 [...]


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


  28. [...] che ricopre il ruolo di “User Experience Designer” presso Mozilla, ha pubblicato alcune schermate semi-definitive dell’add-on manager [...]


  29. [...] che ricopre il ruolo di “User Experience Designer” presso Mozilla, ha pubblicato alcune schermate semi-definitive dell’add-on manager [...]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 46 other followers

%d bloggers like this: