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


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.


  1. 1. Thank you for asking our opinion

    2. native GTK icons in the navigation toolbar is just great for Linux users.

    3. Keeping the 2 lucky charms Web feed and star is great.
    I like the idea of having warning lights on the right side of the location bar. These lights will switch on when a site is already bookmarked or when a RSS feed is available. Maybe one day another warning light would switch on when a printable version of the page is available, as Percy Cabello has suggested (1) ? Since star icon and RSS icon are both warning lights, i suggest to have them both in the location bar, on its right. I don’t see any reason why the star should be out of the bar whereas the RSS icon would be inside the bar. The play the same role (2).

    4. I didn’t find the small icon on Windows between back and forward (the history button) to be easily understandable

    5. For an exemple of good integration between the search bar and the location bar, see Epiphany.

    6. Stop and refresh buttons should not be integrate : they don’t have the same goal. But you could integrate go and refresh buttons.

    7. I can’t wait to see the final GUI !


  2. Thanks for the fantastic post!

    I agree with the vast majority of what you are doing here, it looks like the FF3 GUI is going to be a major step forward.

    One suggestion though: Merge the reload and stop buttons, but with a short animated transition between the two states. In short:

    1) User loads a page.
    2) Button displays as “stop”.
    3) Page load completes.
    4) Button fades from “stop” to “reload” for 0.5 seconds or so. During this time it is unclickable.
    5) Button displays as “reload”, responds normally to clicks.

    This delivers a major saving in toolbar space, reduces redundancy, could look very slick if done right (using inbuilt FF “opacity” blend perhaps?), and will neatly avoid the reaction-time issue on slow connections. Also, it is highly unlikely that one would reload a page within half a second of it loading; users who wanted to do that could still press F5/Ctrl-R.

  3. Very good work on the UI.

    I have only one suggestion:

    • Move the “Star” button between the “Back” and “Forward” buttons. We don’t need the History button because of click and hold that will work and be available for both Forward and Back buttons.

    Or, more the Star button left of the URL bar.

    I’m eager to try out any new GUI for PCs and Macs.

  4. Making the back button bigger makes baby Jesus cry. As long as we can revert to a “classic” theme…

  5. Seems very logical and well thought out. Looking forward to this landing on the trunk.

    My only critique is the history button looks out of place between the back and forward buttons.

  6. The Mac mockup of the session history buttons looks dramatically better than the Windows mockups because it lacks the crazy-looking “history button”. This button looks like a visual glitch. If it’s supposed to replace the dropdown markers, then either putting a single marker to the right of the control group, or else removing the marker entirely (and just showing the dropdown on click-and-hold, or click-and-drag-down, or something) would both be more appealing.

    I applaud the removal of the lock. I think overall teaching users that “lock means safe” is actually harmful, and breaking that would be great. But what identity signals are you going to show? EV certificates are nearly nonexistent right now, and the top-level domain (by which I mean, say, “” for is the only other “non-spoofable” bit of site identity.

  7. Hi,

    I’m not very good in English, but I NEED (ehehe) to ask for a “recycle bin” to the right of the Search Bar (or somewhere else), containing the last closed tabs. I also had proposed to change the number from 10 to around 20.
    This “feature” already exists in Opera and it’s extremely discoverable and intuitive, and pratical too.

    Please, Alex, consider my post.


  8. Some really good ideas here.

    Re: History Button.
    At first I couldn’t figure out why there was a gaping hole between back and forwards buttons but when I saw your glyph it made perfect sense. Genius idea! However, some users may mistake that for an actual history button that opens up the history sidebar. So may I suggest that (in the drop down menu that appears when you click on the History button) you have a link at the bottom that says something like “Open History in Sidebar”?
    Also, I’m not sure I like the placement of the History button. I think it would be fine floating beside the forward button and then when you hover over, it appears as a button that’s connected to the back and forward buttons.

    Also, at first I wasn’t sold on the idea of having a large back button but you convinced me! Big back, small forward, looks great! (Without the history in the middle as I explained above). Go Firefox’s identity!
    [wow, that sounds like Pokemon]

  9. As always, you present solid ideas and concepts that are clearly thought out.

    I’m concerned about the oversized back buttons, though. While a solid UI concept–the back button is used far more often than the forward button, and as such would ideally be more prominent–it throws the idea of system integration out the window. While the general graphical style may be closer to system defaults than in past versions of Firefox, the large back button appears out of place, and certainly doesn’t seem to integrate with the rest of the browser: I suspect a lot of users will see the oversized back button and immediately think that they’ve accidentally toggled the “Use Small Icons” option, or that said option is broken.

    Then again, I’m sure most common users will be happy with this, and themes will quickly come out to bring the enlarged back button back down to size.

  10. I disagree with this.

    The theory and intentions are all well and good, but it points towards the constant iTunes-ation of every product, where every icon is a different shape and size. Where has the design principle of consistent, simple uncluttered icons that don’t draw your eye away from the web page, and icons that are easy to point towards? Do you really need a big back button relative to everything else rather than lots of big buttons for usability reasons, or is it just an attempt at beautification and branding by trying to follow what’s hip?

    The thing that currently separates FireFox from its alternatives, such as IE7 and Opera, is that it hasn’t been injected with a dose of ugly based on designers rather than common sense of /what users actually like/.

    On top of that, have you ever heard of Fitts’s law? Aren’t you turning a back button with “infinite width” into something that will actually be /worse to use functionally/ for marginal prettiness? Better usability based on the key HCI principle to me certainly seems preferable to something you’d hear in high-school graphics class about outlines – you seem to forget you don’t need to press a button on a shovel or a hammer.

    At least there’s still Konquerer, as much as I loathe liking KDE-based.

  11. Hi,
    i like most of this, in particular all in the part about “What we Removed” ;-)

    “On OS X we are experimenting with making the toolbar 15 pixels taller, ..”
    and this only to integrate a larger back button?
    It looks like a concept mere mind game without the necessary respect for the balance of the other details. In other words: the left side is then full with the traffic light bullets + the larger back button and the other side has only therefore unnecessary gap – .. the one side is squeezed and the other side is lost in space ;-)

    “…since the location bar in Firefox 3 behaves a lot more like a search field”
    And on the other hand is the location bar still primarily a location bar and not a search field.
    The self describing text “Search Bookmarks and History” … looks therefore like a strange idea

    On Mac OS X have only search fields rounded edges. Is it now primarily a search field or a location bar?
    In other words: The rounded edges should be there removed.

    And about some other parts for Mac OS X.
    It will be much cleaner without the background for the search favicon and search drop-down button. The same with the new site button and search-go button should only appears when it is necessary (when someone use the search field)

    And i have the impression that some parts are scheduled ONLY with the intention to receive a greater difference with the well known competitor and this not always the best approach to receive the best design solution.


  12. On top of that, have you ever heard of Fitts’s law? Aren’t you turning a back button with “infinite width” into something that will actually be /worse

    Of course I’ve heard of fitt’s law. The back button will only pick up infinite width if the target area is on the screen’s edge, and the target area will still remain a square so this isn’t an issue. The only real regression is the bordering forward button’s target area picking up more accidental clicks, but Safari is getting away with it.

  13. An integrated Stop / Reload button has its advantages, but its real downside is, as said, the common case of it turning from Stop to Reload the moment the user tries to click it. There is a possible solution to this; whenever a page finishes loading, the Stop / Reload button can turn into a disabled state for a few seconds. After a few seconds have passed, it can then turn into the Reload button.

  14. 1 – IMHO, the big back-button is a terrible mistake since it becomes contradictory with the “fit-to-OS” idea. Windows Explorer do not have this big button, neither WMP, IE and so on. I love innovation, but this is a move just to be “different”. The usability for me won’t get improved by that. This kind of move seems to be derivate by Opera SA (I don’t like it’s implementations, for example: the bad position of the Tab Bar).

    2 – The Mid History-button is interesting, but the idea needs more burnishing. It could not show only the History, but (preferable) the History-for-closed-tabs, like Opera’s RecycleBin, as someone said above. This is important, because the “Open recent closed tabs” is a hidden feature for the average Joe.

    3 – The Go button appearing only when it is necessary breaks the consistency of the program. The average Joe won’t understand it’s behavior.

    4 – Nice move not to join the Reload-Stop. As someone said, their function is different and, come on, WHY we need more space in the Navigation Toolbar? Today a lot of widescreens LCDs are sold with big resolutions and mainly, with high width. Hence, for the majority of users, it isn’t a problem. I don’t understand why this DEMAND for the AddressBar to use all the Nav Toolbar. And for me, this is again an usability problem.

    5 – The new throbbler’s position is AWESOME… the HomePage too.


  15. Maybe the button configuration could be less suggestive of, like, a penis.

    Just my take on it.

  16. I’m going to agree with most and disagree with the back button on OSX. Increasing the size of the back button is going to push the rest of the buttons as well as the input box down too far from the title of the window. IMO, you should make the default theme blend in with Leopard’s new UI as much as possible. There’s room to improve on Safari’s UI while still keeping within the boundaries of what makes the built in apps beautiful.

  17. Nice piece of UI work!

    I am not sure that I fully share your assessment of the search bar as being a “pretty redundant UI”. I find the current setup with a drop down menu containing all your search engines very useful (not forgetting the simple way of adding of new search engines). It allows you to search the same phrase in different engines. Not sure how you would solve that type of functionality in the location bar without confusing anybody. If there is anything in the search bar that I would not miss then it is the search button. Before I grab the mouse to start the search, I already the hit the ‘Enter’ button (as I most likely type my search phrases). Some people might prefer copying and pasting. That might be in the category ‘personal preference’, so make it easily configurable.

    I guess you can argue about the history button. I second Peter’s opinion. The Mac version looks cleaner.

  18. Just checking, so the site icon will be overloaded as
    1) while loading, the throbber
    2) when done, Larry/lock (but not favicon)
    3) at all times, the drag marker

    This would mean of course that you won’t be able to see site identity while loading (I’m assuming throbber overrides Larry). And site owners can easily prevent a page from finishing to load by lots of hidden images that point to scripts that intentionally hold the connection open.

    I hope the XP style will use native theming as much as possible, since I’m using Classic and not Luna ;)

  19. From the first comment:

    “6. Stop and refresh buttons should not be integrate : they don’t have the same goal. But you could integrate go and refresh buttons.”

    Love this idea. Please think about merging reload/go.

  20. Wow, I’m actually really excited about this. Great post.

    The one thing I’d really like to see fixed for Firefox 3 is integrating tab behavior with the platform — the fact that Firefox 2 for Mac shipped with the close buttons on the wrong side was really frustrating. (Safari for Windows did the same thing, which kind of blew my mind, but at least Apple has incentive to want its apps to look more correct on one platform.)

    Huh, I’m liking the inflated back button. It’s bold and smart.

  21. A lot of this sounds good. I especially like the solutions for eliminating the throbber, lock icon, and “go” button.


    * The new back/forward button shape is unbalanced and ugly, wastes thousands of pixels due to being taller than everything else on the toolbar, and looks more like a penis than Flock’s back and forward buttons look like breasts.

    * Hiding the address bar dropdown except on hover does not accomplish your goal of reducing visual complexity. Making it appear when the address bar is hovered is much more visually distracting than just having it there in the first place. How about getting rid of it and adding a “Recently typed URLs” query to the new “Places” menu on the bookmarks toolbar?

    * I don’t like the idea of putting “Search bookmarks and history” in the address bar (bug 396816). That’s hiding critical location information, sometimes, just to give users hint about a secondary use of the address bar control. Users can figure out that it searches history the first time they start to type an address, by reading the “Welcome to Firefox 3” page, or by reading a tip at the bottom of

    * I don’t see why the UI for getting the session history list (formerly the back/forward button dropdowns) should differ between Windows and Mac.

    * Adding vertical lines (or curves) separating the parts of the address bar and search bar makes them more visually complex and isn’t necessary.

    * Why did “Reload” turn into “Refresh”?

  22. Please don’t mess with what works unless it’s been thoroughly tested! The last time you introduced new back/forward buttons they were so irritating to use that I had to install a different theme just to get the old buttons back:

  23. I really like this.

    My only nit would be that the back/forward shape that you want to use for branding is sort of similar to the top-left button cluster in the new Microsoft Office.

    Nothing wrong with that in itself, but I think it brings into question the value of that shape for branding.

    … Ami.

  24. Richard Gondoogle

    Please, please, please do not make the back button enormous.

    Not only does this waste pixels, but it also looks ridiculous, and serves no practical purpose at all. It will make the Firefox UI as bad as IE7’s, and that’s saying a lot — a lot of bad things, that is.

    This will force me to switch full-time to Opera, though in general, I like Firefox a bit better. And it will make Firefox an abortion of design, and the UI a Rosie O’Donnell of bloat.

    What a bad idea.

  25. Can i just clear something up, so the Linux icons will be native GTK icons but will they be in the same layout as shown in the wire frame mock ups as shown above?

    I hope so, thanks

  26. This interface is retarded. An the big back button comes from the Vista Start button? Forget it.

  27. I like all the ideas of using shapes for Firefox identity and colors/textures for platform integration. The big back button seems handy too.
    But why do you ignore the status, menu, bookmark and window bar? These places seem to me the biggest wasters of space and they clutter up the interface. When do you really use these bars?

  28. My mother used to call me opinionated. So…
    I for one like the bigger back button. Not that the current one has any problem, but I can see the arguments given for it. Besides, it doesn’t look so big as to wreck the interface.
    The solutions proposed for the location bar cluttering sound right too: I don’t really need the dropdown or the go button to be present except when I mouse over the bar. I have some reservations though: has it been tested if it is distracting indeed to have UI elements “magically” appear by doing a supposedly unobstrusive action as just moving over? I am thinking in an extension called Locationbar², which greys out and separates the different parts of the address when hovering it. Though practical, after months of usage it still feels somehow tricky to get the grip of it.
    The History minibutton between forward and back, I don’t like that much. The dropdown arrow is at least consistent with the location and search bar arrows, as someone pointed out this one could be mistook as the Sidebar History button instead.
    Home button: OK there, good to give the option to put it back. I use no bookmarks toolbar, but I see many people do.
    The Throbber thing has some problems. I have come to identify site identity with favicon, at least partially. Maybe a fancy animation which gradually superimposes over the favicon? Or make the reload or go buttons “throb”?
    Overall, a very nice job. Now, if only I could hope for stronger button highlits…

  29. Nice writeup!
    I’ve always reverted any UIs with differently sized buttons back to evenly sized buttons. One reason is screen real estate. Laptops still don’t come with big screens. The other is that it never seems to please me at all, it just seems superfluous and distracting. But I do find it hard to say why I find it so distracting.

  30. Overall, I like these suggestions. I like the fact that visual identity of Firefox will be part of a greater branding scheme. The bigger back button (BBB) is neat, but I think it should be slightly smaller than it is in these mock-ups. It’s nearly twice the height compared to the forward button. Furthermore, I believe it makes no sense to use the ratio of the Start menu button of windows for the buttons. There must be other factors that are more relevant?

    I also think it is odd not to have the same visual identity in Linux versions. I think all platform versions should have an option to show either the Firefox default theme or a native theme, though. Consistency is a great thing! :)

    As pointed out by a commenter above, the Location Bar shouldn’t have rounded corners on Mac OS X, since its primary function is that of a location bar and not a search bar.

    Lastly, I think it’s a bit odd that the Location Bar says “Search Bookmarks and History”. If it’s important to highlight this feature, I think it should say “Type Address or Search Bookmarks and History”.

    And, btw, shouldn’t that text and the text in the search bar be italicized in Vista?

  31. The big back button is a nice idea, I think. Sometimes, doing something just “to be different” is a good idea — it creates brand identity. In addition, the reasoning that the back button is among the most oft-used of buttons and thus should be bigger is sound.

    I will however chime in with the complaints about the history button. It looks misplaced, and with the three buttons that close to each other and yet being fairly small, I just know I’m going to end up mis-clicking more than once.

    I really don’t understand the people saying they will stop using Firefox if the back button grows a little fatter; installing a more sleek skin aside, are you really implying that the only reason you use Firefox is because it has a slim back button?

  32. Although I completely agree with the removal of the lock icon, I wonder if this won’t cause the loss of that group of users who’ll have actually read banks “always check for the lock icon!” notes and now indeed always do so.
    I can imagine them going to their bank for the first time with Firefox 3, _not_ seeing the icon (being completely oblivious to all other UI that indicates trust), and deciding to use a different browser.

    Admittedly this’ll be a small group of users, but I worry it’s not an insignificantly small group of users.
    (If so, then for them it might be worth putting the lock icon back in the status bar, where it’ll be safely unnoticed by almost everyone, but will at least be there, for as long as it takes for banks to stop teaching that silly lesson.)

    Also: usability comment on your commenting form. I understand why it’s placed next to the start of the reader comments (when it’s not floating – which always sucks; jarring movement), but with a long post and a long list of other comments (which I dutifully read first to make certain I wasn’t repeating anything which was already said), it’s _really_ hard to find the form when you’re ready to start commenting.
    I’d recommend always placing it way at the bottom of the list of comments. That’s slightly less convenient for those who immediately want to comment, but at least there anyone will be able to swiftly find it.

  33. I wanted to offer my thoughts on the possibility of merging Stop and Reload, but Angus and kourge made my suggestion for me! So, I’d like to flesh out their idea.

    The basic problem with a single button is that it is a toggle, and toggles lead to modal errors. I know this all too well because I use the merged button myself (actually, I use a merged Stop-Reload-Go button). Whenever I want to stop the page from loading, I hesitate, fearful that I might hit the button right after it has transformed into Reload. This slows me down, and creates unease. What I need is the confidence that, when I see that Stop button, if I move to hit it, I won’t accidentally hit Reload. Suppose it takes me about a second on average to reach the Stop button and click on it. If I know that there’s no way that the Reload button will become active during this second, I won’t be afraid to go for the Stop button. Thus, the obvious solution would be to introduce a transition, where it becomes obvious to the user that the page has stopped loading, but the Reload button has not yet appeared. Moreover, for the impatient user, hitting the merged button during this transition would speed it up and bring forth the Reload button immediately, allowing him to click Reload without waiting any further.

    On top of all that, since these buttons occupy the same space, there could be some confusion to the user as to what he has just clicked. To eliminate this, I propose adding sounds for Reload and Stop. An added benefit of this would be that clicking the transition animation would be clearly understandable as neither Stop nor Reload, as the user would become accustomed to hearing a sound. (Some fancy visual feedback for stopping and reloading might also be useful, especially for the hearing-impaired.)

    I think such a proposal would eliminate the modal errors. Actual user testing would be required, of course. If it works, however, it would be a big win for simplicity. And a transition animation between Stop and Reload would look very cool.

  34. Thanks for a great post! I really like most of your ideas.

    I don’t mind the back button, if it is made a little smaller. However, the history button doesn’t feel good, the MAC version is much smoother for the eye.

    And please, don’t forget all the users using small toolbar icons! In the age of wide screens, every height pixel is extremely valuable. It shouldn’t be so difficult to use the same size for both forward and back buttons in small icons mode and retaining most of the visual identity.

  35. For people using SSL Client authentication, there needs to be an easy way (perhaps in the status bar), to see/select/cancel the currently selected certificate (for current site) used for Client SSL Authentication.

    Also a button to cancel all SSL sessions.

  36. 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.

  37. I really like the look of the OS X wire frame. But having the history button stuffed between my forward and back button looks like I would spend a lot of cursing because I’d end up pressing history instead of back (or forward).

    While looking good is a priority. I’d prefer that usability stay priority numbero uno.

  38. Generally I find buttons that are not rectangular in shape much more difficult to click than regular buttons and icons. Therefore, it is a big disappointment for me that Firefox tries to imitate what’s fashionable and makes these circular buttons. Making it bigger doesn’t help either, and it’s ugly too.

  39. Big back button is bad for me. I’ve moved location bar and back, reload, forward buttons to emty space at right of menu bar. So big button will enlarge this toolbar and I want it to be compact and slim.

    But some users can like it, so there is solution: Keep current back and forward buttons with history and do not put them on the toolbar. They will be accessible via “Customize” command from toolbars’ popup menu.

    Same solution can be applied to refresh/stop multi-button and more things…

    (Sorry for my english.)

  40. Will you be leaving *some* indicator that you are connecting over an encrypted channel besides the lock even if the site doesn’t have a signed SSL certificate?

    I like to know when I’m on an encrypted channel or not.

  41. Please please add ‘New Tab’ button to the tool bar.

    I have installed Firefox for approx 50-60 people, and even after years of using it, they all complain that opening tabs requires them to go to File->New Tab.

    None of them even knew about the customize tool bar options.

    Please please please add it.

    Tabs get so much GUI space, but to make/add a tab is just about impossible. Argh!


  42. I am really looking forward to the new UI. It is nice to see that there is such careful thought behind each change.

    I hope my only critique will be viewed in a constructive light: namely that the address bar drop-down arrow should not appear only on rollover. Mystery-meat navigation is always a big no-no.

    Other than that, great job!

  43. Why don’t you just use tango?

  44. Please do not change the icons!

    I think IE chaning its familiar icons in IE7 is now the major driver for people installing firefox. Many people including myself find it harder to use the smaller and irregularly shaped buttons.

  45. I like the idea of a big back button, although I think the public is used to it as a “Play” button (most media players use it nowadays). This could lead to some confusion.
    How about the following?
    Move the forward button down to align with the bottom of the “bick” button then move the menu bar to the right and lower it to save some vertical screensize.
    Also remove the history thing (a menu item will do the job). Maybe the current back/forward menu’s can be implemented as timed-out menus (I hardly uses these menu’s so I don’t mind if they are removed).

  46. Something not mentioned here but which I think would be appreciated by many users would be an icon/option to mute the contents of all non-active tabs. How many times have you been surfing away with 10 tabs open, only to have one of your open pages start making annoying noises at you?

  47. Very interesting read on the unique shapes, though I’m not sure the large back button is the way to go. How about using a horizontally-flipped firefox icon, with a clock for a globe, split in the middle, with the tail-side being back, and the head being forward?

    One thing that I don’t see being addressed is that monitors are getting bigger and bigger, especially horizontally, due to the popularity of widescreen, yet we’re still stuck with the perennial interface with all the toolbars on the left, and the unsightly grey taking up vertical space on the right. Dragging the various elements onto the same bar is an ugly and messy solution.

    It’s about time UI designers started taking this into consideration; I want more web and less grey without having a convoluted interface. Why not add a stylish floating toolbar as an alternative (with an option to pin it to the main window)?

  48. The rest of the interface seems ok and workable, but I am not sure about the history button. How about instead of the history button, create a new glyph that pops up the Places folder that is currently at the start of the bookmarks toolbar. I have dropped my bookmarks toolbar because I have found that since upgrading I haven’t used the bookmarks toolbar. Instead I find myself just using the url bar and guessing at the bookmarks.

    I used to have 2 uses for the bookmarks toolbar:
    1. Drag urls there in order to favorite them (then when the overflow menu got too big I would reorganize and put them into other folders)
    2. click on urls in the toolbar that I frequently visit.

    Since the upgrade these use cases have gone away:
    1. Just star it (and while I am at it, give it a tag every once in a while).
    2. alt+d and the name of a tag works better then moving my hand to a mouse and clicking in the overflow menu to read through the links and subfolders in order to find a link I am looking for.

  49. How about combining the stop/reload buttons and allowing it to toggle only if that button is not hovered? (optionally with the proposed toggle delay). Then it can change gracefully on a mouseOut event.

  50. Excellent work, Alex. Thank you for sharing with us. This whole UI design thing fascinates me. There are a few comments I would like to share:

    1. Here are two options for solving the separate search bar and location bar:

    – A. Combine the two into one location/search bar. The dropdown button for choosing the search engine could be combined with the site button on the location bar. When you click on the site button, a menu drops down. The location bar will be the first menu option, followed by a menu separator, and then the list of search engines. If you choose the location bar option and type in a URL, the text box shouldn’t update to show the user’s URL, it should just stay the same (behaving like the current search bar). Instead, the URL shows up in the status bar once the page is loaded (in place of or in addition to “Done:”). Clicking or right-clicking on this part of the status bar will show a context menu with options like Copy URL, etc. If we do this, I suggest making the location bar icon be a distinct icon that does not change to the current site’s favicon (the favicon is already displayed on the tab). When the user chooses ‘location bar’ from the site button menu, the autocomplete results will be from bookmarks/history. When the user chooses a search engine from the site button menu, the autocomplete results will be from search term suggestions. We would have to move the SSL/EV certificate information to be accessible by a right-click (instead of left-click) on the site button, make it pop up on delayed hover over the site button, or divorce it from the site button and move it to it’s own icon on the status bar. Additional suggestion: When the user types/pastes text in the combined location/search bar and hits Enter, the text is checked first by Firefox to see if the string begins with “http:”, “https:” or “file:”. If so, the site button reverts to the location bar icon and the input is treated as a URL to be navigated to.
    If you need further explanation or a visual mock-up, I can do that.

    – B. Make the search bar hidden by default (similar to how the find bar is hidden by default). You could even implement your idea of a new web search explained here:

    2. I think the bigger back button design is workable, but in the case of the user selecting small toolbar icons, it would make sense to have it reduce down to the same size as the other buttons (most people who use small buttons do so to save screen space).

    3. Along with your effort to integrate Firefox with each operating system’s look, please make the tabs and the location bar drop down marker be native style. When Firefox 2 changed these it made me cringe–the default appearance for basic controls like these should always conform to the visual style that the user has on their OS (my opinion).

    4. It would also be preferable if I didn’t have to hover over the location bar to see the drop down marker.

    5. I wish the throbber would not appear anywhere, except on the currently loading tab(s). I believe it already shows up on loading tabs anyway.

    6. I really like the less-pronounced curves on your Windows XP control shapes.

    7. Of course, installing a theme will still be an option, so whatever you guys decide, nobody needs to get too upset!

  51. For what its worth, I think stop and reload should be the same button. I also think there should only be one address bar (not address bar and search bar). I think the address bar should integrate search results and autocomplete – so for example the moment you add a space then it goes into search mode.

  52. i like the new layout very much. the only things i’m still lacking in the primary UI are a new tab button on the left of the tab bar, and a recently closed folder under All Tabs button.

    i’m only not too convinced from the rounded borders ending with spikes… but i prefer to see a filled example before commenting, wireframe is not enough for my eyes :)

  53. Jesper Kristensen

    Great post. I like that you are trying to simplify the UI.

    1. I don’t like the rounded text boxes and buttons on XP and Vista. It makes Firefox look like a Mac OS application.

    2. I think the big back button + history + forward looks out of place and ugly. I con follow your reasoning, but I don’t think it is the right thing to do.

    3. I like that the clutter in the right side of the location bar is reduced. Maybe you should drop the history drop down arrow completely, so that location bar autocomplete works like autocomplete for forms: It only appears when you start typing. Pleas style the drop down arrow natively.

    4. Exactly when are you planning to show “Search Bookmarks and history”? Where should the location go? Maybe you could put the text as a tooltip instead, but don’t remove the location of the current site.

    5. The favicon is already too overloaded with functionality. I like you move the throbber to it, but you should remove something else. You could make the identity button (aka site button aka larry) a button separated from the favicon.

    6. Using the favicon as part of the identity button makes the favicon look verified, and it is not. This I think is the most serious UI issue.

    7. I don’t see the site identity (for EV SSL) or site location (for normal SSL) in your drawings. I thought it was just hided for the beta until you got time to style it right? If the if the identiy is not shown in primary chrome and if there is not hint that clicking the favicon will bring up the identity popup, I think this is wasting the work put into the identity UI, and it makes it much less usable. Actually I like the following approach for the identity UI much better than what was implemented on trunk:
    It avoids the overloading the favicon and it don’t say that the favicon is verified, when it is not.

    8. Please bring back native tabs. If you want to make the selected tab more distinguishable on Windows Classic, please do so, but without making the tab bar look foreign on platforms where this is not a problem.

    9. I really like the home button being on the bookmarks toolbar. It feels much more natural to have it there.

    10. OS integration is good, as long at people who knows how to use Firefox on one OS would automatically know how to use it on another OS. Having a history button on Windows and not on Mac is IMO a really bad thing to do. There is only one OS integration in Firefox 2, which I don’t like: If you don’t know the OS, you don’t know how to open the options/preferences dialog. Besides, both the options menu item and the history button falls under “position” in your categorization.

  54. Jonathan Rascher

    Wow, thanks for posting this proposal for Firefox users to comment on. I can tell you all have put a lot of thought into it. Personally, I think the new design is almost perfect. Combined with Places, it should make Firefox 3 a pretty sweet browser.

    That said, I do have a few comments (some of these have been suggested already, but I don’t think it’ll hurt to repeat them):

    * I think the larger back button is a good idea. The back button, the location bar, and search bar are certainly the toolbar widgets I use most often. If the new UI goes the extra mile to emphasize them, great!

    * I also like the idea of having a history widget near the back and forward buttons. However, I don’t think sandwiching it in the middle is the right choice. I think it would be much easier to see if it were placed directly to the right of the back/forward buttons.

    * More importantly, if you add a history widget, do so on *every platform*! Not showing it on OS X is, in my opinion, absurd. Of course Firefox should look a bit different on different platforms, but it should be very similar functionality-wise. If something can be accessed from the toolbar on one system, it should be accessible from the toolbar on every system.

    * On a lighter note, what do you think about adding a print button somewhere? I’m all for keeping the toolbar simple, but printing is a fairly common operation, at least for me.

    * I’m not quite sure what you mean when you say that the location bar “contains the self describing text ‘Search Bookmarks and History'”. Does this mean I’ll have to click on the location bar to see the current page’s URI? That’s not the end of the world, but it could get annoying.

    * I’m not sure I like the idea of the location bar’s go button and dropdown arrow magically appearing on hover or focus. Mystery meat navigation sucks. Personally, I’d like to see the go button deleted entirely. I can’t remember the last time I saw anyone actually use it. On the other hand, I think it’s important that the dropdown arrow stay put. Text boxes and combo boxes should look different.

    * Finally, I know you didn’t touch on this in the post, but do we still need the status bar? It seems like anything important it contains has been moved to or duplicated in the toolbar. I would remove it and free up a little more vertical real estate.

    This is just my 2¢. Once again, kudos for all the work you’re doing to make Firefox 3 rock. :)

  55. Jonathan Rascher

    One more thing. I concur with Jesper, you should go back to using native tabs in the tab bar. I understand that there are some issues with doing them, but Firefox’s current tab bar just doesn’t look right on XP.

  56. By the way (I’ve written comment #1), do users really need a stop button ?

    Here is an example of the GUI i’ve personalised for a friend
    There is no stop button at all since that button doesn’t seem to be needed.

    No refresh button neither : if you want to refresh the page, just click the go button (“aller à” in french, on the screenshot)

  57. why do you need a history button right by the back and forward buttons?

    i rarely use the history in my browser, seems like it is there for the sake of being there.

  58. history button is for me a super back button (you know, when sometimes you have to click ten times on back button) and also a way to re-open the pages i’ve accidentally closed

  59. Regarding Jesper Kristensen’s comments (#53):

    – the visual of the tabs for FX 2.0 looks out of place everywhere.
    – the history dropdown on the location bar is not quite useful and there are better places for it. The only reason I don’t call it alien is that the location bar is a dropdown itself when typing a URL.
    – the favicon shouldn’t be used at all on the location bar.
    – having a whole item on one OS and don’t having it on another is quite bad. Not all FX users on each OS are experienced users of that OS. Try to realize an XP FX user having to use Mac OS X once. He would miss a lot the history button. He doesn’t know the Mac way because he’s a XP user (and a Firefox user), not a Mac OS X user.

    An stupid question:
    why don’t you make the back button infinite width by putting it on the window border, instead of having that 1px border?

    That helps more than the increase of size.

    Also a lot of people like small icons on the toolbars, what would break the visual identity created by the big back button.

    Regarding Mook’s comments (#18):
    – the site icon is too overloaded.

    One idea is to use the reload button to act as the throbber, since the reload button is not too useful while already loading a page.
    Another idea is to use some animation on the stop button to play the throbber role, since both are useful only when loading a page.

  60. Jesper Kristensen

    Where is the menu bar on OS X?

    I like the idea from Asrail to use stop or reload as a throbber.

  61. My desktop theme is white on black and you haven’t set the foreground color in the CSS for this blog. Please:

    html { color: #000; background-color: #fff}

    As to the visual refresh, I work cross platform and would prefer a consistent UI. With the proposed UI changes, this probably means a 3rd party theme; possibly something similar to the current one.
    While I’ll probably not be using the new theme, I want the UI out of my way and as others have noted; different icon sizes aren’t conducive to that.

  62. Looks great.

    I especially like the fact that you’ve placed “Refresh” and “Stop” to the left of the address bar, which is a lot closer to where the mouse cursor would be left when entering an address, rather than having to swerve the mouse to the right of the screen a la ie7!

  63. I agree with most of the GUI work planned here.

    Nice job.

  64. My only complaint is the movement of the home button. I would like to see it still have its own place, rather than be on the bookmarks bar.

    I also agree with some of the other comments regarding a “recycle bin” of sorts, containing the closed tabs. In fact, in clicking the larger image of the new ideas up there, then closing the tab in which they were open…it in turn closed THIS tab and I had to go into my history to get back to this page. So if somehow this problem could have an easier solution than a journey to my browsing history, that would be ideal.


  65. Also, I completely agree with comment #41. A ‘New Tab’ button NEEDS to be shown by default on the navigation tool bar.

    Every time I install Firefox for a basic or average user, I customize the tool bar to show the ‘new tab’ button. I have learned that the user will not discover tabs unless this button is there.

    The only simple and logical way to currently discover tabs is to find the command from the file menu: File > New Tab. Most people don’t find this command. This is probably because it’s hidden in the File menu. (The only time I ever see a basic or average user using the file menu is to print.) As well, the average user does NOT know keyboard shortcuts so no Ctrl+T. In short, the main problem is discovering this feature called tabs.

    Imo, the Solution to this problem is to display the ‘New Tab’ button on the tool bar.

    “Well then, the user can just add the tab button by customizing the tool bar!”
    Hahahahaha. If a user doesn’t find the Tabs feature in the file menu, I highly doubt they will have enough knowledge to customize a toolbar with a feature they don’t even know exists. But do you know who can customize the tool bar? Advanced users – basically everyone who’s commenting on this blog post.

    Essentially, this argument comes down to who’s needs are more important? Advanced users or average users?

    The advanced user would be inconvenienced all of ten seconds. Right-click, drag ‘new tab’ icon out of tool bar, click Done.

    However, the average user is inconvenienced every time they go to browse the web because they have no idea there is this amazing feature called Tabs.
    Do guys remember how awful it was back in 2003 when your task bar was filled to the brim with IE6 windows? (Granted, the basic user probably only browses one or two pages at a time, but the average user will probably browse five to ten pages at a time.) Browsing was horrible compared to what we have now.

    Even though it is 2007 (almost 2008), a ton of web surfers still have no idea what tabs are and the benefits of using them. (According to W3School’s stats, IE6 has about a 35% market share. That means that 35+% of web surfers don’t use tabs.) How do you educate someone on the benefits of tabs? Easy. Let them discover tabs for themselves. (As I said before, right now users can’t discover tabs because they have no idea how to initially open a tab.)

    I think the average/basic user’s needs trump to advanced user’s needs.

    Please Alex Faaborg, PLEASE. Put a ‘New Tab’ button on the navigation toolbar that is shown BY DEFAULT!

    Keep up the great work,

    P.s. For advanced users, I think the ‘trash bin’ or ‘undo closed tab’ toolbar button is an excellent idea. It’d be super handy too. This button should probably not be shown by default though.

    P.p.s. Also for advanced users, can we have an option to hide the main menu bar and have it appear when you press the Alt key?

  66. I like the wireframes, but I agree with those that have commented negatively on the back history button for the Windows examples. I think I’d prefer a click-and-hold approach, where if the user clicks on the back button and holds it down, then the drop down options appear. A single click would go back one page.

    Just my 2 cents. Nice article though. Much appreciated.

  67. @60:

    The menu bar is fixed to the top of the screen in OS X, it isn’t attached to specific windows like XP or Vista.

    On a separate matter, I’m a little confused about how ‘Places’ works.

    If it’s a way of merging bookmarks, history etc, then how do I access it? Is there an actual ‘places’ icon? Will my bookmarks and history load in a sidebar, or a new window/tab?

    I’m also not sure about the star icon. If I click the star, and Firefox tells me it will remember that page, then how do I get back to it? Where has Firefox ‘put’ that page? Firefox 2 has a bookmarks icon that shows them in a sidebar. Has this icon gone in Firefox 3?

    I suppose this is why the location bar contains the text ‘Search bookmarks and history’. But what about the URL- when does the location bar choose to show the ‘search…’ text, and when does it show the URL?

    Also, if the location bar is now a search bar, then yes it should have rounded corners on OS X. But if it’s a URL bar, then the corners should not be round. I think the purpose of the location bar needs to be defined better.

    Stop/Reload: I’m one of those people who have an extension installed to merge the stop/reload button. (If anything, just to remove clutter). But I’d be even happier if the ‘Go’ and ‘Reload’ buttons where merged instead.

    New tab button: I remember when Firefox 1.0 came out. Everyone championed tabbed browsing (despite it existing in a handful of other browsers before). Yet, to this day, so many don’t even know it’s there because there’s no way of knowing about it. There’s no button for it! Let’s have a new-tab button by default.

  68. Users either care about history or they don’t. It’s not like OSX users are significantly different in browser needs from XP/Vista users. Either history is important and it should be on all platforms or it’s not and it shouldn’t be on any.

    I would go with consistency on this one and hide the history button across all major platforms.

    Otherwise I like the plan.

  69. I’m not clear on what this “history” button will do. Will it be like the dropdown button next to “Back”? If so, what happens to the dropdown button next to “Forward”? I’d hate to lose this functionality entirely; I use it often e.g. when reading a webcomic’s archives, and I want to skip back and reread something from a week or two earlier (and then jump all the way forward again).

    These dropdown menus don’t necessarily need screen real estate, of course; there could always be a press-and-hold on the button that will drop down a menu after a pause. But I’d rather not see the functionality go away entirely.

  70. I see that you have not shown linux customized interfaces and I understand the fact that firefox is written un GTK but I wonder since the upcoming version of kde will hit the repositories very soon. I think you should talk to people on IRC freenode and the channel #kde-artists. THey would love to help you desing an interface ready for kde4. the user Pinheiro is the one in charge of the style in kde4 and he could help you make this kde4 theme.
    I was also wondering why there is no firefox qt. Qt libraries are more than fit for the browser. This does not mean that gtk is not good enough but in my view, launching a gtk application on kde doesn’t make kde look that harmoinous, nad firefox is of key use in both gnome and kde.

    PLease consider this idea.


  71. TOO LATE

    Aside from any merits this proposal might have, it is way too late for this development cycle.

    You are proposing three new themes on top of a new UI. This UI work should have started a year ago, not now. If you proceed, you will be dumping this new UI on beta builds, trying to develop and debug more or less in parallel. It has taken a year for developers to get the Places UI to a reasonably satisfactory state. What makes you think you can do a comparably radical rebuild on the main Firefox UI in less time?

    Assuming you can get this done by the time the rest of fx3 is ready (do you remember that fx2 was delayed because the new theme wasn’t finished?), you will give us themers no time to respond to the new xul boxen you make to pull off this new UI.

    Firefox is supposed to be customizable, but we third party customizers need time to adapt to the changes you make. If you do not give us enough time, our users will be left flapping in the breeze with fx3-incompatible themes.

    In particular, I have a number of themes designed for users who have visual problems. Some of them only use Firefox because they can use my themes. I suspect they will go back to IE if my themes are not compatible with fx3: they will not know how to back out of the automatic upgrade process and revert to fx2.

    If you are aiming this new UI at fx4, then I say Bravo! Getting started on it now will mean you will have it all done long before that browser is locked down, and will give us themers plenty of time to adapt our themes to the new UI.

    But this proposal is way too late for fx3.

  72. I’m primarily a Linux user, and I for one love this new design and control set and wish I could have it on Linux.

  73. Eeah.
    It’s the fake version of Windows Media Player 11.
    It’s not good.
    Really bad design.

  74. I really like the idea of a larger Back button. And even though Longhorn may have provided the idea first, what you propose is more iconic. Very nice.

    However, my main complaint about ff2 on Mac OS is that its edit fields do not behave in a way that I expect. I’ve been meaning to post an article to my blog about it and will do so shortly.

  75. Extremely interesting post. I cant wait to try Firefox 3. I’ve been a Firefox user ever since it came out.


  76. I can’t wait to try out the new interface, but i have a suggestion as the the loading status bar, thats currently in the bottom right hand corner of FF2. Wouldn’t it be easier to move that loading bar into the background of the address bar similar to safari in OSX and windows explorer in vista, to further integration into the respective OS’s?

  77. Good use of Gestalt groupings and size hierarchy. I like it.

  78. Thank you for an OS X native look. We Mac users will forever be grateful. Keep up the great work!

  79. You know, I would love just the wireframes as a theme for FF3. Any chances of them being released like that as well?

    I suppose it says a lot that just the wireframes alone are THAT visually appealing. Great work!

  80. As a vista user, the wireframe on OSX looks a lot cleaner then either Vista or XP… Although you can make the UI just as clean by going IE7 route and placing the icons as so,
    and hiding top menu, leaving it accessible by pressing alt…

  81. href=””>

  82. As a Vista user I would have to agree with Nimalan. The menu bar being on top is not native looking for a Vista application, Suggestions would be to either hide it and have it pop below the navigation bar when the user presses [alt] like any other vista application or else create a menu button similar to the “Personal Menu” extension. I also hope that the navigation bar will use Aero translucency (another reason to have the menu bar under the navigation bar, unless the menu bar will also be translucent).

    Aside from that nick picking, I love the design. It looks original and less cluttered. I like the History button were you have drawn it. I think people are mistaking the History button for the “History” button on the menu bar.
    I think what Alex is doing is renaming the drop down button into the History button. There is also only one based off of IE7 design which correctly assumes that having 2 drop down buttons is redundant. Also Alex is not including this on the Mac OS theme because to call up the history one just needs to hold either the backwards or forwards buttons for a second.
    All in all very slick.

  83. I think you have presented interesting and well thought out ideas. Though I haven’t been academic on the subject for long, interface is a subject of great interest to me.

    I, personally, disagree about the differing forward & back layout in Mac OS X, as I believe a quickly accessible (without waiting for it) history dropdown there might actually prove useful on a mac. The first time I opened firefox on a mac, hoping to escape that delay I was dissappointed that right-clicking defaults to the toolbars & customize… menu. However, I agree that it is an awfully tight space and the option to add a buffer between buttons should exist. I have grown very happy with right-clicking for my back history & forward history separately, and would like to see more buttons in the toolbar make use of this; going overboard with right-click enhancements (esp. in themes that modify behavior) might make it harder to reach the Customize Toolbar window, so a standard right-click hold-for-delay as a failsafe could help. Above all, I think customization is one of the major advantages of firefox and it’d be a shame to lose that, even for some spiffyness points in the UI department. One way to achieve this, with some potentially serious draw-backs, might be to have stop, reload, disappearing-go (default), stop|reload, go, and stop|reload|go as separate buttons in the Customize Toolbar window.
    Much as it clutters the Customize T…s window, I like being able to put certain third-party navigation buttons right next to the default ones. That said, I think organisation of the buttons in the Customize Toolbar window might be something to look at by FF4.

    I’d also like to see some other related features, though this might not be the right place to mention them:

    Rearranging toolbars – Simply being able to move a whole toolbar up or down in the order of display (and listing) would be nice. Choosing the top, bottom, or side positioning as well would earn bonus points. I’m aware of some extensions that provide some of this functionality.
    Renaming Removing toolbar(s) – Once you’ve added one, it’s (currently) there for good without surgery or a toolbar restore. Amending that, though not too important, would help in some cases.
    Customize Toolbars (Optional) Failsafe – This is a reiteration of a thought I had while writing this post as a suggestion. Holding the right-click for a couple seconds or -click (though I prefer the former) as a failsafe to bring up the context menu including the list of toolbars & Customize… that works even on buttons with special actions such as back & forward & the bookmark bar “button”; I’d think about 1.5 seconds is enough of a delay, but it’s likely best to allow that value to be set.
    Comprehensive Keybinding Options – Easily assigning|changing a hotkey to be associated with the action of a button, or to Show|Hide a specific toolbar, or to display the back-history, or move up one on the directory tree.

    As a side note, I don’t think a clock as an icon for history was ever intuitive, hence why it had selective text next to it in previous browsers, but it’s become more common, and I believe the inquisitive user will quickly make the logic that connects the three.

  84. Following up on my earlier comment, I posted a new entry regarding Firefox’s look and feel, see

    Both the post and the comments have been great!

  85. First, I want the STOP button to always work, and revert me to my current page. It is anoying to go to a new page, and it is not loading, so I want to STOP and go back, but the stop is grayed out. STOP should never be grayed out, thats like disabling the breaks on a car until it’s up to highway speed.

    I want history to be directly accessible. Not just the last few pages on a drop down, but what it was I was doing yesterday. So opening History should be a one click move and the button should be by the navigation buttons.

    Group NAVIGATION together. Whats the back button doing on the left side and the URL input doing on the other side? History and bookmarks are part of Navigation.

    Get rid of the GO button. Never used it that I can remember. My enter key works fine.

    A button is a control. I use a mouse to activate it, I don’t know what you use, but just because it is less important does not mean it should be harder to target it. Making buttons too small just means you hit the wrong one. Keyboards don’t have a small ‘z’ or tiny ‘w’ just because you use them less. NO, each key is the same size because each must be hit with a finger. It is only be cause little fingers are difficult to independently control that some keys like shift and enter are bigger.

    Third, I want bookmarks to ASK which sub category I am filing the bookmark in, by default!! I have thousand of bookmarks but they are organized into folders. Bookmarks should not default into the top level because if care is not taken, the bookmarks become a long unorganized list. This disorganization is why bookmarks become less easy to use than google. The problem is not that google is faster to use, it is that most peoples bookmarks are a mess. Default mode on adding a bookmark should be to bring you up a list of folders and ask you which folder you wish to put it in. Default to STRUCTURE!

    Bookmark tools!!! Sort, move, drag and drop, eleminate duplicates in a folder, share, send folder of bookmarks, etc. “Hay you are working on xxx, let me send you my bookmark folder for that subject.”
    Backup, transfer, etc.

    Better handling of the “Bookmark Toolbar Folder”. It should be empty to start, (don’t tell me what to read or think) and I should be able to access the ability to add or modify it without having to dig around in the bookmarks. I can see it, why cant I directly modify it? Why is it a sub folder of bookmarks and not a tool in its own right? I would like a right click to open it for editing in a useful way like the like the WordPerfect tool bar editor.

    Last, I use a number of bars: Navigation, Bookmark Toolbar, Stumble. Bars should be narrow, and share space with other bars and tools. I don’t want to lose the top half of my screen.

  86. I agree with a previous poster that the big back button is nice, especially in terms of browser identity, BUT should not be a part of “small icons” view. I think people with small buttons care more about the lost screen real estate.

  87. Some other thoughts…

    1. I like the simplification ideas of the lucky charms. Great job!
    2. On OS-X, make the URL bar with squared edges, the search bar rounded. Not only is this the case in Safari, but it helps visually differentiate between the two.
    3. Although I am a fan of a single stop/reload button, I think the reasoning is sound for this not to be standard. I have no problem with loading extensions to customize the browser.

  88. Please make the Star button available as a regular toolbar button or at least move it to the left side of the address bar.

    Flock 0.7 shows you one really good way this could be done.

  89. Noooo ! Firefox 1.5 and 2.0 arrows is one of the best things of the visual interface.

    The is useless and not beautiful.


  90. as was said earlier, you can solve the end-case regarding the stop and refresh button with a short interval (1 or 2 seconds) between modes during which the button is disabled.
    There can even be a nice visual queue that the button is becoming disabled or becoming enabled by slowly dimming it or undimming it.

  91. Looks very nice and interesting, however, one quick comment:

    “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…”

    That sounds fairly easy to fix by just disabling the button one second after the page finishes loading. If that’s the only reason why you want to keep Reload and Stop separate buttons, I don’t agree.

  92. Looks very nice. I guess I’m in the minority here as a Linux user who’d prefer this to Native buttons/widgets. (Having tried the latest Gran Paridiso and had an almighty shock at the *bleugh* native tab bar… I’m not having a go at the people doing this noble work, just the GTK tab bar and widgets look like were going back in UI design rather than forwards)

    I have no problems with any of the design schemes you’ve proposed here, just as long as you keep the menu bar above the toolbar ;)

  93. The first thing I thought when I saw that new back button was “oh, Windows Vista!”. I’ve never even used Vista myself, and I wasn’t sure where I got that idea (turns out to be the Start button, and probably other things), but the Vista branding is so strong that I immediately associated a big round button on the left with Vista. I really don’t think that will strengthen Firefox’s visual identity.

    Apart from marketing reasons, I don’t think making the back button larger is a good idea. It looks goofy and childish, and is not required if all you want is a larger hit target: you can just make the hit box extend to the top, bottom and left edges of the toolbar.
    In fact, I never use the back and forward buttons, personally. I use keyboard shortcuts when I need to; but most of the time, if I’m not done reading a page, I’ll just open links in a new tab, so I don’t need to go back and forth: I branch out into new tabs, and then close them when I’m done. A strong emphasis on back-and-forth makes me thing of tabless browsing, more than anything else – something that even IE has left behind.

    As a Mac user, I don’t really like what I see here. I’d much rather you went for better platform integration like you’re doing for Linux. I understand some of your designers are Mac users themselves, but I urge you not to take them as representative of the market at large; Mac users have traditionally been ferociously demanding in terms of platform integration (both aesthetically and functionally – where’s our Keychain support?), and I assure you this new design won’t be well-received.

    The back button, as I’ve already mentioned, just screams “Vista!”. The excessive use of rounded edges shows that the designers only have a passing familiarity with the platform, which makes it all the more jarring. Round and square edges are not used randomly on text fields: the former are for search fields only, while the latter are used for all other text fields. And the buttons that “merge” with fields are completely alien to the Mac, and will be hard to get to look good, given that button edges are raised and field edges are inset. Instead, you could try putting the icon and pop-up “inside” the field, like the looking glass icon (and optional menu) in regular Mac search fields.

    One line in particular makes it look like you’re out to get Mac users with this redesign (and it’s “get” as in kill, not as in attract): “On OS X we are experimenting with making the toolbar 15 pixels taller”. No, just no. Don’t do that. Vertical space is the most precious resource in a web browser’s visual layout, and the last thing Firefox needs on the Mac is to throw 15 more pixels away. Especially if it’s just to accomodate that silly-looking back-blob.

    Regarding the integrated stop/reload buttons, I’m well familiar with the wrong click problem in Safari, but the cause is not really what you say. It’s not the user’s latency, it’s the browser’s: if you’re loading a “heavy” page (such as one with 50 flash videos, or something with a crazy layout and a bunch of onload javascript, etc.), Safari becomes unresponsive for a little while as it renders the page, and it resumes receiving events just after it finishes loading the page and changes the button from “stop” to “reload”. So, when you click the button it really is the “stop” button, but the browser only gets to processing your click after it’s changed the button into “reload”. The solution is to wait a short time (300 ms should be plenty) after the page has loaded before switching the button from “stop” to “reload”, or discarding all clicks on the button within that interval from the instant when the page finished loading, or something along those lines.

    Thanks for receiving the user base’s opinions. I hope my contribution is useful.

  94. Correction: after looking at some of the attachments in, eg , I’m convinced the merged look for buttons and fields is doable. No change to the other points, though (esp. the square vs round shape).

  95. Looking nice. I’m delaying my judgment till I see it in action though.

    PS. I’m really hoping for glass extended to the address bar in vista.

  96. Well, this identity thing loks great, but, even if I’m running Linux and LOVE Gtk integration, I’d like to have this kind of visual recognition.
    I don’t want people to mistake my brand new Firefox 3 for something, say, like Epiphany…

  97. The larger back button is good. Keep it.
    Also, the history looks out of place. I say scrap it.
    I am opposed to any form of merging that was mentioned, as I use both the stop, refresh and go buttons all seperately. Same with the search and the location fields.

    One thing I think is missing from the firefox UI is a button (possibly where the “Places button” is) that shows the sidebar. This is a feature of IE7 which I find really good.

    Related to my last comment, I don’t seem to fully understand the new places system. From what I read about it from various sources, it was supposed to unify history and bookmarks etc., but what I’m seeing in screen shots and FF3b1 is the still separated history and bookmarks menus/sidebars. I envisioned a single sidebar allowing to select between bookmarks and history.

  98. As for the separation of stop and reload, I totally I agree. Having looked at less experienced users, they generally click many times on stop.

    This may look silly, it’s probably something they took from the physical world, but because their aim with the mouse is generally not all that great, it’s actually an effective way to make up for it. In Safari, when someone does that, it will either reloads the pages or stop depending on the # of clicks. That’s a bad user experience for them.

    As for hiding of the drop down… I’m not sure. I personally never use that stuff… but again, most less experienced users I know do use it for some reason.

    My father for instance use it as a bookmark replacement entirely. He doesn’t type really fast, so every URL he took the time to enter was particularly important. He doesn’t know about bookmark… and why should he? The drop down does the job perfectly for him with less troubles.

    My impression is that if the drop down is hidden, there should be something left for people like him.

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

  100. 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…

  101. 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)

  102. 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.

  103. To search within the URL bar, you could have users type a ? mark and then their search query.

  104. 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.

  105. 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.

  106. 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.

  107. 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.

  108. 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.

  109. 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: ).

  110. 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
    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 Then it takes only one button space. This new look will prevent that too :-(

  111. 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?

  112. 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

  113. For those who suggested a transition between Stop and Reload (including myself above), this is already being worked on: bug #343396.

  114. 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?

  115. my recommendation:
    File Edit View … Bookmark 1 Bookmark2

    I like this compact design. It should be default in Firefox.

  116. 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

  117. 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:

  118. 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.

  119. 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.

  120. 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.

  121. 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.

  122. 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.

  123. 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.

  124. 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.

  125. 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.

  126. I have reverted to the Firefox 2 theme. Don’t like the ugly distracting outsize back button.

  127. 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.

  128. I have reverted to the Firefox 2 theme. Don’t like the ugly distracting outsize back button

  129. 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.

  130. And I liked it, I’ll look at your site.
    Thank you for what you give is for those who want to learn