We've got a notification system on a CRM type web app.

There are many stages in the CRM, and each stage has many projects, each project can have many notifications.

We have a dashboard showing the number or projects at each stage but we also want to show if any of those project have pending notifications the problem we are having is that we are showing number of projects as a number and then coloring that number if there are notification in that project, but this also makes it look like number of projects is the number of notifications, (ie. if you had 3 projects and then coloured that number 3 red it looks like you have 3 notifications) which it is not correct... any ideas how we could still display the same information, but without this confusion.

Please see below annotated screen shot for more information. You can see the full size annotated screen shot on imgur here - https://i.stack.imgur.com/i1CIA.png

markup explaining issue

3 Answers 3


Since you are already using the pinned-red-dot-with-a-number as part of your design, why not just use that exact same thing again? You could have a red dot, with the number 11, pinned to that three which shows the number of projects. (please excuse the poor quality)

UX - sam

  • Thanks @smurf - I think im going to experiment implementing this
    – sam
    Jan 26, 2014 at 18:11

Could you possibly have "3" with no background, and then to the right or left of that, a red dot? Another idea is to add a background behind Concept and Detail when there are unread notifications. A hover over either of these items could display "x unread notifications!"

If space permits, you might try "3 projects," or "3 total," and clarify that aspect.


You could make a more distinct separation between notifications and projects and also remember that there is an awful lot of flexibility where notifications are concerned.

Look at what is more important to your users then take that as a starting point for how you design the notification part of your application. Is it more important when looking at general screens and lists that they know how many projects they have open at any point or that they are notified about events occurring on or to those projects?

You can also ask them more generally what information they need at any point to make their workflow more efficient and arrange your notifications accordingly. Observe them too, you might find that many users go through a cumbersome interaction pattern to find out info that you could easily display somewhere more convenient.

Once this question is answered you can decide what information you decide to display on the screen and whether any info is dropped. For example, on the list of project types the user might not actually need to know how many projects they have and prefer to see them marked clearly with 'needs attention' type notifications. A count might only be required on some other screen they seek out if they need that information.

A second thing you can do is grade notifications and use this to decide on how much a notification is pushed into the consciousness of a regular user. For the sake of example, you might have 'critical', 'needs attention' and 'general' notifications, where critical might be a deadline, 'needs attention' might be to verify a collaborators edit and general might be to read a comment.

You could then adjust the method of notification to be more prominent. 'Critical' might include an email, onload popup or clear definition in the master navigation bar, whereas 'general' might only appear when looking at the individual screen for a project.

So, to summarise:

  1. Find out off your users what information they need at different stages of an interaction and use this to decide what information is displayed on the screens. Observe them in action to help with this.

  2. Take the most important things and use methods that push into the users consciousness strongly to let them know.

  3. Grade the importance of any notification.

  4. Remember that a user can be notified in many ways. Email, text message, primary navigation space, on login, by marking with a count and by marking a part of a page that is changed are all ways that immediately spring to mind.

  • Thanks for the input colin i think im going to implement some of the logic you set out in the above in accordance with smurf's answer - see the comment i left below his answer.
    – sam
    Jan 26, 2014 at 18:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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