tutorials

Badges UI design research

Badge design UI/UX tips. Purposes, use-cases, UX patterns reviewed, and other things to consider.
January 2022 · 4 mins read

by Roman Kamushken

Userpic

What is Badge?

Badge (aka Tag) — small overlapped UI item which indicates a status, notification, or event that appears in relativity with the underlying object.
Badge UI design exploration

Table of contents

Badge Anatomy
  • Content #
  • Purposes #
  • Behavior #
Styles & Themes
  • Colors #
  • Corner radius #
  • Outline stroke #
  • Using shadow #
UX & Use cases
  • Messaging #
  • Filtering #
  • Ecommerce #
  • Social #
  • Marketing #
  • Categorizing #
  • Tagging #
SetGPT is a free chat gpt clone aimed for UI, UX and product designers, writers and solopreneurs

Research, copy and ideate with SetGPT!

We've launched the alternative ChatGPT clone dedicated to UI designers, UX researchers, writers and indiehackers.

Powered by the latest OpenAI gpt-3.5-turbo model, this free chatbot is the perfect tool for those in need of intelligent and innovative insights, wrapped with a slick UI and sophisticated user experience.
SetGPT is a free service; however, authentication is required

Anatomy

Content
The default content of Badge's body is

  • Numeric value — to display the number of events
  • Text caption — to tag, name or categorize items
  • Icon — to show up the status of the underlying object
  • No item (dot-only Badge) — to inform without details
Purposes
Badge with a Numeric value is used to represent the number of events related to the parent UI item:
Badge UI design exploration
Use Badges with a Text caption to specify a label for the variety of objects (e.g. to tag a topic, categorize items, or indicate views amount):
Badge UI design exploration
Use Icons inside Badge to show up the condition of a related component, or response to a user with the feedback.

For example, it's clear there is a kind of error with synced devices settings section and there is something downloaded successfully:
Badge UI design exploration
Dot-only Badge is used in order to just attract your attention to the specific control and encourage you to explore what is inside:
Badge UI design exploration
Behavior
The Badge's container expands to the left, right, or from the center depending on the number of caption symbols. Use "+" or "k" abbreviations to decrease symbols amount and save space:
Badge UI design exploration
When Badge stretches to the right, make sure your neighbour UI elements aren't pushed aside in your layout, due to a container width is now enlarged.

Styles & Themes

For a deep themification in order to set Badge more distinct, you have to apply several properties:

  • Colors — to regulate the Badge priority
  • Corner radius — to set a Badge's container shape
  • Outline stroke — to visually separate Badge from underlying item
  • Shadow — to set a style with hovering effect
Colors
Solid Badges are more visible than shaded (where the opacity is reduced to 15–20%). Us them in priority cases, while shaded Badges may be applied for other cases, e.g. categorizing topics, tagging, etc.:
Badge UI design exploration
Choose Badge's colors wisely in order to make it more attentive or recognizable on every surface, especially when placed over images:
Badge UI design exploration
Corner radius
Adjust corners radius for Badges to vary container shapes. Rounded Badges are a popular use case, whereas enlarging to pilled when the counter is growing. You may use a square Badge in order to fit to your layout specs
(e.g. for squared UI design — IBM Carbon design system):
Badge UI design exploration
Outline stroke
This UI design small hack helps to separate a Badge and make it detached and detectable almost over every background color. Just stroke Badges with the same color as the surface:
Badge UI design exploration
Using shadow
By setting a smooth shadow behind Badges (use the same color), you will simulate a tiny and elegant hovering effect:
Badge UI design exploration

UX & Use cases

There are several UX patterns where are Badges most commonly used:

  • Messaging
  • Filtering
  • Ecommerce
  • Social
  • Marketing
  • Categorizing
  • Tagging
Messaging
In conversational patterns (Chat, Messages, Inbox) Badge used to inform about new incoming messages. Dot distinctly divides fresh emails and recent:
Badge UI design exploration
Filtering
It's user-friendly to overlap a Badge over filtering control when some options were selected before.

Below we see some tooltips on the map. It's clearly distinct — some filtering options were picked affecting on results, and Badge has now appeared at the app corner:
Badge UI design exploration
Ecommerce
In most shopping apps Badges are used to display the number of products added to a cart:
Badge UI design exploration
Social
Icon-only Badge represents additional properties/statements for the person:
Badge UI design exploration
Dot-only Badge displays user's status — Is it online, or not:
Badge UI design exploration
Marketing
There are cases when Badge helps to encourage users to take action or perform a choice commercially valuable.

Here is a Badge placed over segmented control to highlight the necessity to choose yearly payment:
Badge UI design exploration
Categorizing
Separate content categories by using Badges to label and divide sections making them distinguishable by using different colors:
Badge UI design exploration
Sometimes Badges are used as tags to highlight special deals:
Badge UI design exploration
Tagging
Implement Badges to display extra properties for a content item, or to visualize the number of parameters the specific item is associated with:
Badge UI design exploration
This is all you need to know to design better Badges. Now it's time to visit the homepage of Setproduct, where you'll find a huge number of free and premium UI Kits and design systems.

Also, we specialize in custom design and development. We will be happy to help you with any project: Mobile & Web Apps, Websites, B2B, CRM, Delivery Systems, Online Learning Platforms, and lots more.

You can check our portfolio on many platforms: Dribbble, Twitter, Figma, Reddit, Pinterest, Linkedin. Also, make sure to check the Testimonials of our happy customers.

Related links

More useful tutorials
Avatar UI design exploration — The states of userpic component
Avatar (aka Userpic) — is a component used to represent a user's profile picture. The default content for Avatar is empty state, initials or user's picture.
Accordion UI design exploration — Styles, states, usage, templates
Accordion (aka Expansion panel) — is a vertically stacked list of options that can expand/collapse to reveal or hide more associated content.
Appbar UI design exploration — Anatomy, specs, states, templates
Application Bar (aka Appbar) — displays prior in-app controls related to the current app section.
Badge UI design exploration — Tips & tricks, usability, and use cases review
Badge (aka Tag) — small overlapped UI item which indicates a status, notification, or event that appears in relativity with the underlying object.
Breadcrumbs UI design exploration — Anatomy, UX tips, use cases overview
Breadcrumbs — is a composition of navigational links to reveal the current position in case of multi-level nested structure for a website, dashboard or application.
Buttons UI design – Comprehensive tutorial on UX, styles and usability
Designing buttons that work well requires taking into consideration the style, feedback, and accessibility. The design goal should be to make the them as intuitive as possible so the user can interact with Buttons seamlessly.
Dropdown UI design – A guide for Anatomy, UX tips, and Use cases
Unlock the power of Dropdowns. Discover the core elements, custom theming options, usability tips, and accessibility best practices. Design Dropdowns that captivate users and align with your brand's persona. Ready to embark on this design adventure? Let's dive in!
Chips UI Design – An essential tutorial for optimal UX & usability
Learn the step-by-step process of Chip design. Take a deep dive into component design and learn step-by-step with this comprehensive tutorial, including: Chips anatomy, States, Use cases and Usability tips.
Input UI Design – Optimize data forms UX with expertly crafted text fields
Follow this in-depth guide to create Input components that blend seamlessly with your app UI design, while optimizing forms filling experience and overall usability.
Checkbox UI design – Unlocking anatomy, proven UX tips, and inspiring use cases
This tutorial is dedicated to providing practical answers to your Checkbox design dilemmas: from addressing the complexity of Checkbox styling to solving the challenges of ensuring an inclusive UX.
Subscribe to Setproduct
Once per week we send a newsletter with new releases, freebies and blog publications

More to ☕ read

Show more ⬇︎