March 18, 2013
(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.
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.
March 18, 2013 02:00 PM
September 25, 2012
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
May 25, 2012
Here's a conversation I just had in IRC. Is anyone interested in building this?
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?
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
(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 be viewed by clicking house icon in Firefox or by typing “about:home” into your URL bar. New Tab appears when you click the “+” at the end of your tab strip.
Firefox 13 New Tab Page
Firefox 13 Home Tab Page (launch targets emphasized)
Firefox’s Home Tab and New Tab have, until now, had fairly basic pages. In Firefox 12, Home Tab had a large search bar, a “snippet” which Mozilla uses to display messages to users, and little else. The main reason the search bar is on Home Tab is because many users click the Home button to initiate a search, either unaware of the toolbar search box or preferring not to use it. The snippet allows Mozilla to give a message to users, such as last October when it asked users in the United States to contact their representatives when the anti-internet-freedom bill SOPA was being heard in the House of Representatives. Such messages can be important while not being urgent enough to disrupt users with a notification.
New Tab, for most of Firefox’s history, has been completely blank. This was done deliberately to offer users a clean, fresh “sheet” to begin a new browsing task. However, a blank tab may not be distracting, but it’s also not useful.
Surely, we thought, we can present a more helpful design than a blank page! Using Mozilla Test Pilot, we began to research how Firefox users use New Tabs. What we learned is that each day, the average Firefox user creates 11 New Tabs, loads 7 pages from a New Tab, and visits two unique domains from a New Tab. The average New Tab loads two pages before the user closes or leaves it.
What this tells us is that users create many New Tabs, but they’re very likely from those to return to a limited number of their most-visited websites. So, we began to experiment with giving users quick access on New Tab to the websites they visit most frequently.
What you’ll see on the New Tab page of Firefox 13 are your most-visited sites displayed with large thumbnails, reducing the time it takes to type or navigate to these pages. This data comes directly from your browsing history: it’s the same information that helps Firefox’s Awesome Bar give suggestions when you type. Or, if you want to go somewhere new, the URL bar is still targeted when you type on a New Tab page. If you want to hide your top sites – permanently or temporarily – a grid icon in the top right wipes the new tab screen to blank.
Mozilla Home is getting a redesign, too! While still keeping the prominent search bar and snippet, the graphic style is softer, the text is more readable, and launch targets at the bottom allow you to quickly access areas such as Bookmarks, Applications, and previous Firefox sessions.
Both Home and New Tab are being improved as part of our longterm vision of making Firefox more powerful, engaging, and beautiful. Over the next few releases, more design improvements will be made towards this goal. For now, please try out Firefox’s new Home and New Tab pages in Firefox 13 Beta and tell us that you think!
May 18, 2012 11:43 PM
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.
May 01, 2012 05:29 PM
December 14, 2011
The mobile UX team's recently gone through a big top-to-bottom review of the in-progress native UI for Firefox on Android, sanding down rough edges and making sure that things all fit together. Here are some slides from a walkthrough I'm about to give of the current state of the designs. The nightly builds are getting closer to these every day!
Credit to Patryk Adamcyk and Ian Barlow for these mockups
December 14, 2011 07:50 PM
November 23, 2011
If you're watching the nightly builds of Firefox on Android, you'll have noticed that a lot just changed. What you're seeing is the first wave of basic function and interface revisions as we rebuild Firefox as a native Android application. This is very much a work in progress — a lot is there already, but there's even more still to come. Oh, you can get it here.
What have you done to my browser?
Firefox, overall, is being rebuilt to be faster and more responsive. We wanted to match this with a rework of the UI that will make us feel quicker, more natural, and a better fit on Android. Our goals have been, primarily, the following:
- a simpler Android-based UI model
- being more recognizably Firefox
- incorporating things we've learned from our tablet UI, due out in Firefox 9
- easier one-handed use
- continuing to provide fast access to tabs and minimizing the need for typing
- working with froyo/gingerbread, but also ICS
We're still revising, tweaking, and, well, wholesale throwing things out and redoing them, so please pipe up with your suggestions, but here's what you should be seeing right now.
A simpler, Firefoxier, thumbier UI
What you'll notice right away, I think, is that the browser controls have been pruned back and, overall, they're laid out more simply. The browser is continuing on its path of doing things the Android way, whether that's through use of the system back button or standardizing on the Android menu system. Things should be where an Android user would expect to find them.
This consolidation has also let us put everything you frequently need under the arc of your thumb when you're using your phone in one hand; hopefully you'll seldom find yourself reaching and stretching, even as Ice Cream Sandwich phones get bigger and bigger.
Tabs are kind of a big deal
We've kept our Firefoxy focus on quick access to tabs, where you don't have to leave your current context to see and choose from what else you currently have open. We're also trying to leave you with better ambient sense of when tabs are getting created or closed, in the background or foreground, through the use of some subtle animations and transitions.
Pulling in visual cues from Firefox on tablets and desktops
The team has spent a lot of time looking at how we can have consistency across our many platforms. Firefox should feel familiar no matter where you're using it, even if the constraints of the particular device mean some structural changes.
We've had a lot of great feedback about the upcoming release of Firefox for tablets, and you can see that this new Firefox on phones is its close sibling.
There are also a lot of places where the phone UI references that of the desktop, like in the position of the new tab button (though it serves more purposes here), our icons and glyphs, and in certain UI elements like our notification "door hangers":
Optimized for Froyo / Gingerbread, and Ice Cream Sandwich
Of course, people out there are on a lot of different versions of Android, and we want to look right for all of them:
All of that is what you can have in your Firefox-nightly-clutching hands today. But there's more! Here's what's in the UI-design pipeline, coming to the nightly build soon:
I need more stability in my life
If you like to wait for the new native Firefox to stabilize a bit more before you start using it, you can switch from Nightly builds to the Aurora release channel. You may particularly want to do this if you're using a Honeycomb tablet — the new Firefox tablet UI that everybody's talking about is stabilizing there, getting ready for final release later this year.
[with many thanks to Mozilla mobile UX designers Ian Barlow and Patryk Adamczyk]
November 23, 2011 06:23 PM
November 02, 2011
A month ago I crossed the five year milestone at Mozilla, and my first post on this blog was exactly five years to the day. I’ve recently decided to move on from the corporation to try out design work in an entirely different space.
It’s been a tremendous honor working with all of you. Every top tech company has people who are brilliant, but few have people who are so warm, so kind, and so incredibly passionate.
This blog chronicles all of my design work over the years. I’ve recently posted a look at some of the crazier conceptual work we’ve done. I’ve also posted a talk I gave at PARC on the eve of the Firefox 4 launch that reviews why Mozilla exists, our design philosophy, and a comprehensive look at some of the specific principles that have guided the design of Firefox 3 and Firefox 4.
Some highlights from the last five years:
-Interactive design of the awesome bar
-Designed the one click bookmarking interface
-Art direction for every visual resource in the application
-Created an iconic form
-Managed a refresh of the Firefox icon
-Visual and interactive design of Sync
-Design of a new notification system
-Design of a new command structure with the Firefox button, leveraging usage metrics
I’ve spent 1/6 of my life working on the design of Firefox. For the past five years Mozilla has felt like home, and the people here have felt like family.
I’m incredibly proud of what we’ve achieved. It’s been an amazing adventure.
November 02, 2011 12:20 AM
Other formats (all 720p):
I gave this talk at a BayCHI event at PARC on 3/10/2011. Steve Williams over at the CHI Conversations Network provides a nice intro:
“While much open source software suffers from poor design and usability, Firefox shines. What makes the Mozilla community different? With great branding, usability backed up by research but tempered by realism, and a powerful extension architecture, the Firefox web browser claims 400 million users. On the eve of the release of Firefox 4, Mozilla designer Alex Faaborg covers the unique challenge of coordinating user experience design in an open source community, important features of past versions, and the future of the Firefox interface.”
It was a fantastic opportunity to be able to give this talk to a large section of the Silicon Valley design community. Also looking into the audience and seeing Don Norman smiling was one of the more rewarding moments of my design career so far.
November 02, 2011 12:18 AM
Design is a very lossy process, and there are a lot of good reasons why a piece of design work might not be released to users. Sometimes a design is cut due to the natural triage process of focusing on top priorities and trying to ship on time. Sometimes a design is cut because in retrospect, it really isn’t the best solution to a problem. And sometimes a design is cut because it was only intended to be a conceptual exploration, like all of the concept cars that are created to help shape the design of future products.
This post features some of the crazier concepts that we never rolled out, and highlights some of the stranger scenes that we have on the cutting room floor.
Nightly Build Icon
I provided art direction for this 2009 candidate aspiring to be the new nightly build icon. It was humorously rejected by the other product drivers for being “too dramatic.” I continue to contend that the planet is definitely forming as opposed to exploding, but as a still image, the trajectory of the continents is arguably up for debate :)
Visual design was done by Joy-Vincent Niemantsverdriet of Sofa. The objectives I gave them were to create an icon that visually conveyed danger and an incomplete product (at the time Minefield was still full of mines). I also wanted them to base the work on paintings like Castle of the Pyreness by Rene Magritte, or this image from the French anime Skyland.
Stealth Theme for Private Browsing
This is one of my favorite design ideas, but as a low priority feature it has also now missed every major release (Firefox 2, Firefox 3, Firefox 3.5 and Firefox 4). As an ambient, peripheral, and constant indication of being in private browsing mode (or ideally opening a private window), Firefox transitions to a dramatically darker theme. This is meant to invoke connotations of day/night, or for the more militaristic, a stealth fighter.
Visual design by Stephen Horlander. You can also view an updated mockup based on the Firefox 4 theme that he created as well.
Fluffy Pie Menu
Interactively this pie menu does what pie menus are good at, it provides visual feedback for a mouse gesture (in this case browser navigation). But what I really like about this particular pie menu isn’t what it does, but how it feels. It’s fluffy, it’s soft, it’s friendly. It’s like interacting with a happy cloud.
I provided art direction, and the visual design was done by Mozilla intern Wei Zhou. This design work was purely conceptual.
Immersive Full Screen Mode
Again purely conceptual design work, this was an immersive full screen mode, where the site’s aesthetic dominates the entire browsing experience. Visual design was done by Mozilla intern Wei Zhou. To correctly build this type of overlay various Web sites would of course need to be expecting it, which is a technical challenge. This design work did however later inform how we approached overlaying the browser’s control scheme on top of personas in Firefox.
Bugzilla Theme Refresh
I spend a significant part of each day living in bugzilla. As you can imagine, I’ve had some time over the years to daydream of a more elegant and streamlined interface that is easier for users to very quickly visually parse.
As an advanced tool for organizing software development, bugzilla isn’t meant to be simplistic. It’s like a DLSR camera, consisting of a dense set of controls meant to be quickly and easily accessible to highly trained users.
But that doesn’t mean that users (including the highly trained ones) should arrive at a bug, and have absolutely no idea what is going on. This redesign of bugzilla uses color exclusively to represent value (positive, negative, in transition). This makes it easy to figure out the current status of a bug (status, assignment, commitment) at a broad glance, including peripheral vision.
Additionally, while it keeps controls in a mostly consistent position for the thousands of users already acclimated to interacting with bugzilla, this design provides enough visual structure to organize areas of UI around the core journalistic questions (what, who, when, how). This makes it easier for users to answer specific questions about a particular bug.
The design focuses on clean stark lines, and emphasizes data (like bug summaries) over metadata (like bug numbers).
View the full mockup
Many of the same design principles were also used to redesign the interface of HTML bugmail messages.
View the full mockup
This was an exploration of how we could turn the location bar into a sort of modern graphical command line, building on the work of Mozilla Lab’s Ubiquity project. We explored exposing the selection of various commands through both mouse and keyboard input, and providing rich results based on the activated command block.
This is a visual design for the command blocks that I worked on with Stephen Horlander:
Graphical Keyboard User Interfaces
These mockups are a series of explorations into creating graphical keyboard driven interfaces. Designed as accelerators for advanced users, these mockups re-imagine functionality that exists elsewhere in the browser. The resulting interaction is fast, transient, and provides keyboard users with a level of visual exploration and feedback that is uncommon to standard keyboard shortcuts.
Detailed post about the common tradeoffs between mouse driven and keyboard driven interfaces
Searching the Web:
Bookmarking and tagging a page:
Browsing your Personal Web
This is a conceptual redesign of bookmarks and history in Firefox that focuses on leveraging the core browser controls (location bar, navigation controls, content area), to blend navigating bookmarks and history with browsing Web content.
In this model, users can navigate to an existing collection of bookmarks using the location bar, just as they would navigate to a Web site:
These bookmarks then are displayed in the content area of the browser:
Read an extended discussion in a blog post about the idea.
Isometric Pixel Art for Prism Apps
Mozilla Lab’s Prism was created to frame Web applications as equals in the desktop environment. This quickly introduced a problem for the project: most Web applications only have a 16×16 favicon, and desktop applications, particularly on OS X, require icons that are at considerably higher resolutions.
Leveraging a nostalgia for the 8-bit age, I embraced the low resolution nature of favicons, and converted them into isometric pixel art. The image below is an actual screen shot as opposed to a mockup.
This was also one of the very few times I sat down and wrote some code to get an idea across. While a cool idea, the apps team at Mozilla is now defining a manifest file for applications to package their own high resolution icons, so the overall problem of only starting with 16×16 icons now no longer exists.
Those are the highlights of the design work that didn’t make the cut. In each case there were good reasons for us not to move forward, or just not to move forward yet. Even if these concepts never get deployed in Firefox, ideally they’ll spark even better ideas in the future.
November 02, 2011 12:18 AM