1
Nov 11

Five Years at Mozilla and Moving On

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:

Firefox 3:
-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

Firefox 4:
-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.


1
Nov 11

Talk at PARC: Designing Firefox

Other formats (all 720p):

WebM

Theora

MP4

 

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.


1
Nov 11

Cutting Room Floor

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

Command Blocks

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.

Conclusion

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.


10
Jun 11

The Playing Field

As an interface designer I can’t help but be a bit of an information visualization geek.  So on this lovely Friday please enjoy a treemap of the world’s platforms, circa May 2011:


View the full size

The data shown here is from Net Applications.  This is proportional to Web usage on each platform, and not individual users.  So for instance if iOS users browse the Web more than Android users, their box becomes proportionally larger.

Also I should add the caveat that Net Applications usually reports lower numbers for Firefox market share compared to the other public data sources (and our own internal metrics), but nonetheless, this treemap sure has a lot of orange in it.


10
Jun 11

Home Tab and New Tab Conceptual Mockups

In my last post I introduced a few different reasons why we are exploring the concept of a Home Tab, including:

-Creating an interface that is unique to Firefox in a browser market headed towards commoditization (back+ forward+fast!)
-Ambient application-level notification
-Introducing the concept of tab browsing to users of the home button
-Building up the user’s mental model of the features that will also be available on other platforms, like the iOS application Firefox Home

Check out that post for more details on all of those aspects.   The one big thing that my last post left out was an actual conceptual mockup of the Home Tab itself.  Here’s some ideas that we are currently working with.

Home Tab


View the full mockup

The Home Tab is framed as an information dense dashboard to the user’s online life.  This isn’t a revolutionary idea, the interface proposed here is sort of iGoogle-ish in layout.  However, the key aspect of your browser providing this dashboard is that unlike any site on the Web, it has local access to the information that is most important to you, things like your bookmarks, history, online accounts, and Web apps.  The browser can locally leverage this information to provide zero configuration interfaces, like automatically aggregating news feeds from your favorite sites.  Because this content is local to Firefox, your privacy remains fully intact.  And because this is Firefox, the content and layout would of course be highly customizable.

The Home Tab is meant to be an interface where you start your day.  Cup of coffee in hand, you can scan news feeds coming in from your favorite sites, and check information coming in from widgets you’ve added.  Unlike other popular Web portals (Yahoo!, MSN), the Home Tab is all about you.  Unlike the tabloid experience of checking out at a grocery store, the Home Tab won’t (necessarily) round down to the lowest common denominator of entertainment.  It will only contain celebrity news if you actively follow celebrity news.

So that’s my take on the Home Tab.  But what about New Tab?  In a marketplace where every other browser has adopted speed dial, why does Firefox still have a blank (but nonetheless very zen) new tab experience?

New Tab

In my previous post I argued that under this model new tab should focus primarily on search, on a flashing cursor in the awesome bar awaiting input from the user.  I still largely believe that, but there’s a pretty serious caveat, what if the user invoked new tab using their mouse?  Odds are they would like to click on a target to go somewhere.  Recognition always beats recall, right?

There are three things that I think a lot about with adding targets to the new tab:

1) Increased time on task? This may sound counter intuitive, but one of the downsides of recognition is that you look at each of the targets, and contemplate their existence, and this can slow you down.  If you already know where you want to go, introducing alternative options to where you can go will slow you down as you consider them as well.  This effect comes into play more significantly if the user’s navigational target isn’t present in the set of available options.  If it is in the set, they might be faster because they know what target they are headed towards (both it’s general location and color).  Also, if their hand starts on the mouse, they can keep it there and click on their target, so that makes them faster as well.  But what are the odds that their target is going to be in the set of available options?  This leads us to the second thing that I think about a lot.

2) Reducing the breadth of sites that users visit on the Web? We often talk about how one of the best attributes of the Web is that it is about the long tail instead of the fat head.  The Web isn’t a broadcast medium with a very limited number of channels.  It isn’t like television.  But presenting the user with only 9 options starts to take the Web back in the direction of broadcast TV.  Now admittedly each user will have a different 9 channels, but there are so many other interesting places you can go, it seems odd to visually limit the user’s options down to 9.  There is something beautiful about the fact that you have to type a thought into the search field at google.com before you get anything back.  If you leave the field blank and hit search it doesn’t do anything.  Unlike MSN and Yahoo!, Google is about curiosity, and not about boredom.  You can’t channel surf google.  It might be elitist, but I want users to be curious, I want them to explore the breadth of the Web.

3) Redirecting users away from the target that they planned to go to? Of all the things that can go wrong with introducing targets to the new tab page, this one concerns me the most, the reason being that there isn’t any reasonable way for us to detect what is going on inside of the user’s head.  We can study the fact that the user ended up at Twitter or Farmville, but is that where they were intending to go there when they opened the new tab page?  Is the user driving the browser, or is the browser now driving the user?

Possible Solution: Adapt the Interface Based on Mouse versus Keyboard Input

Is it possible to get the best of both worlds?  Can we build an interface that is recognition over recall and fast for mouse users, but at the same time doesn’t reduce the amount of time that users spend contemplating the options, and reducing the range of sites they go to?  I sure hope so, because that would be awesome.  Also, we can monitor all of those things in the wild with Test Pilot metrics to see if it is working.

Here’s the solution I’m currently thinking about, where the interface is initially a bit different depending on how you invoked the new tab.

View the full mockup

If the user clicks on new tab with the mouse, they are given a range of mouse driven targets.

If the user creates a new tab with the keyboard (accel-t), the same set of targets appear, but they are impossible to parse with your low resolution peripheral vision (since they don’t contain any color), and the auto-complete box of the location bar literally overlays them.  But nonetheless they are still there, so if you click outside of the autocomplete box to move the UI focus, you get back to an interface identical to what it would have looked like if you had clicked the new tab button with the mouse.

In this model the small distracting pieces of sweet information candy (twitter, reddit, etc.) won’t spike your interest as much because the visual focus is given to different search engines.  And the search engines aren’t likely to pull you away from your actual task, because you have to combine them with one of your own thoughts.  In isolation, they don’t provide as compelling of a target.

This design is all about the low resolution peripheral perception of color: both when we want it to happen, and also when we don’t.  For instance, let’s assume that the user has their high resolution fovea directed at the flashing cursor in the location bar:

We’re of course going to be testing out all of these designs to see how they feel in actual usage.  Hopefully this posts provides everyone with some background information on all of the metrics we are trying to balance, and our ongoing quest for the optimal solution.

Side note: our intrepid Firefox developer Margaret has already implemented a dominant color detection algorithm to get the favicon up-scaling and hover effects working.  Read more about it at her post, and awesome work Margaret!


13
Apr 11

The Firefox Home Tab

Many of the mockups of Firefox’s new interface, dating all the way back to August 2009, have featured a small home tab.   But up until now, I haven’t had a chance to explain the various ideas surrounding Home, elaborate how it fits into our broader cross platform and cross device strategy, and answer some really basic questions, like what will happen if the user has already customized their home page.

 

Firefox Home: Your First App Tab

Well, at least that was the idea since we were planning on introducing Home at the same time as introducing the concept of App tabs.  Now it will probably be your third or fourth App Tab in terms of order of creation, but "Home: Your Left Most App Tab!" doesn’t really have the same ring to it :)  Either way, Home is an application created by Mozilla that runs in Firefox, and it helps you manage your online life. 

Home is built on top of Sync, acts as a launch pad  to all of your encrypted personal data, your personal Web.   Our goal is to provide a consistent Home experience on every OS, including the classic desktop environments of Windows, Linux and OS X, as well as the mobile environments of Android, Maemo, and iOS:

We launched our Home iOS app last July, and the desktop Home app tab is still currently being developed, but nonetheless the two are part of what will eventually be a unified cross platform strategy.  Home will be available on every single platform, including platforms that are restricting us from shipping the full Firefox browser.

But home is more than just a consistent cross device experience for users, it’s also going to be one of the things that makes Firefox truly unique in the marketplace.  In a competitive landscape quickly heading towards interface commoditization (back+forward+fast!), Home  will provide Firefox users with a personalized experience unlike anything else on the market.  Going beyond an ever decreasing browser frame, Home provides users with a dashboard to their life online.

 

What Types of Data will Home Provide Access To?

The UX team is still in the process of determining Home’s initial feature set and interface, but we’ve definitely had a lot of time to brainstorm the types of personalized data that we may be interesting in surfacing to users.  Here are just some of the things we are looking at, from design work by John Wayne Hill (Firefox UX intern), Madhava Enros and Stuart Parmenter (mobile), and Kevin Fox (web apps).

 

A Mechanism for Application-Level Notification

Another nice advantage of the Home Tab in desktop Firefox is that it introduces a less intrusive and more ambient way for Firefox to provide users with notifications for particular events, like a security update being available, or you needing to provide your new Sync password.  Similar to how email clients glow when you receive a new message, the Home Tab will glow when Firefox has something to ask you.  These types of asynchronous notifications are considerably friendlier and more respectful than throwing up a large modal dialog box:

Introducing Users to The Concept of Tab Browsing

One of the really nice properties of surfacing home as an Application Tab, is that anything launched off of it will open in a new tab.  What’s great about this is that many users who have always relied on the home button in Web browsers (past and present), haven’t discovered the advantages of tab browsing yet, and tend to follow very linear and singular navigation paths.  For instance, a common start up sequence for these users might be:

 

In this sequence, the user only has one tab open, because they are relying on clicking the home button for navigational Google searches, and by default each new task overtakes their current task.  It’s like an OS that can only have one window open at a time.

By switching these users over to the Home Tab, the same sequence of actions (relying on the house icon) produces three separate tabs.  As users notice that things like their email, auction, and baseball game are still present, they can quickly pick up the core advantages of tab browsing: reduced load time and multi-tasking on different things simultaneously.

 

Following the practice of "show, don’t tell" this interface introduces even the most stubborn IE6 users to the advantages of tab browsing, without them having to read a single support document or manual.  Note that users who rely heavily on the current Home Button for search still haven’t transitioned to the always available search bar, so there is already a strong correlation between relying on the Home Button, and navigational sequences that are common to pre-tab browsers.

 

What if the User Has Already Specified a Custom Home Page?

Because we want to place Firefox UI inside of the Home tab (like session restore, or access to your online accounts), we need to make some changes to how we deal with customized home pages.  This is partly to make sure that these aspects of Firefox’s UI are always available (unless the user has actively removed the Home tab), and partly because we want to have consistent support documents that don’t include too many if-then clauses.

A custom home page (or pages) will become app tabs.  But the experience of launching the browser will be the same.  For instance, if you like many users  have set Facebook as your home page (now called "start page"), it will still be the active tab when you launch Firefox:

The only real difference is that you’ll need to click on the Facebook icon instead of the house to get back to it.

 

The Home Tab Versus New Tab

The Home tab and New tab are both launching points to a new destination on the Web, so what’s the difference between them?

This is actually going to be the topic of my next post, but the short version is that I believe the Home tab and New tab represent two very different use cases.  One is primarily a mouse driven browse-based interface, and the other primarily a keyboard driven search-based interface.  One is complex, and the other is simple.  One is the place you go when you are bored, and other is the place you go when you happen to already know your next destination on the Web.


22
Mar 11

Firefox 4’s New User Interface

Firefox 4 is available now!  Here’s a video introducing the new user interface, and the fantastic UX team that designed it.

YouTube

Theora

WebM


28
Jul 10

App Tabs in Firefox 4 Beta 2

YouTube

Theora 720p

WebM 720p


18
Jul 10

Details About the Firefox Button

Firefox 4 Beta 1 included a very initial version of the Firefox button, a refactoring of all of the main application commands for users on Windows 7 and Windows Vista.  Most of the work for that release was related to having the ability to literally draw the button in the window’s title bar, and the menu itself was just a quick take on what we eventually plan to build. (Also our apologies for accidentally painting over the window controls like the close button if you were using a persona with Beta 1).

As usual, our design work remains in flux as we receive qualitative feedback and quantitative data during the beta process, but here is a mockup of what the contents of the Firefox menu may eventually look like:

Full size

 

This mockup details how the commands are being migrated over, including which commands are transitioning to the new interface, and which commands we are looking into moving or removing on all platforms:

Full Size

 

In addition to trying to design an interface that is logically grouped and externally consistent, we are also leverging a lot of the analysis we have of Firefox’s current menu bar interface.  Here is the heatmap visualization we published back in March:

Full Size

 

Since we don’t have the Firefox button fully implemented yet we haven’t started study its usage yet.  The previous data does give us some clues to what we expect usage to look like however.  Here is a projection of a Firefox button heatmap, based on how items were previously used with the traditional menu bar:

Full Size

As you can see in the full mockup, in this projection many of the heavily used items have been placed directly on the main menu, allowing users to access them without the need to expand sub-menus.  The sub-menus mostly contain low usage darker green and purple commands.

Of course we can’t just ship a full optimization of the interface, and literally sort items by usage since they still need to be semantically and logically grouped into memorable locations.  However, all the data we have so far indicates that users will for the most part experience simple and streamlined interactions with the Firefox button as soon as they familiarize themselves with the new locations for various commands.


6
Jul 10

Firefox 4 Beta 1 UI Changes


(best viewed in full screen)

YouTube

Theora 720p

WebM 720p

The first Beta of Firefox 4 is here, and you can download it now.  In this video we quickly review a few of the initial UI changes that have already landed, including:

1) Our Feedback UI and how to control user interface tests

2) Switch to Tab

3) Tabs on Top (more details in an earlier video)

4) The Firefox Button (note that this is only the default UI for Windows 7 and Vista)

Additional Notes

-This is a very early Beta, so a lot of features are not complete yet, and the interface is still rather unpolished

-Currently most of the initial UI changes have only landed for Windows.  If you are on OS X or Linux, expect to see additional interface changes in future betas

-If you are on OS X and you’re finding our visual design of tabs on top to be broken, please note the previous two disclaimers :)

-If you have modified your bookmarks toolbar and it was hidden during the upgrade, this is actually a bug.  The current plan is to only hide the bookmarks toolbar if the user has not previously modified it (or if they have a brand new profile).

Feedback

Please use the comments below for any questions or feedback, or you can of course use your shiny new Feedback Button in the Firefox 4 Beta :)

We hope you enjoy this early Beta build!