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.

Sketch of time interval chart

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.

  • Related: ux.stackexchange.com/questions/54295/… Apr 15, 2014 at 19:13
  • @CharlesWesley Thanks for linking. Very helpful. The biggest difference with my question is that it's crucial to see the intervals across a week to easily spot inconsistencies.
    – Rob Sobers
    Apr 15, 2014 at 19:28
  • 1
    I agree--in which case I would stack them vertically. it is essentially your diagram but with the hours and days of week axis swapped. My opinion is that this would make comparison easier but I don't have any supporting evidence. Apr 15, 2014 at 19:33
  • 1
    Your sketch is similar to a gantt chart.
    – Andy W
    Apr 15, 2014 at 19:37

2 Answers 2


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.

  • Thanks so much. Totally agree on allowing the user to configure the start time. Curious though - why the horizontal presentation? Instinctively I was thinking vertical a la Google/Outlook calendar appointments.
    – Rob Sobers
    Apr 15, 2014 at 23:09
  • It very well might be personal preference. Especially as you had mocked it, though, I was confused by times flowing upward rather than downward. You could certainly make a vertical layout work, though. See thefemalegene.com/wp-content/uploads/2013/04/… as an example. Apr 16, 2014 at 14:30

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:

Spiral visualisation

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.

  • 2
    That is trippy. It took me a second to understand what we are looking at. I would suggest that if you're using a design like this to include an explanatory note because it's not immediately recognizable, but straightforward once you "get it". Apr 16, 2014 at 13:40

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.