Visual alerts on tabular data

18 May 2009 - 3:31pm
7 years ago
2 replies
668 reads
Sarah Kampman

Folks, I'm looking for ideas and inspiration on conditional

I've got a large table containing numbers. Numbers that exceed a
threshold (set elsewhere) must be visually obvious. Additionally, as the
table may contain collapsed rows, I'll need to "bubble up" the alert so
that the user knows that an area needs to be expanded.

The table's rows are likely to end up shaded to indicate which level of
the hierarchy a given row is on (e.g., dark green for the top level,
medium green for the next, light green for the third, and white for the
bottom level), which makes just using red (or otherwise colored) text a
little more difficult. I'm also using icons within certain cells for
another purpose, making that idea more difficult to implement, as well.
Other ideas are welcomed.

Sarah Kampman


19 May 2009 - 2:54am
Severin Brettmeister

Hi Sarah,

I hope I understood you well.

Because alerts should be perceptible in both states (collapsed/open), I would show something outside the table.
Some kind of alert signal at the same height as the regarrding row. If this row is collapsed, the user has to open it manually or he clicks on the alert signal which opens the regarding row directly.

The "alert" row could be highlighted using a different border/text style or a pattern of the according color.

All the best,

19 May 2009 - 7:25am

It's hard for me to make specific recommendations without seeing a visual mock up (cause I'm retarded :-)). But here goes:

1. For the individual cells that are above the threshold, I would use the color red still as red is considered the color of error. To stand out, I would just invert the hue and make the cell color red but the text white, so that it stands out. This is assuming, such data errors need to be corrected sooner rather than later.

2. I agree with what Severin suggested. I would denote the row with an error using a red error icon/exclamation to the left of the row with the error and have the error description on the top of the table. The description at the top of the table should be in red and should start with the icon so that users can visually match the error message on the top to the row with the error using the icon. Depending on how it looked visually, I might also highlight the row with the error with a 1-pixel wide red outline.

3. I know you are using colors to differentiate visual hierarchy but if you have the luxury of formatting the table a certain way, I would using indenting to visually denote a hierarchy rather than colors. Everyone is used to using bullets or indenting in some form to denote a parent-child relationship.
Obviously, this depends on the application and the domain users using the system. If they are used to a color based visual hierarchy or if that cannot be changed, this is not an option.

That was my 2 cents.


Syndicate content Get the feed