I'm designing a table where the columns represent time in hourly brackets. My question is whether there is a convention for the notation.

Do you think option A is self explanatory that the bracket '9am' is from 9am to 10am? Or should I display it like option B?

A) 7am | 8am | 9am | 10am

B) 7am - 8am | 8am - 9am | 9am - 10am | 10am - 11am

Any other ideas?

As space is limited I would like to go for option A. Also I should note that it is for an international product that might have to display time in the 24 hour system in the future.

Below an image of the design I'm currently working on. It lacks clarity in my opinion.

table view

  • Someone is bound to make this comment, so I'll do it: in which range does 8:00 am belong? The first or the second?
    – JeromeR
    Aug 3 '15 at 5:51
  • It is supposed to indicate all the time for that hour. So 8:00 would be in the same bracket as 8:59. 9:00 would be the next bracket.
    – Martyn
    Aug 3 '15 at 6:12
  • @Martijn have you consiering switching the rows for the columns? (making it vertical) Aug 3 '15 at 15:33
  • @rewobs It is part of a larger table with lazy loading rows, 200+. So I can't do that. However, good suggestion :)
    – Martyn
    Aug 3 '15 at 21:22

Edited answer: You're almost there

I see you edited your question to show that the times appear in a grid. This is perfect, since a grid does exactly what the rest of this answer suggests. Even if the grid is "transparent" it is apparent.

Your table follows a convention. It is clear. It could be a bit clearer, still. Why don't you experiment with:

  • Remove some of the needless repetition (the zeroes). There are two sets of zeros, so an opportunity for simplifying. Removing both may be too much. Give it a try.
  • Improve the text alignment. Currently, the zeroes seem further to the left than the header labels. Alternatively, try centering the text (though I predict that won't work as well because it destroys the invisible grid).
  • Mock up a 24-hour version, to see how it affects the clarity.
  • Experiment with background fill colours and borders, although that adds visual clutter that you don't need.

The thing is, if you try some variations, you'll see what looks clear. And then you can test it, by asking people to perform the same task. Give different participants different versions of the grid, and measure their total performance times.

Above all, do not listen to the opinions of people about visual design. (Did you notice that I'm giving you lots of choices, not one "right" answer?) See how the design performs in the hands of participants and users.

Original Answer: Emphasize the grid

Can you show that there's a range by illustrating it graphically? Or by using layout to your advantage?

Consider these vertical arrangements:

enter image description here

Each hour's text is vertically aligned at the ":" colon. Each hour has its own box, which makes it clear that each increment is one hour. On the right, the placement of the text at the top of the box makes it even clearer that the box represents a whole hour. Time increases from top to bottom, so the top is the beginning of the hour.

Also, there's no confusion about where 8:00 am belongs: not in the 7am–8am box, but in the 8:00 box. And there's no need to mess with extra cognitive work of ranges like 7:00–7:59.

This horizontal arrangement has a similar clarity:

enter image description here

In this case, the text is left-aligned, not aligned at the ":" colon, because the label appears at the "beginning" of the hour. The time increases from left to right, so the left edge is the beginning of the hour.

I hope this helps you move forward.

  • 1
    Hi Jerome, Thanks for your answer. I agree with the alignment to the dividers. That was my initial idea as well. But the styling of the rest of the application does not have this. I added an image of the design I'm currently working on. I think it is lacking in clarity.
    – Martyn
    Aug 3 '15 at 6:10
  • To make this clearer, you cold remove some of the clutter. Why don't you experiment with removing some of the needless repetition (the zeroes). Also, experiment with the text alignment. And since you're anticipating a 24-hour clock, why don't you mock it up now, and see how it affects the clarity? I'll think add this comment to my answer.
    – JeromeR
    Aug 3 '15 at 6:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.