Showing alerts on item's "best before" changes in web application

Question

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.

EDIT:

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.

Answer 1

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.

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.

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.

Answer 2

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.

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.

Answer 3

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 ;)