Bad Web Browser UI Design Choices

And how to fix them. Part 1.

Although the web browser user interface keeps evolving, it looks like from time to time some random programmer (who has no design experience) decides to implement a feature and mess things up. And you know what the worst part is? It looks “fine” to him/her and change is approved by management who has no design experience as well. Or at least it looks this way.

Keep in mind, as Opera is my default web browser, it’s okay for me to find more UI flaws than in Internet Explorer, Firefox or Google Chrome.

Thankfully, those flaws will now be uncovered and humanity shall be saved. Furthermore, a “quick fix” is offered that should put management on the right track.

And if for some reason you don’t agree with the fixes, don’t worry; those are not the only ones. I am sure there are plenty of them. In fact, you could add few more web icons all over the UI and let reddit to take care of the problem…

Now, as my shockingly bad grammar and poor sense of humors got your attention, let’s jump in into the oblivion and uncover the truth.

Internet Explorer: Configuration

This one is probably not even worth mentioning. The “Internet Options” part in Microsoft’s web browser hasn’t been touched for more than a decade. It looks like this old, boring and outdated user interface is here to stay, at least for a while.

How to fix? Refresh it.

Firefox: No Zoom Indicator

Let’s be honest. Firefox and Maxthon are the two web browsers that mostly have a consistent and friendly user interface for both new and experienced users. However, it doesn’t mean that those two are flawless.

What happens when you hit CTRL & + in Firefox or pretty much every other web browser? Magic. The problem with Firefox is that there is no way to quickly access the zoom indicator and you are left wondering, whether the images are just blurred or you are surfing with the zoom level of 110%.

How to fix? Include the zoom indicator.

Firefox: Over Saturated Menu Icon

So you have a menu on the left side of the web browser (just like 99% of all the software). There is an icon and you have to click it. Okay, we get it.

Now, what I don’t get is why you have to bring its tonality by such margin that it distracts from the web page content?

Thankfully, Opera has somewhat fixed the issue in the latest desktop version.

How to fix? Reduce the color saturation.

Opera Mobile and Opera Mini: Over Saturated Menu Icon

As previously mentioned, there is no need to distract people with the shiny bright icons, most of the users are not rappers and definitely not squirrels. Please stop it.

How to fix? Reduce the color saturation.

Opera: Speed Dial Borders

With the release of Opera 11.50, someone has decided to mess things up and add white colored borders around the thumbnail. While I understand the thoughts behind this decision (white background site icons), it’s far from a good implementation.

Good: Opera 11

Bad: Opera 11.50

As transparency is replaced with the white borders, it stands out way too much when using dark backgrounds.

How to fix? Bring back the transparency.

Opera: Save Password Dialog

Back in the old days, Opera had a neat password wand dialog while Firefox… Not so much. Then one day, Opera has decided to copy poor Firefox implementation while Firefox copied Opera’s.

Why is this bad idea? The user login area is rarely in the top right corner, where such dialog placement would be justified. Furthermore, the buttons are so small that it’s hard to click them without slowing down the cursor.

How to fix? Change the buttons size (see Google Chrome example below) or use the older implementation.

Picture sources: About, SparkMyLife

Bonus: A Lack of Screen Utilization

Although screen size resolutions are getting bigger and bigger (wider, at least), some of the web browser makers do not seem to get it.

Let’s take Google Chrome for example; here is the default interface screenshot:

Now image this on the 24″ display.

Width: 1920 px
Height: 1080 px

The width is almost twice the height, yet, some chose (not Google Chrome in this case) to sacrifice the height instead.

There is a difference between minimal and bad UI. Who really needs a 1920 pixels address bar? There is a plenty of space for your zoom indicators and other, widely used features. Why not use it more often, so users won’t have to click on the menu icons every once in a while.

How to fix? Use it!

That’s it folks. My point is: leave the coding to programmers and let the designers work on the user interface and browser usability.

Anything else? Let us know.

This is the first part of a series. Subscribe for the Part 2.

Comic source: Sebastian Kübeck’s Weblog.