It was completed in Jan 2021. As a member of the Interact design system team, I was assigned the task to document guidelines for tags, patterns for tag filtering, and create tags as components in the library.

Background

I started to be in the Interact Design System team in the middle of 2020. It was my first formal task, requested by the Interact Office team.

1. We were asked to add tag component in the design library so that the designers could use it as standard component in the Interact apps.
2. The main purpose for the tags is filtering. We were asked to explore the interaction patterns for filtering by tags so that they could use it in the product.
3. Interact products are across platforms. So patterns should work for both desktop and mobile apps.

Desk research

Design pattern exploration

• General reseach for filtering by tags: A research report was created in the beginning to explain the basic understanding of tags, filtering, how tags work in filtering, the role of tags in search, etc. Below is the report.

• Interact context: Based on the use case in Interact Office and collected use cases in Interact branded products, 2 hypothesis were made before the pattern creation.
  • There won’t be a lot of attributes provided for filtering, compared to e-commerce platforms.
  • In the search, the logic should always be “and” when multiple filters are applied. Now we don’t see the needs to also bring “or” to the tag filtering. If we see it is necessary in the future, we would allow users to choose the logic themselves.
• Scope for guidelines: Depending on the use cases / user needs, filtering is presented in different formats. Most of the time, it could be simple in the form of a search input field, several drop downs, tags. In complex cases, it could also be super powerful. An advanced pattern allows users to filter content and tags at the same time. Or it could be in the form of advanced search/query.

In this documentation, the focus was on the more general cases and filtering by tags.

Visual exploration

From a visual design perspective, explorations have been done on shapes, colors, states, and the display in both light and dark themes, etc.

Below is the spec.

Guidelines of tags

Summary

All guidelines of the components in the Interact library follow the same structure.

• Anatomy: key elements in tags
• Usage: typical scenarios in Interact products
• Behavior: interaction behavior of a tag
• Placement: design pattern, position on the UI

Tag is a keyword or term assigned to a piece of information, describing it from a certain angle. 

They could be user-generated, auto-generated or from machine learning. It provides a simpler way for users to complete their tasks or a much easier way for temporary filtering, compared to advanced search (query).

Anatomy

1. Text: The text could be a word or a small phrase. Make sure it’s free of jargon and easily understandable by the users.
2. Container: The shape of the container is a visual indication of a tag. The length of the container depends on the length of the text and the size of the thumbnail. The height is fixed and optimised for touch.
3. Thumbnail (optional): Thumbnail could be an icon, a logo, an image, an avatar or a visual indicator. This thumbnail should be relevant to the text and should support the message that text is trying to convey.
4. Delete button: Delete button is a must have when the tag is removable in our guidelines. It gives a visual indication, telling users that the tag can be removed.

Tags with  a delete button usually appear in two cases:

• when users create the tags themselves
• when a filter is applied and the tags are displayed in an applied tag area.

Usage

Tags can be powerful and flexible tools for users. On the other hand, maintaining them properly takes quite a lot of effort. Hence, make sure that the tags truly help users achieve their goal more easily, before deciding to use them. Tags can roughly appear in three different scenarios.

Tag creation

Tags can be created by a user. This approach is often used during a ‘creating / setup’ flow, such as adding tags to a building, floor, meeting room, store or device. These tags will later on help with easy filter and searching. These type of tags have a cross on the right side which allows them to be removed.

Suggestive filtering

Tags help to describe a group of information. When tags are used for filtering they are usually without a clear structure but are all relevant to the user. Multiple tags can describe the same piece of information but from different perspectives. As seen in the example on the right, “Region Eindhoven”, “Open 24×7” and “No bakery” are all related to the search term “Store” but there is no clear hierarchical structure in these tags. All of them describe that same word “Store” but from different perspectives. One from a “locations” perspective, one from a “Time” perspective and one for a “Resource” perspective.

In the case of suggestive filtering, tags will automatically appear based upon the current context. In the example on the right, the current context is defined by the keyword “Store” that the user typed into the search field. In this case the tags help further narrowing down the amount of search results.

In this case tags work exactly like toggles. Clicking a tag will immediately apply that tag, clicking it again will remove the tag (but the tag will remain visible).

Advanced filtering

Tags can be used in combination with advanced filtering, often when there are a lot of filtering options. Just as during the “Tag creation” part (consult the paragraph above) these tags are being added by the user. In the case of advance filtering this can be done using a dedicated filtering panel or calling a filter functionality with a button (see example on the right).

In the case of advanced filtering,  the tags show what filters are currently active and allow for easy removal by using the cross icon to delete.

Behavior

Length and layout

The length of a tag depends on all the length of the elements inside, the text, the thumbnail and the delete button. 

Though truncation is allowed when the phrase or sentence is extra long, try the best to avoid it. When users create tags themselves, it is recommended to have a maximum width for the tags that the UI can afford. Maximum width is better than the number of characters when the application is multilingual. 

Do – The text can be a word or a short phrase.

Caution – Be careful with long phrases. Tags are usually shown multiple at a time, meaning long tags will limit the amount of available space.

Long sentences
Long sentences will decrease the efficiency of a tag and its readability. In this scenario, truncation is allowed, but do not break every phrase or sentence in your tags. Consider using different styles of writing in order to preserve its core message. For example: instead of a tag called “light with Bluetooth” consider just the tag “Bluetooth”.

Don’t – Put an extra long sentence in the tag or stretch the container to different paddings.

Don’t – Wrap the text, stretch the height of a tag, or change the radius of the round corner.

Actions

Tags can behave as radio buttons or toggle buttons.

In this scenario, the options are usually in conflict with each other. Users can only choose one option at a time and therefore they are mutually exclusive.

Tags can behave as checkboxes or toggle buttons. These are the tags that are mutually inclusive where two options can be chosen at the same time.

The logic is always “and” when multiple tags are applied for filtering. This is because the purpose is to help user narrow down the results. Therefore, there is no need to also bring “or” to the view. If we see the necessity in the future, we would allow users to choose the logic themselves.

When a tag is deletable, make sure only the delete button (the cross icon) can trigger the deletion. 

Placement

Tags can be placed under the search field as filtering options.

There is no limitation to the number of tags. Users can do a horizontal scroll to view all the options. Be mindful of the item that can’t be displayed completely on the screen. Provide a proper visual indication that there are items the horizontal page fold and the list is scrollable. Try to avoid making it feel like a UI bug.  

Do – A right chevron should be provided on pointer devices.

Do – Users can swipe to see all the options on touch hybrid devices.

Caution – Mix variants of tags.

Tags can be listed as filtering options in a side panel or on the right side of a page.

Though it is allowed to list the tags in multiple lines, the best display for the tags is no more than 3 lines. Hence, it would be better to consider another way to display the options when they occupy multiple lines. For example, displaying them as an item list, grouping them and introducing expanding and collapsing the options, etc.

Caution – List the tags in multiple lines.

Don’t – Provide a single option as a tag.

UI design of tag component

Types

1. Primary: As the name suggest, primary is the recommended style for tags.
2. Outlined: Outlined is used only when the background is light gray, or it is necessary after considering the consistency, or any other possible reasons for a style refinement.
3. Applied (Primary): Applied tags are always with delete buttons, not only indicating the state of tags but also deletable. Only the area around the cross icon is clickable. Applied primary tags are the recommended style for applied tags. Don’t mix them with outlined tags.
4. Applied (Outlined): Applied tags are always with delete buttons, not only indicating the state of tags but also deletable. Only the area around the cross icon is clickable. Applied outlined tags are used when the background is light gray. Don’t mix them with primary tags.
5. Activated: Activated is the on/activated state for both primary and outlined tags.

* The actual size for touch hybrid and pointer is the same while tags for touch hybrid devices are with a bigger clickable area. The height of the clickable area is 44 dips.

Usage

Users can create the tags themselves.

Do – Use applied primary tags when users create tags themselves.

Tags are provided as options for filtering.

Do – Use primary tags as a horizontal scrollable list as filtering options.

Tags are applied for filtering.

Do – Use applied primary tags when tags are applied as filters.

Animation

The animation between the states are using a fade-in with the following specs.

Begin (hover/focus)	Middle (pressed)	End (exit hover/focus/pressed)
Pragmatic fast	Pragmatic fast	Pragmatic fast

Variants

There are 2 variants for all types of tags.

1. Text only
2. Text + icon

States

There are 5 states for all types of tags.

1. Default: The normal tag state.
2. Hover: Responded when user hovers over a tag.
3. Focus: Responded when a tag is located by using the TAB key on a (virtual) keyboard.
4. Press: Responded when user clicks or taps a tag.
5. Disabled: If an option is not available at the moment, the disabled state can be used.* States are the same for all types of Touch Hybrid and Pointer tags.

References

From Nielsen Normal group

• Defining helpful filter categories and values for better UX
• Filters vs. facets: definitions
• User intent affects filter design
• Mobile faceted search with a tray: new and improved design pattern
• Site search suggestions

Others

• Material design: chips
• 9 tips for using the multi tag filter sidebar Shopify theme section
• How to craft a kickass filtering UX
• 5 things to be mindful of when you design filters
• Filtering and sorting best practices on mobile
• Display “applied filters” in an overview
• Filter UI design: a horizontal toolbar can outperform the traditional sidebar
• 9 filtering design best practices to improve e-commerce UX
• The current state of e-commerce filtering