Representing time intervals in a chart

Question

I'm trying to design a visual representation of a child's sleep schedule for a given week.

I was thinking of making a chart with the time of day on the y-axis and the days of the week on the x-axis and then blocking in the time intervals much like a calendar app would.

What are some alternate ways of representing this data that might result in a better user experience? Keep in mind that all 24 hours of the day have to be visible unlike most workday calendars because kids sleep at all hours.

EDIT: Another option, I suppose is a bubble chart, with the bubble plotted at the midpoint of the sleep duration and the size of the bubble indicating the length of the sleep.

Answer 1

I agree with Charles; the same chart but with the axes reversed makes more sense to me. I tend to think of time in terms of timelines, which your chart just isn't doing for me right now. I also think you want some way to indicate continuities within broken time chunks, so it's clear that the kid didn't wake up briefly at midnight.

^{download bmml source – Wireframes created with Balsamiq Mockups}

It's also worth thinking about presentation in terms of how your users will find the data most useful. For instance, you might allow your users to set the time at which a 'day' begins so that they can get meaningful stats about how much their child slept on an average day. Ergo, if the child is always awake by 10am, you have the day start at 10am (and adjust the display accordingly) so that the night's sleep is all linked to a single day.

Answer 2

Another alternative - one that gets rid of the discontinuity at midnight (or 10am) - would be a spiral visualization, with one day per circuit.

Here's a picture of a spiral visualisation from an earlier UX answer of mine:

You could use 24 hours per circuit, and show history over 7 or 10 days easily. The same time of day always shows at the same angle, so patterns are immediately visible. I'd probably set things up with noon at the top and midnight at the bottom, giving 6am on the left and 9pm on the right.

Disclosure: I encountered these visualizations while working at a company founded by Andrew Cardno; there may be IP issues if you are working on something commercial.