skip to content

On a notification badge in a freelance job marketplace, why cap the unread count at 99+, and what must the design still preserve?

level: middleimportance: must knowfreq 50%

answer

  1. the badge signals, the screen counts
  2. bounded width over an icon corner
  3. precision stops being actionable
  4. zero, dot and count variants
  5. say what is counted

basics

~20 s

Capping at 99+ keeps the badge's width bounded over its icon, and beyond two digits the exact number rarely changes what a user does next. The design must still expose the exact count on the destination screen and in the text alternative.

solid answer

~50 s

A count badge answers *is there something new* and *roughly how much*; the inbox answers *exactly how much*. A cap such as `99+` keeps the pill at two digits plus a sign, so it never grows over the icon it annotates or collides with neighbours, and a difference like 347 versus 351 is not actionable anyway. The cap is a per-size spec parameter, often 9+ on a compact badge. What must survive: the **exact count** where it matters (the destination, and a text alternative that says '128 unread messages' or 'more than 99'), **what is counted**, a **zero state** that hides the badge unless zero is itself information, a **dot variant** for 'something new' without a number, and a count that actually **clears** when items are read. The number is text, so it gets text contrast against the badge fill.

go deeper

for a junior

Recall the two reasons for the cap — bounded width and non-actionable precision — and that zero usually hides the badge.

for a middle

Explain the variants (count, capped count, dot), why the cap is a per-size parameter, and why the text alternative names the noun and the real count rather than reading the glyphs.

for a senior

Show judgment on badge blindness: require each team to define what it counts and when it clears, check digit contrast on every fill, and treat localization of numerals and the plus sign as part of the spec.

for a principal

Treat interruption as a budget: decide which product events are allowed a badge at all, and govern that list, because the system's badges only work while users still trust them.

## What a count badge is for A **badge** is a small indicator attached to another element — an icon, a navigation item, an avatar — that adds a count or a status. On a freelance job marketplace, the inbox icon carries the number of unread messages from clients, and the invitations tab the number of new job invitations. A badge answers two questions at a glance: *is there something new?* and *roughly how much?* It does not have to answer *exactly how much*; the destination screen does that. ## Why cap the count The familiar **99+ notification badge** exists for three reasons: - **Stable geometry.** A badge sits over the corner of an icon. One or two digits fit a pill of predictable width; "1284" would widen the pill until it covers the icon it annotates, collides with the next navigation item, or wraps in a tight bar. The cap bounds the width to two digits plus a sign. - **Precision stops being actionable.** At 7 unread messages a freelancer can plan; at 347 versus 351 nothing about the next action changes. "More than 99" signals as well as the exact figure. - **Scan speed.** A short, fixed-shape badge is read in one glance; a long number is read digit by digit. The threshold is a **spec parameter**, not a law. 99+ is the common convention for a standard badge; a compact badge on a small icon may cap at 9+, and a roomy sidebar item may allow three digits. The system documents the cap for each badge size, so every team caps the same way. ## What the cap must preserve | Must preserve | How the spec keeps it | |---|---| | The exact count | the destination screen shows it; the text alternative states it or says "more than 99" | | What is counted | the text alternative names the noun: "unread messages", not a bare number | | A meaningful zero | hide the badge at zero, unless zero is itself information | | Presence without a number | a **dot** variant when only "something new" is known | | Truthfulness | the count clears as items are read | A few of these deserve detail: 1. **The text alternative carries the number, not the glyphs.** Read literally, "99+" is "ninety-nine plus", which is neither exact nor clear about what is counted. The alternative should say "128 unread messages", or "more than 99 unread messages" if the client only knows the capped figure. The WCAG understanding document for 4.1.3 Status Messages makes the same point about a cart counter: the whole "3 items" string is the message, not the bare digit. How and when a change is announced is a screen-reader concern outside the badge spec. 2. **Zero usually hides the badge.** A permanent "0" is clutter and trains people to stop looking. The exception is when zero is news, such as a queue that the user is expected to drive to zero and wants confirmed. 3. **The dot is a distinct variant, not a small count.** When the product knows only that something changed, a dot without a number is honest; a "1" that means "some" is not. 4. **Localization is part of the cap.** Numerals follow the user's number system, the position of the plus sign follows reading direction, and some locales express "more than 99" with a word rather than a symbol. ## Contrast and color - The count is **text**, so WCAG 2.2 success criterion 1.4.3 Contrast (Minimum) applies: 4.5:1 between the digits and the badge fill for normal-size text. Badge digits are almost never large-scale text. - The badge's **presence** is information too; holding its fill to 3:1 against the surrounding icon and surface, the WCAG 1.4.11 Non-text Contrast bar for graphical objects, is a common and defensible practice. - If badges come in **severity variants** (an error red and a neutral grey), the variant must not be conveyed by color alone (WCAG 1.4.1 Use of Color); pair it with a glyph or with wording in the text alternative. ## Badge blindness The cap is a visual rule; what the badge counts is a product rule, and it matters more. A badge that counts promotional noise, or never clears because items cannot be marked read, is quickly ignored — at which point 99+ carries no signal at all. A good badge spec therefore requires every team using it to state what it counts, when it clears, and why that count deserves interrupting the user.

  • When should a notification badge use the dot variant rather than a capped number?
    Use the dot when the product only knows that something changed, or when the quantity does not help the user decide anything, such as a new version of a settings page. Use a number when the amount changes what the user does next, such as unread client messages. Showing '1' to mean 'some' teaches users the number is unreliable.
  • Why is a badge that never clears worse than no badge at all?
    It trains users to ignore the badge, and that habit spreads to every other badge in the product. Once 99+ is permanent, a genuinely urgent client message produces no visible change. A badge spec should require each use to define what is counted and the action that clears it.
  • What should a notification badge's text alternative say when the badge shows 99+ for 128 unread messages?
    It should name the thing counted and give the real figure, '128 unread messages', or, if only the capped value is known, 'more than 99 unread messages'. Mirroring the glyphs as 'ninety-nine plus' is neither exact nor clear about what is being counted.

A 'mailbox full' flag on a letterbox: it tells you to go and look, not how many letters there are — the exact count is inside, and the flag comes down once you empty it.

saying these in an interview costs you the question

  • The cap exists because big numbers overwhelm users, so the true count can be hidden everywhere
  • The badge's text alternative should read out exactly what is shown, such as 'ninety-nine plus'
  • Always show 0 so users can confirm nothing is waiting
  • A dot badge is just a count badge with the number hidden for space
  • 99+ is a fixed standard every badge size must use
  • Badge severity can be shown by fill color alone because the number is already there