Planet UX

Updates from the Firefox User Experience Team

September 08, 2016

Firefox UX: A New Mobile Experience

September 08, 2016 07:45 PM

June 22, 2016

Firefox UX: What We Learned from the Government Digital Service Design Team

Toward the end of Mozilla’s All-Hands Meeting in London last week, about a dozen members of the Firefox UX team paid a visit to the main…

June 22, 2016 02:34 PM

June 03, 2016

Firefox UX: Notification Overload and User Control

June 03, 2016 09:45 PM

April 05, 2016

Firefox UX: This is our Reading List

April 05, 2016 07:56 PM

For many consumers, software and hardware choices are increasingly becoming choices between incompatible brand ecosystems. In today’s…

April 05, 2016 03:14 PM

April 04, 2016

Firefox UX: Save, Share, Revisit

In early January, we conducted user research to refresh our understanding of how people save, share, and revisit content with the goal of…

April 04, 2016 06:52 PM

January 11, 2016

Firefox UX: UX thoughts for 2016

And just like that, another year.

January 11, 2016 06:43 PM

May 09, 2014

Stephen Horlander: (Re)Designing Firefox

Update — 2014/05/28

I added a slideshow of some of the design iterations we went through from Firefox 4 to Firefox 29.

Warning: It’s image heavy, might take a while to load on a slow connection.

So, last Monday we launched a thing. You may have noticed it. We called it Australis. Now it’s just called Firefox.

We spent a lot of time on it.

Dedicating yourself to a project can become an intense experience. You think about it all the time: in the morning, at dinner, when you are trying to watch a movie, in the shower, in your sleep, when you should be sleeping…

But then you set it free, because it’s finally mature enough for that. It’s exciting. But it’s also really scary. You are never sure if you made the right decisions along the way. I like to take some time in the post release glow for some reflection.


Left: Firefox 4, Right: Firefox 29

So how did we get from there to here?

We launched Firefox 4 in March 2011. It was a big change from Firefox 3. It introduced the Firefox button, revamped the add-ons manager, removed the status bar, combined the stop, go and reload buttons and included a comprehensive visual update—all while still having time to prototype and discard some other features along the way.

And yet it wasn’t perfect. It had a lot of the rough edges that projects accumulate in the process of going from being designed and built to being shipped.

Firefox 4 was our last monolithic release before we moved to a rapid release cycle. Six week cycles seemed like the perfect timeframe to iteratively smooth out the rough edges. So I created a project to do just that.


The project that I had created for iterative refinement however quickly transformed into a significant overhaul.

People in the frame: Sinchan Banerjee, Alex Faaborg, Brian Dils, Trond, Stephen Horlander (my legs), Jennifer Boriss, Frank Yan, Alex Limi
Taking the picture: Madhava Enros

At the beginning of June the UX team met up for its first post Firefox 4 team offsite. On the agenda was figuring out “What’s next?”. The entire team gathered in a room to pitch ideas and talk about problems unresolved—or that had been introduced—during the development of Firefox 4.

One theme that had been floating around for a while rose to the surface— Firefox is about customization, it should feel like it’s yours.

What would this mean for the interface we had just shipped? A lot of ideas were tossed around. Eventually one guiding principal stuck—make the best core experience we can and allow users to add and change the things that matter the most to them.

Building a fun easy to use Customization Mode—along with a more flexible Firefox Menu—would become the foundation of the new Firefox.

Visual Profile

So Curve, Such Aerodynamic

The offsite also sparked a set of other ideas that would make up what became known as Australis. Primarily: unifying the disparate bookmarking elements in the main window, refining the visual design, consolidating related or redundant features and streamlining the tabstrip.

While the redesigned customization mode would be core to the experience—the redesigned tabstrip would change the entire profile of Firefox.

“Make it look faster. No, no! It needs more air vents!”
Firefox 4 Aerodynamic Sketch — 2010

We had explored the idea of adding visual cues to Firefox to make it feel faster and smoother before. Yet some of the ideas were a little over the top.

Curvy Tab Sketch — June, 2011

This sketch from the design session—inspired by a previous mockup from Trond—had a curvy tab shape that immediately resonated with everyone.

It also had one important additional design tweak—only render the tab shape for the active tab. Highlighting the active tab reduces visual noise and makes it easier to keep your place in the tabstrip.

The early curve shape tried on a few looks. At first it was too angular, then it was too curvy, then it was too short, then it was too tall and then (finally) it was just right.

Design ideas for background tabs on Windows — October 2011

It turns out that designing background tabs without a tab shape is a lot easier if you have a stable background to work with. Windows 7 has translucent windows of variable tints and Windows 8 has flat windows of variable color. This meant we needed to create our own stable background.

We went through several variations to ensure that the background tabs would be legible. First we tried creating a unified background block, but it seemed too heavy. We even thought about keeping background tab shapes and highlighting the active tab in some other way.

Eventually we decided on a background “fog” that would sit behind the tabs and in front of the window. Think of it as an interface sandwich—glass back, curvy-tab front with a delicious foggy center.

We also made sure that adding curves didn’t increase the width of the tabs taking up precious tabstrip real estate. And we removed the blank favicon placeholder for sites without favicons. A small tweak that frees up some extra room for the title.

Menu Panel and Customization

Redesigning the Firefox Menu

One size really doesn’t fit all with something as complex and personal as your web browser. Add-ons have always made Firefox a thoroughly customizable browser, however arranging things has never been a great experience out of the box.

But before we could tackle the customization behavior, we had to rethink the Firefox Menu.

The main toolbar is the primary surface for frequently used actions; while the menu is the secondary surface for stuff you only use some of the time. We wanted users to be able to move things between these surfaces so they could tailor Firefox to their needs.

For the updated layout we started with the idea of a visual icon grid. This grid nicely mapped to the icons already found on the toolbar and would ideally make moving things back and forth feel cohesive.

Larger 3×3 Grid with Labels—by Alex Faaborg

The first grid we designed was wider, with smaller icons and no labels. This quickly changed to a three column grid with larger labeled icons. The updated layout served the same goal but was more clear and also less cramped.

Not everything we currently had in the Firefox Menu would translate directly to the new layout. We had to add special conjoined widgets—also known as “Wide Widgets”—for Cut/Copy/Paste and the Page Zoom controls. We also added a footer for persistent items that can’t be customized away. We did this to prevent users from getting into a broken layout with no escape hatch.

We had some serious debates about whether to use a an icon grid or a traditional menu list. The visual grid has some drawbacks: it isn’t as easy to scan and doesn’t scale as well with a lot of items. But the icon grid won this round because it was more visual, more inline with what we wanted out of drag-and-drop customization and had the side benefit of being touch friendly.

Some items from the Firefox Menu had submenus that could’t be easily reduced to a single action: Developer Tools, History, Bookmarks, Help and Character Encoding. Nested submenus hanging off of a panel felt pretty awkward. We had several ideas on how to handle this: inline expando-tray™, a drawer(interactive mockup—click History) and in-panel navigation.

We settled on what we call subviews(interactive mockup—click History). Subviews are partial overlays containing lists that slide in over the menu. Click anywhere in the partially visible menu layer to get back to the main menu—or close the entire menu and reopen it.

With the new menu layout Firefox should hopefully work just fine for most people out of the box. But by using the new Customization Mode you can really tailor Firefox to your needs. If you are interested in knowing more about why what is where Zhenshuo Fang wrote a great post about it.

Customize All the Things!

Now we needed to figure out how update Firefox’s aging customization experience. Things started off a little ambitious with the idea that we could combine toolbar customization, themes and add-ons into the same UI. This led to an early interactive demo (it does some stuff, hint: tools icon –> plus sign) to try and see if this would work.

This demo surfaced a few issues: 1) including add-ons was going to be complicated 2) we needed a direct representation of the menu panel instead of a proxy. This led to a bunch of mockups for a flatter interface sans add-ons integration. Eventually I made a second demo without the theme selector that is closer to what we ended up shipping. Then Blake Winton turned that into an awesome prototype that actually did something.

Final Customization Mode

The demos and prototypes helped us quickly get feedback from people on the idea. One of the complaints we heard was that it wasn’t obvious that you were entering a mode. We mocked up a lot of ideas for various ways to give visual feedback that you were in a mode and could now rearrange your stuff. We eventually settled on a subtle blueprint pattern and Madhava suggested we add some kind of animation with padding.

Wrapping it up

Thank you to everyone who dedicated so much time and effort into making this happen.

If you want to know more about the people and process behind Firefox 29, Madhava has a good post with an overview.

I think the post-release glow is over now. Time to get back to making Firefox better.

May 09, 2014 03:43 PM

March 18, 2013

Alexander Limi: Checkboxes that kill your product

(To read this article with its formatting and typography intact, click here)

If I told you that a company is shipping a product to hundreds of millions of users right now, and included in the product are several prominent buttons that will break the product completely if you click them, and possibly lock you out from the Internet — can you guess which product it is?

Sounds like that’s the kind of product that only a large enterprise software company like Oracle or IBM would ship, right? Maybe some of the antivirus extortionware software for Windows? Maybe VPN software?

Well, we have met the enemy, and he is us.* In the currently shipping version, Firefox ships with many options that will render the browser unusable to most people, right in the main settings UI.

How did we get to this point with Firefox? Most of these options exist for historical reasons — whenever there’s a new feature, it often gets a checkbox to turn it off. The other common case is when a feature isn’t obviously useful to everyone, and it’s hard to make an obvious choice about whether to have it enabled by default or not — so we build in a switch. Or sometimes the person implementing it thinks it should have a switch, and nobody stops to ask if it’s a good idea.

I’m not going to retread discussions about this, there are many versions of that article across the web — the main point is that it is usually a failure of design, and a failure to agree on sensible default behaviors. Options are “the cheap way out,” and they usually speak to an inability to agree on what to do in a given situation.

Design by committee often looks like a row of checkboxes.

What I do want to put the focus on, however, is that you have to perform an audit of your product every so often and see how the people using your product have changed, and what kind of functionality that made sense at the time may not make much sense anymore.

Of course, we should start in our own backyard, so here are some obvious examples from Firefox. These are things we need to fix:

Load images automatically

From the Content panel in our settings, try unchecking the box:

Here’s how Google’s front page looks like if you uncheck that box:

That’s right, you can’t even see the text box you’re supposed to type your search into. Congratulations, we just broke the Internet.

Of course, there are legitimate uses for this, from low-bandwidth situations to web development testing, but that’s where our excellent add-ons ecosystem comes to the rescue. Are more than 2% of our users likely to use this setting on a regular basis? Probably not.

Enable JavaScript

More fun from our Content panel, you can turn off JavaScript with a simple click:

Try booking a travel on Hipmunk without JavaScript:

Most sites these days that aren’t just displaying content will fail in interesting & mysterious ways if you don’t have JavaScript enabled. For the general population, Firefox will appear broken.

Fun historical fact: If you disabled JavaScript in Netscape 4, CSS would also stop working — because CSS was applied to the page using… JavaScript.

And yes, I know that some people have reasons (privacy, web development) to turn off JavaScript. There are many add-ons that can help with this — but it’s not something that we should ship to hundreds of millions of users.

Turning off navigation

Firefox is very customizable! In fact, it’s so customizable that we allow you to make the browser unusable with a single click. Try turning off the Navigation Toolbar, for instance:

Good luck trying to find a web site that can help you fix this problem when your son was clicking around the menus in Firefox yesterday, and today your browser has no buttons:

Turning off SSL & TLS

Now we’re getting to the “shooting fish in a barrel” category — there are many fun options in this preference panel:

If you turn off SSL or TLS, Gmail, Google Reader, and other Google services will look like this:

Note that we don’t even tell you that you can turn it back on in the settings. We just tell you that it has been disabled, and that you should “contact the website owners to inform them of this problem.”

Good luck trying to do that when you can’t even see the web site or load your email.

The entire certificate manager

Oh boy, where do we start?

Personally, I feel pretty confident that the number of people that know how any of this works can be narrowed down to the people that work in these companies in the list. At least not too far off.

This entire thing — possibly with the exception of the personal certificate list — needs to be moved out into an add-on for people with interest in managing their own certificates. It’s our job as a browser to keep you safe, we shouldn’t outsource this to individuals.

You probably don’t want your bank to look like this because two days ago, you read an article on the Internet — authored by who-knows — telling you to remove an entry in your certificates “for added safety”:

Also, is that an NSS Internal PKCS #11 module in your pocket, or are you just happy to see me? Do I need to enable my FIPS?

As Privacy Engineer Monica Chew at Mozilla asks, “Is it really worth having a preference panel that benefits fewer than 2% of users overall?” — obvious spoiler alert: The answer is no.

On the flipside, from that same article: how many users have we broken the web for when 1.6% of them may have TLS support turned off, and possibly not be aware of it? Even 1% of a few hundred million isn’t a trivial number of people.

The people that need to do these things should use add-ons, or at the very least an about:config tweak.

Override automatic cache management

Another way to slow down the browser and make Firefox look bad is to give it no disk space to use for caching:

What about computers with very little disk space? Shouldn’t you be able to restrict how much disk space is being used? It turns out, we know that you are low on disk space, and will reduce our usage accordingly. It’s pretty likely that Firefox keeps better track of this than humans do. So let’s make computers do what they’re good at: keeping track of numbers.

So what have we learned? There are a lot of options in our products that are used by very few people, and some of them can have disastrous effects. We’re trying to design software that can be used by everyone — that also means we have to keep them safe and not make it so easy to break a product they rely on every day. None of these are put there with malicious intent — some of them even made sense at the time — but it’s time for us to do some scrubbing and cleaning of the Firefox settings.

What about the product that you are building? Is it time to take a fresh look at what kind of options you include?

Thanks to Frank Yan, Blake Winton, Tony Santos, Monica Chew, Sid Stamm & Madhava Enros for reading drafts of this.

March 18, 2013 02:00 PM

September 25, 2012

Jennifer Boriss: MozCamp EU 2012: Mobilize Mozilla

Admittedly, a few days have passed since the September 8-9th 2012 MozCamp EU in Warsaw. But, I wanted to say a few words about the incredible experience.

I was so excited to attend this MozCamp in particular. Eastern Europe, and Poland especially, have some of the oldest and strongest Mozilla communities, in existence for well over a decade.  And, Poland is continually at the top of our browser marketshare charts, with roughly half the population using Firefox. Having never been to Poland, I’ve always seen these numbers and wondered about the people and stories behind them.

I’d met many Mozilla Poland community members over the years and knew they were passionate for the open web – people like Marcin Jagodziński, who first translated Firefox into Polish, and Marek Wawoczny, who maintains Mozilla Poland’s active community site.  But, meeting these contributors together as a vibrant and enthusiastic community sheds light on Eastern Europe’s passion for open source. The communities here are healthy and growing.  They are directly involved in education, many regularly speaking at university campuses to get students excited about innovating in the open.  It was incredible to hear about the specific challenges that each community faces in their regions and the creative ways they step up to meet them, from hacking at meet.js events in Krakow to the Free Hugs from Firefox in Paris.

And, as at all Mozilla events, the talks and demos were incredible. As a gamer, I thought one of the most exciting projects was BananaBread, a fully 3D FPS built using only HTML5 by Anant Narayanan, Alon Zakai, and others.

Wesley Johnston showed off some pretty exciting stuff coming up in Firefox Android, like smooth-as-butter scrolling and reader mode, which turns your ugly mobile site into something that will make typographers cream their pants.

Paul Rouget updated us on the latest developer tools hotness, including including tilt, which lets you visualize a site’s DOM tree in 3D, and the new command line.

Patryk Adamczyk gave a great run-through on the design principles that have guided the creation of the beautiful Firefox OS, including the “personality types” which guided its sound design (good news for anyone who owns a business suit and a skateboard).

Tim Terriberry and Anant Naryanana (yes, again!) gave an awesome demo of WebRTC working in the browser – live with a peer-to-peer video call!

I gave a talk on how to user test mobile apps (and other projects). It was a great experience, and people brought some excellent ideas and questions! I’ll blog more about this talk later.

Of course, I could never do justice to all the great talks, collaboration, and hacking that went on over two very short days, but thanks to everyone who made this MozCamp so awesome. Meeting the Mozilla community always leaves me feeling humbled to work on the Project, inspired by what’s coming up, and (in this case) hungover on buffalo vodka.

September 25, 2012 05:16 PM