November, 2007


15
Nov 07

The Shape of Things to Come?

Firefox 3 Wireframes

Over the past couple of weeks I’ve been driving the design of a cross platform shape and control set for Firefox 3. I’ve been working with the Firefox 3 drivers Mike Connor and Mike Beltzner, along with Mozilla’s interactician Madhava Enros, Dave Brasgalla from the Iconfactory, and our OS X theme contributers Stephen Horlander and Kevin Gerich. Here is the current design, which has already gone through a lot of iterations. We are very interested in people’s thoughts and feedback.

Our goals are to design an interface that is simple, modern, and visually lighter than previous versions of Firefox. A lot of careful thought went into determining which controls we could integrate or remove. We also focused a lot on how we could leverage visual design (namely grouping and patterns) to form a user interface that is both simpler and easier to use. All of this work is still in progress, but here is the current design for OS X, Windows Vista, and Windows XP. Click through for the full mockup.

Controllayoutandshape I4

The reason Linux isn’t shown above is that all of the feedback we’ve received so far indicates that Linux users would be happier with a theme that uses native GTK icons in the navigation toolbar, which rules out this type of customized visual treatment. Linux theme work is really active right now, see the details in my last post, and some really thorough coverage over at Ars Technica.

Here is a recap of what we changed, what we removed, what we added, and what we didn’t change. We are always open to lively debate about what should or shouldn’t be in primary UI, so feel free to voice your opinion in the comments. Note that the title of this post is a question, not a statement. This isn’t a final design for Firefox 3 as much as a snapshot of our current thoughts.

What we Changed

-The back button is larger than the forward button. We did this for two reasons: first, it’s a really important button. We could probably ship a Web browser with just a location bar and a back button, and a lot of users would be totally fine with that. By making the back button larger we make it easier to visually target and hit, which isn’t the kind of thing you will necessarily consciously notice, but the best improvements to usability are often things you don’t consciously notice. The second reason we are interested in making the back button larger is to create a unique visual identity. This form serves as a visual cue that you are looking at Firefox 3 (lengthy discussion below). On OS X we are experimenting with making the toolbar 15 pixels taller, and on Windows the toolbar height is currently remaining the same.

-The home button is now the first link on the bookmarks toolbar. We are planning on keeping it in the customization pallet so users can add it back to the navigation toolbar if they really want it there.

-The throbber is being relocated to the site button. This gives it a visual and conceptual mapping with the URL being loaded, and places it directly next to the stop button (and near the reload button and the navigational controls) so the user will immediately see feedback when interacting with these controls, as opposed to having to move their gaze to the far right side of the browser.

What we Removed

With the Web feed icon, star icon, go button, lock icon and drop down control all appearing on the right side of the location bar, we’ve recently been referring to this area of the UI as our “lucky charms” (purple horseshoes have sadly been pushed back to Firefox 4 due to a lack of developer resources, but we are accepting magically delicious patches). In these wireframes we’ve downsized from 5 lucky charms to 2: Web feed and star.

-The lock is being removed from primary UI, and Firefox will now use a metaphor based on identity, rather than security, which will appear on the site button if an SSL or EV certificate is available. The super short explanation for this change is that the user might have an encrypted connection to criminals, so telling them that they are safe is a false cue. For an in-depth discussion of why we are moving away from the metaphor of a lock, watch Johnathan Nightingale’s Mozilla24 presentation Beyond the Padlock.

-The go button now only appears when you are typing in the location bar, replacing the Web feed and star buttons as the only item on the right side of the location bar.

-In this design the drop down marker in the location bar now only appears when you hover the mouse on the location bar. The rationale was that we wanted to keep the control around for people who regularly use it (and already know that it is there), but are otherwise hiding it to reduce the overall visual complexity of the right side of the location bar, and because we don’t feel that this control needs to be discoverable.

What we Added

-The right side of the location bar now has a star icon that allows users to bookmark a Web page with a single click. We’ve found that a lot of users don’t bookmark pages anymore because it is actually easier to just search Google for any Web page that you want to visit again. So our objective when redesigning bookmarking in Firefox 3 was to create a system that was even faster for users than searching Google. Here is how it works: a single click on the star icon bookmarks the page and ensures that Firefox will never forget that you visited it. You can now search for the page again by entering any part of the title or URL In the location bar, which is more efficient than sending your search across the network, waiting for Google to generate a results page, and then locating and selecting the correct result on that page.

-The left side of the location bar now contains what we are calling the site button. Clicking on this button displays information about the identity of who you are connected to (SSL or EV certificate) if available, and in future releases we may also include actions that are contextual to the Web site you are on when you click the site button.

-On Windows we are experimenting with a small control between back and forward called the history button. This is functionally the same as the integrated drop down menu in IE7, although we believe the clock metaphor will hopefully be more descriptive than a down arrow. In particular, this is one part of the design that we are still iterating on.

What we Didn’t Change

There are lots of things we didn’t change, but I think these two decisions in particular are notable:

-The search bar and the location bar are still two different fields. Overall it seems like this is pretty redundant UI, especially since the location bar in Firefox 3 behaves a lot more like a search field (it even now contains the self describing text “Search Bookmarks and History”). However, integrating the two fields is certainly a non-trivial UI problem. Specific challenges include the fact that you should always show the location that the user has navigated to, but novice users will be reluctant to edit and replace any text that they don’t understand (and most URLs are not human readable.) Also, users who are concerned with privacy enjoy knowing when Firefox is making a network connection or not, and they don’t necessarily want everything they type into the location bar handed to a third party search engine. Additionally, the best way to integrate search suggestions with location bar auto-complete results isn’t very clear. If anyone has solutions to these three UI problems, by all means please post an answer in the comments.

-Stop and reload are not the same button. A lot of people have suggested that we follow Safari’s lead and integrate stop and reload. There are also some Firefox extensions out there that do this. The reason we decided not to integrate the two buttons is the case where you are thinking “this page is taking forever to load, I’m going to stop it” but then, a split second before you down-click, during the time in which your brain has sent the signal to your hand to carry out the action, the page finishes loading, the button changes state, and you end up doing the opposite of what you actually wanted, and think “@$%&!” Overall I think the speed of the user’s connection plays a large role in determining how often they will hit the wrong control. For instance, I rarely experience this problem when using Safari on a broadband connection, but I do commonly experience it when using an iPhone on the edge network. So to avoid potentially frustrating the user, we don’t think we should integrate the two buttons. However, integrating the two is a pretty big visual simplicity win, and the annoying situation is a boundary case, so there are definitely two sides to the debate.

Notes About the Design

In addition to the comments above, here are two accompanying mockups that explain in detail some of the very specific visual design and interaction attributes of the current iteration of wireframes:

Notes on the Design

Controllayoutnotes

Circle to Square Height Ratios on Various Platforms

Ratios

Platform Integration vs. Cross Platform Identity

In a previous post about the visual refresh for Firefox 3, I discussed our goal of visual integration with each platform. This strategy has a number of advantages, including presenting you with an interface that feels familiar, and reducing the negative feeling of adding something foreign to your system. We also what to ensure that as you move between Firefox and other applications on your system, the transition does not feel jarring.

However, morphing Firefox to visually integrate on each platform has one very serious downside: we risk losing Firefox’s identity. How do we achieve perfect visual integration with OS X without looking like Safari? And how do we achieve perfect visual integration on XP without looking like IE6, and Vista without looking like IE7? In a lot of ways these two goals, achieving visual integration on each platform, and maintaining a consistent cross platform identity, are diametrically opposed. However, we’ve been working on trying to pull off both.

Our strategy is to divide up the different visual variables across the two different objectives. Contrast (value), color (hue) and texture are used to integrate with the platform, while shape, position, orientation, and size are leveraged to create a cross platform identity:

Visualvariablestrategy

Note: the visual variables shown in this diagram are from a slide by professor Rob Miller at MIT

Another way of thinking about this strategy is that the objects remain the same across platforms, but the materials that these objects are made out of (metal, glass, plastic) change based on what OS you are running Firefox on (OS X, Vista, XP). For instance, here is the iconic shape for back and forward that gives Firefox a cross platform identity:

Iconicform

And here is the same object constructed out of metal, glass, and plastic, for visual integration with the different platforms:

Materials

There are a few exceptions to this approach, in particular the stop and reload buttons appear as glyphs on shapes on OS X, instead of glyphs floating in space, and each design leverages platform specific curve ratios. Also, we are playing around with the idea of a history button on Windows, but we are still working on that design.

Establishing Identity Through Shape: Iconic Forms

Taking the discussion to a much more theoretical level, I want to discuss why I think it is important that Firefox 3 has a unique shape, and the fundamental role that shape plays in establishing identity. When we think about identity, we often focus on brand names and logos, but many objects are so visually unique, that their shape is the only thing needed to differentiate them from every other object in existence. We are so good at processing visual information that even a simple wireframe results in us easily recognizing an object. For instance, consider common tools:

Iconicshovel

Iconichammer

After interacting with these tools, their form becomes extremely recognizable, even when shown in 2D using a simple outline. For these tools their form is dictated by functionality, as opposed to a desire to be recognizable. However, some objects have become iconic due to their clearly recognizable form. For instance, consider this hat:

Iconicmickey

Only three intersecting circles, but this is one of the most iconic forms the world has ever seen. Great designers are able to leverage simple and recognizable shapes to construct iconic forms that make their products memorable and easily differentiated from competition.

Iconicipod

Iconic360

Iconicbeetle

Firefox has been incredibly successful primarily because it is a fantastic product. The marketing around Firefox has also been extremely well done. Firefox has a great name, and a gorgeous and easily recognizable application icon. However, the tool itself has not been designed to contain an iconic form, a shape that you would recognize even if you only saw its’ shadow, or an outline. I believe Firefox 3 should be recognizable even if you are only viewing it momentarily, looking over someone else’s shoulder. Since the navigational controls are something we constantly view and interact with, that makes them a great candidate for trying to establish a recognizable shape:

Iconicformlarge

This is just one example of the kind of shape we could use. Hopefully, whatever we end up going with, you’ll be able to catch a quick glance of it and still immediately know that just saw Firefox.


13
Nov 07

Update on the Firefox 3 Linux Theme

Work on the new linux theme for Firefox 3 is progressing nicely due to a very active group of contributers. To match the operating system’s theme, Firefox’s navigation toolbar will use native GTK icons. The remaining icons are being drawn in the Tango style. I owe a huge thanks to Andreas Nilsson, Michael Ventnor, Kalle Persson, Lapo Calamandrei, Garrett LeSage, Michael Monreal, jimmac, and everyone else who is contributing to help ensure that Firefox 3 looks great on linux.

[Update: there is some very thorough coverage over on Ars Technica with lots of screenshots]


7
Nov 07

FLOSS Usability Sprint V

Last weekend Mozilla sponsored and participated in the fifth FLOSS Usability Sprint. The purpose of free/libre open source usability sprints is to get user experience designers and interaction designers in the bay area involved with open source projects, and to get open source projects actively engaged in improving their usability. In addition to Firefox, teams at the sprint also worked on improving the usability of Chandler and Wiser Earth.

Looking at the Firefox team’s progress quantitatively, over the course of just three days we were able to identify 20 user interfaces in competing browsers that we felt could potentially improve Firefox, we found 60 usability problems with Firefox, and we brainstormed 40 ideas for directions Web browsing user interfaces can potentially take in the future. Notes from the sprint are located on the mozilla wiki. Mozilla also hosted happy hour events on Friday and Saturday in the evening and sprint participants consumed 15 pitchers of beer. For the next sprint we’ll try to get our stats even higher!

Flossv

These usability sprints are incredibly valuable to Mozilla because with only three people in Mozilla’s User Experience team, it is great to increase our ranks, even if only momentarily. Also, working with talented user experience and interaction designers who have a completely fresh perspective on some of the UI issues we are facing is extremely useful. In particular I want to thank Min Wu, Chun-Yi Chen, and Jon Slenk for the prolifically critical heuristic evaluation of Firefox they did on Saturday. Also thanks to Daniel Schwartz and Jon Slenk for organizing the event.

If you are a user experience designer in the bay area, these sprints are a great way to meet other people in your field, to level up your skills, and to work on an interesting project. If you are running an open source project, these sprints are a great way to get high quality user experience consulting for free, and to considerably improve the usability of your application or site.