Why You Need Tags Feature in Web Apps & How to Design It

Web Application Tags

In one of the web applications that I designed, we had to design a tagging feature that would let the user tag certain objects in the application.

The web application was meant to let the users schedule the production lines of the company. In the process of doing that, they would generate Work Orders that would get released to the operators of every machine.

Looking at the Work Orders, the operators would come to know what they have to work on.

The client wanted us to design the Work Orders in such a way that before they got released, the user releasing them would be able to tag the Work Orders. Normally, the user would just tag the Work Orders with the names of the Marketing and Sales people who had booked the order.

This way, if the people on the shop floor wanted to quickly search for all the Work Orders of an order booked by a particular Sales person, they would be able to do so easily.

In the process of designing this tagging feature, I learnt quite a few things that I will be talking about today. For example why to use tags, when you should use them and how to design them properly.

So lets get started.

 

Why Tags are Useful

I know, you must be wondering why should you let the users tag anything in your web application. And you are right.

Not every web application needs to implement Tags.

Some web applications are meant to store millions of rows of data. For example, a forum like Stack Overflow would be storing millions of threads that the users have created.

Stack Overflow Tags

And it is a natural requirement for applications like these to let the user tag or rather classify the data into different buckets.

For example, on Stack Overflow, the user can tag the threads that he has just created. Let us say the user has tagged his thread as “UI Design”.

When some other user is creating a thread, he can tag his thread with the same tag or create a new one altogether.

Anyone searching for information on “UI Design” can then use the tags to see all the threads that were created by other users for discussing UI design.

As you can see, tags can be a very useful feature to have in a web application. And ideally, you should think of designing tags for your web application in the following two cases:

  1. You want to let the users classify the data of the web application in a way that is not provided by the application out of the box and
  2. You want to let the users search data in the web application using search criteria other than what you provide in the Search feature.

The next logical question to ask is why not just provide a field in the UI with some pre-defined values that can help the users classify the data. For example, in case of Stack Overflow, we could just provide a field called “Thread On” and let the user choose values like UI Design, UX Design, Usability etc. for that field.

There are two problems in doing this:

  1. You should know before hand what the possible values would be and
  2. The user will not be able to set any value other than what you have provided.

If you know what the possible tags would be or don’t want the users to create anything of their own, then you should not provide a tagging feature.

But if you want to let the users classify the data, as they want, then you should provide the tagging feature.

 

Advantage of Tagging

The biggest advantage of tags is that they allow the users to quickly search the data.

It is not always possible for users to search something in applications solely on the search fields provided by the application.

Furthermore, if you are designing a generic web application to be used by multiple customers then you simply cannot design your web application search for each and every customer.

Tags allow users to create a quick reference to the things they are interested in. Later, using tags the users can search all the things related to that Tag easily.

 

Disadvantage of Tagging

The problem with tagging is that users have full control on creating a tag. So, one user may create a tag called UI Design while other one may create a tag called User Interface Design.

Furthermore, if many users are going to use your web application and each one creates their own tags then you might end up having thousands or millions of tags in the web application.

 

How to Design the Tags Feature

After you have decided to have the tags feature in your web application by evaluating its pros and cons, there are 3 things that you need to do while designing the tags feature:

  1. Design the UI to let the user create the tag,
  2. Provide the capability to make the tags public or private and
  3. Let the users search the data using the tags.

Let us discuss these one by one.

 

Designing the Create Tag UI

In most of the cases, the design of the user interface to create tags is very simple. You just have to provide a text field in which the user can type in the name of the tag.

WordPress is an example of this design. The user can tag a post/article that he is writing by entering the name of the tag in the provided text box.

Wordpress Tags

If the user wants to add multiple tags then he can just enter all of them separated by a comma.

You can off-course think of having some other design, but in most cases a simple text box is more than enough.

 

Public and Private Tags

You may also want to let the user create public or private tags.

As the names imply, public tags are the ones that are visible to all the users while private tags are only visible to the user who created them.

Providing both private and public tags is not a common thing to do. But sometimes you may want to do that.

For example, lets say you are designing a web application for the Human Resource (HR) department of a company. The HR Manager would want to classify the employees into High Performers, Highest Paid, Promotion Overdue etc.

In such cases, the HR Manager would want to keep the tags private and not expose them to all the users.

 

Using Tags to Search the Data

As I said earlier, the biggest advantage of using tags is that the users can search for the data easily.

The most common practice is to let the users search for the data using a Tag Cloud. Tag Cloud is nothing but a collection of all the tags presented in the form of a cloud. The font size of a tag in the cloud depends on the number of times it has been used as compared to the other tags. The most commonly used tag is displayed in a bigger font.

You can present the tags as a Cloud or as a List. Something like this:

Tags Cloud

Tags List

The users can simply click on the tag and the search results would display the data that has been tagged by that particular tag.

Although not common, you can also think of having the Tag field as a Search field in the search region.

Tags in Search

The users can set the tag field along with the other search criteria while performing search.

 

Conclusion

Designing a tags feature is not that difficult but deciding on when and where to have the tags feature in your web application is difficult.

If you want to let the users classify the data in the web application so that they can easily search for it later on, then having the tags feature might make sense in your web application.

Have you ever designed a tags feature in your web application? Were there any other design criteria that you considered while designing the tags feature?

I would really like to know in the comments below.

And as always, if you liked this article, then please do share it with your friends. I will really appreciate that.

UX Designer?

Ever Wondered How to Design Web Apps In Just 5 Steps?

Sign up for the free Rapid Web App Design Course to learn how to rapidly design web apps that people will love to use!

Leave a Comment

Your email address will not be published. Required fields are marked *