Tags (or labels) have been around for a long time, and they serve a clear purpose: organizing content. The construct comes from the real world use of labels, glued or clipped onto manilla folders. In a digital world, we use tags to organize our blogs, our notes, our emails, our journals our notes, our meetings, our portfolios and so on.

We've been accustomed to tagging our content, but I feel many user interfaces have "tagged on" (pun intended) the experience of tagging as an after thought. I feel there hasn't been any standardization, so depending on what website/app I'm using, tags always seem to work differently. I recently took on a project that deals with document organization (e.g. your bills, invoices, bank statements, all in one place). One of the key value propositions is the ability to grab your documents digitally, organize them, and have easy access to them for future reference. But when it came to tagging my documents, the experience left me wanting more.

This frustration pushed to me research and understand what makes a good tagging experience. I looked at popular websites/apps and in this article I've highlighted four that I think do an above-average job:

Tumblr - for blogging
Evernote - for capturing notes
GMAIL - for email
Day One - for creating a journal / diary

Each of these tools share common tagging traits and each provides us with a few key best practices to learn from. It's also interesting to see that tagging experiences can vary significantly from a desktop to mobile environments. At the end of the article I provide a checklist of features that can be used as reference when designing a tagging functionality.

Tumblr

Tumblr is arguably the most popular blogging platform today. It's dead easy to setup a blog, apply a theme, and start posting your thoughts / pictures / quotes / articles etc. Due to its public and social nature, Tumblr uses a hashtag "#" to identify tags, which makes searching and discovering content very easy. In comparison, non-public or non-social apps typically do not use a hashtag. Let's take a look at Tumblr's desktop and mobile interfaces.

Tumblr uses an "tag" icon to indicate the tags section on the page, and it's right below the post (not as an aside), prompting users to tag their post before publishing it. This icon is a common trait among most tagging interfaces (but not all).
The hashtag "#" is used to prefix each tag.
Tags must be separated by commas only, but there is no indication of this requirement to the user.
Automatic tag suggestions are available based on previously entered tags.
To remove a tag, you mouse over a tag, which then becomes strike-through text. By clicking the tag, it is removed. This is different than other websites that use an "x" to indicate removing of a tag (see more below).
While browsing Tumblr, each post displays tags associated in a footer, again prefixed with a "#", keep the experience consistent.
Users are able to search content by using tags in their search queries.

From what I can tell, one key feature missing from the desktop experience is being able to browse or search your previous posts by searching using your tags. Let's now take a look at Tumblr's iPhone app.

In the Tumblr iPhone app, tagging maintains a very minimal interface.

Again, a tag icon indicates the location to enter tags.
Users are instructed that they can separate tags by using a comma. This indicator is missing in the desktop version.
As soon as a comma is entered, the tag becomes a blue bubble indicating that it's attached to the post. To remove tags, you simply tap back-space on the keyboard.
Each post displays its associated tags on-screen, without having to switch to a different view (e.g. Post Details).

The biggest difference between mobile and desktop is that the mobile interface does not automatically hashtag "#" each tag. This is perhaps to save space due to the smaller screen real estate. Overall the Tumblr mobile interface is very simple and is not bogged down by tons of features.

Evernote

Next I looked at the one of the most popular note-taking tools, Evernote. Similar to Tumblr, it comes with both desktop and mobile clients. Let's start with desktop first.

Tags have a dedicated section in side-panel, and a tag icon is used as a visual cue. There is also a tag count, indicating how many times a particular tag has been used.
Absent from the main screen are the tags associated with a particular note. I discovered they are tucked away in the info panel.
A user must click "Show Details" to toggle the details pane for a note.
In the details pane we can finally see the tags associated with the note. A user must then click the "pencil" icon to edit a note's details.
When entering tags, there are no on-screen indicators of whether tags need to be comma or tab separated. Tag suggestions are present, which is great. To remove a tag, a user mouse overs a tag, which triggers an "x". When clicking on the "x" the tag is removed.
A great feature is the ability to search your notes using tags (missing from Tumblr). Also, when you select a tag from the left sidebar, the tag automatically appears in the search bar, although my eye did not jump to the search bar immediately.

In this desktop interface I found it hard to identify the tags associated with a note. A user has to really drill-down in order to edit a note's details and tags. It would've been great if tags were visible by default, as to quickly skim my notes when a tag was selected. Let's see how the mobile app differs.

First of all, the visual interface looks much more polished, more professional while at the same time friendly.

Tags are featured on the home screen, allowing users to quickly jump to this section and find notes by using tags.
In the note view, tags are not immediately visible, as per the desktop version. Users have to click the info icon to toggle the "Note Info" panel.
Users can then click on Tags to add/modify tags associated with a note.
Different from Tumblr, when adding new tags, a user has to click the "+" icon to the right of a tag. From above we see that Tumblr opted instead for comma separated tags, consistent in both web and mobile views.
Tag recommendations are available, as well a tag search.
When viewing Tags from the homepage tab, users can search for tags, which is great. To erase tags users have to click "Edit", then click the "-" button.
An improvement over Tumblr is that users can filter tags by "Name" or "Count".
On-screen instructions are present, but they are missing on the desktop version.

Overall I was pleased with the tagging experience on the Evernote iPhone app. The "Add Note" screen however seems very cluttered, with three nav-bars present before I even start to type a note, causing too much vertical hierarchy. The cursor starts nearly half way down the screen. I prefer Tumblr's screen where I only see a title and body text, with one button for "Options" to toggle additional features.

GMAIL

We all know how painful email can be, especially organizing and trying to find emails from the past. Google has done an amazing job at searching through email, so I've found myself not using GMAIL's label features very often. But I've also seen friends' inboxes that are fully labeled and color-coded, so obviously it provides value for others. Let's look at GMAIL on the desktop.

Labels are a dedicated section in the left sidebar in the main GMAIL interface. It's tricky to locate it however, since there is no "Labels" heading or dedicated tag icon.
We do see a tag icon in the to toolbar, and this is primarily how to interact with labels. GMAIL makes it very easy to assign multiple tags (or labels) to an individual email, by using checkboxes.
Adding a new label is easy using the input bar, which doubles as a search bar for existing labels. Also, as you type, label suggestions are available. But unlike in Evernote, I could not find an option to sort my labels by most used; they are by default sorted alphabetically A-Z.
If a label is not found, there is an option to create a new label.
Adding a new label forces you to jump into a popup box, where you can name your label. Another option is to sub-categorize a label by nesting it.
Each email displays its associated labels inline so you can easily glance at your emails and see their labels. You can erase a label by mousing over it then clicking the "x".
You can manage each label by assigning it a colour, showing/hiding it, or removing it completely using a popup info panel.

Overall, GMAIL's labelling feature is very robust and is aimed at satisfying the needs of power users. One of the big differentiators compared to other tagging experiences is the ability to color-code your tags/labels. This can make it very easy to quickly identify a label on screen, but I'm guessing it can become tricky when using 10+ colors. Let's see how the experience is on the GMAIL iPhone app.

To manage an email, you must first select it by tapping the checkbox to the left.
Next you toggle the actions pane using the arrow icon, and select "Label". Again having a tag icon is consistent.
You can apply multiple labels to an email by selecting checkboxes (consistent with the desktop experience).
Once you apply labels to an email, they are displayed inline for quick glancing.
One of best features in GMAIL is the ability to Undo many (if not all) of your actions. This has been documented in many articles and is great UX feature. It's great to see it on both desktop and now mobile clients.
Similar to GMAIL on the desktop, there is a dedicated section for Labels in the left sidebar for quickly accessing your most used labels.

The mobile tagging experience is okay at best. It's lacking some key features including the ability to add a new label, to change a label, or to remove a label from the master list.

Day One

The last example is Day One, a journalling app for iPhone, iPad and Mac, that enables users to jot down quick notes about their day-to-day lives. It won the award for 2012 Mac App of the Year. It has a stunning visual interface and is hands-down an absolute pleasure to use. Let's take a look first at the iPhone version.

Users can access the tag functionality by using the tag icon from the bottom actions pane. The icon also indicates how many tags a note currently has.
Once you open the Tags editor, you enter tags separated by commas. As you type, there are automatic suggestions available.
After you've added a tag, you can tap on it and are able to remove it or browse notes that share that tag. You can also remove tags by simply tapping back-space on your keyboard.
For a more robust tagging function, you can tap the "+" button. Here you are presented with all available tags, and you are able to sort alphabetically or by most used. Tag counts are also available similar to Evernote.
You can add / remove a tag to a note by simply tapping on a tag. No checkboxes are required as in GMAIL.
Tags are a dedicated section on the app home-screen, similar to Evernote and to an extent GMAIL.
Each note displays its tags inline when browsing in Timeline or Search views.
Also, when viewing a note in full-screen, the tags are again displayed inline at the bottom of the screen.

Overall, the mobile experience feels very natural, light-weight, and well-thought out. It does not feel overwhelming, even though the tagging experience has a very robust set of features built in.

As for the Mac client, I was very surprised to see that tagging has not yet been implemented! I'm sure this will come soon, but it's strange that tags are missing in this current state.

Tagging experience: design principles

After analyzing these four tools and the way they each implemented tagging, I noticed many similarities, but also many differences. Tumblr is very simple to use, but it has limited tagging functionality. Evernote's mobile app had great tagging features, but the note-taking view seemed visually packed with too much vertical hierarchy. GMAIL is the most robust experience but may feel overwhelming to a regular user due to sheer amount of customization available. And Day One had arguably the best tagging experience on the mobile client, but tagging was non-existent on the desktop client.

I've compiled a list of "design principles" to consider that encapsulate the overall method and experience of tagging content. Please feel free to reflect on this list when designing your next tagging experience:

Using a tag icon to indicate the tags section
Ability to create new tags, view assigned tags, edit tags, and delete tags (CRUD)
Ability to search your content using previously used tags
Automatic suggestions for tags as you type
Ability to color-code tags
Ability to sort available tags (1) Alphabetically or (2) Most Used (i.e. by count)
Displaying counts next to each tag
Ability to assign multiple tags to a content piece at the same time (i.e. using checkboxes)
Providing instructions to a user that tags need to be comma separated
Displaying tags inline with the associated content (i.e. not hiding the tags in a separate Details pane)
Is the content public / social by nature, and if so, does using a hashtag "#" improve the experience?
Ability to use tags to sub-categorize content (i.e. nesting)

It's easy to simply add all of the above features to an interface, but careful thought and consideration has to be given to the overall flow of the tagging experience. The experience can drastically differ depending on the device: desktop, iPad / tablet, or mobile / smartphone. Another aspect to consider is how important tagging is to the overall user experience, and I believe this comes back to the frequency that a user may wish to access their content in the future (e.g. daily, weekly, monthly, yearly).

Any feedback / suggestions are much appreciated! Please leave a note or say hello in the comments section below.