Firefox 4.0 theme mockups

Mozilla plans for Firefox theme update is two-staged. As announced last week, the first stop will be Firefox 3.7, targeted for next year, but there is also some planning for the release after that one, tentatively called Firefox 4, with more incremental changes over 3.7.

As we can see, it keeps the new Page and Tools buttons introduced in the Firefox 3.7 mockups to replace most menu bar options, but introduces a more dramatic change by moving the tab bar to the very top of the window, adding home and tab preview buttons to it as well.

This is just a mockup, and there is even another one showing the tabs below the navigation toolbar, and most likely this would be customizable, but I am pretty sure this will annoy long time users a lot. I think this is the logical place to put it as every command and action applies to the current tab, but I think people has managed to understand how it all works pretty well for the last five years.

The stop and reload buttons are merged with the Go button and located at the end of the location bar. The button changes depending on whether you are editing a web address, loading, or reading a web page. (Remember you can merge the stop and reload buttons with no extensions, pretty easily)

Firefox 4

You may also note the Google search command in the location bar, as part of Taskfox, the uplift of Ubiquity features into Firefox.

The bookmarks, title and status bar are also gone (it’s not mentioned if users will be able to add them back). As shown in this other mockups, extension icons would be added to the area previously occupied by the title bar.

Other proposals for Firefox 4 themes include a tab sidebar, and download notifications overlay.

I really hope some of these change can make it for Firefox 3.6, although nothing is targeted earlier than 3.7.  It all looks as a welcomed effort to modernize Firefox look and feel, and I am pretty sure I won’t have a problem adapting to all the changes, but of course it would be best if  Mozilla could produce a theme/extension that implements these changes in the near future in order to test it thoroughly aside of the current trunk (Minefield) or the forthcoming Namoroka branch.

42 Comments

  1. techpops July 29, 2009 11:46 am 

    I’m really liking this except for the address bar, which is raised like a button. This just looks wrong, it should be like the address is carved into the browser, lower than the buttons. The google graphic in the address bar is rounded, are all of these going to rounded? It looks odd sitting inside a square space.

    Personally I’d like to see the new tab button make it next to the back/forward buttons as thats the first thing i do. It’s ok having a new tab + button at the end of the tabs but the tab bar grows and shrinks depending on how many sites you have open and so you can ever develop any muscle memory to hit it quickly.

    Overall, loving it. Hope they hurry up and get this out there for us to play with :)

    • gxg July 29, 2009 2:34 pm 

      I also think the oval surrounding the google search image is pretty ugly and out of place.
      Maybe they should keep it simple and leave only the search engine favicon on the left with the arrow, I think this would be sufficient.
      And the labels on the ‘Page’ & ‘Tools’ menus should go, they are taking too much space.

  2. Stan July 29, 2009 12:18 pm 

    This page isn’t rendering properly Percy – the links column is overlapping the image.

    • gxg July 29, 2009 2:30 pm 

      yes, I am seeing the same problem with Google Chrome.

      • Percy Cabello July 29, 2009 2:52 pm 

        Eeew! Thanks for the heads up. Fixed now.

        • gxg July 29, 2009 2:53 pm 

          Much better! :)

  3. Ray R. July 29, 2009 12:20 pm 

    Moving the tabs to the top basically replacing the title bar is not good if you have something like the clock I have located just to the left of the minimize, restore and close buttons. Open too many tabs and they will disappear behind the clock. I noticed this immediately with Chrome, a strike against Chrome.

    Besides, I do not see any advantage of moving the tabs to the top. It makes those of us who use the mouse most of the time have to go farther to switch tabs. Also, loss of the title bar means I will not have a place that will display what browser I am using along with such customizable information as the Build ID and profile I am using.

    Also, does this also forewarn the dropping of the bookmark toolbar, another strike against Chrome, too? I’m pretty sure I am not alone in making extensive use of it rather than the awesome bar.

    Be sure you are not falling into a trap of your own making where you are revising to suit the few “superusers” folks who are immersed deeply into the use of the web browser while forgetting to consider that a very good majority of users do not do things as you do. Many people will never make use of the many keyboard methods for navigating within the browser. For these users, revising the browser appearance may drive them away rather than drawing them in.

    • techpops July 29, 2009 5:42 pm 

      I think the whole point of bringing the visuals up to date is to cater for the casual users, make Firefox more accessible for them. Super users already have Firefox customised visually the way they want probably anyway.

      I think the important thing to consider here is what will be the default layout. I’m sure you’ll still be able to bring in all the bookmark/menu/buttons you prefer to have within Firefox’s own options and anything that really breaks out of the old style will surely be hacked back in again with an extension for people that just must have that particular option back where it was.

      • Ray R. July 29, 2009 7:02 pm 

        Is making drastic changes truly “catering” to the casual user? Wouldn’t the logic of catering to the casual user be to keep things the way they already are so that the casual user feels familiar and comfortable, and having a feeling of everything in it’s place with the browser? Besides, what is so “up to date” about this redesign? Many of the long time features are buried and if this change goes through, wouldn’t you be asking the casual user to search for those features, making them have to figure out how to change the browser back to the way it was and run the risk of losing them in the process?

        Two adages come to mind. One is “If it ain’t broke, don’t fix it.” The other is a pro team sports one, ” Often the best trades are the ones not made.”

        Great caution needs to be exercised when making drastic changes. Just ask Coca Cola. They leaned the hard way when they introduced the one of the biggest flops of all time with “New Coke”.

        Might I be so bold as to suggest this? Don’t just offer one “default” theme? Instead, why not add a step in the installation process where before the installation is completed, the user can choose to start with the new design, whatever it may be or they can opt to stay with the more traditional appearance with the menu, navigation bookmarks and status bar just as they currently are? Wouldn’t be better to not force feed something down everyone’s throats and instead offer them a choice.

        FYI-You know who does this? Winamp. In fact, Winamp offers several different choices of skins with nice little previews available all before the newly installed program is first run.

        • techpops July 29, 2009 9:07 pm 

          It’s an interesting challenge appealing to the masses. Mix it up or keep things the way the are. Both have their positives and negatives but I think the positives outweigh the negatives. Yes, for a casual Firefox user, the redesign is going to take a bit of getting used to, but this is not necessarily a bad thing. Microsoft did this with Office, adding in the ribbon, and while it was a big change to an industry standard application, over time its become a hugely popular one. So popular it’s being ported to lots of other apps. historically this is very common. Many software packages have done this, Apple even did it with a whole OS, giving its users a completely new look and feel to get used to. Totally worth it in the end.

          Now whether Firefox is broke visually or not is debatable. The design is certainly dated and when you’re up against the design of IE, Chrome, Opera and Safari, you have to keep changing things up and try and keep pace with what feels modern today, reflecting what is new and important in design, hopefully with a strong eye on usability.

          As for what is modern about this mock up, it’s using glass within the interface, not just around the border, it’s taking this idea of folding less used elements up into a button, which is a modern idea that is being used by almost all browsers now. The look of it is certainly more modern than Firefox is now. I could ramble on but they are small changes, not worth going on about.

          Offering casual users a choice is a bad thing. It’s just one more step they have to go through and that could be the step where they give up and go back to IE. Switching to and or upgrading Firefox should be as close to a one click deal as it can be I think.

          I’ll leave you with a comment of my own, they are such fun.

          Those who expect moments of change to be comfortable and free of conflict have not learned their history. – Joan Scott

          He who rejects change is the architect of decay. The only human institution which rejects progress is the cemetery. – Harold Wilson

          Change is inevitable – except from a vending machine. – Robert Gallagher

          :)

          • Ray R. July 30, 2009 7:39 am 

            Perhaps to your surprise, I don’t reject change. Rather I am cautioning against change solely for change’s sake. Personally, making the behind the scenes changes introduced by Fx 3.5 and soon to be 3.6 are very good changes.

            Oddly, what should be a worthwhile change you seem to be rejecting out of hand without even investigating. Winamp’s installation process is in no way annoying while offering the user the immediate choice of several different skins. In fact, have you actually tried Winamp? Have you actually seen their installation and set up process? If not, shouldn’t you refrain from commenting until you have?

            I also have a recollection that Netscape offered the simple choices of it’s traditional (classic?) and modern skins included perhaps within the installation program, but definitely by menu item.

            Finally, I have to wonder why it would be so complex and thus undesirable to offer the user the built-in choice of the now traditional (toolbars/status bar) appearance and the faux Chrome/IE/Safari look. Indeed, wouldn’t the wise thing be to offer this choice rather than hope that all the current users who want to stay with the traditional look will wade through the various options settings to find all those needed to restore the traditional look and not alienate them in the process? Wouldn’t such a choice actually fit with Fx’s mission of offering the user a high level of customization?

          • techpops July 30, 2009 10:37 am 

            Perhaps to your surprise, I don’t reject change. Rather I am cautioning against change solely for change’s sake.

            It is clear why the changes are happening, Firefox looks dated, it needs freshening up.

            Oddly, what should be a worthwhile change you seem to be rejecting out of hand without even investigating. Winamp’s installation process is in no way annoying while offering the user the immediate choice of several different skins. In fact, have you actually tried Winamp? Have you actually seen their installation and set up process? If not, shouldn’t you refrain from commenting until you have?

            I’ve used Winamp since it first came out, long before AOL got their teeth into it and screwed it up. It used to be the standard for playing mp3′s. Nowadays it’s just a mess, and that mess is made clear during installation where it isn’t even sure what it wants to be.Putting that aside, lets pretend its still a great player and apply its idea of installation of one of two themes. A new one and an old one. The problem here is that most people really don’t even know what a browser is, let alone what it should look like. “This lets me go to websites I like, what do I have to click to make that happen?”. The amount of clicks here is actually crucial and the setup process as it is already has issues that I can see, asking if bookmarks need to be imported when really it should be just automatic. I click a link to download it, it downloads, it’s on my desktop, i click that, it installs. Everyones happy, even mom and pop. Advanced users get to switch to a more advanced install where anything can happen. There have been many studies that have measured how many clicks a user is willing to go through before they give up. Microsoft are the masters of the over complicated install and I remember seeing a video over at channel9 where they were trying to simplify the install process for applications in Vista but actually ended up making it even more complex due to the new security.So while you, me and a whole bunch of people would be happy with all kinds of customisation options during install, it should never be the default to make everyone go through it. IE is a good example of a hugely complicated install that has the option to just do it all for you if you blindly click next.

            I also have a recollection that Netscape offered the simple choices of it’s traditional (classic?) and modern skins included perhaps within the installation program, but definitely by menu item.

            And look what happened to that.

            Finally, I have to wonder why it would be so complex and thus undesirable to offer the user the built-in choice of the now traditional (toolbars/status bar) appearance and the faux Chrome/IE/Safari look. Indeed, wouldn’t the wise thing be to offer this choice rather than hope that all the current users who want to stay with the traditional look will wade through the various options settings to find all those needed to restore the traditional look and not alienate them in the process? Wouldn’t such a choice actually fit with Fx’s mission of offering the user a high level of customization?

            I call it a fail when a program has to fork like that into two versions. Linux would be the ultimate example of how forking off code so often leads to more complications. Try asking a new user to choose which Distro of Linux is best for them and they’ll find it hugely complicated. As a developer, do I have to start testing on both versions? Probably, since the new theme requires some underlying changes to way themes are handled. Again, just more complication for something that didn’t need to be complicated at all if people just trusted to Mozilla to come up with a better way to present Firefox today.

  4. El Guru July 29, 2009 12:51 pm 

    I don’t like the removal of the status bar and especially the Bookmarks Toolbar. I use my Bookmarks Toolbar quite frequently both at home and at work..

    • Dayton July 29, 2009 1:05 pm 

      The bookmarks toolbar is optional, i’m sure it can still be added, its just not in this mockup, i’m guessing.

    • Dayton July 29, 2009 1:06 pm 

      Also, I’m guessing the status bar will be Chrome style where it only shows up when you mouse over a link.

    • Ray R. July 29, 2009 3:16 pm 

      Had not noticed the missing status bar. If it removed entirely, you’re going to have a lot of users and extension authors up in arms. For example, I have Linkpad, Stylish, Greasemonkey, Linkification, Weave & Update Notifier which use status bar icons.

      Hopefully, the status bar will at least be available as an option.

      • techpops July 29, 2009 5:44 pm 

        I’m sure it’ll be as simple as enabling it in a top level menu.

        All those extensions can be controlled through add-ons so maybe just an add-on button would get you easy access to all those options while still saving space having no status bar.

  5. Mirek2 July 29, 2009 1:16 pm 

    As much as this seems like just outright copying of the new Google Chrome/Safari UIs (with the X/refresh update taken from MS), I really like it (well, no surprise there, since I do use Chrome instead of Firefox on my Windows machine; Firefox still sits on my Mac and Linux boxes, though). The home button seems eerily out of place, though. It should be back in the favorites toolbar. Otherwise, a positive change, I have to say.

  6. Happy_Man July 29, 2009 2:32 pm 

    I do find it hilarious that the text inside the browser running in what is supposed to be a Windows OS is rendering text in the Mac fashion. Just something I thought I’d point out.

  7. Anon July 29, 2009 4:19 pm 

    Awww… man this looks like total copy of Chromium…
    Time to make ORIGINAL one ?

    • techpops July 29, 2009 5:47 pm 

      If a design element works well, who cares where it came from? use it! Probably every major style event in a browser originally appeared in a different program but nobody complains about that, and so they shouldn’t. Once everything is in place I’m sure it’ll have its own identity and you’ll be able to say, hey, that’s Firefox.

      • Anon July 30, 2009 5:09 am 

        But why Mozilla remove futures from it !!!
        Where my:
        -status bar
        -bookmark menu in menu bar
        -bookmark bar

        this is the most important part for many ppl…

        • Ray R. July 30, 2009 7:48 am 

          In fact, I hate to say it, but WinXP offers the choice between the XP and classic Windows looks with no need to go elsewhere to download a whole theme.

  8. Ray R July 30, 2009 10:58 am 

    techpops.

    Your last post is unreadable. You should have just posted your reply instead of trying to intersperse your comments (and I know what I said!). An example of a “bad” change?

  9. Ray R July 30, 2009 11:05 am 

    I forget to mention that I am SOOOOO opposed to change that I just switched my browser theme to Chromifox Extreme and added Chromifox Companion to go along with it.

  10. Anon July 30, 2009 4:21 pm 

    I will add to it GIVE US OPTIONS to add missing menu bar, statusbar etc… and everyone will be happy…
    I’m right ?!

  11. Ray R. July 31, 2009 8:09 am 

    Also, another “by the way” for you all. Doesn’t Netscape live on as Seamonkey? Can’t Firefox and Thunderbird trace their roots to Netscape, as well?

  12. Alice0775 July 31, 2009 10:32 am 

    As for the unification of location bar and search bar, there is a problem for control of IME of CJK users.
    A lot of cases, we select default IME contorol, IME OFF in location bar , and IME ON in search bar as default.
    the unification of location bar and search bar become the big problem for a CJK user.
    I want you to examine UI in consideration of this.

    location barとsearch barの統合は, CJKのIMEの制御に問題がある。
    location barではIMEをOFFとしている場合が多く, 一方search barではIME ONが普通である。
    これを統合してしまうと, CJKユーザにとって大きな機能後退となる。
    このことを考慮してUIを検討してほしい。

  13. Anon July 31, 2009 1:15 pm 

    Also make this skin configurationable like now Fx skin is, I want to move any bars and icons wherever I want and everyone will be happy ;)

  14. aSa July 31, 2009 8:58 pm 

    Quite nice for someone who uses Vista or W7 i suppose, but i hope Firefox is still supposed to be ported to other operating systems. Are those interface changes for Vista/W7 version only, or people who use another OS (or older Windows version) will have to suffer just because Microsoft decided to push some weird UI concepts?

  15. Ted1941 August 1, 2009 9:38 am 

    I’m not sure what I feel about the browsing tabs being about the address bar. But it does make some sense, as each tab does represent a different web page…

  16. Matt August 5, 2009 4:44 am 

    This, for me personally, goes a bit too far and is, in my eyes, much too radical. I suppose it looks stylish, but from the usability perspective, I definitely prefer the more traditional look of the 3.7 mock-ups – I certainly couldn’t cope with the reload/stop button where it is (and as small as it is)

    Another thing that’s just crossed my mind is how customization would work on both the theme designs. Right now, to the left of my search bar, I have the button to open download history, below that, on the bookmarks bar, I have the buttons to open the history and bookmarks sidebar (I prefer it to opening up the organizer for making small changes to my bookmark layout). Could I do this on that new theme, could I move the reload button back to being a button? On the 3.7 theme, could I move page and tools into the tabs bar if I wanted to? Could I place the back/forward button on the opposite side on the address bar? Both themes seem a bit inflexible looking at them.

  17. knowsbest August 6, 2009 5:18 pm 

    is there any way to get this theme for Firefox 3.5.2 or “Minefield” 3.6a1pre ?
    Would be nice to try it already!

  18. Ray R. August 6, 2009 9:08 pm 

    Not exactly like the mockups, but there are themes based on Google’s Chrome.

  19. peipians August 13, 2009 5:00 am 

    Is the firefox 4 theme mockup a real one?
    menu layout looks similar to chrome.

  20. Amir September 29, 2009 1:01 am 

    I see Google Chrome in this mock-up. :)

    I do like it simple though. Too bad I have to wait until next year to see this coming. :)

    • Ray R. September 29, 2009 12:07 pm 

      Amir,

      You don’t have to wait. There are several themes that seek to replicate Google Chrome. Perhaps the best is Chromifox Extreme available here: https://addons.mozilla.org/en-US/firefox/addon/10674

      If you try it, make sure you get the very latest by going to the “View Older Versions” link at the bottom. (As of this writing the latest is 3.1.1 and it is an xpi file because it has both the theme and the Chromifox Companion extension combined. Companion adds to two buttons like the two on the right side of the Google Chrome toolbar.)

  21. Amir October 3, 2009 11:55 pm 

    Thanks for the suggestion, Ray.

    I’ve tested Chromifox Extreme but I don’t think that’s something I want. Chromifox basically moves the tab bar to the top, but it doesn’t replace the title bar. The extension doesn’t even hide the menu bar (or is it not possible to do so?). In any case, it’s an extension and I don’t expect much from it. Again I thank you for suggesting Chromifox Extreme.

  22. Alice0775 November 20, 2009 6:16 am 

    I can not web search “DOS/V”and “about:config”(without quotation)etc .from location bar in Firefox3.5, 3.6b3 3.7a1pre.

    So, Search bar is necessary.
    Do not unify them!.

  23. adam cleaner November 22, 2009 4:39 pm 

    the trouble with all these mock ups is the instantly make any older version look terrible! i love the new designs, but i know they’ll quickly look bad as soon as a mock up for fx 5.0 is released

  24. klado February 7, 2010 8:41 pm 

    @above, isn’t the the meaning of evolution!!!!!i would like to use that theme right now.

  25. Nyuszika7H May 5, 2010 7:08 am 

    Hi,
    I think status bar should be kept – at least as an option. Where would you place Forecastfox’s icons, for example? In a “toolbar box” inside a button, like Personal Menu does? I’d personally like to have status bar under the last toolbar before it, because in Firefox, you need to click and hover icons on it, not like e.g. Notepad, and there is the Taskbar under the status bar. If it’s auto-hiding, then… Two words: Fitts’ Law…

Comments are closed.