Information design fail

[kpreid]

I thought I knew better, but it took someone else to point out what was wrong with this display of times available for appointments:

If it happens not to leap out at you: which color indicates available, and which indicates unavailable? I knew perfectly well, of course: I drew shaded boxes to indicate the times of interest, i.e. the available ones — but the interpretation that the unavailable times are blocked off is equally plausible.

This could be solved by a legend, but that is less readable at a glance and unaesthetic. What I did — after printing several copies and then having the problem pointed out — was hand-draw arrows-to-bars (⇤⇥) vertically over the available spans. But what would have been a good clean solution to start with? What comes to mind is to eliminate the grid lines in the unavailable areas, so that only the gray-is-available interpretation provides definite start and end times.

What would you do?

Comments

The opposite...

[bitjuggler.livejournal.com]

The opposite might also work: leave the bars in the white spaces and take them out of the gray spaces - then the gray spaces look like multi-timeslot appointments.

Re: The opposite...

[bitjuggler.livejournal.com]

...which is exactly what you don't want (I realize after re-reading). Actually, I think you're up against a bigger cognitive dissonance here: white translates to 'empty' so grey is almost always going to translate to 'taken' or 'unavailable'.

Different colors, wider scope

[(Anonymous)]

Green means good, red bad. Available times in green.

Or: Everyone assumes you're not available at 7am or 8pm. Make the chart big enough to cover those times and readers can infer which color means "unavailable".

WWACD?

[(Anonymous)]

Use a "hatched" pattern for "unavailable". It them becomes obvious to readers that you can't write anything in that area.

[seawasp]

I would always interpret the darker color as meaning "taken -- not available".

I would use Red, if I was using color, to represent "taken" and Green for "available".

[kpreid.livejournal.com]

General reply:

Expanding the time range is one of the options I thought of while writing this post, but I cut it afterward. It seems reasonably clear, but will take up more space.

Dark vs. light, or hatching is a good point. I don't like the idea of having a general dark background for the whole chart though — too much contrast with the overall white paper.

I should clarify that this is not a write-in appointment book (though there is one); this is an advertisement indicating the available times, which are signed up for elsewhere.

Red vs. green is a classic “AUGH THE COLORS” aesthetic mistake if done poorly; I can't offhand imagine any shades of red and green that would work well for this situation — being clearly meaningful and yet neither muddy nor garish.

[wrog]

there's also the small matter that red-green colorblindness is fairly common.

[kpreid.livejournal.com]

I wonder whether there's some biological connection between those two facts (that saturated red and green abutting are garish and that the commonest form of colorblindness is red-green). That is, assuming the ‘garish’ part isn't just me.

[wrog]

My guess is it has a lot more to do with the green part of the visible spectrum being extremely narrow (as compared with red and blue) and therefore really easy to "get wrong" as it were...

[brokenhut.livejournal.com]

A full grid -- as in your first diagram -- but put a diagonal line (bottom left to top right of box) through each slot that is unavailable.

[(Anonymous)]

"What would you do?"

For starters, I wouldn't make the image use a transparent background, because it means the labels vanish when the image is rendered onto a black background, which some people (like me) surf the web with.

[kpreid.livejournal.com]

I set up a white background … in the HTML. Didn't think about changing the image. Good point, will do.

Draw a big X

[(Anonymous)]

... through the unavailable times.

[dkw.livejournal.com]

I'm thinking plain gray, no grid lines, for the unavailable times (gray connotes "ignore, uninteresting" to me); and white *with* grid lines for the available times (to look like empty boxes ready to be filled in).

[kpreid.livejournal.com]

I'm imagining that and I'm thinking also black outlines around the outer bounds (but not the interior gridlines) of the white regions. Pops out.

[wrog]

it took someone else to point out what was wrong with this display of times

hm. The first thing that leaped out at me was the (non)alignment of the hour numbers with the rows, i.e., is the first row of the chart supposed to be 8:30-9:00 or 9:00-9:30?

[kpreid.livejournal.com]

8:30-9:00. The hour numbers are placed at the :00 for that hour.

That gives me another idea: placing the start and end times within the boxes. Then the specific times are explicitly stated, but it's still presented graphically and compactly.

[wrog]

8:30-9:00. The hour numbers are placed at the :00 for that hour.

hm . . . and here I was figuring that to be the lower probability answer, even though I think I prefer that version of the world. But what you need to make that work is having the hour-line be thicker than the half-hour line; that way, the eye will group the 8:30-9:00 row by itself and the next two rows (9:00-9:30,9:30-10) together, and then it's clear that the row numbers are labeling hour lines rather than being centered on hour intervals.

That gives me another idea: placing the start and end times within the boxes.

bleah. That 10:00 on Monday is actually above the 10:00 line? I tend to see that as extending to 10:30 or something. Also doesn't help that the later hours are vertically contracted, so any visual cues based on the height of the boxes are useless (first slot on monday is 90 minutes but the first slot on Tuesday is 2 hours and they're the same height? bleah.)

[kpreid.livejournal.com]

I like the heavy hour lines idea. The original graphic was made using uniform box borders so it'd be trickier, but certainly worth doing.

The vertical contraction was a mistake; I didn't review my construction carefully enough. I think the numbers-in-boxes would work better if the boxes were larger relative to the text size.