'Chrome: The design side to software'

Chrome, the web browser we all love.

But aside from its marketing strategy, what's making us keep on using it? Why not go to the competition, like Firefox and Opera? Why are the (apparent) Open Source lovers ditching FX, just for Chrome?

I admit, large selection of apps and themes are sure a plus, but they are found on FX too.

I like to personally believe that one of the main reasons that the huge amount of people that use Chrome are using it because of it's incredible design, and wonderful UI.

In this post, I will be talking about Chrome's design, focusing on it's UI and UX, and will be talking about the level of detail.

A brief overview

Chrome is arguably the best browser that I have seen. It's simple, neat, and out of the way. You don't ‘see’ chrome, you just see your browser window.

This is in contrast with other browsers, which use big, bold, colorful buttons for their settings and other things.

But no, Chrome doesn't do that. It stays out of the way, it knows that it's job is not to be seen; just to stay out of sight.

*

When you see chrome, you're presented with two main things. A top bar, showing all your tabs, and a long, sleek bar underneath — which does simply everything.

Neat, simple, efficient, and clean.

Tabs and the omnibox

At the top, you find the tabs. The tabs are in a easy shape which doesn't bother the eyes.

The tabs have a low opacity — so they don't distract you. It is only the selected tab that gets full opacity.

Beneath that is the omnibox. The omnibox, again, is simple in essence. Just a simple star icon to it's right for bookmarking, and a ‘page’ icon to know the site information (Mostly about security), but rest, it's clean. It's used for everything, whether it be search, navigation, or searching within sites.

On it's left are 4 buttons, back, forward, refresh, and home.

Out of those, I find home to be useless — who uses the home button, anyway? It could probably be done with, and we'd get something more minimal. I guess this is the only thing where Chrome bugs me.

The rest of the icons are not too dark, as not to attract attention.

It ends there for most people, but you can enable the bookmarks bar. One feature that I like is that you can set the bookmark bar so it only shows the favicons — and nothing else.

What also is great that Chrome doesn't allow to ‘pollute’ this minimal experience by third party tool bars. All of the extensions which require as much space as a toolbar are placed towards the right of the omnibox, and are represented by icons. A great way to manage their design, and to enforce brand philosophy.

Quick dial

Now that's another cool thing about Chrome. It's quick dial page.

Presented as the default homepage, the quick dial is a responsive grid of most visited pages.

A sleek bar at the bottom expands it's usage, giving the options to:

  • Apps
  • Other devices
  • Recently Closed
  • Web Store

But I'll steer your attention towards the thumbnails now.

Well, just look at them. Beautiful. A good way to present a thumbnail, while not attracting focus to the actual image, but at the same time keeping it recognizable enough so that the person knows what site are they seeing.

These thumbnails are dynamic, and the images time to time. The bottom border's color is decided using the primary color of the favicon — another neat trick.

The hover is nice too. The gradient's opacity is lowered, and the thumbnail gets a better, darker border. Once you hover, you see an ‘X’ icon on the top right of the thumbnail, which allows to remove the thumbnail from the page. Once done, you get an option for undo, and the thumbnail is quickly replaced by another.

This page is a good example to show good UI. Mistakes are easily reverted, everything is as expected, and this page can cater to those with special needs quite easily. A good example of work.

Attention to detail

Finally, we come to the part where we talk about the detail level in Chrome.

Firstly, whenever a tab ‘updates’ (like a new email, or a message on Facebook), there's a glow on the tab, so you can spot what happened where.

Secondly, the way to reorder tabs is simply amazing. The animation is smooth, the action is clean, and there's a sort of ‘magnetic’ feel to the dragged icon. Due to this magnetism, even if I keep my pointer near the omnibox, it automatically sticks to the tab.

If I take the tab anywhere else, it opens up a new window with the tabs. Really clever and nifty.

Conclusion

I find Chrome to be a perfect example of good user interface, and provides a great user experience. As you read in my post, there are a lot of things to be learnt, mainly to remember the original goal of the design.

And to conclude this post, here's a quote…

What is designed, should not be seen, and what is seen, should be designed

Discuss on Twitter