Why do the popular browsers copy each other's user interfaces?

Question

Why do all the popular browsers blatantly copy each other's user interface?

See these screenshots to understand what I mean:

Mozilla Firefox (see Australis is landing in Firefox Nightly and Measuring Australis)

Update: Australis has now been pushed into mainstream Firefox. See https://blog.mozilla.org/ux/2014/03/introducing-the-update-experience-for-australis/.

Google Chrome

Microsoft Internet Explorer

Is there some reason why don't they innovate and create their own unique interfaces?

I'm not saying that they should "go against the flow", or anything like that, but why do they have to all look so similar? Why not rearrange the interface elements? Why do they all need an "App" button at the far right of the toolbar?

I'm not asking for an answer to all those (separate?) questions, but I don't understand why they all need to be (almost) exactly the same.

Answer 1

The interfaces may look very similar to you, but they are constantly evolving, and have been refined for many years. Firefox in particular is very open about their UX process, and how they rely on user telemetry to understand how people use their browser. They don't simply copy features. They try to understand their users.

In the early days, browsers could gain market share with better support for web standards, and increased performance (improved rendering speed, faster Javascript execution, and reduced resource consumption). Then screen real-estate became more important. Tabs were popularized by Firefox (even though they initially placed them below the address bar). Chrome improved on the design by moving the tabs above the address bar. The navigation bar saw a marked reduction in "clutter", increasing the available screen real-estate dedicated to rendering the current web page.

Firefox introduced the keyhole design for their back and forward buttons (a larger back button, with a smaller forward button), motivated by the realization that people tend to hit "back" more than they hit "forward" in a browser. The keyhole design is now gone, but you can still spot the influence in the IE screenshot, and the fact that Firefox has no forward button.

Even the ubiquitous "home" button has largely disappeared. The UI changes are often subtle, and the driving force remains streamlining the user's ability to work efficiently. Sometimes this involves changing the way menus are designed, or which options to offer. I am not saying that aesthetic considerations do not come into play, but that in itself is a major undertaking to ensure that the browser looks the same across different operating systems and devices.

Have a look at the Mozilla UX blog for some insight into their process and design philosophy. You can also read up on the Chromium UX page about their design motivations and assumptions. The Internet Explorer team has their own page too, although it seems to be geared to a wider audience. There are various Wikipedia pages dedicated to the history and evolution of the popular web browsers. It makes for interesting reading, even without an exclusive UX focus.

EDIT: If you are interested in the quantitative side of things, have a look at this blog post from the Firefox team that discuss the results of their 2012 heat-map study. They highlight exactly what they've found out about how users use their browser, and how that impacts their design decisions going forward.

Answer 2

All similar systems ultimately converge to the most optimum solution. It's happened with browsers, text editors, IDEs. You'll find that very few tend to deviate drastically from the norm. This extends to real world entities as well. TV's, Phones, etc.

The more drastic your deviation from the similar-system norms, the more steep the learning curve for your users.

Answer 3

Its a question of design consistency as people will migrate from one browser from another and if the browsers have similar icons and functionalities and user flows, the learning curve will be relatively lesser.

To quote this article

Consistent representation of these objects means the user recognizes them for > what they are when encountered. Consider Twitter's developer display requirements:

Without consistent representation, a user will struggle to understand what they are looking at ("Is this a tweet, or a user and their bio?") and they won't know what to expect out of object-tied actions like Favorite.

Another important thing is consistent behavior as users with a similar design are accustomed to a similar behavior and dont really have to think about what to do next.To quote this article

Consistent behavior is also important. The available actions/verbs should obviously be consistent within a single object type (e.g., retweeting a tweet always works the same way) but they should also be consistent between objects of different types. For example, following a topic and following a user on Quora is a very similar experience: They are both sources of new content for your home feed.

These principles create an environment where, over time, the user will be able to anticipate what will happen before they perform an action. Consistency becomes something like a promise that you make to the user ("whenever you see the color blue then you can assume every time that it's a link"). Further, they will be able to bring these expectations into new features or aspects of the product that they haven't explored, speeding up the learning curve.

A predictable system seeps into your subconscious to the point where you don't even notice it. You're in the zone, even if it's just for a few seconds at a time. Conversely, if you learn that you can't trust a system to make good on its promises, then you'll always have a moment of cognitive pause which leads to stumbling, confusion, frustration. As Krug says, don't make 'em think.

Answer 4

It's a natural evolution of any group of competing software products to converge like this. The browser companies want market share, and often copying and consistency is the means toward that end. If a feature (e.g. tabs) is found to improve market share it will be copied. Competing products evolve towards similarity, converging on the common set of features that work (work == improve market share).

Occasionally evolutionary leaps occur (e.g. tabs by Opera in the 1990's), draggable tabs (Chrome, 5 years ago?), and these incur more risk paired with more potential gain, but there's nothing to stop the competition from copying these leaps thereby returning towards convergence.

Browser software has a level of ubiquity that discourages these leaps, so in this class of software there's more convergence (copying) than risk taking.

It's important to note that market share is the driving force, and usability/UX is merely a means to that end. Secondary note: the design of the software isn't always the main driver of market share, Internet Explorer for many years had an arguably inferior design than it's competition but managed to dominate the market, and before that AOL had a very high market share with an inferior browser.

Answer 5

quick answer: to reduce the cost of migration.

By "cost" I mean "difficulty". Adopting certain standards or common practices for design, button placement, etc., makes it easier for the clueless new user to "just know" how to do what they have to do. If the new user can't figure out how to do what they want in the new browser, they will not want to use the new browser, even if it is "better". There is nothing more frustrating than looking at an interface and wondering how in the world you do what you need to do. Copying what others have done, and that people are familiar with, is a good way to help new users adopt and be productive with your software, whether this new user is clueless or not.

Answer 6

Slight digression, but I think it's important history...

The original intent of HTML was that it would be purely semantic markup and individual browsers would be able to render it differently to reflect screen real estate, user preferences, ongoing innovation in user interaction techniques, and so on.

Then people started treating HTML as a rendering language. They'd invested time and money in doing a very specific page design, and they wanted it displayed Their Way Darn It. Unfortunately that mindset largely took over, and the very concept of innovation in HTML rendering became unmarketable.

There have been sporadic attempts to break that trend. CSS was supposed to be an attempt to return to separation between semantic markup and rendering. So was the XML-through-XSLT-to-XSLFO path. And at one point the plan was for HTML5 to move in that direction. Alas, HTML5 instead doubled down on being a rendering language.

Given that monomaniacal emphasis on the part of website designers that they want to be the ones in control of the user experience, it's become hard for browsers to diverge from what has become the "conventional" browser UI and renderings. This is not a desirable state of affairs, but it's the corner we've painted ourselves into.

Answer 7

It's usually a bad idea to "innovate and create their own unique interfaces", because a browser is a tool.

Imagine buying a car and having to spend days learning how to drive it safely, because the designer thought it would be cool to make the steering wheel work like the tiller on a boat.

Making end-users go through unnecessary learning curves is always a sign of incompetence (EDIT: or hostility, or narrow self-interest, though I prefer to believe in the dictum "never attribute to malice what can be explained by ignorance") in the developer. Tools should work as people expect them to work, even if they've never used one before.