Planet UX

Updates from the Firefox User Experience Team

July 28, 2014

Jennifer Boriss: Looking Ahead: Challenges for the Open Web

At the end of this week, I’m moving on after six amazing years at Mozilla. On August 25, I’ll be joining Reddit – another global open source project – as their first […]

July 28, 2014 12:35 PM

July 05, 2014

Jennifer Boriss: The Internet Says Goodbye

Humans are a Community-Centric We evolved to rely on community to survive. From moment we stood on two legs, we have derived our identity, culture, and beliefs from the people […]

July 05, 2014 12:29 PM

May 23, 2014

Jennifer Boriss: Try Out Fira Sans: a Free, Open Source Typeface Commissioned by Mozilla

As designers in open source, we’re constantly looking for opportunities to bring the principles of universal access and redistribution to new areas. While the term “open source” may still be […]

May 23, 2014 11:47 PM

May 20, 2014

Jennifer Boriss: Firefox’s Redesigned Preferences Feel More like the Web

Another great Firefox improvement is releasing soon! Firefox’s Preferences, until now, have required navigation through a cumbersome floating window where it’s nearly impossible to find what you’re looking for. This […]

May 20, 2014 11:53 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.


History

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.


Philosophy

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

April 28, 2014

Jennifer Boriss: Firefox and Flux: A New, Beautiful Browser is Coming

Tomorrow, on April 29, something amazing is coming to Firefox. It’s not an interface adjustment or tweak.  It’s not a bug fix.  It’s a complete re-envisioning of Firefox’s user experience, […]

April 28, 2014 10:06 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: 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 […]

September 25, 2012 05:16 PM

May 25, 2012

Madhava Enros: Here's a thing that would be awesome

Here's a conversation I just had in IRC. Is anyone interested in building this?

madhava:   hey
madhava:   would anyone like to build me an addon where when I enter some hotkey combination
madhava:   will bring up some sort of HUD awesomebar
madhava:   that I can search through
madhava:   and then when I hit enter it will insert the matching URL in my current textfield
madhava:   or put it in the copy buffer?
madhava:   I reference a lot of URLs in emails and bugs
dietrich:   quickfind-that-url. that'd be nice.
madhava:   and I have to open a new tab, use the awesomebar, select, copy, switch back, paste
madhava:   dietrich: yeah
mitchell:   history viewer?
madhava:   mitchell: sort of -- but too heavyweight
dietrich:   i do the same thing. have to navigate open tabs, all kinds of crap to find a url.
madhava:   in some ways, even a dropdown as soon as I type http:// would do it
madhava:   like in a IDE
madhava:   but then I'd have to type http
mitchell:   I just begin typing the url to have it come up, hit down, hit right, hit ctrl a, ctrl c
dietrich:   all the pieces are there for doing this
dietrich:   it works even with open tabs
dolske:   sounds like dietrich knows how to do this... ;)
dietrich:   hotkeys + panel + Awesomebar sarch (from https://github.com/mozilla/addon-sdk/wiki/Community-developed-modules)
dietrich:   dietrich cannot do this :)
madhava:   maybe I'll blog this
dietrich:   jono and gozala and i were just lamenting the lack of Ubiquity, which could easily do this :(
mitchell:   what is hot key / hotkeys?
dietrich:   mitchell: jetpack build-in api for registring keyboard combos with function callbacks
mitchell:   dietrich: thx.  mind sending link to api doc?
dietrich:   https://addons.mozilla.org/en-US/developers/docs/sdk/latest/
madhava:   ok - dietrich, mitchell, dolske - I'm more or less going to paste this conversation into a blog post
madhava:   any of you want to be anonymous?
dietrich:   clipboard api is the final piece, and that's built-in too
mitchell:   I don't mind my nick going in
mitchell:   dietrich: that's what I wanted to find out
dietrich:   anonymity is for the anonymous
dietrich:   this is a public channel, it's too late!

If you are, you can email me , or @madhava on Twitter.

May 25, 2012 07:33 PM

May 18, 2012

Jennifer Boriss: Update on Firefox 13’s Home and New Tab Redesign

(Note: the following has been cross-posted to Mozilla UX) Two Firefox features getting a redesign in Firefox 13 (currently in beta) are the Home Tab and New Tab. Home Tab can […]

May 18, 2012 11:43 PM