E6.11.3badge hierarchydesign

Badge rank must match the importance of the content

Aliases: badge rank · dot inflation · mark priority

What it is

A view can show dots, small numbers, large numbers, and high-contrast chips at once. Those shapes form a rank: the stronger mark is read as “handle this first.” Rank has to line up with the importance of the content—mentions of you, a failed payment, a security alert on the upper rungs; likes, feature tips, marketing on the lower rungs or off the corner entirely. Importance is task consequence, not the open-rate someone in growth wants. When every badge uses the same rung, there is no rung.

Why it happens

Visual search on a screen is captured first by the most salient corner mark. If that mark is a marketing dot, a security dot has to compete in the same search, and usually loses, because marketing updates more often. When rank is inverted, global allocation of attention is wrong: busy marks train the eye to look for noise, and a quiet important mark is treated as none. Rank is also compared across entrances—a “3” on messages and a red dot on home are read as one priority table. If the product has no such table, each feature picks how red it is, and people invent a table of their own, usually with the loudest first.

Where it stops holding

Under assistive color-blind viewing, redder is not enough to make an upper rung; shape, number, and placement have to lift together. OS-level badges sit outside the app’s rank; stacking an equally loud in-app mark on top makes a double upper rung. Decorative dots in an empty-state illustration are not badges and should stay out of this rank, or the illustration’s circles will be read as unread. A transient “recording” disc is a status lamp, not an unread badge; put it somewhere else so two kinds of circle do not share one meaning.

Applying it

  • Inventory every entrance that can take a dot or a number, split them into at most three consequence rungs, and give each rung one shape (dot / ordinary number / high-contrast number).
  • Keep marketing and feature tours off badges by default; if they must appear, they get the weakest rung and can be turned off.
  • Upper-rung badges should be rare at any one moment. Many upper rungs lit at once means the definition of importance has already failed—merge or demote.
  • Verify by circling every corner mark on a screen, ranking them by salience, then ranking them by task consequence. If the two lists disagree, rank is inverted.

Related

  • Within the group: E6.11.1 A dot means presence; a number means quantity · E6.11.2 A dot that cannot be cleared is ignored for good
  • Adjacent: E5.17 Navigation badges and hints · E1.01 Button hierarchy · E6.02 Banners
  • Search terms: badge hierarchy · notification priority · visual rank

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/E6.11.3