Configuring Chips

Refining chips in our design system with visual and usage distinctions

Design Systems

UI Components

9 min read

Background

In this case study, chips refer to the UI component that look like pills or rounded rectangles, displaying information inside of them. Coined by Google, chips in Material Design are used to help people enter information, make selections, filter content, or trigger actions.

At Rubrik, chips existed in our design system before I joined. Over time, the usage of this component category grew to accommodate new requirements, however, the lack of clear component guidelines created inconsistency and confusion. I was tasked to improve the ease and clarity of chips for designers on the team using them, as well as for customers who interact with them in the product.

Role

Senior Product Designer, Design Systems at Rubrik

Stakeholders

UX Designers, Visual Designers, UI Engineers

Timeline

June – August 2022

Initial Problems

The two main problems that prompted this investigation came from both sides of the user experience.

1. Not enough visible affordance for users

In separate usability studies, our UX research team noted that customers often tried to hover or click on chip components that were, in fact, static. Since the same chip was used for both functions, they couldn’t discern between chips that were meant to be interactive (i.e. clickable) and chips that were purely informational from the context alone.

2. Not enough flexibility and guidance for designers

Part of the reason why there was confusion from users was because most of our existing chip components were designed to always be interactive in some way. When designers needed to convey small amounts of information, chips were often the component they used, despite the intended interactive behavior. Therefore, the current set of chip components was insufficient in accommodating the use cases designers had, resulting in inconsistent applications of the component throughout the product.

problem statement

How can we standardize the usage of chip components to improve internal component adoption and external user understanding?

Research

Material Design

Before I could propose new rules for our chips, I needed to learn more about the origin of the component. I started my competitive research by referencing Material Design 2 and Material Design 3 documentation on chips.

There are 4 types of chips in the latest version of Material Design:

Assist Chips
Filter Chips
Input Chips
Suggestion Chips

Assist Chips are smart actions, where the text usually begins with a verb. They can be thought of as an alternative to buttons, but the actions are supplemental and contextual to the user’s current task.

Filter Chips, essentially, filter content when they are selected. You can have multiple or single selection filter chips. They can be thought of as an alternative to switches, checkboxes, or multi-selects.

Input Chips nest information that the user has entered in a field, inside a chip. The interaction of text converting into chips happens dynamically as the user types.

Suggestion Chips are somewhat similar to Assist Chips, wherein they provide predictive responses that are contextual to the user’s current task. This is a newly-defined chip type in Material 3.

There were a couple of common characteristics in all of these chip types:

Chips are highly functional. They help users either complete their tasks or find what they're looking for faster.
Chips appear in multiples. With the exception of Input Chips, where you could have only one input chip, all the other chip types will never present just one option.

I compared these definitions to the chips in our design system and noticed that the only type of chips that we had in common with Material Design was the Input Chip.

example usage of input chips in Aura Design System

Although we also had a component called Filter Chip, the functionality was different from the one in Material Design. Filter Chips in the Aura Design System displayed the user-selected filters together in a row, rather than allowing the user to apply filters through them. By Material Design’s definitions, they were actually just another form of Input Chips.

example usage of filter chips in Aura Design System

Other Design Systems

I also looked into other design systems of similar maturity to see how they distinguished different types of chips. The most relevant design systems I referenced were:

Atlassian Design System (Atlassian)
Carbon Design System (IBM)
Lightning Design System (Salesforce)
Elastic UI (Elastic)
Ant Design (Ant)

To my surprise, the term chip actually did not show up in most of the component lists. Instead of chips, this type of component had names such as tags, badges, pills, and even lozenges.

I searched online further for any documentation that defined the differences between these terms. It was difficult to find reputable sources that covered this specific topic, but what I found from an assortment of online forums and articles was the following:

Semantic Terms

Labels

A label is the most generic term for any classification component. In code, a label refers to a HTML tag used in forms for describing what the input is for. Calling another component a label can cause confusion since it's so widely used to describe the text in other components.

Component Terms

Badges

Badges are components holding small amounts of information, often numeric but could also be text. A common example is the app notification counter. They're often thought as a circle, but they don't necessarily have to be.

Chips

Chips are used for selecting, filtering, and inputting content. The term was created by Google’s Material Design system.

Pills or Lozenges

The name, pill or lozenge, comes from its shape, rather than functionality. The component doesn’t need to have any border radius to be called this name.

Sources:

Initial Proposal

After reviewing the literature I could find on chips, I came up with a three-part proposal to our current set of chips.

1. Nomenclature Distinction

The first step was to create nomenclature or terminology distinction between non-interactive and interactive chips, by introducing Badges.

Badges would become the new term for informative labels that hold small amounts of information, either numeric or text.
Chips would remain the term to represent options presented in a specific context, that make tasks easier for users or content easier to sort.

2. Visual Distinction

With a new component category created, there needed to be a clear differentiation between what was considered a Badge versus a Chip. Leveraging the existing visual design decisions we had in our system, I outlined these key differences:

Badges would be circular or pill-shaped, in a status or data visualization color.
Chips would be distinguished by their rounded rectangular shape, neutral outline color, and teal-blue hover states.

3. Types of Chips Distinction

For the components remaining in the Chips category, I defined 4 types of chips that would be bespoke to our design system, but still referenced Material Design's original definitions.

Edit Chips
Filter Chips
Filter Select Chips
Input Chips

Edit Chips

Edit Chips display discrete information that is currently selected. Clicking on an Edit Chips allows you to edit that selection, usually inside a modal or tray. The updated selection will reflect in the label of Edit Chip.

Filter Chips

Filter Chips show all applied filters together in a row. A trailing “x” icon in the Filter Chip indicates it is removable by clicking anywhere on the chip.

Filter Select Chips

Filter Select Chips are used above data visualization or tables, to filter the content below. They behave like selects that open a dropdown menu.

Input Chips

Input Chips convert separate strings of text you entered in a field into chips. Similar to the Filter Chips, these can be removable by clicking on the trailing “x” icon. They can also be reordered through drag and drop.

Feedback

Designer Feedback

I presented my initial proposal to my manager and UX designers on the team that frequently used chips in their work to get some feedback. Most of the group liked the new separation of terminology and usage guidance for chips. What they felt was missing from the proposal was further visual distinction for the components that would fall under the new category of Badges.

For most use cases, badges wouldn't have any interaction, but there are some cases where we want to a tooltip to be triggered on hover, or link the user to another page on click. Could we create visual distinction between static and interactive badges so that it's intuitive for the user?

Cat Utah

Director of Product Design (my manager), Rubrik

Engineer Feedback

Before finalizing the proposal, I also synced with the engineers on the UI Components team, who were the engineering counterpart for the design systems team. They agreed with the visual changes and usage guidance, however, the proposal to rename a component category would be more costly.

Changing the name of a core component would effectively break every existing reference to that component. Doing so would require multiple days' of effort to go through all files to correct the code.

Michael Abernathy

Staff Software Engineer, Rubrik

I shared this constraint with my manager and while we valued the terminology distinction on the design side, the engineer team had other items of higher priority to tackle in their sprint. Since this item was purely an internal change, we ultimately decided to keep the current naming and move forward with changes that were more scalable to execute.

Final Proposal

I made some core changes to the initial proposal, according to the stakeholder feedback I received. The final proposal that went into implementation were the following three items:

1. Chips vs. Chip Rows

Due to engineering constraint, the new name Badges was scrapped, but I was still able to create some level of nomenclature distinction in design, by aligning the Figma component names with the existing names engineering used. Instead of Badges and Chips, we adopted Chips and Chip Rows, respectively.

Chips hold small amount of information (i.e. tags, labels, status messages). The component can be static or have a hover/click interaction.
Chip Rows represent options presented in a specific context, that make users' tasks faster to complete or content easier to sort.

2. Static vs. Interactive Chips

Within the Chips category, I created new static variants for each component, while the existing variants were kept as the interactive versions. I added a new boolean property in each chip component, called Interactive, to allow designers to toggle between each variant.

Static chips only have a color border without any color fill. The Feature Chip is the exception, because it has no border.
Interactive chips have a 56% opacity border, and 4–8% opacity fill. There are two exceptions: 1) The Static Chip with Icon is always interactive, and 2) the interactive Feature Chip has a rounded rectangle shape compared to its pill-shaped static variant.

3. Chip Row Types

The definitions on the different types of chips from the initial proposal were mostly unchanged. I added documentation of the logic behind how the Chip Row components differed from Chips.

The content shown in Chip Rows are either user-selected values or user-generated strings, as opposed to product-generated status messages or categorization labels in Chips.
The selection made in Chip Rows affect the display of data on the page.
Chip Rows are visually-styled like long rectangles, because of their contextual and supplemental nature, often appearing in multiples.
The color of Chip Rows is limited to a monochrome border, and our teal-blue accent colors for interactive states.

Here's a snapshot of how I organized the new chip components in our dark and bright theme design system libraries in Figma:

Retrospective

Working with a design system of later maturity comes with intensive projects like this one where I am tasked with re-evaluating components that predate my time on the team. When the component is well-established with a good amount of usage documentation, it could be hard to propose changes without contradicting another rule or creating more confusion. And when the component has been around for a while without much documentation, it requires more investigative effort just to get a sense of the component's applications to use as a baseline.

In this deep dive on chips, although there were some intended behaviors developed in the component, the lack of specific usage examples required me to survey designers on the team to understand how they have been using chips in their designs. What I'd do differently next time in a similar project would be to involve the engineering team earlier on to get their perspectives, in order to avoid possible feasibility issues down the line.

To cap off this project, we need customer validation on the updated chip applications. As we roll out these new components in the next season's release, the UX Research team will gather customer insights in their continuous research sprints on the usability and helpfulness of the new chip components. From those findings, there will possibly be further refinements on the visual styling and interaction of our chips.

Check out my other work

The Need for Low Fidelity

Developing a wireframe library for better design discussions with stakeholders

Refactoring Filters

Improving the usability and usefulness of table filter components

Rolling out Rubrik’s UI Themes

Designing the first time user experience introducing bright and dark themes

Configuring Chips

Refining chips in our design system with visual and usage distinctions

Initial Problems

1. Not enough visible affordance for users

2. Not enough flexibility and guidance for designers

Research

Material Design

Other Design Systems

Semantic Terms

Labels

Tags

Component Terms

Badges

Chips

Pills or Lozenges

Initial Proposal

1. Nomenclature Distinction

2. Visual Distinction

3. Types of Chips Distinction

Edit Chips

Filter Chips

Filter Select Chips

Input Chips

Feedback

Designer Feedback

Cat Utah

Engineer Feedback

Michael Abernathy

Final Proposal

1. Chips vs. Chip Rows

2. Static vs. Interactive Chips

3. Chip Row Types

Retrospective

Check out my other work