How can I design these badges so they are associated with quantity and not "todos"?

Question

Background

In the image above you see my sub header which has a few links. The header is shown when you're on a customer profile.

I want the user of the site to instantly get feedback regarding the customer profile they're on. They should instantly see how many meetings, documents is connected to a profile.

To show this, I've used badges and made them red so they really can't be missed.

The problem

Not surprisingly, the feedback I received is that people think the badges are "todos" which will disappear when they click the link and do something. People associate them with ios/facebook badges.

But it's not todos! It's quantity of things connected to a customer, which I want them to see without having to click through every single link.

Ideas how to show a badge/number representing quantity and not todo?

Answer 1

Clearly the markers aren't working.

I'm sure there will be quite a few possible answers to this but here's my suggestion: Remove the red marker and write the value underneath the icon. This would also allow you to specify what was being counted or how it was being counted.

Something like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

You are copying a pattern that most will immediately recognise as the number of unread mail or messages on their smartphone. The red background color is the same and its connotations with "warning!" helps carry the idea that you should do something about it. The color also makes the badges the most important thing on the page. The inbox-unread count thing is a really strong and emotional association so you need to step very far away from it.

Some directions:

• shape: avoid the dot/circle shape
• color: avoid signal colours if you don't want it to carry meaning
• position: don't put it on the top right, don't have it slightly overlap the icons