0

enter image description here

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?

  • It would be great if you could avail the screenshot of the full screen, as that might help in figuring out if it is feasible to reorient the elements in some other fashion in a different segment of the screen. Also, how to the quantities work? When do they appear and/or disappear, if so? – ikartik90 Feb 8 '17 at 9:57
4

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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

3

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
  • Good insights. But as a side-note, the best UX psychology lesson I learned till date is- "Don't tell the user what not to do. Tell them what to do." I get that one should refrain from the above kind of badging, but then what should one do? – ikartik90 Feb 8 '17 at 10:16
  • In this case the badges are simply counters, they shouldn't carry meaning: they shouldn't tell users what they should or shouldn't be doing. Here 5 simply means there are five items of something. In the inbox situation 5 would mean there are 5 messages you haven't read and you should probably read them. There is a follow-up connected to it. – Koen Lageveen Feb 8 '17 at 10:23
  • True that. But if it doesn't imply any meaning at all, why keep it there anyway? – ikartik90 Feb 8 '17 at 10:36
  • Because it carries information. Or "scent": if there are zero meetings, no need to go to that section of the site to see if there are any meetings. You can have that without adding the meaning (e.g. is zero a good thing or not). – Koen Lageveen Feb 8 '17 at 11:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.