Mozilla’s booths were in the App Planet exhibition hall along with many platform, commerce, and other software companies. There was a good vibe, especially compared to some of the other halls entirely dominated by hardware giants with multi-million dollar booths the size of a city block. I spent most of my time in Mozilla’s main booth giving demos of our HTML5 apps platform and answering questions about the Mozilla Marketplace.

At first, I wasn’t sure what to expect from 6-8 hours a day of talking and demoing, and was concerned that I wouldn’t have time to visit other booths I was interested in to learn about their products and how they might help our Marketplace. Booth duty turned out to be the best use of my time, as I learned a lot about the crowd’s perception of Mozilla’s offerings and HTML5 apps, and got to meet so many people with relevant ideas. By the time the last day rolled around and I had some time to stop and talk to other booths, all the companies I was interested in had already come to see me. (Though there was still reason to visit one.)

Here’s some of what I learned from my own observations and from talking with hundreds of people:

• People love Mozilla and were very excited to see us there with cool new products. I think for many people, this is the first time they considered Mozilla as more than just Firefox. I think this gave our booth a lot of energy throughout the day, and isn’t something I saw at any other booths I visited. It felt great.
• Nearly everyone had heard of our announcement with Telefónica after Monday morning and asked for a demo of it by name. From then on, B2G always had a line waiting for a demo, and I even saw some people come back with their friends for another look. (Erin is a hero for how many 5 minute demos she did back to back every day while keeping a smile)
• Almost no one knew that HTML5 device APIs that we demoed in Firefox for Android existed, such as vibration, notifications, camera access, accelerometer, battery status, and full screen mode. Any time someone came to me doubting HTML5′s power, Paul‘s demo page really shocked them and many were eager to learn more.
• Even so, quite a few people (usually journalists and analysts, but sometimes developers) commented to me after demos that they think “this (HTML5 apps) is the way things are headed”.
• Many people equate HTML5 to “online and remotely hosted”. Coming from many years of web and add-on development, the idea of locally hosted HTML isn’t anything out of the ordinary for me, but to everyone else HTML5 means “website”. I did a few Boot2Gecko device demos, and several people asked what happens to the homescreen and dialer when the phone is offline. As part of my apps demo, I always talked about offline support in HTML5 which we encourage app developers to take advantage of, but I think this is an important component of our HTML5 messaging we should work on.
• When you announce you’re opening an apps marketplace, LOTS of people want to talk with you about how their product or service can integrate with it. I have a lot of research and follow-ups to do.
• Everyone (myself included) was floored by the B2G device’s shutdown and startup time. Mapping the phone’s menu button to View Source was also a hit.
• The new Firefox for Android builds have a gorgeous UI and are extremely snappy. I can’t wait for them to ship, and neither can the folks I showed them to.
• When you bring in the best baristas to serve coffee at your booth, the huge line that forms is not necessarily due to someone raving about your killer cross-platform apps demo, so be careful before assuming. (Just kidding, but not about the awesome baristas or the huge line.)

I know many people worked very hard to get the products ready in time for the event, and having them there telling the same story is why they were so well received. Thank you for making that happen. Now that we’ve shown the mobile world how we’re going to change it, let’s do it!

So, I invite you to subscribe through either the mailing list or in your email client if you’d like to participate. (Note that this newsgroup is specific to the Marketplace, and that discussions of our web apps platform go to mozilla.dev.webapps instead.)

Firefox 4 Shipped

A critical release for many reasons, Firefox 4 introduced a completely rewritten and redesigned Add-ons Manager, including the interactive discovery pane (“Get Add-ons”), automatic add-on updates, and addressed the single biggest complaint for years with add-ons: installation without restarting. Firefox 4 also allowed us to see how many users actually use add-ons, how many non-hosted add-ons are out there, and gather real-world performance data — all things for which we had no insights before Firefox 4.

The discovery pane was viewed more than 5 million times in the 24 hours after release, and is currently viewed between 2.7 and 2.9 million times each day. It’s responsible for 40,000 add-on downloads every day, plus the 300,000 downloads that come from the Add-ons Manager search. 33% of new add-ons submitted to AMO each month are restartless.

New Developer Tools, Editor Tools, and Review Process

It seems like this happened much more than a year ago, but it was in early 2011 that we launched our brand new Developer Tools on AMO — in my opinion, the best management tools for add-ons, apps, or anything like it on the web. In 2010 we made the decision to rearchitect our review process to require all add-ons to be reviewed and get rid of the sandbox with 7,000 unreviewed add-ons in it. We launched that new process in 2011 by introducing preliminary reviews and direct links while waiting for review. And we made a number of awesome improvements to our Editor tools and statistics dashboard.

In 2011, AMO Editors granted 9,731 full reviews, 7,468 preliminary reviews, and rejected 2,616 versions.

BrowserID, Apps, and Marketplace Integration

When people joke about buzzwords, “synergy” often tops the list. But it’s a really awesome feeling seeing so many pieces of different projects falling into place to create a single experience. A year ago, users purchasing apps from AMO with their BrowserID account and running them on top of Boot2Gecko would have seemed crazy. Actually, it still seems crazy, but it’s happening.

We made great progress on our apps and marketplace integration in 2011 while still moving Add-ons forward. I’m really excited about building out the rest of the marketplace over the next few months and jumping into the app store battle with something to fight for.

Rethinking Compatibility

Around this time last year, everyone in the Project was trying to figure out how their piece of the puzzle would work in a 6 week development cycle. We had tens of thousands of puzzle pieces to figure out, and we came up with a plan to automatically bump compatibility for AMO-hosted add-ons and quickly built out the tools necessary to pull that off. That process worked really well for our hosted add-ons, but we still heard many complaints from users. Thanks to data we got from Firefox 4, we were able to quickly identify the problem: there were far more non-hosted add-ons out there than we imagined.

We regrouped and brainstormed solutions that would also address the hundreds of millions of add-ons we had no control over. We came up with our plan and engineered the solutions on both client and server side to make Default to Compatible a reality — changing a fundamental piece of the Mozilla platform that had been in place for many years.

New Design

It’s hard to remember what AMO looked like before we rolled out our new design to nearly all of our trafficked pages. The new design is a simpler, cleaner look that’s consistent with other Mozilla sites. We restructured the details page to place items from most important to least important, and introduced hovercards, allowing users to quickly scan through more add-ons while still viewing extended details of those they’re interested in.

Search Improvements

This year we upgraded our search backend to a better engine for improved performance, result quality, and facets. And we launched search suggestions and AJAX search results, which were a huge usability win for users.

30,000 add-on downloads a day come via search suggestions.

Add-on SDK Launched

It was in 2011 that the Add-on SDK officially launched along with Add-on Builder to open up add-on development to many more people. The SDK team has also accomplished a lot this year, and we helped support them in a number of ways, including repacking SDK-based add-ons when updates are issued and introducing a review incentive for SDK-based add-ons.

27% of new add-ons submitted to AMO each month use the SDK.

Contributions Flow

In March of last year we switched our Contributions flow to use PayPal’s in-context payments so that users can thank their favorite add-on authors without leaving AMO. We also added a Contributions notice in the Add-ons Manager of Firefox 4, and allowed developers to direct their contributions to the Mozilla Foundation or a third party.

This increased the number of contributions from 1,390 per month to 2,500. In 2011, add-on developers received $150,000 from 25,000 contributions. In total since its launch in mid-2009, our users have given $282,000 to developers in 48,680 transactions.

Opt in to Third-party-installed Add-ons

Add-ons dropped into Firefox without user consent have always been a problem, but we had no idea the extent until this year (thanks to Firefox 4). In addition to the security, performance, and usability issues that often come with these add-ons, their presence made compatibility between releases a nightmare for many users. We designed and implemented a solution that helps users stay in control of what’s installed in their Firefox going forward and also allowed them to correct past intrusions.

Performance Work

We kicked off our performance initiative this year and worked with many add-ons to improve their start-up delays. We made significant progress on tools that will allow add-on developers to test and improve performance on their own. And we presented the first look into what real-world start-up time looks like for Firefox users and how add-ons can impact that.

And more…

Among all of the huge projects we tackled this year, we worked on many smaller projects and features that made a huge improvement for users. Some that come to mind:

• Mobile AMO — Although we’ve supported the Fennec application on AMO for some time, it wasn’t until 2011 that we launched a mobile-optimized version of the site.
• Featured Add-on Selection — Nearly every add-on wants to be featured, and in 2011 we started the Featured Advisory Board so that community members who love using and creating add-ons are the ones who choose which add-ons are featured each month.
• Blocklist Experience — Clicking “Learn more” when something you had installed was blocked previously took take you to a giant listing of everything we’d ever blocked with a few words of description. Now, clicking “Learn more” takes you to a page that explains why that specific item was blocked, who is affected, and what this all actually means.
• Add-ons Blog — We redesigned and customized the Add-ons Blog, which gets 200,000 pageviews a month.
• Intro Video — We finally have a great introduction video to add-ons that actually shows what they can do, complete with an interactive version.
• Email opt out — We revamped our email notifications and added one-click unsubscribe.
• Add-on slugs — Our URLs became much prettier when we replaced addons.mozilla.org/en-US/firefox/addon/1865 with addons.mozilla.org/en-US/firefox/addon/adblock-plus
• Switching to ADU — We switched our primary popularity metric from downloads to active users to ensure the most popular add-ons are those people actually use instead of just try.
• Up & Coming — We introduced the Up & Coming sort, which surfaces new add-ons that are becoming popular.
• Better Compatibility — We hide incompatible add-ons by default in many places, and always make it clear when something won’t work with your device. We also integrated more tightly with the Add-on Compatibility Reporter so pre-release testers can still get to incompatible add-ons.

Thanks to everyone who made these things possible in 2011, and let’s get ready for a whirlwind 2012!

Firefox assumes that add-ons are incompatible from one version to the next because, in previous versions, they often were. This becomes a big problem when nearly all add-ons actually are compatible in our shorter release cycles. We devised a plan to work around the assumed incompatibility that had three parts:

• Firefox developers should consider the add-on compatibility impact of every change they make
• Firefox developers should follow a compatibility notification process to ensure we communicate changes to add-on developers
• AMO (addons.mozilla.org) will scan hosted add-ons for issues with the new Firefox version and automatically bump their compatibility if none are found

Longer term, the Add-on SDK lets developers build restartless add-ons without worrying about compatibility hassles.

How’s it working out?

Compatibility-breaking changes in Firefox have been minimal in the first four 6-week development cycles, with the exception of two larger changes that were reverted because of their larger impact. Jorge has posted detailed guides to changes that affect add-on developers for each of those releases (5 & 6, 7, 8), and Firefox developers are often coming to us to discuss the impact of their changes on add-ons.

We’ve automatically bumped thousands of add-ons for each Aurora version and emailed developers with the results of our compatibility scanning. When Firefox 6 launched, 97% of add-ons compatible with Firefox 5 were still compatible with 6. And we’re on track to launch Firefox 7 tomorrow with 99% compatibility from 6.

But with all of that, why do we still see users reporting that their add-ons aren’t compatible?

Our compatibility plan has two notable shortcomings: it doesn’t work for add-ons with binary components and it doesn’t work for add-ons not hosted on AMO. The vast majority of add-ons don’t contain binary components, which must be recompiled with every version of Firefox in order to continue working. And while we know a lot about add-ons that are hosted on AMO, we didn’t know much about the other add-ons in Firefox’s ecosystem.

In Firefox 4, as a result of enriched metadata in the Add-ons Manager, we have a much better idea of what add-ons are out there in the wild. And it was quite eye-opening when I learned that only 25% of the 600 million add-ons in use every day in Firefox 4 and later are active on AMO. That means at least 75% of add-ons aren’t getting the benefits of the automatic compatibility system we created, as well as the security and quality reviews that hosted add-ons receive. When we created the compatibility plan for the new development cycles, we weren’t aware that so many add-ons wouldn’t even be affected by it.

So, how do 450 million add-ons get installed if not from AMO? Third-party bundling. More and more software tries to plop a toolbar into Firefox when you install it, often without asking you. Java Console alone has more than 100 million installations among Firefox users on Windows, and it doesn’t even do anything. While some of these add-ons are keeping up with our release compatibility, many use their own update mechanisms instead of the built-in update service that works with Firefox’s compatibility checking, so in order to get a compatible add-on, you must update the third party software separately.

When these add-ons aren’t compatible with a new version of Firefox, it’s an even bigger problem because it’s often confusing to users as to what functionality they provide. When they’re told that Skype or their antivirus toolbar isn’t compatible with the new version, they may think upgrading means they can’t use Skype at all or that their computer will be more susceptible to viruses.

Firefox 8 (in beta later this week) tries to curb some of this behavior by requiring users to opt in to new add-ons and letting users disable add-ons they’ve already acquired.

Help is on the way

We’ve been working on a plan for fixing add-on compatibility that also takes non-hosted add-ons into account. Instead of working around Firefox’s assumption that add-ons are incompatible between versions, we’re going to teach Firefox to be a bit more trusting of add-on compatibility with new versions. You can read more about the idea on its feature page, and I’ll post more about this change on the Add-ons Blog when it’s underway.

In the meantime, if you find that your add-ons aren’t compatible, install the Add-on Compatibility Reporter and try ‘em out — there’s a good chance they work fine.

In contrast, today there are dozens of add-ons on the homepage and most can be installed without leaving the page. When we set out to design the new homepage, we wanted to surface more add-ons in such a way that every user would be able to see something interesting, read the details, and grab it without leaving the page. We wanted it to be easy to scan through the page and if you weren’t interested in a particular add-on, it wouldn’t take any time to skim right over it.

We knew we’d probably use a hover effect to expose the additional details, but wanted to steer clear of the bad hover interactions used on many popular websites and similar galleries today. Chris Howse and I whiteboarded some mocks of an early hover interaction of a card, and began examining the ways it was insufficient. Most hover designs block scanning in one of the directions you’re trying to go (down or to the right) or, in order to avoid that, display content above and break your downward focus.

We wanted a way for users to be able to scan across a grid of add-ons any way they wanted without getting frustrated. Greg Koberger had an idea: trim the width of the card such that you can still see the add-on icons, allowing users to easily scan down a column of add-ons.

We went to dinner at New Mongolian BBQ to noodle over whether this new design would work, and potch began planning how he would achieve the CSS box shadow effect with the tricky border structure. A few minutes after we got back from dinner, we had a working prototype, and were excited to see that it had the effect we wanted. This design would also let us place install buttons right below the hover area, ensuring that no one would have to play some kind of mouse game to get to the download button while the hover was still in effect.

The hovercards, as they are lovingly known, went live with our new design several weeks ago. They’re certainly not perfect, but I think they’re a big improvement over other hover methods.

Great, you redefined hovering as we know it. How are they actually performing?

Interestingly, the answer depends on the page. On the homepage, where we utilize hovercards for the Featured and Up & Coming carousels, two thirds of downloads from each section come from the hover card, while only one third come from a user clicking through to the details page and installing the add-on there.

However, on the category landing pages, where we employ hovercards in every section and carousel, closer to only one third of users install from the card and the rest journey through the tubes to install from the details page. Even more interestingly, each section has different results: Recently Added has the most hovercard downloads by far, with 46%, while the Featured hovercards only account for 30% of their downloads.

Why is hovercard usage so inconsistent? One theory is that it all depends on the add-on. Some add-ons are self-explanatory: you know exactly what they do from the name or summary, and you immediately want to have them. Others are quite a bit harder to figure out: what does this functionality even mean? is this a reputable author? what’s their privacy policy? what do the reviews say? screenshots please!

To test this, I looked at a few individual add-ons and compared them to the site-wide average for hovercard use in the Most Popular carousel on the category landing page.

• All add-ons: 36% from hovercard
• Adblock Plus: 25% from hovercard
• Firebug: 38% from hovercard
• Download Statusbar: 43% from hovercard

That shows the individual add-ons have an impact, but nothing too substantial. Let’s look at the the Featured block on the homepage for those same add-ons:

• All add-ons: 61% from hovercard
• Adblock Plus: 34% from hovercard
• Download Statusbar: 76% from hovercard

Well, that rules out that it’s entirely the individual add-ons, since Download Statusbar nearly doubled the percentage of downloads coming from the hovercard. It looks as though the location and context of the hovercard really does make big a difference in how many people use it, but that the individual add-ons play a decent role as well.

I’m very interested in what AMO visitors think of the hovercards, and am looking forward to digging into the data we have on other parts of the new design as we continue to roll it out.

This post walks through how to customize Firefox’s UI to look like Firefox 3, though I ask one thing of everyone reading it: please give the new defaults a chance. They aren’t right for everyone, but a lot of time and research went into how people use Firefox and I think they’re a step in the right direction. I’m making this post because I’d rather see people using Firefox 4 with a few older UI elements than using Firefox 3 and missing out on all the other awesome improvements because of one UI irritation.

Showing, Hiding, and Re-arranging Toolbar Items

Firefox makes it easy to customize toolbar buttons and other UI with its built-in customization dialog. To open it, right click in an empty space of the navigation area and select Customize, or open the View menu, go to Toolbars, and select Customize.

With this dialog open, you can drag and drop buttons and other widgets into many parts of the UI. Add new buttons by dragging them from the dialog. Remove existing buttons by dragging them to the dialog. Here’s a list of Firefox 4 changes made in the main toolbar that can be reverted with this dialog:

• Refresh and Stop buttons moved from the left of the location bar to the right.
• Subscribe (RSS) button removed from the main UI. (see Les Orchard’s post on this for more details)
• Home button moved from the left of the location bar to the right of the search box.
• Bookmarks button added to the right of the search box.

Tabs on Bottom

Firefox 4 defaults to showing tabs on top, but it’s easy to change back to tabs on bottom. Bring up the customization menu by right clicking in empty space in the navigation area, or opening the View menu and going to Toolbars. Tabs on Top will already be checked, so just click it again to uncheck it.

Bookmarks Toolbar

The Bookmarks Toolbar is hidden by default in Firefox 4 and replaced with a toolbar button that lets you access all of your bookmarks with a single click. To bring the toolbar back, open the customization menu by right clicking in the empty space in the navigation area or opening the View menu and going to Toolbars. Check the Bookmarks Toolbar item, and the toolbar will appear. You can then remove the bookmarks toolbar button using the Customization dialog, as it’s no longer needed.

Menu Bar (Windows & Linux only)

Windows and Linux users may see the new Firefox menu in the top left instead of the normal File, Edit, etc. menus. You can revert to showing the normal menu bar by opening the customization menu (as described above) and then just click “Menu Bar”.

Status Bar

The status bar was removed from Firefox 4 and link hover previews were moved to the location bar. A new toolbar called the Add-on Bar was added that only appears when you have add-ons installed that place items there. The status bar previously showed the page’s loading status and progress, active downloads, and add-ons.

To get the old status bar back, install Status-4-Evar. This will add the status message, progress indicator, and active downloads to your Add-on Bar, just like the old status bar. You can even move them around by opening the customization dialog as described above.

The After Shot

Here’s what it should look like if you follow all the steps above (though hopefully you won’t follow all of them).

Now you can use the Firefox 4 beta without frustration and hopefully learned a few things about customizing Firefox.

Wednesday night’s Mozilla Social was a blast, so thanks to everyone who attended! And a huge thanks to the many people at Mozilla who were involved in our participation at Add-on-Con this year: Grace, Sara, Mayumi, Dan, Caitlin, William, Mary, Jane, and of course to our speakers Myk, Mark, Jorge, Boriss, Dave, and Jay.

Many people have already asked for my slides from my various talks, so here they are:

• Keynote – Here are my slides with notes from the keynote involving various statistics about Mozilla’s add-ons ecosystem.
• Making Add-ons People Will Love – you can find a very similar version of the slides, as well as a video of my presentation, in this July blog post.
• Firefox 4 & Add-ons – Dave has posted our slides on his blog.

So much has changed since the last Add-on-Con and 2011 is already promising to be a very exciting time for add-ons, so I can only imagine what themes will surface at next year’s conference.

If you’ll be attending (or even if you aren’t), be sure to join us after the first day’s training sessions for the Mozilla social from 5 – 9pm. Learn more and RSVP here.

Mozilla Sessions at Add-on-Con

Wednesday, December 8 (Training Day)

• SDK Training – Learn how to build restartless add-ons using the Add-on SDK with Myk Melez
• Firefox 4 Compatibility – Everything you need to know to update your add-ons for Firefox 4, by Jorge Villalobos
• Mobile Add-ons – Firefox 4 for Android is in beta! Learn how to create a new mobile add-on or port your existing desktop add-on to mobile with Mark Finkle

Thursday, December 9

• Opening Keynote – Industry analysts will present on trends and a discussion of where add-ons are heading. I’ll present some findings on Mozilla’s add-ons ecosystem.
• Firefox 4 & Add-ons – Hear about what’s new in Firefox 4 from both a user experience and technical perspective, including the brand new Add-ons Manager, and what’s coming next. Presented by Dave Townsend, Jennifer Boriss, and myself
• Making Add-ons People Will Love – Join me to learn tips on how to acquire users, minimize frustration, maximize delight, and retain happy users.
• The Future of the Browser – Jay Sullivan will be on the closing keynote panel discussing the future of the browser.

View full schedule

I hope to see you there!

You can see it for yourself by opening the Add-ons Manager in a Firefox 4 beta or nightly build and going to the Get Add-ons pane. (Note: if you see the mozilla.org homepage instead, switch to the Extensions pane and back to fix it. This bug has already been fixed with today’s nightly build.)

There are a few things to keep in mind when exploring this page:

• Only add-ons compatible with your browser are shown, so if you’re using a nightly build right after a version bump, you may not see many featured add-ons for a couple days.
• The pane still has a number of features and improvements left to be implemented, including an add-on details page that loads in the pane instead of a new tab.
• The theme/styling of the Add-ons Manager (the area surrounding the Discovery Pane) is not yet fully implemented.

Because this page is only viewed in Firefox 4, the web developers working on it were able to take advantage of two recent CSS features. Instead of JavaScript, the promotion module uses CSS transitions for its rotation and arrows. We’re also using CSS @media queries to make the page flow to a single column when the viewport is not wide enough to show both columns.

It’s really exciting to see this come together thanks to the help of many people. Be on the lookout for more improvements over the next few months leading up to the release of Firefox 4.

Friday and Saturday, I and a few others were at the BlogHer ’10 conference in New York to promote Firefox Add-ons to more than a thousand bloggers in attendance. I had a great time and think our presence there was very effective.

This is the second event I’ve been to where we’ve focused on getting the word out about add-ons to consumers, the first being last year’s Renegade Craft Fair in San Francisco. Almost all of my time is spent talking with developers and other technical people, so getting the chance to talk to real people who use Firefox and add-ons is fun and educational. I get to learn about things that aren’t obvious to normal users and the problems they encounter.

I spent both days of the conference in our hospitality suite answering questions, telling people about Firefox, add-ons, and Personas, promoting the new BlogHer Toolbar, and showing off Firefox 4 features. Our suite was packed with bloggers all day both days; I’d estimate we saw at least 600 people come through, most of whom we had personal conversations with.

We were heavily promoting Rock Your Firefox, so sticking with its retro theme, we had lava lamps, disco lights, retro candy, 80s music, and cupcakes. Many attendees came back the second day and told us we had the best suite at the conference.

While talking with visitors to our suite, I was pleased to hear that the vast majority said they exclusively use Firefox, and many even said they use add-ons. Those who filled out our survey confirmed this, with 90% of participants saying they use Firefox and 65% of those people using add-ons. For folks who said they didn’t use add-ons, I demoed a few blogger-friendly add-ons from the BlogHer Collection and many people said they’d check them out as soon as they got home.

I answered a number of interesting questions from current Firefox users — everything from choosing where downloads are saved to managing 50 tabs (answer: Tab Candy demo) to what red pandas have to do with Firefox. Despite the good vibe in the room, one of the most common questions I heard was “why does Firefox crash so much?” from users who said they were on the latest version. We tried to give these users tips on debugging and reporting crashes, but it was disappointing to hear firsthand about the frequent crashes that some people experience. I’m hopeful that our continued efforts at reducing crashes will have a noticeable impact on these users soon.