Firefox 4.0 redesign mockups released

Earlier last week, Mozilla updated the Firefox 3.7 wiki to show potential design changes for Firefox 3.7, and today, updated their wiki to show new mock ups for Firefox 4.0 Windows designs.

The designs are changed to fit better into Windows 7 - as they want to "embrace glass" which is a major goal of Mozilla for the next Firefox release, as well as making them feel more a part of the OS. The designs also work on Windows Vista. A separate design would be in place for lower versions of Windows.

The images below show the ideas that the Mozilla team has, for some potential tab layouts/UI redesigns. Remember that these mock ups are different than the 3.7 ones posted last week. Compare them on the Mozilla Wiki.

Version A - Tabs-on-Bottom

Possibly add a Bookmarks widget as an upfront replacement for the Bookmarks menu/Bookmarks toolbar (option to turn those on would remain).

Version B - Tabs-on-Top

The more contentious Tabs-on-Top concept.

Positives

    Save Vertical Space
    Efficiency/Remove Visual Complexity - Right now the tabs have to be connected to something. So we are adding an extra visual element for them to connect to.
    Shorter Mouse Distance to Page Controls

Negatives

    Breaks Consistency/Familiarity - Moving things confuses existing users.
    Title is MIA - With the space removed from the titlebar you only get the truncated version in the tab.
    Longer Mouse Distance to Tabs - Takes longer to mouse to a tab.
    Lost Space - Sandwiched in between the application icon and the window widgets you lose some space.

Combo Stop/Refresh/Go Button.

Attached at the end of the location bar.

Turns green when you start typing.
Blends with the location bar when at rest.
Turns blue on hover.
Turns red when a page is loading.
The proposed iconography is mostly colorless. Adding color to these temporary action driven buttons will make it more obvious something is going on.

Thanks to revreddy for the news tip!

Report a problem with article
Previous Story

The next generation of music

Next Story

The Linux Foundation launches their own branded Visa card

110 Comments

Commenting is disabled on this article.

Didn't Mozilla spend about a year going through all the icons to get them to look OS-native in Firefox 3.0? Now they want to completely scrap all of that hard work and replace them with these generic looking, bland, Photoshop-shapes icons just because Chrome looks this way?

Looks Safari and Chrome will need appearance upgrades if they plan to stick out visually. Any news on a projected date of release?

Please I hope they keep tab at bottom... i tried chrome and i really don't like it for that reason mostly.

Bookmark widgets sounds good.

I recently switched to FF but I have to say, i'm completely underwhelmed at these screenshots. When is someone going to do something truly unique and change the way browser UI's look, work and feel?

Magallanes said,
Nice but without the back history button, it is a bit useless for most people.

Yeah that is a real pain in the @ss.

Absolutely dreadful. I need forward, back, reload/stop, home, history, and new tab buttons all in the same place. Don't move different buttons to different places like IE8. That's retarded.

"Tools" and "Bookmarks" both stick out like sore thumbs, and the gradients are pretty bad.

They need to take a look at the Chrome "New Tab" button for a better idea how to draw buttons on glass.

Damn, if they do tabs on top im hoping someone makes an add on to revert back. It really gets to me. I will simply stay with 3.5 if they don't keep it the way it is.

Due to my medical condition I have not been in front of my computer like I used to be. Therefore, I am a little out of touch with the IT world and kind of missing out. I cannot believe they are working on Firefox 4 already so soon after releasing 3.5 and now 3.7. I like the idea of glass but looking at the pros & cons it is going to take a while to perfect. Love the new outlook and design looking forwards to seeing this released.

People are forgetting that Opera had tabs on top about 5-6 years ago - the only reason it never stuck at the time was probably because the browser was still ad-supported. I just wish Opera would give us the option of hiding the menu bar and showing it with the Alt key and it's UI could be just as minimal as Chrome yet be just as fast and use less RAM. Come on Opera!

The thing that Chrome and these Firefox mockups are doing badly is removing the page title from the window's title bar so that you can no longer see the full page title unless you hover over a tab, which is a total pain in the ass :P

I hope transparency can be turned off, I don't want to see wallpapers interfering with the interface. Even the window title text in Version A looks a bit dodgy to read.

Dear God. If it goes 'tabs on top' like Safari did and no option to change it back I may just leave Firefox. I hated that so much.

Me too. I hope they at least keep the option to drag the separate refresh and stop buttons to the toolbar. Not that I ever use them though, I tend to just hit F5 for refresh and Esc for stop.

I actually like the Tabs on top, but when a Tab is selected, it should be double width in comparison with the other tabs to show the page name, and then animated shrink/grow when moving from tab to tab.

With all these small netbook screens, the more you shrink these things, the more you can see of your page.

Perhaps an argument here for a compact interface ?

I wouldn't mind seeing the option to use either option. For low resolution displays like on most laptops and especially netbooks, saving vertical space is great. On high resolution displays the space savings are so minimal that the tabs on bottom works fine.

I would however like to see the Bookmarks menu as its own button like on the first mockup. It's the one menu option I tend to access often.

It would be awesome if they added the toolbar background from the second shot (the one with the tabs in the captionbar) to the tabbar of the 1st shot.

This new mockup does NOT provide a more consistent look. It is far less consistent with Vista/7 than the current version. Maybe Mozilla is trying to preempt what they believe Windows 8 will look like?

Hitchhiker427 said,
This new mockup does NOT provide a more consistent look. It is far less consistent with Vista/7 than the current version. Maybe Mozilla is trying to preempt what they believe Windows 8 will look like?

I completely disagree. This mockup looks more native and attractive than Firefox currently does by default.

Seventh Son said,
If 3.7 is coming in Spring 2010, then 4.0 is like 2011? Even 2010 is too late to have a more consistent Vista/Windows 7 look.

It's not a good idea to rush ideas to market just due a software release. Not only will Win7 require some time to build up market share, but other OSes exist.

Better that it's done when its done.

xiphi said,
I completely disagree. This mockup looks more native and attractive than Firefox currently does by default.

I just had to address this with someone else, but:

Not AT ALL.

Transparent navigation buttons, transparent tabs, "tools" button wrapped around the window frame, completely different style address bar, "all tabs" glyph on glass without a button.

I have just described every new UI element in these mockups, and NONE of which are present in any other app. You know NOTHING about UI design if you think that this is more native.

Love it or hate it, you can't be farther from the truth with your statement.

Hitchhiker427 said,
I just had to address this with someone else, but:

Not AT ALL.

Transparent navigation buttons, transparent tabs, "tools" button wrapped around the window frame, completely different style address bar, "all tabs" glyph on glass without a button.

I have just described every new UI element in these mockups, and NONE of which are present in any other app. You know NOTHING about UI design if you think that this is more native.

Love it or hate it, you can't be farther from the truth with your statement.

+1!

Didn't Mozilla spend about a year going through all the icons to get them to look OS-native in Firefox 3.0? Now they want to completely scrap all of that hard work and replace them with these generic looking, bland, Photoshop-shapes icons just because Chrome looks this way?

I completely agree with you. This looks further from native as one can get! I seriously hope this is someone's attempt at taking the **** out of Chrome.

Hitchhiker427 said,
I just had to address this with someone else, but:

Not AT ALL.

Transparent navigation buttons, transparent tabs, "tools" button wrapped around the window frame, completely different style address bar, "all tabs" glyph on glass without a button.

I have just described every new UI element in these mockups, and NONE of which are present in any other app. You know NOTHING about UI design if you think that this is more native.

Love it or hate it, you can't be farther from the truth with your statement.

Suddenly, it's a bad idea for applications to have a unique look? This is definitely more native that what's currently on Firefox 3.5. Are you expecting Firefox to look exactly like IE8? From what I'm seeing, it seems you're just spouting out random BS thinking you know squat about UI and UX.

I could make a list of things that could be improved, but for the most part I like this mockup MUCH more than the bland and ugly default theme Firefox currently has.

So far, the version I like best is the Tabs on top, but I'll only support that as long as it's not taking over the Title Bar. There's a reason why Safari 4 doesn't have them on top anymore. It's also one of the reasons why I don't use Chrome.

xiphi said,
Suddenly, it's a bad idea for applications to have a unique look?

No, not suddenly. It's always been this way.

xiphi said,
This is definitely more native that what's currently on Firefox 3.5.

Will you please read my post before you reply? If after reading what I wrote, you still respond with the same thing, it's evident that you don't know what "native" means.

xiphi said,
Are you expecting Firefox to look exactly like IE8?

No. Do you feel the current Firefox 3.5.x theme looks "exactly like IE8"? Yet, the current theme is faux-native enough to look consistent with the rest of the Windows UI. This is good. The new proposed mockups are nothing but Chrome rip-offs.

xiphi said,
From what I'm seeing, it seems you're just spouting out random BS thinking you know squat about UI and UX.

It's not BS if it's true. Please, do some research before trying to argue with me.

version A...its like looking at my own layout... uncanny...just put the tools (tiny menu) and bookmarks on the left side instead of the right.

As long as we can still enable the status bar I'm happy... oh and have a more obvious progress indicator would be nice

don't like that the page button/tab thing covers over the active tab's baseline thing that spans the top width of the page. intrudes on the focus that belongs to the active tab. at least it should be a part of that tab-baseline in the same way that the active tab is.

i also think that giving the tools/bookmarks/page buttons (when on the right of toolbar) the appearance of full buttons (like back/forward) gives them more visual weight than they need and makes it look cluttered.

and i think the green progress line should either be within the address area (rather than underneath), or separate.

other than that i really like it.
i know this isn't the place for critique, but whatever - it is part of my response.

also don't like tools attaching to the side of the window. i understand why it was done like that, i just don't think it looks nice, or flows well.

So... with that tabs-on-top design, how does one drag the window around? Do I have to use the current tab to drag or what? That seems like it'd be much more annoying than using the full titlebar to drag.

I don't mind tabs-on-top as a general rule. In fact, it makes more sense to me than tabs-on-bottom, but not being able to read the entire title, and not having the entire title bar to click/drag are both major annoyances, and are more than worth the screen space you're "wasting".

I like the go/refresh/stop button idea, and I'm intrigued by the progress line. I currently use the fission add-on, but this is an interesting idea.


Now, I don't like glass tabs. They're much more difficult to read, and break all consistency with other programs' UIs. I've yet to see a screenshot using the "All-Glass Firefox" add-on that doesn't look absolutely horrible. I'd get a headache just trying to find a tab. I wish Mozilla would focus on usability instead of trying to rip off chrome.

Additionally, I feel that although the buttons look nice on their own, they too break all consistency. It's nice to look at in individual screenshots, but it will look like a jumbled mess on a desktop with more than one program open at a time. I can't stand it when a software designer is so arrogant to believe that THEIR arbitrary UI design should take precedence over MY native look/style. Mozilla recognized in v3 that consistency with the underlying OS was a step in the right direction, and now it seems like they're taking it all back. I've lost a lot of respect for the Mozilla team because of their mockups.

Lastly, where's my bookmarks toolbar? If I have to click a "bookmarks" button just to get to them I'm going to be extra ****ed.

Hopefully someone will release a theme/extension to remove some of the terrible design choices if this makes it into 4.0 final.

These are drafts, and a lot can change.
This is more native to Vista/7 than the current theme.
Chrome works perfectly well with tabs on top.
How do you complain that the tabs aren't native when I'm not sure there's even a "native" example to point to? IE's hardly "fit" with Windows.

Kirkburn said,
These are drafts, and a lot can change.

I certainly hope so.

Kirkburn said,
This is more native to Vista/7 than the current theme.

Not AT ALL.

Transparent navigation buttons, transparent tabs, "tools" button wrapped around the window frame, completely different style address bar, "all tabs" glyph on glass without a button.

I have just described every new UI element in these mockups, and NONE of which are present in any other app. You know NOTHING about UI design if you think that this is more native.

Love it or hate it, you can't be farther from the truth with your statement.

Kirkburn said,
Chrome works perfectly well with tabs on top.

Yes. Like I said (if you read), I support tabs on top. I, however, do not like the complete removal of the title bar. I shouldn't have to aim my cursor over the current tab just to move the window. Those tabs get pretty small when there are many tabs open.

This is a complete departure from usability in favor of "ooh, shiny".

That said, even Chrome suffers from incomplete window titles being displayed due to small tab sizes.

Kirkburn said,
How do you complain that the tabs aren't native when I'm not sure there's even a "native" example to point to? IE's hardly "fit" with Windows.

Although very few apps use the true native tabs, at least the tabs in "native" programs look somewhat consistent. No, IE's and Firefox's tabs aren't the same, but at least they're drawn within the application window and have the same basic style.

Bringing the entire tab area to the application border is a terrible idea. The glass is meant to be used as a frame, not a background for the UI.

So basically they are trying to make it look like IE7/8 - the main reason I moved to Firefox in the first place.

Hate the button positions, hate the fact its a rip off of IE/Chrome. Poor

I want this. The tabs-on-bottom looks awesome. Not a huge fan of the whole tabs-on-top thing that every browser seems to want to copy now.

- Tabs should stay on bottom to see the full title on what is like you know... called the TITLE BAR for a reason? Tabs on top just shows a cropped portion of the title. Stupid idea.

- That page menu thing to the left makes no sense. I like it next to the Tools menu.

- Just like with IE 7/8, chrome, FF3.5, I do not like where the 'new tab' button is. It keeps moving and you have to hunt it down or drag your mouse further than you should just to get to a frequently used feature. Trust me, it feels more horrible on a 24" widescreen monitor and dragging your mouse all over the place when doing a mix of opening new tabs and groups of tabs all the time. Especially since its easy to accidentally close the tab next to the button all the time.

- Home tab idea is cool. Needs the "Home" text to fatten the tab up so it's easier to click on. Why make such small buttons for frequently used features? Drives me nuts in this form of thinking. Anyway, the odd thing about this tab is that is it going to refresh the page everytime you click on it? Well lets say you do and go to yahoo mail off that tab to type something up. Go look at another tab and want to go back to the home tab. Or will it kick a new tab off to the right? Confusing.

- URL bar with integrated search should be cool if implemented properly.

- Again, think of us widescreen folks and keeping things simple where frequently used features should go. Make the refresh button off to the LEFT where the other FREQUENTLY USED FEATURES are. Who said it had to go on the right? Do you know how annoyingly far the refresh button is on a 24" monitor? I hate that feature in I.E. I'm seriously thinking of sticking to FF 3.5 and 3.7 hasn't even been made yet!

- Bookmarks, Page, and Tools menu items should be close to each other. I rarely use bookmark menu item list since I use my bookmarks toolbar to handle my 40+ visited websites per day. But the question to ask is this really better than the Menu Toolbar we have today? Probably not. Looks fancier. Not sure where history menu list would go in this design.

- So I see a star on the URL bar off to the right. I see a star on the bookmarks menu list. So why not merge the bookmarks menu with the URL off to the right with a little separation for the star off to the left of it?

- Can we get options for small/medium/large/x-large text & icons for us bigscreen folks? Seriously, I'm crying over here because everything is so damn small on this 1920x1200 resolution.

Acer1 said,
- Can we get options for small/medium/large/x-large text & icons for us bigscreen folks? Seriously, I'm crying over here because everything is so damn small on this 1920x1200 resolution.

Isn't that the job of the OS, via scaling, not the program?

so a UI change means new version. just to show consumers that there is some change.
wat about the internals.. speed, stabilty..., redesign of the architect ..

i check their site it says the following. r they gonna provide the next silverlight/flash.
Web Application Support
Blur the distinction between web and desktop applications, providing web developers with the tools required to create rich application experiences for a user who is connected or disconnected from the Internet. Act as the intermediary between web applications and the user's OS desktop.

Thanks for reminding me about those! I had them a while back and forgot about them somehow. They look great with the new Firefox 3.7 Mockup theme.

not a bad UI, i like the whole loading bar concept they have come up with this time
little chromeish but i guess i could get used to it ... we'll have themes anyhow

By the look of it user have the choice where they want to place the tabs bottom or top. It would be a wise decision to do that since some user prefer the tab to be in the bottom

ekw said,
oh nooo its missing the bookmarks toolbar!@!

I think it's just been shoved under "tools" though...I do like the toolbar.

Very nice mockups. I've already seen them, as they've been posted in the news on Neowin (for Firefox 3.7 though).

Still can't wait to see what they'll do on the Mac.

PsykX said,
Very nice mockups. I've already seen them, as they've been posted in the news on Neowin (for Firefox 3.7 though).

Still can't wait to see what they'll do on the Mac.


These are completely different from the 3.7 ones

warwagon said,
Looks like they are ripping off Chrome.

A bit, though can you copyright tab placement? I could say that Firefox originally got ripped off by IE as well?

And would you say the same for Chrome ripping off Opera? There's only so much combinations where you can arrange the toolbar.

Owenw said,
A bit, though can you copyright tab placement? I could say that Firefox originally got ripped off by IE as well?

No, but when you go your whole cycle and then all of a sudden you move the tabs, add more glass, remove the menu, and add one button for tools, then it certainly seems like you're not being very original.

Memnochxx said,
No, but when you go your whole cycle and then all of a sudden you move the tabs, add more glass, remove the menu, and add one button for tools, then it certainly seems like you're not being very original.

"your whole cycle"? You appear to be suggesting any changes would make them unoriginal.

Owenw said,
A bit, though can you copyright tab placement? I could say that Firefox originally got ripped off by IE as well?

Not just that, but the omnibar-style search engine in front, and other control placements.

But no, I don't think Google patented their layout. (and copyrighting it would be near impossible IMHO)

excalpius said,
Tabs on top (ala Chrome) is just more intuitive. Everyone should go that way...

To me, it's more intuitive to grab or select tabs directly over the content of the tab, not directly over the whole interface.

warwagon said,
Looks like they are ripping off Chrome.

Exactly what I thought when I first saw the images. But I'm glad, I like the Chrome layout much more than Firefox. If you can beat em' join em'.

Joel said,
To me, it's more intuitive to grab or select tabs directly over the content of the tab, not directly over the whole interface.

Maybe because that is what you are use to? The address of the tab is a part of the tab, and it doesn't make any sense to me why you want your interface for switching tabs beneath the address bar. The tabs should be all-encompassing of the web page that it holds...and to me that includes the address bar. So it makes sense to have the tabs above the address bar imho.

Edit: also think about the user controls. If I hit the "Refresh" button in Firefox right now, what exactly is it going to refresh? I know, because I've used it before, that it will refresh the page content of the tab I'm currently in. But these controls are above the tab controls. It makes more sense that the refresh button refreshes everything that is under it.... so all the tabs are refreshed. With the tab interface above the refresh button, it makes sense that the button is exclusive to the tab the use it currently in.

Idk..it all comes down to personal preference and it looks like Firefox is going to be the one browser that allows a healthy level of customization.

That measly little line (progress bar) is not very visible. They should combine the progress bar and location bar (a la Fission extension or like Opera does).

i_was_here said,
That measly little line (progress bar) is not very visible. They should combine the progress bar and location bar (a la Fission extension or like Opera does).

À la Safari, you mean.

Yeah, it does look a bit weird, but it saves space. I got used to it on chrome, I imagine all browsers will move to it, or at least give you an option to have it.

cakesy said,
Yeah, it does look a bit weird, but it saves space.
I'd rather they stuck the address and navigation buttons up there if technically viable. Save space and keeps tabs bellow. I use bookmarks and tabs more often than I do navigation buttons personally.

qdave said,
Looks awesome actually! I like the one with tabs in normal spaces...tabs on top is silly.

I think it looks better to have the tabs on top. It makes sense. The value in the address bar changes when you change tabs. Everything under the tab changes with the tab on top. With the tab int he middle, info above and below the tabs change when the user clicks on them. I think it makes more sense to have them above the address bar, personally. Maybe you think it is silly because it isn't what you are use to?

Shadrack said,
I think it looks better to have the tabs on top. It makes sense. The value in the address bar changes when you change tabs. Everything under the tab changes with the tab on top. With the tab int he middle, info above and below the tabs change when the user clicks on them. I think it makes more sense to have them above the address bar, personally. Maybe you think it is silly because it isn't what you are use to?

Indeed, As far as I was aware, the reason Google did it is because its more intuitive.

I was wondering whether anyone would use the progress line concept from MSN Explorer. Funny that Microsoft dumped it and Mozilla picked it up, but whatever, it is good to see it back in action.

I'd be happier with the tabs on top. Tabs are actually a somewhat tricky UI element to hit, regardless of where they are placed, and with features like Quick Tabs and keyboard shortcuts, the tabs themselves as elements that need to be clicked are becoming less important.

So in the year 2010 all browsers will converge into the same UI?

This looks like a mix between IE8 and Chrome.

I believe they dropped it after release. I received Safari 4 in Apple Software Update and it had tabs on top, a couple days later, it changed. I binged it to find out more information to find out they changed it. I never tested the Safari 4 beta on Mac OS X.

LAMj said,
Anyway, I don't know how you would drag the window around if the tab is taking over the title header?

Just like you drag Chrome - there's plenty of space to grab onto.

Just like you drag Chrome - there's plenty of space to grab onto.


There is in chrome, but not in that screenshot.

JonoHale said,
Can't wait! looks awesome! and i got showen it just before it was here on neowin! :p
Thanks owen :)

Haha, thanks Jono :P