The browser is broken and needs some UX love

As a UX designer I spend my life developing interfaces that are easy, efficient and above all satisfying to use but when it comes to the interface they are presented in, things start to unravel.

The recent versions of browsers from Firefox, IE and Opera have highlighted just how broken browser design is. I’ll list 3 reasons why browser design needs to be improved.

1. Using space wisely

Screen resolutions are ever increasing and one of the most important changes of late is in screen size ratios.

Mosiac browserWhen the original browsers were designed back in the 90s screen ratios were effectively the same as a TV, Defined as 4:3, 4 wide by 3 high, close to, but not quite a square. WIth 4:3 screen ratio it made sense to place all interaction elements at the top of the screen where the menu was placed.

Modern screen resolution tends to be 16:9, that is 16 long by 9 high. Meaning screens are much wider than before. Placing all the tabs, bookmarks, menus and everything at the top no longer makes sense when we have much wider screens. You can see the trend in browser design to minimise the clutter at the top of the screen. Chrome started this trend and the other browsers have followed.

We can still go further yy moving all the controls to the left (or right in some cultures) we can make better use of the screen real estate.

2. Too many white boxes to type in

Yahoo! list the top 20 current popular searches. As of today, May 29th 2011, Facebook is first and YouTube is second. They lead the rest of the results by a factor of 10. These aren’t searches, they are mistakes. People typing an address into a search box.

Edit: Fri 20 May 22:49 (Sing). Justin Stach makes the point that this is less a mistake and more an alternate route to the same goal. A desire path.

Chrome have taken the lead and removed the search box and integrated it into the URL box. All browsers should be doing this. Especially mobile browsers on touch screen phones as it can be really easy to select the wrong white box. See the picture above. There is no need for 2 boxes. Let’s just have one combined URL/search bar.

3. Error messages

For the simplest error possible, no internet connection. Many browsers still present fairly incomprehensible, jargon heavy error messages.

Google Chrome states:

This webpage is not available. The server at whatever.com can’t be found, because the DNS lookup failed

What’s DNS? Is it the web page that’s not available? No.

Firefox isn’t much better:

Server not found, Firefox can’t find the server at www.google.com

What’s a server? Most internet users would have no idea.

Ok, Opera, otherwise Bruce & Pat will shout at me:

Network problem

Better but still not user friendly. Most users would have no real idea what a network is even though anybody reading this will of course, know.

IE again isn’t much help:

Network problem, why don’t you try [Diagnose connection problems]

Network, diagnose? All very technical, intimidating terms.

Well done Safari:

You are not connected to the Internet.

Not surprisingly Apple get it right. Safari isn’t perfect, it offers the button quite intimidatingly titled: “Network diagnostics”. Sounds technical and difficult.

Let’s fix the browser

Here’s how I’d recommend writing the ‘No internet connection’ error message. More often than not I find refreshing the page fixes this issue, so suggest that first. Next give lo-fi, non-technical fix. Next try connection helper and finally the advanced technical solution. Here’s what I suggest wrapped in an updated browser layout to include better use of the screen and no second white box.

Suggested browser

Browsers are far better than they were 5 years ago thanks to competition in the market. But as I’ve shown, they still have a long way to go.

I’d love to help, if any browser developers are reading this, just get in touch.

Leave a Reply