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
.png)
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
-(LocBarSearch).png)
The more contentious Tabs-on-Top concept.
Positives
Negatives
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.
-(LocBar).png)
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.
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!
Thanks owen
Thanks owen
Haha, thanks Jono
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.
There is in chrome, but not in that screenshot.
This looks like a mix between IE8 and Chrome.
Safari dropped it before release.
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.
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.
À la Safari, you mean.
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.
"your whole cycle"? You appear to be suggesting any changes would make them unoriginal.
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)
To me, it's more intuitive to grab or select tabs directly over the content of the tab, not directly over the whole interface.
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'.
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.
Still can't wait to see what they'll do on the Mac.
Still can't wait to see what they'll do on the Mac.
These are completely different from the 3.7 ones
I think it's just been shoved under "tools" though...I do like the toolbar.
little chromeish but i guess i could get used to it :/ ... we'll have themes anyhow
wat about the internals.. speed, stabilty..., redesign of the architect ..
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.
- 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.
Isn't that the job of the OS, via scaling, not the program?
No Firefox 4.0 Mac mockups yet?
Hate the button positions, hate the fact its a rip off of IE/Chrome. Poor
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.
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.
I certainly hope so.
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.
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.
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.
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.
i think the "tools" button looks ugly
I completely disagree. This mockup looks more native and attractive than Firefox currently does by default.
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.
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.
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.
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.
No, not suddenly. It's always been this way.
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.
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.
It's not BS if it's true. Please, do some research before trying to argue with me.
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 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.
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
They need to take a look at the Chrome "New Tab" button for a better idea how to draw buttons on glass.
Yeah that is a real pain in the @ss.
Bookmark widgets sounds good.
This is what my Firefox 3.5.1 currently looks like:
Last edited by sabrex on 28 Jul 2009 - 22:32
but one thing is troubling me , wont this affect Personas??
Commenting has either been disabled on this article or you are not logged in. Click here to login or register, its free!
Note: Anonymous commenting is disabled in order to keep the quality of responses to a high standard.