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.
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:
Circle to Square Height Ratios on Various Platforms
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:
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:
And here is the same object constructed out of metal, glass, and plastic, for visual integration with the different platforms:
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:
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:
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.
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:
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.
Nice work! Anyway I agree with #39 and others: the big button wastes vertical space, for those like me who prefer a compact GUI.
As for the Stop and Reload button, why don’t let’s just the user to choose? Some users fell better with the merged buttons, others like to have them separated: everything you will choose, will disappoint a portion of your users. So let them decide which is better for *them*, not for you.
Keep up the good work!
As a trapped in the windows world user, I have envy the OS-X, elements. If had one wish it would be to not put the History button in between Backward/Forward. I know I would end up cursing the placement due to sloppy mousing…
Personally I would put the forward button on the right side of the address bar, since
a) it’s used less
b) nice visual metaphor – previously, now, next.
Also i am against the any history button since I only use it once a week. Perhaps something like a drawer for history, text size, find and print that you can hide under normal browsing. (button to show drawer small and under address bar)
Go & Reload do the same thing – “Load the URL in the location bar”. Stop & Reload do not because they can change state before the user gets a chance to click on them.
I remember when Firefox 1.0 was advertised as taking less vertical room than IE. Now you want to remove vertical room?? With the toolbar, bookmarks, and tabs, those of us on Macbooks/MacbookPros have widescreens and only 800/900 pixels vertical space. Your extra 15 pixels can go swivel.
To search within the URL bar, you could have users type a ? mark and then their search query.
Kroc Camen: Go and Reload don’t do the same thing. Try filling out a form and hit reload. The page is reloaded but the data you’ve entered is still there. Now hit Go. The data disappears. Further, when you hit Go, the page is retreived from cache and when you reload it is retrieved from the server.
The difference between those two might be subtle, but for me as a web developer they are crucial.
Reading throught the comments, I see a lot of debate on the combined stop/reload button idea. Here’s my thoughts:
1. Each button should have one, and only one, function: back, forward, stop, go, reload, etc. Buttons that change function make the UI inconsistent, hence more difficult.
2. UI elements should not automatically “hide” or disappear, for the same reason as above.
I realize that you want to avoid a cluttered interface, but it’s important to keep options visible and consistent so that users can explore on their own.
I’m afraid I don’t see the point of most of the changes, and even those I do understand, I don’t much like. Old users who have learned the existing UI and have habitual ways of using it, aren’t likely to appreciate the disruption in what they are used to; and new users coming from Internet Explorer seem likely to be put off by odd-looking design (back and forward buttons) and missing features (dropdown list) that are standard where they came from.
Older users like me should have an option to use the “classic” Firefox UI, retaining all the buttons and preserving their customized toolbars, just as users of WinXP can use the Win9x UI if they choose.
As for potential new users, you’re on your own.
Don’t repeat the same mistake Microsoft did with IE 7. If you spoil the UI of Firefox, please give users the option to switch to the “classic” interface.
You’re probably too tied to GTK and GNOME now to break the habit. It’s sad you’ve stuck with the ungainly and ugly icons from GTK. It’s one of my biggest issues with Firefox is that it fails to use QT or KDE material even when that is demonstrably superior.
Finding ways to get rid of the integration with GNOME so that it will call up far superior items included in KDE, for example Konqueror over GNOME’s brain dead file “manager” is one illustration.
With regard to antistress’s commment about Epiphany I’d have to say that it’s a very good example of how not to design a UI for a web browser. I guess I can wait for the UI because it would seem to offer no improvement over what we on Linux have now.
The huge back button is definitely the wrong way to do this, as is a clock instead of an arrow on the history button (users won’t know what that button does and won’t use it), and the stop/reload buttons not being inside a container on Vista (because they are enclosed in rectangles in IE7/Vista and Windows Explorer/Vista). Also, the Back button should be styled like Vista’s native Back buttons, not like its Play and Slide Show buttons (comparison: http://img132.imageshack.us/img132/4176/backbuttontf6.png ).
I see the logic in merging them. But having one of them SO BIG will take a lot of vertical space.
Just what I (and others) didn’t like in IE7.
I have spendt lots of time minimizing the spce used (see http://osterud.name/firefox.html)
and that was the reason for switching to FF. Now this will mess up real bad Sad hate it Sad
Leave it as it is. Spend the time on internal stuff instead of unnessesary changes to the UI.
BTW: Merging the STOP and RELOAD can easily be done in userChrome (see http://osterud.name/firefox.html). Then it takes only one button space. This new look will prevent that too :-(
Will there still be “small” icons for the menu/button/urlbar? If there will only be large I’ll screen (and stick with 2.0 or the last 3.0b that has old icons :-)
How about a preview on the small icons? And making the back button same max size as the others in small (16×16). That would make that an option for those wanting to save space?
I really like the large back button, a way to make it stand out further would be to integrate the back button and THE THROBBER.
The large circle made me think of the firefox icon.
I can see a fox chasing its tail around the back button. WHOOOOOO
For those who suggested a transition between Stop and Reload (including myself above), this is already being worked on: bug #343396.
I like many of the ideas that you proposed, here is my opinion:
1. Automatically set the theme to the OS similar one. Give an option in the Themes section that lets you use WinXP, Vista, Mac, Linux, or Default.
2. Let the position and size of all of the buttons be customizable. This includes the icons in the location bar.
3. I like the idea of the Stop and Reload buttons being merged. It would be great if there could be a fading transition between the two. But let the amount of time of the fade and if they should be merged be optional.
4. I am not so proud of the History button being between the back and Forward buttons. I liked it just the way it was, but then again, this could be something that could be customizable.
-Remember, like up to the reason why so many people switched to firefox. Customization is key. Also, heres something that could be thrown into the mess. Why not also let previous firefox default themes be available?
my recommendation:
File Edit View … Bookmark 1 Bookmark2
I like this compact design. It should be default in Firefox.
I understand not wanting to lull users into a false sense of security, but diverging from browser UI tradition by getting rid of the well-understood (at least w.r.t. encryption, if not as much for identity) padlock icon seems like a bad idea. If the plan is to not allow users to tell whether a page is delivered over SSL without hovering over or clicking an element in the address bar (or watching for some annoying popup that automatically obscures part of the page for a time after it loads), that sounds like a HORRIBLE idea.
How often is malicious content served up over https, anyway? I’m a security professional and I’ve never seen that.
BTW, the video of the “Beyond the Padlock” presentation appears to be down, but I found a PDF of it at http://test.johnath.com/dropzone/Beyond%20the%20Padlock%20v7.pdf.
Argh, would be nice if your blog software had a Preview button for comments and/or took the common approach of not including trailing commas or periods when auto-hyperlinking an apparent URL. Here’s the URL I gave again without the period at the end of the sentence: http://test.johnath.com/dropzone/Beyond%20the%20Padlock%20v7.pdf
I’m sorry, but… it’s ugly. Like, really ugly.
Please change it? Please? Please please please?
Or you’ll see half of the people walk past my desk going.. wow, that’s ugly, what’s that?
Oh, it’s Firefox.
Yeah, IE looks better.
I absolutely cannot believe you left that fucking hideous, huge back button in there.
I love Firefox, but I will never, ever use FF3 with that travesty of wasting my motherfucking screen real estate in there.
I agree that the history button looks out of place between the back and forward buttons. I also don’t see the point of making the start of both the address and search fields rounded on Windows. Either make both ends square or just make the start of the first and the end of the second rounded.
I like the new features and believe 3.0 is much faster, however, I’d prefer the old bookmark features that allowed the user to completely personalize it.
Very impressed with this write up, the work being done, and the beta 3 theme overall. A couple of improvements:
1. The back/forwards drop-down – Placed right of forwards suggests its only for forwards, and is less recognizable as an arrow. The history icon between the two is far more intuitive and I hope this ends as the final design in Fx3.
2. New tab button – not overly recognizable, looks too much like a window. Also, with tabs being default, isn’t it about time this simplest function for this default behavior, gets a button in the default interface?
3. Search drop-down – I’d like to see Fx follow native visual design and icons for search. Currently the tiny drop-down icon on the engine itself is not overly native, recognizable or intuitive.
A proper drop-down icon to the right of the search bar (where per location bar users expect drop-down buttons) would be far more native and intuitive. Not only would this be more consistent with Os’s, and other browsers such as Opera and IE7, it opens up other development area’s. These include find in page more easily accessible via the drop-down as an all round search drop-down, per other browsers and programs. Not to mention find more engines as an more accessible option in the drop-down.
Unfortunately, you should not equate
Linux Users == Gnome Users
I for one am a KDE user, and I believe I am not the only KDE user who is also a Firefox user.
I would rather have the keyhole back button in Linux than Gnome integration. The same code that makes Firefox look great in Gnome also makes it look horrible in KDE.
My suggestion: a KDE-specific theme. The Keyhole with a large Back button would look perfect with the new “Oxygen” look and feel.
If you are willing to start a project for the KDE-specific theme, then I’m willing to join the team! I had some Firefox theming experience in the past when I made an Internet Explorer theme, so I know that little details mean a lot to make the theme enjoyable to use.
Just let me know if my help is needed, and how I can help.
The back button is WRONG. It is just plain wrong. I am thinking of rolling back to 2 for that one reason alone. It is so distracting and unbalanced. It’s like a zen garden with a car wreck on the path.
I for one much preferred the old Firefox buttons. The new ones with their plastic look, chunky feel, irregular size and over saturated colours call too much attention away from what I want to look at ie. the page content.
I have reverted to the Firefox 2 theme. Don’t like the ugly distracting outsize back button.
A possible solution to the problem of integrating Stop and Refresh is to have a one- or two-second timeout between the Stop button turning into Refresh and Refresh button actually being pliable.
I have reverted to the Firefox 2 theme. Don’t like the ugly distracting outsize back button
It is known that cash can make people autonomous. But what to do when one does not have money? The one way is to get the loans or secured loan.
And I liked it, I’ll look at your site.
Thank you for what you give is for those who want to learn