0

This is what I'm referring to: http://twitter.github.com/bootstrap/components.html#badges

Is "badge" the commonly agreed upon term? Facebook and countless other sites use this feature to instantly update users via messages, requests and notifications. The UI pattern is becoming so common I fully expected to find something authoritative, like would with "dialog" or "modal". But what I've found has been all over the place: badge, notification, notifier, messages, jewel, update icon, bubble, counter, count... But which is the most semantic and accurate?

I fully acknowledge that I'm attempting to split hairs, but after initially intending to do a quick search on Google to find out what this pattern was called, I've now come to the conclusion that either: a) there is no consensus on how to describe this very common UI pattern. or b) I'm searching in the wrong places with bad assumptions and incorrect terminology (I'm hoping it's A, but I'm man enough to admit that it's more likely to be B).

StackOverflow's "badge" tag description is "A badge is a concise visual indication of something important to the user. For example, the number of unread emails in an email app can be displayed as a badge on the app's icon."

Alas, I'm still not convinced that the word "badge" is even remotely appropriate here. this image is what I see when I think "badge"

Not to mention, my team is working on a feature that is completely unrelated that we've decided to call "badges" (not "badgers", very important distinction), so when I saw Bootstrap's .badges component I started wondering if we were incorrectly applying a "known" concept.

So what is that little notification update icon thingy called?

Edit: after seeing a couple of replies I want to clarify that I'm asking this in the spirit of semantic coding. I don't really "care" about the design or usability aspect of the pattern, I am more interested in staying committed to being as semantic as possible with my code. After muddling through terribly written markup from countless open source projects I've come to fully understand the value of semantic coding. Understanding how to effectively describe classes is more than just a "UX" or vocabulary thing. It's about clean code, DRY code, organized semantic code that describes the content as accurately as possible, and so on.

jonschlinkert
  • 10,872
  • 4
  • 43
  • 50

1 Answers1

2

The term "badge" normally refers to a small indicator that is added to an icon to show the current status of the thing the icon references. For example, if an email icon has a small number in a colored rectangle that indicates the number of unread emails, that's a "badge". The "badge" is placed on the icon the same way a badge is placed on someone's shirt.

Twitter's use of the term "badge" to refer to an indication that stands on its own and isn't applied to another icon seems to be an extension of this concept. Personally, I don't like it because it's less like what a badge does and more like simply an indicator.

David Schwartz
  • 179,497
  • 17
  • 214
  • 278
  • thank you that was _exactly_ the answer I was looking for. I just couldn't find any context for why "badge" made sense until you clarified that "badges" are intended to be "worn" by another element (to paraphrase). I can see your point about Bootstrap's use of the term "badge", based on your answer it makes sense that "indicator" would be more appropriate than badge for Bootstrap. Nothing in the docs supports the concept of a badge, hence the question. Mark Dotto does a commendable job of keeping the code semantic in general though. – jonschlinkert Apr 12 '12 at 06:25