July 05, 2014
May 23, 2014
May 20, 2014
May 09, 2014
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.
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.
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.
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.
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.
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.
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.
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.
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.
April 28, 2014
March 18, 2013
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.
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
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.
September 25, 2012
May 25, 2012
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 18, 2012
May 01, 2012
It's been a few months now since we merged the mobile and desktop Firefox user-experience teams into one supercharged all-platform Firefox design juggernaut (in the good sense). In that time, we've been hard at work digging into the next set of features and improvements, as well as pursuing one of our major goals for the year: getting Firefox to feel more like one product — more Firefoxy — across all our platforms, desktop to tablet to phone.
I presented an overview of what we're working on at the Firefox Toronto Workweek last week. Here are the slides (and a direct link, just in case). I had a fair bit to say about them, so I'll be posting a video of the talk soon, but the mockups and wireframes in the slides are too awesome to wait. The team will be posting about each of these projects, individually, in more depth.
This presentation makes reference to the Kilimanjaro project, a set of short-term priorities around integrating the browser and ecosystem projects (identity, apps, marketplace) that Mozilla is working on right now. You can learn about it on the Kilimanjaro wiki page.
Many thanks to the team (see slide 2!) for all their hard work.