All posts in Design

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 mainly associated with code, the value in free collaboration benefits every discipline – particularly design.

In that spirit, the Mozilla Foundation commissioned famed typographer Erik Spiekermann to create a completely free, open-source typeface in 2013. Thus was born Fira Sans, a gorgeous san-serif font that looks great on the web. So great, in fact, that we’ll be using it in Firefox’s in-content pages such as Preferences and the Add-ons Manager.

fira sans preview

If you haven’t tried out Fira Sans, now’s a great time: version 3.1 introduces 16 different weights, a huge character map, and extensive language support. Also available is Fira Mono, a monospaced version of the original. Give it a spin on your next project!

Download Fira Sans 3.105 (3.6mb .zip)

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 window is a classic example of a common software problem: settings are slowly added onto the interface as new functionality is introduced, and eventually it sags under the weight.

The mess that is current Firefox Preferences

The mess that is current Firefox Preferences

Until now, that is!

The Firefox UX team is excited to announce that brand new, beautiful Preferences are now the default in Firefox nightlies and will soon be in release Firefox. In this redesign, the interface is visually consistent, the information architecture is improved, and the whole thing is rendered in content space rather than as a separate window.

Firefox’s new in-content preferences

Why is it important that Preferences are in the content space rather than a separate window?

  1. Consistency across devices. By using the content space, we no longer have to rely on the ability of a device to draw separate windows and dialogs. This is particularly important on tablets and phones, where window management is more difficult. Now, users of mobile Firefox will see a familiar interface when move to desktop Firefox, and vice versa.
  2. Consistency across operating systems. Windows, OSX, and Linux all create windows and dialogs differently, which means the user’s experience with Preferences was different depending on the OS. Now, as we draw this interface within Firefox, we can make it look and feel identical across systems.
  3. Consistency with the web. Ultimately, the browser is a doorway to the rest of the web. For the browser to behave like a dialog-heavy desktop application rather than the web itself was jarringly anachronistic. Beneficially, rendering like a website also means users won’t need to find and manage a separate window in addition to their open tabs.
  4. Space to grow. Not being bounded by a small, floating window means we can create richer customization experiences. The Add-ons manager has already  moved to content space, and we’ve been able to explore richer use cases as a result. Similarly, expect to see innovative customization experiments as well as the usual Firefox settings.

And before you ask, yes, the next step is absolutely a search field in Preferences to summon the exact setting you’re looking for. This is needed particularly so users won’t have to “learn” our interface, but can instead focus on their task.

A special thank you goes to Senior Visual Designer Michael Maslaney, who’s been spearheading Project Chameleon, the style guide behind this redesign. Another thank you goes to MSU students Owen Carpenter, Joe Chan, Jon Rietveld, and Devan Sayles for creating the award-winning first version of Firefox’s in-content Preferences in May 2012.

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, and it’s been brewing for the past five years.

Firefox on Linux, OSX, and Windows

Firefox on Linux, OSX, and Windows

Good to Great

This new Firefox, Firefox 29, was borne out of a series of incredible, detail-obsessed designers and engineers understanding that taking products from good to great requires more than a series of incremental improvements.

Good can be achieved through incrementalism.  Great requires, at times, overhaul.

Firefox 29 contains extensive improvements that were planned back when Alex Faaborg, Madhava Enros, and myself were the only designers at Mozilla.  Back then, Firefox was beginning to buckle under the weight of its inconsistent code and interface.

Realizing the Need for Overhaul

It’s common enough for large codebases maintained across years to develop inconsistencies.  But, Firefox’s nature as an open-source community project contributed to idiosyncratic user experiences.   Menus and dialogs used different tenses and tones.  Add-ons behaved unpredictably.  Customization was handled differently throughout the browser.  Over the past few years, we’ve been working to improve many instances of inconsistent behavior, such as replacing modal dialogs for tab-modal ones, standardizing notifications, and using a uniform tone-of-voice.

Making improvements here and there is often what user experience designers at an organization are expected to do: fix what’s broken, slightly improve what isn’t, and generally don’t get in the way of engineering effort.  But, this method can only make an existing product slightly better, and the gaps it causes reveal themselves in time.

A sinking ship can’t be patched endlessly when it needs a new hull.  This is when user experience design is most effective: when it envisions the system as a whole.  When it steps away from the trees and sees the forest holistically.

Firefox needed a new hull, and the bulk of that hull is arriving on Tuesday.

Others have been blogging about Firefox 29’s beautiful redesign, so I’ll just mention the highlights.

Consistent Customization

Customizing Firefox is now entirely predictable and much more fun.  Rather than digging into Preferences windows and dialogs, you can make Firefox the way you like via dragging-and-dropping buttons wherever you want them.

A Customize panel – itself customizable – displays the tools you want available in a single click but don’t want cluttering your interface.

Firefox Customize Menu

Firefox Customize Menu

Simple and Streamlined

Gone are the bulky angles and edges of tabs and menus.  In Firefox 29, you’ll see streamlined, almost aerodynamic, curves giving emphasis to your current tab and subtly understating the rest.

Streamlined Tab Shape

Streamlined Tab Shape

Themes and Personalization

Making Firefox visually your own is not only easy, but gorgeous.  Lightweight themes look fantastic in 29 with a light interface overlay on whatever image inspires you while you browse.

Lightweight Theme Applied to Firefox

Lightweight Theme Applied to Firefox

Obsession with Details

It’d be hard to describe all the changes coming to Firefox in a single post, but I hope you’ll find that we left no stone unturned.  Firefox 29 is all about details: the glows, the colors, the animations all reflect our desire to make the entire experience seamless.  A special hat tip to our visual designer, Stephen Horlander, for his painstaking eye for detail.

It's All About the Details

It’s All About the Details

Tomorrow’s launch day will, perhaps, be our biggest yet.  It’s certainly an emotional day for myself and the others who have worked on this release for years.  I can’t wait.  I hope you love it.

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 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!