All posts in Mozilla

Simplifying and Polishing the Add-ons Manager’s List View

As we approach the release of Firefox 4, the last few polish and stylistic changes are happening in the add-ons manager.  Some are simply graphic cleanup, while others are the result of beta testing the new manager for the past several months.

I wanted to highlight one change in particular that you’ll be seeing in the Firefox nightlies soon.  The date an add-on was last updated, rather than being displayed in list view, will now only appear in the detailed view of an add-on.  This also means that installed add-ons can no longer be sorted by last updated date.

Old vs New Add-ons Manager: Removal of Sorting Bar and Last Updated Date

For some users, this change is substantive and will feel disruptive.  So, I wanted to give the rationale behind this design decision.

1. Providing a simplified overview

The intended purpose of the add-on manager’s list view is to give a brief overview of the users’ add-ons and to provide only the minimal, most used information and functionality.  This minimal information is the name of an add-on, its icon, and a short description.  The minimal functionality is the ability to disable and remove an add-on.  Even the author name we’ve removed to provide the simplest, most visually scannable design.  By removing the last updated date, we not only visually clean an add-on’s list entry, but also eliminate the need for a sorting bar at the top of list view.  This gives back both whitespace and a cleaner appearance at the top of the list.

2. Updated date does not provide important functionality for most users

For most users, the last updated date does not give information meaningful enough to justify its placement in list view.  It allows users to see which add-ons have been updated automatically most recently, but does not give any details about the updates nor provide tools to interpret the information.

Some advanced users use the last updated date as a diagnostic tool to identify which add-on updates may be causing a recent problem in Firefox.  However, the date makes a very poor diagnostic tool. One reason is that the date does not give any information about the size nor scope of the update, and thus can only be used for diagnosis by disabling one add-on at a time to isolate a problem.  In many cases, a problem in Firefox caused by an add-on are instantly identifiable as being caused by a particular add-on.  Even in the rare case where a problem suddenly appears in Firefox, the chances of it being from an add-on update are not large.  A problem could be caused by any number of online events, which is why Firefox provides tools such as the Error Console and about:crashes to help diagnose them.  And, even if we were to give fuller information about updates in the add-ons manager and make it into a better diagnostic tool, why should this tool be so far removed from other diagnostic tools?  How could a new user figure out that, to access diagnostic tools related to add-ons, they should go to the add-ons manager rather than a more comprehensive diagnostic tool?  It would be wildly inefficient to apply this elsewhere in Firefox by placing diagnostic tools only on the interface elements they relate to.

What we should do is add diagnostic tools about add-ons to comprehensive tools such as about:support.  Then, we could  provide expert users the information they want in a better format while keeping one-off diagnosis away from list view in the add-ons manager.

3. The goal of removing updating entirely for most users

The intended purpose of automatic updates is to remove updating from the list of items the user has to care about and remember.  By exposing the updated date in list view, Firefox insinuates both that the updated date is very important that this is a process the user should manage.

Actually, the actual reason sorting and the last updated date were initially proposed in the add-ons manager design was to give users the ability to sort their add-ons by performance, not updated date.  Sorting by performance would allow users to find out how their add-ons effect Firefox on metrics such as startup time and memory.  However, the ability to rank an add-on’s performance is going to be a part of FIrefox after the 4.0 release, making the remaining sorting categories (alphabetic and updated date) much less useful.

By the way, Firefox 4 beta 10 is out, so please try it out and tell us what you think!

Do you know CSS? Make a Huge Difference in Firefox 4’s Add-ons Manager

Firefox 4 is right around the corner, and the Firefox’s community and team are working their butts off to make it as awesome as possible. The blocker list is going down every day, and the browser’s looking better than ever.

However, with everyone putting so much effort towards blockers, there are less people available to help with polish bugs for the add-ons manager. In particular, there’s a handful of bugs – mostly in CSS – that would take the add-ons manager from good to awesome. If you know CSS and are interested in helping with a feature used by millions, please consider taking a look at one of the remaining bugs. Not only will you be hailed as the people’s hero (by me anyway), but you’ll be helping millions of people customize their browsing experience.

Here’s a diagram of the remaining add-ons manager polish bugs:

www.donotlick.com

If you need any information or help, comment I’ll get in touch with you!

What’s New in Firefox’s Add-ons Manager

One of the best reasons to use Firefox is with thousands of add-ons available to customize it, you can turn it into exactly the browser you want. To make it easier for you to find and use add-ons, members of the Firefox team and community have been working to redesign the add-ons manager for Firefox 4.0. The new add-ons manager will be easier to use, sleeker, and faster than ever before.

Here are a few highlights of the new design:

Add-ons update automatically

No more warnings when your add-ons are out of date; Firefox will now update them automatically. This should happen without you even noticing, keeping add-ons safe and fast while eliminating the hassle of updating.

Make changes to add-ons without restarting

Restarting your browser is a pain. Developers can now build their add-ons for Firefox 4 such that no restart is required; add-ons built using the Add-on SDK get this for free. Restartless add-ons can be installed, modified, and removed without a single restart needed! More and more restartless add-ons are being created and made available on addons.mozilla.org every day.

Add-on manager in a tab, not a window

 


Instead of managing your add-ons in a small, separate window, the add-ons manager now loads in a tab. This means it won’t be so small and easily lost among other windows, and you can interact with it identically to other tabs, including resizing and moving.

New Get Add-ons pane

Justin Scott has been leading a project to create a new section in the add-ons manager we call the Get Add-ons pane. In the old add-ons manager, we displayed five featured add-ons that could be installed. This was done to show you some examples of add-ons – much like buying a picture frame with a stock photo already inside. Justin’s done a thorough revamp of Get Add-ons, building a page which introduces you to the concept of add-ons, highlights particular add-ons that are editorially selected, and helps you explore and discover other add-ons that match your interests. Justin’s currently working on a new feature for this pane which makes personal recommendations of add-ons you might enjoy based on which add-ons you already have installed.

Quickly find any add-on

If you want to make a change to an add-on but don’t know which category it’s in, you can now simply search for it in the new global search box. The add-ons manager can quickly locate an installed add-on or find you some matching add-ons that are available to install.

If you’re using Firefox’s nightly builds, you can already see many of the above changes in action. Blair McBride has recently put a lot of work into the new theme change, so now we’re working on the final few bugs and polish. If you’ve already used the new add-on manager, please share your thoughts by commenting or leaving a message on Firefox 4.0’s feedback page!

Changes for Firefox Mobile’s Add-on Manager

I’ve been blogging about Firefox’s add-ons manager lately. But what does the add-ons manager look like on Firefox Mobile?

Current Add-ons Manager on Mobile Firefox

Currently, the Android/Maemo add-ons manager in Firefox looks like the image below. At the top are the user’s installed add-ons. Below them, a “Get add-ons” section includes add-on catalog search and five recommended add-ons. Below these is a “Browse all add-ons” button which links to Mozilla’s Mobile Add-on page.

Current Add-on Manager in Firefox Mobile

How Should Mobile Users Learn More About Add-ons?

Giving users information about add-ons has been a continual focus in the non-mobile Firefox add-ons manager redesign. Justin Scott has been leading the design of Firefox’s “Get Add-ons” pane. This pane, which loads within the manager itself, introduces users to add-ons by recommending popular add-ons and promoting the community behind them. The pane also includes a “Learn More” button, which will eventually link to a site which provides add-ons help, information, and even videos about add-ons.

This solution works well on the desktop because of the space available in the add-ons manager and the ease of loading content within Firefox. But would should the mobile solution to add-on information be? And where should that pesky “Learn More” link lead on mobile?

The first option is for “Learn More” to go straight to Mozilla’s page for Mobile Add-ons. However, this site is a portal to our huge catalog of add-ons: it doesn’t provide the simple explanation that “Learn More” implies. Also, it forces the user to leave the add-ons manager and load a media-dense page. Both of these could negatively surprise users.

A second option is for “Learn More” to expand the current “What are add-ons” section within the column to provide more detailed information within the add-ons manager. This has the benefit of consistency with the current mobile UI, where some sections already expand to show more information. It also doesn’t require users to leave the add-ons manager. However, this design also has a few drawbacks. The page height becomes much taller, requiring more scrolling to go between the user’s add-ons and the recommended add-ons. Also, considering the “What are add-ons?” section already expands with a click, now there would either be three levels of zoom or a large surprise the first click.

A third option would be to create another page, within Mobile Firefox’s preferences, that provides an explanation of add-ons. This is better than an external page, because it would not require a lengthy load time while presenting the most relevant information. It also may provide less of a surprise than the expanding in line option. But, it would require users to leave the screen they are on, and would be inconsistent with how the UI works now.

Three Possibilities for Where "Learn More" Link could lead

A Simpler Design

After considering these options and their drawbacks, I went back and thought about exactly what purpose the explanation of add-ons is meant to provide. In Firefox, this section’s purpose is to tell users who have never encountered add-ons what they are and why they are useful. In fact, as soon as the user installs a few add-ons in Firefox, they never see that explanation again. There’s no need for the message to be persistent, as it is currently in Mobile Firefox. In fact, as soon as a user installs an add-on, they no longer need the explanation. Making the message dismissible is the first step towards a better Mobile Design.

So, how can users gain more information about add-ons? And what information would they want?

Assuming that the “What are add-ons” snippet gives a good summary of what add-ons are, and add-ons themselves explain what they do in their descriptions, there simply isn’t enough information left to tell mobile users that justifies a separate explanation link. Additionally, on Mobile Firefox, there are less than 100 add-ons currently available. I simply can’t think of information about these add-ons that would be important enough to users to include a link and a separate page about what add-ons are.

So, the design I’m recommending keeps the explanation of add-ons short but prominent in the add-ons manager. It’s dismissible, but also disappears automatically once the user installs one or more add-ons. If the user wants to browse Mozilla’s Mobile site, the “Browse all add-ons” link at the bottom of the list will direct them there. With such limited screen space, keeping the interface simple should provide the best experience.

Proposed Design for Mobile Firefox's Add-ons Manager