Updated mockups of Firefox 4.0 for Windows

[Ashmir]

Why does it matter if interfaces across applications are different? As I have stated, if Microsoft made something similar to the old 'menu bar' a standard and a guideline, developers and designers would have limited scope to be imaginative when it comes to designing the interface of their application/s. Perhaps this 'standard' or 'guideline' may not be consistent to the rest of the application design? Take the Zune software, for example, or the Office 2010 ribbon - the old-style menubar certainly would not fit in nicely and even if they implemented it using the colours of the application, it would not go with the overall design. It would also mean the nice way certain settings and options have been implemented in the Zune software would not be present - there would be an ugly line of text drop-down links across the top of the software :x I know you suggested Microsoft come up with another standard to replace the menubar, but what I have provided is just an example; whatever Microsoft may come up with, should they decide to come up with some sort of standard, may well not fit in with the designs of certain applications.

Do you suggest all applications should display a whole interface uniform with Windows and other Windows applications, just like Apple do with Mac OS X? If so, why? Why should things be consistent in this way? Forcing designers to conform to a standard such as that limits their potential even more - they would not be able to add certain interface niceties and design their software the way they wish. I strongly disagree with this form of consistency because I know that if such was the case, the Zune software would not be as beautiful as it is :p

As I have suggested, it does not take a rocket scientist to realise that the 'wrench' button, in Chrome, holds some settings for the application, so the style of consistency you suggest must have nothing to do with the intuitiveness of the application. So, I would like to know why you think such consistency is important?

I welcome all of the improvements Mozilla have presented here and look forward to the improvements made to these ideas. They are not copying Chrome exactly, they have just seen what has worked in Chrome, Safari and even Internet Explorer and have taken ideas from both. It's great to see they will provide an option for tabs to be displayed in 3 different places for those who prefer each different placement. I really like the way tabs look below the 'Bookmarks' toolbar, but I have no use for that toolbar, so I'm looking forward to playing around with the new interface when it is released. Not using the application with tabs in the titlebar appears to show more glass, which I'd appreciate.

Because when every program looks different, the user might get confused. When there is a guideline which most programs follow, it is easier to work with an app because you know where to expect option X or Z (this is a bigger issue then you might think). Furthermore, a software developer that is lazy or cannot design a proper user interface, can simply follow these guidelines and still make a stunning looking app.

Finally, these are guidelines, not rules. If you want to design an application that doesn't follow these guidelines, you won't get blocked or something.

[Calum Veteran]

Because when every program looks different, the user might get confused. When there is a guideline which most programs follow, it is easier to work with an app because you know where to expect option X or Z (this is a bigger issue then you might think). Furthermore, a software developer that is lazy or cannot design a proper user interface, can simply follow these guidelines and still make a stunning looking app.

Finally, these are guidelines, not rules. If you want to design an application that doesn't follow these guidelines, you won't get blocked or something.

If Microsoft introduced guidelines which they do not enforce or recommend (or do they already do that?), then I'd be happy.

As for users becoming confused, I have already stated my opinion on that: application designers and developers (as well as intelligent users) should not be disadvantaged just because some users are not intelligent and cannot use their brains to figure out how to use some applications. There are always simple alternatives to most software out there, which hold an 'easy to figure out' interface. It's not a matter of "getting used" to something, because for an intelligent person, it doesn't take long at all to figure out how to use a new application. I had no problems figuring out all the options in the Zune 3.0 software when I first used it and subsequently the Zune 4.0 software. Often, it's not even about intelligence; sometimes users are just too lazy to bother figuring out how to use an application and expect it to just be like the other software they use. Such attitude aids the argument that there should be consistency in interface across a lot of applications - something which would mean we would never have had both the beautiful Zune software design and the very intuitive, and nice looking, Office 2010 software design at the same time.

[Guest xiphi]

Anyone miss the days when the non-client area really was just that?

Soon I'll need a magnifying glass to be able to figure out where I can click to actually move the window.

+1 I really hope it never comes to the point where most applications decide to put crap in the titlebar. I'm fine with how Office does it, but when a browser decides to put its tabs there, it becomes a problem.

[Kirkburn]

(when there are often clear things like a 'wrench' icon to denote 'settings')

Careful about making assumptions that everyone understand an icon or what "belongs" to it. I've used Chrome a fair amount, but I still look at both menus to really understand them.

(A fun one is the save icon - it's a floppy disk. No-one uses floppy disks these days. But there's no real alternative.)

More and more programs are putting random crap in the title bar. It just gets worse and worse. I expect it will eventually reach the point where someone introduces an amazing new feature that adds a bar to the bottom of the window that you can use to move it and is hailed as a hero and master innovator. It can be called the "move bar." It'll be in Firefox 7 and Opera 49.

Designers aren't idiots, they do understand the idea of limitations. Just because there is a move to a new design paradigm, doesn't mean it's the be-all and end-all. I don't see any reason why someone would think that.

So they took the mockups that everyone loved and added more gloss and reflection to it. If they keep this up it will look like the atrocious Firefox 3 default theme on Vista. :(

Eh? It would look nothing like the Firefox 3 theme.

[Calum Veteran]

Careful about making assumptions that everyone understand an icon or what "belongs" to it. I've used Chrome a fair amount, but I still look at both menus to really understand them.

(A fun one is the save icon - it's a floppy disk. No-one uses floppy disks these days. But there's no real alternative.)

Excellent points. Thank you for bringing those to my attention :)

That still doesn't take away from my statement that designers are easily able to create intuitive applications without resorting to following guidelines. For example, they could replace the 'floppy disk' icon with the term "save work" or something, if need be :happy:

[hdood]

Designers aren't idiots, they do understand the idea of limitations. Just because there is a move to a new design paradigm, doesn't mean it's the be-all and end-all. I don't see any reason why someone would think that.

If you say so.

[Syanide]

I still prefer classic menus. Macs have the best solution by far, it saves space, remains consistent throughout all applications, and is still usable. I mean, I really like Chrome, but sometimes it takes me 5 clicks to go to a certain option. Clicked page instead of wrench. Oops. Click wrench. Click new page (is it just me or there's some serious disconnect here?). And yes, I prefer clicking over keyboard shortcuts. I hate, and I mean really hate using Windows Explorer when I have to, in Vista and 7 for reasons like those. Why they chose 'looks' over usability is beyond me, especially providing no working alternative. It's like they've stopped half way. The ribbon interface takes getting used to, but I still think it's a waste of space. Now everyone's on their own, and everyone's implementing different set of GUI tools.

I think getting rid of menus and titlebar is one of the worst moves in general GUI in the past 10 years.

[-KJ]

If you say so.

<snip>

?

[hdood]

?

It is Photoshop. It no longer has a title bar. What used to be the title bar is now filled with crap. It illustrates that, no, designers do not necessarily know when to stop.

[CuCumber]

It is Photoshop. It no longer has a title bar. What used to be the title bar is now filled with crap. It illustrates that, no, designers do not necessarily know when to stop.

They decided to take the wasted space in use, is it bad?

[hdood]

They decided to take the wasted space in use, is it bad?

It's the title bar, it isn't wasted space. It's there to be a title bar.

[iamawesomewicked]

It's the title bar, it isn't wasted space. It's there to be a title bar.

So having functioning buttons instead of a blank bar at the top.. is worse?

[2III7]

and exactly why do YOU need the title bar? IMO it's just wasted space with some pointless text on it.

[backdrifter]

It is Photoshop. It no longer has a title bar. What used to be the title bar is now filled with crap. It illustrates that, no, designers do not necessarily know when to stop.

I couldn't use Chrome because of the lack of titlebar but Photoshop was no problem for me because it's almost always used as maximized. Different apps, different approaches.

[hdood]

So having functioning buttons instead of a blank bar at the top.. is worse?

You seem to be implying that my 18 pixel title bar doesn't do anything. It does. It shows a text message that identifies the window, as well as allowing me to move the window around. I like this. I don't want to have to go pixel hunting to find a place I can click in between buttons to move the window. This is a fashion thing, not a usability one, and they should stop it.

and exactly why do YOU need the title bar? IMO it's just wasted space with some pointless text on it.

I presume you go and change the height to 4 pixels when you install Windows, right? You must, right? Since you disapprove of title bars?

I couldn't use Chrome because of the lack of titlebar but Photoshop was no problem for me because it's almost always used as maximized. Different apps, different approaches.

The problem is that it isn't limited to full screen mode. If it only did that in full screen, then that would be a different matter.

[Syanide]

and exactly why do YOU need the title bar? IMO it's just wasted space with some pointless text on it.

Right click options:

Enough of a reason for me to say no to no titlebars.

[SkyDX]

Nice looking mockups! Though I myself prefer the 3.7 mockup style. And I really don't see where all the fuss comes from.... I mean it's still Firefox we are talking about here, if you are unhappy with what Firefox 4.0 will look like just wait 2 weeks after release and there will be a gazllion addons/mods to suite it to your taste...

It's not like the whole AddOn/Mod system will go poof and vanish in thin air.

[hdood]

Enough of a reason for me to say no to no titlebars.

Your first picture still has a fair bit of title bar though. Photoshop has none. It's the perfect example of taking it to the extreme. I don't have a problem with it if it's an option, but my opinion is that developers should respect that Windows (and all other OSes) uses title bars for a specific purpose and not override it.

[ObiWanToby]

I still affirm the chrome look is the way to go. The webpage is the most important content, not the chrome.

[Kirkburn]

Your first picture still has a fair bit of title bar though. Photoshop has none. It's the perfect example of taking it to the extreme. I don't have a problem with it if it's an option, but my opinion is that developers should respect that Windows (and all other OSes) uses title bars for a specific purpose and not override it.

You know what, I agree, that Photoshop example is a fair example of taking stuff to an extreme (and from the designer's designer, no less). Odd, but I suppose if they were taking the situation of "always maximised" as the main use case, it starts to make a little more sense.

[Bassem]

Love it! I actually don't mind the Firefox button on top. Still can't get used to the tabs being on top though.

Edited December 21, 2009 by Bassem

[phot0nic]

Ew. It's like they're going out of their way to "stand out", which is a terrible UI mistake. Please Mozilla, go back to when you understood proper interface design, and tried to make Firefox blend into the OS. Now this looks like just another "skinned" app. It looks flashy and pretty in a screenshot, but the second I have several programs open at the same time, I'll have an inconsistant cluttered mess of clashing UIs.

They should have just added the Glasser extension's functionality (optional, of course) and polished up some of the icons. Completely redoing each interface element (buttons, toolbars, address bar, search bar, weird orange button, general placement of elements) just to look different from the native controls is a poor, poor decision. Why can't more developers just embrace native UI controls, or at the very least try to mimic them?

[bigmehdi]

I like the new design except the rectangular orange firefox button.

I rather have an orb with a logo, or a small square with just the logo.

[Calum Veteran]

More and more programs are putting random crap in the title bar. It just gets worse and worse. I expect it will eventually reach the point where someone introduces an amazing new feature that adds a bar to the bottom of the window that you can use to move it and is hailed as a hero and master innovator. It can be called the "move bar." It'll be in Firefox 7 and Opera 49.

I had to laugh at your prediction of the 'move bar' in Firefox 7 and Opera 49 :laugh: I imagine you meant it in jest, exaggerating to prove a valid point? :) Some designers are including more and more things in the title bar, but as long as it does not remove the functionality of being able to move the application, I am fine with that. I have yet to see an application which makes it hard to be able to move the application by including UI elements in the title bar. Even Photoshop has a big enough space in the title bar to easily notice where you need to place your cursor in order to move the application (as evidenced by the screenshot I have attached to the bottom of the post - the app isn't even maximised and it's not on a large resolution.

I see the titlebar as a waste of space. I don't see why the title is needed at the top of a lot of applications. In Photoshop, the tabs contain the title of the document currently selected; in most web browsers, the tabs display the title of the page; in Windows Live Messenger, why does there even need to be a title in the title bar? Surely the user knows which application they are running...? In a web browser, when there are many tabs open, you are able to see the full title by hovering over each tab - active or inactive. Another nice solution to finding the tab you need is an Internet Explorer 'Quick Tabs' type feature; whether that is implemented into a web browser or not, the user is now able to select their individual tabs from the application icon in the taskbar, in Windows (using some browsers; most probably soon, all of them). The preview or window tile shown when hovering over the application icon in the taskbar, shows the title of the application or tab. I see no reason to display this title in different places - presenting redundant data - especially when valuable space which has been pointlessly taken up (the title bar) can be used to place UI elements and make the application look nicer, as well as increase screen real estate.

The title used to be displayed in every taskbar button, Microsoft have only recently realised that was pointless and have finally removed this redundant information; now all that is left is for the title in the 'title bar' of applications to be removed, but left in the task bar button :) It's the next step in the evolution and whether or not it's called a title bar for a reason, displaying the title there isn't useful to many.

What use do you get out of it, when there are other ways of finding the title? Especially easily hovering over the selected taskbar button.

If you say so.

<Photoshop screenshot snipped>

As proven in my screenshot of Photoshop, there is a clear, big enough, space to notice straight away where to click to move the application. You do not seem to have this large space, but if you right-click on the Photoshop logo and select 'Move', you will be able to move the application where you wish :)

<images snipped>

Enough of a reason for me to say no to no titlebars.

The first screenshot looks better as there is no awful, ugly title bar and the free space is utilised nicely. There is no difference in usability between the first and second screenshots, because the titlebar provides nothing useful - you still have the issue of not knowing which tab is which until you click onto them (which is solved anyway by hovering over each tab - again, no titlebar needed). Once you've clicked onto a tab, whether the full title is shown in the tab or not, why would you need it shown in the title bar? 1) If you are already on the tab, surely you know which page you are on, without needing to see the title?; 2) If you must know the title, it will be shown in the tool-tip when you hover over the tab.

As for you screenshots of the right-click context menu, I don't understand how they relate to the titlebar?

[Syanide]

I can agree that a titlebar revamp would be a fine idea, but on a system level. Open Windows Explorer, Word and Opera next to Photoshop, and you have 4 completely different looking applications. That's my main gripe with the changes Vista brought -- they started out with something, but haven't made clear guidelines. I would be totally okay if ribbon was the way to go, or Photoshop implementation was the way to go -- things change and it's a normal thing in a technology world, and some things need getting used to. But in no way do I see this as a change for the better.