Firefox 4 Features :: New and Improved User Interface (Part 2)

Firefox 4′s User Interface – It’s the Evolution of a Web Browser

Welcome to part two in the series. In Part 1 we talked about Firefox 4′s increased security through implementing Content Security Policy; but in this post we’re focusing on aesthetics – The User Interface. Like most great software, Firefox 4′s user interface update is more a state of evolution than revolution and I’m not getting into any form of Darwinism here. But one thing’s for sure, it increases usability.

Google Chrome-like Tab layout

But in the new release of Firefox 4, a number of things have been revised or evolved. The first area are the browser tabs. By default now they’re like Google Chromes tabs. Personally, I like it as I feel it’s more compact and gives more usable space. I’m all for copying good ideas and given the amount of Browser real estate that’s saved and that I’m a bit of a minimalist at heart, this is a move in the right direction.

Firefox 4 Tabs

But wait, there’s Tab Groups

However if you don’t like it, the with a click or two, you can display them lime before. Next is the tab groups. Where tabs helped avoid opening many browser windows, to an extent, tab groups takes this evolution further. Personally I’ve tried them and it’s not something I’m particularly keen on.

Firefox 4 Tab Groups

Now there’s a surprise. I’m sure the feeling was I was blindly plugging Firefox irrespective. No! To group tabs, either right click the tab and associate it with a group, or use the visual banding to do so. You can create any number and name them as you wish.

As well as that, if you’re not quite sure what tab group you’ve just dropped your all important Facebook or Timeout tab, you can search them easily to find it again. Just click the magnifying glass icon and hey presto, a search box is ready for your search term.

New App Tabs!

Another evolution in the tabs approach is App tabs. Honestly, at first I was a bit mixed about them, but on the whole, the more that I use them, the more that I really like them and think they’re a natural evolution. So what are they?

Firefox 4 App tabs

You know the standard dialog that appears when you close Firefox with multiple tabs open? No? Well it’s the one that says “You have several tabs open, do you want to save them before closing”. That one. Well, I don’t know if you liked it or hated it, but App tabs does away with the need for it.

App tabs allow you to set a series of tabs that will persist with browser restarts without any intervention on your part. They conserve a lot of browser real estate by having the size of the tab be the size of the sites favicon. My only real gripe is that as they’re so small they’re a bit hard to identify.

They let you know when the Window updates

Now with the potential to have so many tabs open, you might never see any title bar flashes like in Facebook Chat to let you know that something has changed, such as receiving a new email. Well when such an even occurs, the tab will highlight automatically. So that way you know the window’s updated without being constantly distracted by flashing text or something similar.

Highlighted App Tab

How Do I Create an App Tab?

All you need to do is to right click on a tab and choose “use as app tab“. The tab will be moved in to a group on the left hand side of the browser window. That’s it, you’re done!

Configuration Window – Looking Sweet

The last UI feature I want to cover is the new configuration window. Personally, it’s another step in the right direction. Why? Because it creates a more cohesive and professional looking interface; as well as laying out the options effectively and efficiently.

Manage Firefox 4 Extensions

How so? The key areas of browser management are available and easily usable. With the increased screen real estate and somewhat elegant placement and spacing of the UI elements, it’s altogether effective and efficient.

Manage Firefox 4 Plugins

The only critique I have is not so much one, as a comparison. Both the Firefox and Google Chrome interfaces and to degrees, Internet Explorer, Safari and Opera too, are becoming more similar. The design o the settings windows in Firefox and Chrome are striking. I prefer Chrome over Firefox because, to me, it has a sharper, much more polished appearance.

Updated Interface Buttons

Now you may argue that this isn’t necessarily something to include in the post, but I believe it is. The Stop, Reload and Load buttons in the wonder bar have also been given a touch of love and a subtle makeover. The reload button is now blue, the load button is green and the stop button is red. They’re almost like the standard colours of a traffic light.

Stop

Reload

Load

All in all, except for the blue, which I’m not totally convinced on, they’re a good addition. Red is a standard for stop and green for go. So if you mouse over them, you don’t need to really give much thought to what they mean. You inherently know without needing to think.

Chris Shiflett wrote a post on this in which he talks about Ambient Signifiers and how important they are to application design through the simplification of effort required for the user to maximise their use of an application when applied well. This is a good use of the principle. So hats off to the Mozilla team for doing it.

And that’s a wrap

But that’s a wrap for this post. What do you think? Do you like the changes in Firefox 4? Give us a shout and tell us what you think. For those that say browsers are irrelevant, I strongly disagree. If you liked what you read and would like to see more, please retweet it, or give it a like on Facebook or even give it some Digg love. And we always value you feedback and comments.

• Bio
• Latest Posts

Matthew Setter

Matthew is a freelance technical writer and technical editor and regular contributor to a number of tech publications, including PHP Architect, PHPMaster, CloudSpring and New Relic. When he's not contributing there, he's writing content here on Malt Blue. What can he say, he's an avid technical writer and software developer. Get in touch if you want awesome, up to the minute, technical content for your blog, business or publication.

Latest posts by Matthew Setter (see all)

• Zend Framework 2 – Hydrators, Models and the TableGateway Pattern - 05/15/2013
• Use RouteMatch in Zend Framework 2 For Easy Routing - 05/01/2013
• Why Testing Makes a Project Successful and You Can’t Afford to Deny It - 04/23/2013