UX @ Red Gate

UX Snippets #1: Chrome’s “Loading” Icon

| 2 Comments
Categories: User Experience Tags: , , |

I’ve been using Chrome for a while and despite its many bugs (on the Mac) it’s still managed to become my browser of choice. Reason? It’s a great user experience all round: impressively fast and well-designed from the big picture down to the nitty gritties.

One I particularly like is the way the loading icon (the one that tells you whether a browser is doing something or not) in Chrome works. Most browsers just have an activity indicator that spins and spins telling you that the browser is doing something but not really telling you much else. The screenshot below shows the Safari version:

Safari Progress Indicator

Chrome engineers added a nice touch. When Chrome is actively downloading a web page (or other data) for you the spinning thingy spins clockwise and at a much faster speed (top image). On the other hand when Chrome is waiting for a response from the server it indicates this by having the activity indicator spinning in the opposite direction and rather slower.

Chrome's two different progress indicators

Chrome is a gold mine of new UX and UI experiments some of which are quite different from the way we’ve gotten used to browsers behaving. This little one is one of my favourites because once you get used to it adds a new dimension of information without actually adding any new component that takes up screen real estate.

If you’ haven’t already, give Chrome a spin and see what you make of it for yourself.

  • cliff

    the problem is that the icon is completely obscured if you have a lot of tabs open. I wish they would change that.

  • Colin Shaw

    Thanks for this page; I was wondering about the revolving indicator. Also, just FYI, your first use of the word “it’s” is incorrect. “It’s” is a contraction of “it is” (or it has) whereas “its” is a possessive pronoun and so you should use “its” in this case. Not a big deal, but I thought you might like to know. No real need to publish this reply.