It's the Small Things: Browser Tabs and Usability

It's the Small Things: Browser Tabs and Usability

Ben Voss
Ben Voss

August 05, 2013

One tool of user experience and usability intrigues me and I never see any discussion about it online: the browser tab. They are simple and commonly overlooked, but in certain situations, the images and information presented in them can give the user a better experience when using your product. If you have a deep understanding of what your application should accomplish and how a person may interact with it, browser tabs can be a powerful, detailed addition to an impressive experience of usability.

Small details make for a better experience

1. Countdown timer: When you start a countdown, it will auto update the browser tab to show your current time during the countdown. This is a great user experience move, since most of us will set a timer for a reason, and we will be off doing other things. Putting the countdown in the tab makes it easier to gauge where we stand.

Countdown browser tab

2. Soundcloud: When you play a song, they will put a triangle play icon, the song title and artist in the tab. This is useful because you can easily locate the tab by the triangle. Then when you are playing a playlist or something on random, you can easily see what you are playing without having to scroll tabs.

Soundcloud browser tab

3. Facebook/Twitter/Gmail: It seems to be a pattern for highly social apps to give you real-time system status updates. Want to go do something but keep an eye on if something happens? Just keep the tab open.

Facebook browser tab Twitter browser tab Gmail browser tab

4. Github Status: One glance at the tab and you know the status:


Github operational browser tab

Or down?

Github down browser tab

How is it done?

There are two pieces: the favicon and the title.

In the case of github, when the system is up, they will tell their favicon to represent success:

<link rel="icon" type="image/png" href="/images/status-icon-green.png">

Otherwise failure:

<link rel="icon" type="image/png" href="/images/status-icon-red.png">

What is shown in the title element in the head of your HTML is what is shown as the text in the browser tab. Javascript can be used to automatically update on notifications -- like song changes, follower tweets or time changes on the countdown timer.

A tool to help your users.

Browser tab design is another tool for user experience designers to utilize if how the user acts can be made easier by using it. Can you better accomplish the visual goal of your site by enhancing the browser tab? Can you make your product more pleasurable to use by giving specific information the user can use in accomplishing that goal through the tab title or image?

The tab designs above work well because the tool was matched to a behavioral problem. Users multitasking and using multiple sites concurrently is guaranteed. A deep understanding of how you users act while using your site will help you figure out if this tool can help make their experience smoother.

Browser tabs -- something commonly overlooked -- could offer a more detailed and rich usability to your product, if you have a problem specific to the tool of browser tabs could help fix. They are a great example of how simple tools inherent in the browsing experience can help make your product more effective and easier to enjoy.