Recently my list of followed organizations (I usually try to follow real people over companies) grew a bit, especially these talking design. It didn’t take long until articles started showing up on my feed (many of them repeatedly… very repeatedly). Since companies try different gimmicks to keep you on their website and to read “just one more article”, I had like multiple of them open; that’s what inspired this issue of Design Time about different use of browser tabs.

Don’t break the original purpose

My very first experience of dynamic title tag was when Gmail (Google) introduced, experimental back then, plugin-in for showing amount of new messages in the inbox, on the tab (as part of page’s title, what later has been added to favicon – about this in a moment). It was (still is) a pretty neat feature for everyone using browser client, 5 open tabs and you know exactly if there is something new without opening the one dedicated to e-mail, especially when awaiting a message. Twitter informs you about new tweets in similar fashion, it appends number of new items to the title tag. That’s cool.

gmail_inbox_number

On the other hand, there are very invasive ways of editing title, changes that disturb the way you use the primary function of tabs which is sorting and labeling websites. When you see an interesting article and want to somehow start interaction with it to avoid losing, the simplest way is to open it in a new tab and “forget” about it until you finish skimming through a timeline, list of recent articles or just other task that is taking place at the same time and reading article would be too big a distraction.

Not so long ago I did just that, started reading one of multiple chosen articles and had to leave it for later. Suddenly, when time to finish reading the piece had come, I could only see 4 tabs with “Don’t forget to read it…”. Well, I didn’t, but now I have to search for it because labels with titles of articles (what a coincidence, it’s like someone put it there on purpose) was gone.

wtthll

Website was changing page’s title every time tab wasn’t the focused/active one. I admit, the option seems like a really cool gimmick at first and would work with one article, when user can indicate website by favicon, but with multiple instances of the same website it failed.

Favicon is no longer just an icon

Not everything affecting a tab is bad, let’s see another example of good use. Changing title tag to pass a message may not be a good idea, but there are other ways to grab attention using tab’s content and letting it stay friendly at the same time.

If you use Slack or Reddit (I’m not sure if it’s from RES) and a new message is present, “website” executes very simple action, it adds an indicator to the favicon. Reddit has little red dot with number of new notifications, Slack went a step further and assigned different indicators to represent different states.

The favicon should change if you have a Slack tab open. Gray = no new activity, white = new activity, & a red dot = new mentions.
Slack on Twitter

Both features are helpful without being instrusive. Alternative method would be to use sound (e.g. GTalk/Hangouts via Gmail, Facebook Messenger), but it’s easy to miss it when away, it can get lost if music or video is playing, and it’s not always appreciated (e.g working environment, classes *cough cough*).

reddit_vimeo

When writing about indicators, it would unfair to forget about Vimeo, video hosting similar to YouTube. In addition to simple playing/paused status changed based on video’s action, they also communicate in real time process of uploading content to their website. When our video is being send out to Vimeo’s servers, both favicon and tab’s title with present information about progress of an upload. Similar solution can be seen on Flickr, when uploading photos.

Tabs don’t have to be one way street

Music and videos, it may be obvious that in last few years sound developed its presence inside tabs, but how often do you realize that?

otmm

Since auto-play ads are not as popular (or it’s ad-blockers being more and more common…) we don’t ask yourself this question that often, but everyone has that moment “What’s that sound? Where is it playing from?”. Usually it meant clicking furiously through tabs and finding media content responsible for unexpected noise. Nowadays it’s relatively easy to locate troublesome tab, just take a look and check which of your tabs has sound indicator. For Opera it’s a little, animated equalizer (the coolest indicator probably) over favicon, in Firefox text’s style (tab title) will change to italic and Chrome will add small speaker next to the “close” button.

It’s also worth mentioning that Chrome (I didn’t see it in other browser out of the box) is planning to introduce muting tab via sound indicator which can be activated as an experimental feature. If you turn it on (chrome://flags/#enable-tab-audio-muting > Enable) you will be able to mute tabs just by clicking mentioned above speaker on the tab.

youtube_spotify

In addition to visuals delivered with browsers, websites are providing their own indication of song being played. It’s pretty standard feature, present for example on Spotify and Beartport, to add play icon next to the favicon. To provide more information, YouTube and Spotify are doing live updates on currently playing song’s title (or video in case of YouTube). Bandcamp as an independent music marketplace is focusing on album instead of single tracks, so tabs are labeled with album’s title and favicon is album’s cover, provided by author of music.

Final word

I’m certain that this post didn’t cover every interesting use of a tab and favicon in web design, but it clearly shows that browser tab is no longer just a labeled marker, it became an active extension of a website. It can communicate information and status, be a representation of content of a website, even let us control media (sort of, you will need extension for that still).

It’s going in a good direction and I’m looking forward to see even more ways of utilizing browser tab’s features. Thanks for reading and I hope you enjoyed this Design Time.