I need to show 2 level alert for material stored in refrigerators. Orange and red alerts. The alert depends on how close item is to expiring date. Refrigerators are tree structured objects so I have a path for every item like : "-80c Pathology A/rack 1/box 1"

So, for every item I have a path (-80c Pathology A/rack 1/box 1), name of material (145-2C11, BMP6.M6.6G11), type of material (antibody, hybridoma) and it's amount. It is possible to show hundreds of different materials by name and approx 10 by type.

I can't find any nice and elegant way to show these alerts, so any advice will be good. I can do it with CSS3 or jQuery if it is suitable.

Certainly, I'm not the first one who has done such a task. Is there any good practice for this, any standards? Is there anything I should avoid?

I consulted this article but it isn't what I need.


This is a desktop web-application with logged users like in Facebook. Everyone sees his or her own account, shares the same data, but users have different rights.

Alerts should be visible on first screen. There will be space for relatively big features, width can be probably half of central column of this page <div id="question"> but height may be almost indefinite.

Alerts should be notably listed but not annoying. Materials are numerous and usually scattered in boxes in refrigerators so we cannot expect from users to check them by themselves.

After alert is raised nothing happens. Users are informed that they have probably very expensive reagents about to expire so they are advised to spend them first. If they choose to lose their reagents in despite alert, we cannot do anything about that.

  • Who are the users? How is this application used? Is it displayed on a screen somewhere in a room for everyone to see or do people run it on their own devices? How obtrusive do these alerts need to be? What happens when the alert status of an item changes? Does it rely on the user checking it periodically or does it need to push notifications to alert them? What action does the user need to take when this happens?
    – Matt Obee
    Commented Dec 22, 2014 at 10:12
  • @MattObee I updated my question with answer
    – dllhell
    Commented Dec 22, 2014 at 10:32

3 Answers 3


Without understanding your situation thoroughly, I do have a few suggestions you might consider. Consider an interaction similar to "Snackbars and Toasts" from the Google Material Design UI and stack them as needed.

enter image description here

Consult that handling of GROWL notifications for Mac users and how they stack notifications - especially if you'll have many notifications triggering close to one another.

enter image description here

Both of these examples borrow from experiences that are fairly well known to users - the closer you stick to something familiar, the less cognitive load for your users.

Before solving for this scenario however, I'd ask if there is a way to prevent the user from having to see all of these notifications and "errors" (for lack of a better term) in the first place. Do what you can at a UI level to avoid the need to "force-feed" these notifications on users so they don't become a nuisance. I can see this becoming extremely frustrating over a short period of time.


I hope this answers your question.

I like how Visual Studio has an error list with Errors, Warnings, and Messages. When you click on any of the categories, they toggle visibility. For example, if you only care about Errors and Warning but not Messages, you click Messages to hide them.

They have three levels but you could easily do something like that with your two levels.

Visual Studio Error List

Another nice thing is that you can move this "Error List" pane around, dock it to either side, change the size, columns, etc. Not sure if you need all that functionality but as a user, I like to be able to configure my errors list.


If your purpose is to guide toward using the materials that are closest to the expiration date, you should arrange your information accordingly. Instead of actively alerting the user, it sounds that you more likely need to just single out the materials that are close to expiring?

Like the VS suggestion by sgryzko, I'd probably categorize the alerts by severity and allow the user to filter them out.

Here's a real quick-n-dirty example mockup with the tech you mention: jsfiddle

A free text search/filter could be nice addition there ;)

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.