Firefox 4 Windows UI update

Since July, we have known about Mozilla's plans to overhaul the Firefox user interface. As reported on Download Squad, a Mozilla dev has shared some newly updated mockups and information regarding the new look. On his personal blog, Chromatic Pixel, Stephen Horlander shares oodles of information, ranging from the design change itself, to the reasons behind the changes.

The App Button seems to be a major focus in the new UI. Many variations are being explored (see image at bottom of post), though all of them aim for the same things, simplicity, and space saving. The new button is set to replace the menu toolbar that Firefox users are accustomed to. He also links to a previous sketch of his, showcasing what the unified menu might look like. In the image below, you can see just how much space the new layout saves when compared to Firefox 3.5.

Much of the inspiration for the new App Button comes from Microsoft. Horlander lists the advantages of it as follows. It's less complex, takes up less space (leaving a less cluttered look), provides a unified location for menu items, and gives it a similar look and feel as the rest of Windows 7 and Office 2007/10. He also notes that the UI changes are scheduled for Firefox 4.0 only, and will not make it in time for 3.7, as originally planned.

Thanks to +Mephistopheles, in our forums, for the heads up.

Report a problem with article
Previous Story

LG makes the world's thinnest HDTV

Next Story

Microsoft Loses i4i case, will alter Word

152 Comments

Commenting is disabled on this article.

I like the first one on the second row of the second pic. LOL That one looks nice and gives you the most space for tabs. I can't wait to see this in Firefox 4, and think that given the changes to the UI, this should have been planned for 4.0 from the beginning.

Saburac said,
No. Tabs do not go above the address bar, I hope there's a way to change it.

Yes, it will be an option. From the blog post:

"If tabs-on-top is not desirable you can change to the classic tabs under the navigation bar."

Kirkburn said,
Yes, it will be an option. From the blog post:

"If tabs-on-top is not desirable you can change to the classic tabs under the navigation bar."

Cool. That should make everyone happy.

You can already do this with the Strata40 theme found here along with the StrataBuddy and other recommended addons on that page. With Firefox 3.6, you can also enable Windows 7 integration.

Looking good?

Looks exactly like the default icons in Opera that everyone says is ugly as sin?!

Sheesh! Make up mind people! LOL

I don't think Opera's new interface is ugle. In my opinion, it has improved a lot. It combines a good browser with a nice interface, something Firefox had already find out earlier (and which made them very popular).

cork1958 said,
Looking good?

Looks exactly like the default icons in Opera that everyone says is ugly as sin?!

Sheesh! Make up mind people! LOL


Actually, the thread on the release of the actual Opera pre-alpha was very positive.

$50 says this UI will not be implemented in Firefox 4.0

There were similar promises of Vista integration with Firefox 3. But 3.0 came and went, and Firefox still has the same crappy UI.

x9_ said,
$50 says this UI will not be implemented in Firefox 4.0

There were similar promises of Vista integration with Firefox 3. But 3.0 came and went, and Firefox still has the same crappy UI.


They don't even have to implement such an UI, just let it be possible through themes. There are a few themes out based on the last round of FF ui mockups.
I would rather see further OS integration rather than a fancy theme :).

Some of it looks to familiar to Chrome for my liking, though it is a huge improvement on FF3.5.
Right now I'm using FF3.5 with an IE8 UI, so I'd like it if Firefox could just get it right when they release 4.0.

TSO said,
Some of it looks to familiar to Chrome for my liking, though it is a huge improvement on FF3.5.
Right now I'm using FF3.5 with an IE8 UI, so I'd like it if Firefox could just get it right when they release 4.0.

Yeah, I like some of these. Particularly the first one on the second row. I look forward to seeing what they decide on for Firefox 4...

Looks a bit... innovative?
Take a look at the comments above. These are just Windows 7 core functions that enable developers to develop such a clean UI. More and more browsers find out that's necessary to be a good browser :-)

Vernon de Goede said,
Looks a bit... innovative?
Take a look at the comments above. These are just Windows 7 core functions that enable developers to develop such a clean UI. More and more browsers find out that's necessary to be a good browser :-)

+1

yes mozilla has dominated IE7 and now most of the users are working on Mozilla only.It is providing more security options also.Its look and feel features are also good.

I like it! ... but actually is maximized mood, I think chrome wins! ... and space is important for a netbook

Talk about ugly....

I love FF but having switched almost completely to Chrome now....FF will have to do alot better to get me back.
And that UI is not a step in the right direction lol

I love how clean and simple chrome is.....FF seems to be going the other way...cluttered and stale graphics

Baked said,
Talk about ugly....

I love FF but having switched almost completely to Chrome now....FF will have to do alot better to get me back.
And that UI is not a step in the right direction lol

I love how clean and simple chrome is.....FF seems to be going the other way...cluttered and stale graphics


So, you love Chrome's UI, but Firefox creating a more Chrome-like UI is not a step in the right direction.

/me is confused.

Ummm if you think that screenie looks anything like the chrome layout....I can see why your confused lol

There's no bar's or gap at the top of Chrome....the tab which looks half the thickness of the FF one touches the top of the browser window.

Baked said,
Ummm if you think that screenie looks anything like the chrome layout....I can see why your confused lol

There's no bar's or gap at the top of Chrome....the tab which looks half the thickness of the FF one touches the top of the browser window.


To me http://www.stephenhorlander.com/images/blo...pButton-ToT.png sure as hell looks more like Chrome than Fx 3.5 does.

And you know what, I like that fact. Chrome has made some nice decisions.

Baked said,
Ummm if you think that screenie looks anything like the chrome layout....I can see why your confused lol

There's no bar's or gap at the top of Chrome....the tab which looks half the thickness of the FF one touches the top of the browser window.

Only when Chrome is maximised... Who the hell maximises windows any more :P

Kirkburn said,
So, you love Chrome's UI, but Firefox creating a more Chrome-like UI is not a step in the right direction.

/me is confused.


Wanted to say exactly the same!
+1

Joshie said,
Yes, Chrome is nice and clean...

...until you want to access your bookmarks.

No. Bookmarks come up as suggestions in the location bar of Chrome. So if I type 'F', the Facebook URL will come up as a suggestion straight away (because I have it bookmarked). This means I can access my bookmarks extremely easily through Chrome; just like I can with Firefox.

Joshie said,
Since when is using the keyboard a simplification of using a mouse?

Some people primarily use a keyboard for PC interaction - such as my housemate. I'm very much the opposite, but both work.

In any case, I don't see anything really weird about the Chrome behaviour? It has a bookmarks toolbar too.

Perhaps you should turn glass off then and colour the window frames in whichever colour you wish? All of these options are built into Windows, under the 'Personalisation' section of the Control Panel. You do not have to use the glass effects and other Aero niceties, but those of us who love them can

Except for the netscape6-esque button effect, it looks fine to me. In fact, after having used the mockup themes done by people for ff3.5... I have to say that "all transparent" doesnt work. So yeah, I like this. 2 years too late though.

Yeah, but when? Firefox is already behind the curve on the interface and now they've shown their hand (or what they wish was in their hand?). I like firefox for some of the addons, but likewise I rely on the addons to make it not look like crap. They need to hurry up >.<

Talking about browsers, Opera 10 Pre - Alpha is very good seeing. As Opera is, is still glitchy in what Flash rendering goes, but the new script loader rocks, it loads it faster and better. Plus the arrangement of tabs are done in an incredible way; now each of them has their own toolbar options, incredible isn't it. That's why I consider Opera the most root (Without addons) complete browsers on the wild

Jose_49 said,
Talking about browsers, Opera 10 Pre - Alpha is very good seeing. As Opera is, is still glitchy in what Flash rendering goes, but the new script loader rocks, it loads it faster and better. Plus the arrangement of tabs are done in an incredible way; now each of them has their own toolbar options, incredible isn't it. That's why I consider Opera the most root (Without addons) complete browsers on the wild

Talking about browsers, why not take it to the forums?

And it will take them over a year to get 4.0 out. By that time, all the other browsers will be updated with a better UI.

Xilo said,
And it will take them over a year to get 4.0 out. By that time, all the other browsers will be updated with a better UI.

This isn't final. It's not like the Firefox developers make every decision years in advance.

Did you read my comment at all? I said it will take over a year for them to release FF 4.0. Mozilla is slow and playing catch up to all the other browsers.

FF is really falling behind. Mozilla needs to get their ass in gear.

Xilo said,
Did you read my comment at all? I said it will take over a year for them to release FF 4.0. Mozilla is slow and playing catch up to all the other browsers.

FF is really falling behind. Mozilla needs to get their ass in gear.


And this is not the final Fx4 design. I don't get what on earth you want - it's a new UI. It can't be a new new UI, because that doesn't make sense.

FF is one of the few software i like every single update they push .. devs r doing rly a good job here

Look at all these nerd-rage about space saving toolbar and Firefox's what not. Neowin in 2009 had just become a drama-scene for drama nerd queens. Firefox has moved on to become a world class browser. Mozilla should not just cater to one group because because they have compulsive disorder(cd) about their browser's visibility. Talking about 50ish of vertical pixels saving, sheeshh, what decade are these whiners stuck in? sVGA decade? Anymore CD nerds just plz switch to your loving Chrome and say no more. But then again people find themselves in a "relationship" when two get into a conflict, if you know what I mean. I hope 2010 will be kinder.

aarste said,
Most of that is to blame due to the fact of Netbooks popularity this year, so we want to make the most of the small screen space.

Indeed. There is a move towards more powerful smaller devices which are likely to be used for the internet, so this does indeed have the odd effect of a reversal in "ideal" design screen sizes.

I think it just looks nicer if the interface has a minimal impact. It's not about more pixels down below, but more about less pixels up above.

The Firefox UI does look beautiful, especially with directwrite. Any update on progress on Chrome using the GPU or directwrite?

Wow, I really like their new design. Their current design feels pretty dated.

Now if only OpenOffice would modernize their look and implement the ribbon!

Ecion said,
its not saved THAT much space, I like how they included the bookmark toolbar, and large icons to try and make out they have.
real example - http://img31.imageshack.us/img31/3294/faircomparison.jpg

Are you kidding? They are basically the exact same icons(both back buttons are the same size, which is the biggest button).... I'm pretty sure that the bookmarks toolbar is being moved to tabbed bookmarks, much like the home tab in that photo. So no, your example is less real.

I agree that little space is saved, but the point I like is how much cleaner/less cluttered the new one looks which might be what they were going for.

marius.fanu said,

dude, on safari you still have the bookmark bar and the menu bar turned on, so it's not a fair comparison. safari is pretty close to chrome, in terms of browser height.


If the bookmark bar and menu bar are on by default, this it IS a fair comparison. You can do pretty much anything to increase your browsing space. There should really be two separate comparisons. The first comparing the default states of the browsers "out of the box". The second comparing the minimal settings of each browser. Like small icons, menus and bars turned off, etc while retaining the essentials like back, forward, refresh, stop, address bar, home, etc.

TCLN Ryster said,

If the bookmark bar and menu bar are on by default, this it IS a fair comparison. You can do pretty much anything to increase your browsing space. There should really be two separate comparisons. The first comparing the default states of the browsers "out of the box". The second comparing the minimal settings of each browser. Like small icons, menus and bars turned off, etc while retaining the essentials like back, forward, refresh, stop, address bar, home, etc.

yea but then google chromes bookmarks bar should be enabled also, cuz it's on by default

noleafclover said,
Yeah Opera 10.5 pre-alpha beats FF4 by a couple of pixels and Chrome by a few more pixels when previews in tabs is off ;)


The lesser the better. I really dont like that big opera button...

troist said,
I agree that little space is saved, but the point I like is how much cleaner/less cluttered the new one looks which might be what they were going for.

Indeed. I agree.

Looking forward to this. Glad they decided to move the tab bar above the address bar. That makes more sense to me, anyway. It gives way to the possibility of tabs having different controls beneath them. The address bar changing with tab changes also makes more sense.

Shadrack said,
Looking forward to this. Glad they decided to move the tab bar above the address bar. That makes more sense to me, anyway. It gives way to the possibility of tabs having different controls beneath them. The address bar changing with tab changes also makes more sense.

Yeah, I like that design as well.

shinji257 said,
That looks nothing like the leaked opera. The leaked opera looked awful. This actually looks nice.

You can download an official version of 10.5 pre-alpha from the Opera Labs site now, and it looks great - much better than the leak screenshot. Give it a try

:No-Frost: said,
It might be my idea but mmm Doesn't looks a lot like the leaked Opera????

Might be just a coincidence :P


Yes, the style of the top-left button is similar. However, it is likely coincidence, as these pictures came out just before the leaked alpha.

Stokkolm said,
It's not a coincidence, they are both using the ribbon-style menu. They both copied it from MS, not from each other.

It's a coincidence between Mozilla/Opera.
Yes, it's not a coincidence that it's like the ribbon-style menu, one of his previous mockups was specifically based on it.

Kirkburn said,
Yes, the style of the top-left button is similar. However, it is likely coincidence, as these pictures came out just before the leaked alpha.

I thought the Opera leak came the day before the Firefox mockups.

Yep, just checked. Opera was first

PreKe said,
I thought the Opera leak came the day before the Firefox mockups.

Yep, just checked. Opera was first ;)


And this was back in November: http://blog.stephenhorlander.com/2009/11/20/sketch-day/ ... notice the menu system? I doubt that Stephen knocked up five detailed mockups in the short period after the Opera leak solely for this post, when he was evidently already on that train of thought.

So, no.

Kirkburn said,

And this was back in November: http://blog.stephenhorlander.com/2009/11/20/sketch-day/ ... notice the menu system? I doubt that Stephen knocked up five detailed mockups in the short period after the Opera leak solely for this post, when he was evidently already on that train of thought.

So, no.

+1 Any similarities are because they are copying Microsoft's UI for consistency. Not because they were copying eachother...

:No-Frost: said,
It might be my idea but mmm Doesn't looks a lot like the leaked Opera????

Might be just a coincidence :P

Yeah, take your fanoyism somewhere else, perhaps to the Mozilla Add-Ons site, where you and your trollish nature may weep at your crippled browser's lack thereof.

Why must FF create more menus and buttons whereas other browsers are trying to minimize them. I always find their browsers cluttered with crap. I like a clean simple browser. Chrome has replaced Firefox as my secondary browser. Nice and simple :)

It's certainly better than it was before, but it still feels too busy.

Xero said,
:( Why must FF create more menus and buttons whereas other browsers are trying to minimize them. I always find their browsers cluttered with crap. I like a clean simple browser. Chrome has replaced Firefox as my secondary browser. Nice and simple :)

It's certainly better than it was before, but it still feels too busy.

:/ I used chrome. It seems to have more buttons then this design.

Actually, my current Firefox setup has a Forward, Backwards, Personal menu, & Bookmarks button only.

http://www.stephenhorlander.com/images/blo...pButton-ToT.png

Yea I should have posted the recent screenshot from the post, I was looking at the originals. It has a much more minimal interface. I think the main thing that gets me is the mixed assortment of colors. Whereas Safari/Chrome have very soft colors and are mostly made up of white. Everything blends in better, whereas with FF every element stands out. Both have their pros and cons.

The only colourful elements here are the Firefox menu, the loading bar, and the SSL EV notification. The latter two aren't continually present, and it looks like the colour and location of the Firefox button is still up for debate. The funky wallpaper and need to show everything at once in the mockup may be throwing off perceptions, especially when compared to the "Chrome with nothing but google.com" screenshot.

All told, it looks like a fairly sedate UI which is much improved over the older mockups. The toolbar-happy IE team could really learn something here.

Stokkolm said,
Chrome has two menus whereas the new FF will only have one. I'm not sure I follow your logic.

Yeah, I'm missing something too I think.

Xero said,
:( Why must FF create more menus and buttons whereas other browsers are trying to minimize them. I always find their browsers cluttered with crap. I like a clean simple browser. Chrome has replaced Firefox as my secondary browser. Nice and simple :)

It's certainly better than it was before, but it still feels too busy.

Uhh. First off, if you look carefully, they ARE reducing the number of menus to one.
Second, how does it look busy?

I like how they show how much space was saved by turning off the bookmarks toolbar in the first shot and leaving it on in the second.

You mean by removing the bookmarks toolbar, I'm guessing replacing it with tabbed bookmarks, and removing the file menu system also?

The fact that those are not real screenshots but only mock-ups. He is saying the mock-up is done on Paint.net. So do't expect to see this soon. While most browsers already have these GUI updates Fx only have mock-ups and have to play catch-up.

Cant wait for this to come out... i am switching back to FF from IE + Chrome once this is released :)..

FF 3.5 crashes on me way to often

dimithrak said,
lol true.. lets hope it doesnt.. since this will be designed for win7

An app doesn't have to be "designed for win7" in order not to crash on it, it just has to be well written.

dimithrak said,
FF 3.5 crashes on me way to often :(

I always find it intriguing when someone says Fx crashes on them. I've never had Fx crash once, and I have around 12 extensions installed and enabled. I find it to be a very stable browser. What was your loadout like?

advancedboy said,
I always find it intriguing when someone says Fx crashes on them. I've never had Fx crash once, and I have around 12 extensions installed and enabled. I find it to be a very stable browser. What was your loadout like?

3.5's javascript engine disagrees with stuff quite frequently, 3.6 is a well needed improvement in that area.

advancedboy said,
I always find it intriguing when someone says Fx crashes on them. I've never had Fx crash once, and I have around 12 extensions installed and enabled. I find it to be a very stable browser. What was your loadout like?

Well.. it doesnt just crash.. I just have issue with Flash.. everytime I load a site with flash on it.. , my computers processes are up to 100% and FF stops responding..

Trust me i'd prefer to use FF over chrome anyday.. just sick of the crashes..

Sounds like it might be an extension issue. Flash works fine for me. Or maybe not even an issue with firefox, something else that is making firefox behave like that?

omganinja said,
Sounds like it might be an extension issue. Flash works fine for me. Or maybe not even an issue with firefox, something else that is making firefox behave like that?

+1. Add ons can cause some problems. I had one in Thunderbird that made some options in the tools menu unavailable randomly... Poorly written add ons can cause some serious issues...

why be there a Mac UI scheme in my Windows?
not that it looks horrible, Chrome like even, but heres hoping
my Microfox theme still functions ;P

artfuldodga said,
why be there a Mac UI scheme in my Windows?
not that it looks horrible, Chrome like even, but heres hoping
my Microfox theme still functions ;P

English please??

artfuldodga: I'm not sure if I follow you. They are trying to create a efficient layout and they actually took some from Microsoft. I think the only safari elements might be the buttons. That's about it.

I would like the second style in the bottom image (Just the logo) but dropped down on to the tab bar like the third style.

rageagainstmachine said,


Ironically, it is!! just think Hagrid from Harry potter. Northern england i think??

Hagrid speaks with a South-west accent.

artfuldodga said,
why be there a Mac UI scheme in my Windows?
not that it looks horrible, Chrome like even, but heres hoping
my Microfox theme still functions ;P

How the hell does it remotely look like Mac theme? it is the same theme that is present on Windows Vista and Windows 7!

Application Menus have been in Mac OS forever. It's just usually in a bar stuck to the top, instead of the topmost bar in the application. It's a good idea, just not traditionally a convention in Windows.

Stetson said,
I would like the second style in the bottom image (Just the logo) but dropped down on to the tab bar like the third style.

Yes, that would look the best.

random_n said,
Application Menus have been in Mac OS forever. It's just usually in a bar stuck to the top, instead of the topmost bar in the application. It's a good idea, just not traditionally a convention in Windows.

The 'File' 'Edit' etc menus are virtually identical between Mac and Windows.

Darksoft said,
I like the 3rd one on the 2nd picture.

Me too! Stays consistent with the way most of the other windows look in Aero.

I like the top middle one as well, I think it is definitely the best as it isn't too big, but also doesn't take away from the space on the tab bar.

I too like 3rd in the 2nd pic the most. The App button looks the equivalent of the File button in Office 2010 apps. And Office's logo is also orange!

+1

I have a tough time deciding between the third and the fifth. The button looks seems more sensible than making the menu a tab. But I think I like the white text better - it looks more readable. The regular title bar is a bit of a must-have for me.

The icon in the top right corner is already a menu anyway, they are basically talking about enhancing it. Why take away from the horizontal tab space when you can alter something that is already a menu?

Darksoft said,
I like the 3rd one on the 2nd picture.

Tbh, I don't really like the idea of a Firefox button, as currently, I hide the menu bar and pressing alt brings it up.