Intro to UI Chips

You may wonder how chips differ from buttons when they look almost alike. While they do share visual similarities, chips and buttons serve distinct purposes. Chips, like those saying "Reserve a Table" or "Order Delivery" in a restaurant app, are context-specific, enhancing users’ current journey. They appear as a group of interactive elements.

In contrast, buttons, such as "Save" and "Cancel" in a dialog box, offer consistent actions for significant progression. Buttons are essential for major steps like moving to the next or previous stage.

The key is to use chips for supplementary options and buttons for crucial actions, ensuring a balanced and user-friendly interface.^[1]

Also called assist or suggestion chips, action chips are similar to buttons as pressing them triggers an action, usually redirecting users to another page or widget. Action chips are more condensed compared to buttons, allowing for easy placement in a row. This streamlined design is beneficial when you want to present users with multiple, concise options without occupying excessive screen space.

During an interaction, assist chips offer various functionalities:

• Transformation: Can turn into modals or transition into full-screen views of new content.
• Adjustment: Can readjust to display more results inline.
• Action trigger: Can trigger actions or show progress and confirmation.
• Dynamic text: Start with a verb and adjust text dynamically if the state changes (e.g., "Save" to "Saved").
• Placement: Displayed after primary content, such as below a card or persistently at the bottom of a screen.^[2]

You know when you start typing the email address of a contact in Gmail, their complete info appears? Then when you select it, it wraps into a cleanly formatted name. We call this an input chip. Its job is to make using inputs easier by offering suggestions and verifying known entities.

Input chips support editing, allowing users to modify their content, such as correcting an email address. When in edit mode, the chip temporarily reverts to a text string. Editing can be initiated by interacting with the chip, either by selecting it or through a second interaction after the initial selection. These chips can also expand upon clicking to display more detailed information.

Filter chips allow users to refine and narrow down content based on specific criteria or categories. They can be a good alternative to segmented buttons or checkboxes when viewing a list or search results. A single chip can also be selected, offering an alternative to segmented buttons, radio buttons, or single select menus.

However, avoid mixing chip set behaviors. All chip sets on a page should be either single-select or multi-select. When combined with a menu, the filter chip opens a list of selectable options.

For example, on an online shopping site, filter chips may include categories like "Price Range," "Brand," or "Size." Users can click on these chips to filter products and view only those that match the selected criteria.

Filter chips can contain a trailing icon (x) to dismiss the option or an arrow to expand into a menu to display more options. They can be stacked horizontally and span multiple rows, making them adaptable to various interface layouts and enhancing the user experience by keeping the filtering process intuitive and organized.

A basic non-interactive chip is a simple, textual label that provides information about the category or topic to which an element belongs. It serves as a navigational aid in user interfaces, especially when dealing with diverse and potentially overwhelming content.

For example, on a news website, articles about technology might be labeled with the basic tag "Technology." When users encounter this chip, they instantly understand the overarching category of the content.

Suggestion chips are useful for guiding users by presenting dynamically generated suggestions, such as possible responses or search filters. These chips help users narrow their intent quickly and efficiently, improving their overall experience. For instance, in a mailing app, suggestion chips might offer quick replies like "Thank you for your reply," "Talk to you soon," or "Message me asap." This allows users to respond quickly without typing out their full response.

When creating suggestion chips, it's best to use nouns or short phrases that are clear and concise. Aim to keep each chip under 20 characters to ensure they are easy to read and interact with. This brevity helps maintain a clean and user-friendly interface.

When dealing with tag labels, opt for nouns or short phrases based on the context. Choose labels that succinctly convey the essence of the category or action associated with the tag. For instance, in a blog interface, opt for concise labels like "Technology," "Health," or "Travel" for categorization. If dealing with action tags, choose brief phrases, for instance, instead of a lengthy tag “Make a restaurant reservation”, go for “Reserve a table.”

In order to ensure your chips are visually appealing and functional:

• Use relevant and clear leading and trailing icons that are easy to understand. For example, using a star icon at the beginning of a chip for "favorite" items, and a cross icon at the end of the chip that can be clicked to remove it.
• Consider rounded borders for an aesthetically pleasing chip design — while this is not a rule, most UIs style chips this way, so users are more likely to find this styling intuitive.
• Create a distinction between the chip background (fill color) and page color. Use distinctive borders or shadows to make them as prominent enough but not too attention-grabbing. Keep in mind that chips are only for secondary, non-critical actions and style them as such.
• Make sure the contrast ratio of the text label to the background is at least 3:1 to ensure readability.^[3]

Key states for chips include:

• Default (normal view)
• Hover (when moused over)
• Active (during interaction)
• Focus (selected for action)
• Disabled (unavailable for use)

Properly indicating these states is crucial for usability and accessibility, ensuring the interface is user-friendly and responsive.

Effective methods to denote state changes include:

• Different colors or shades to signify different states
• Microinteractions in response to user actions
• Slightly changing the element's size
• Shadows to make elements appear raised or pressed
• Borders or outlines to indicate focus or active states

The minimum recommended touch target for interactive elements is 48x48dp (48x48px at 1x pixel density) according to Material Design Guidelines. Make sure your chips adhere to this requirement. To further enhance touch-friendliness in your chips so that users don’t accidentally select the wrong options, provide ample and consistent margins of at least 8dp (8px at 1x pixel density) between tags.^[4]