1

So, basically I need to display the weekly schedule for classes. I would like this to be quite compact, so I want to just show if the class runs in the morning/afternoon/evening for each day (I will determine the actual time ranges at some point).

So that means, if arranged in a grid, there are 21 cells (see attached image). I'll probably include the actual times on mouseover/click in a tooltip, eg 14:00 - 16:00.

There must be a more efficient/compact way of displaying this information than a grid of 21 cells, surely? If anyone has ideas/experience, please do let me know. Thanks.

EDIT: For a bit of context, this needs to be compact because I am displaying these courses as search results, so I need some kind of system in place as a "quick overview" of what the scheduling is.

enter image description here

Improve this question
3
  • What's the context for this? Why does it need to be more 'compact'? One way to reduce space would be to contract the day names down to initials - "M" "T" "W" "Th" etc. Another way would be to transpose the table so that the days run vertically. It's a visual illusion, but it appears more compact, and will look much better on portrait mobile views.
    – Alex P
    Sep 15, 2016 at 12:39
  • @AlexP I updated the original question with some context.
    – j_d
    Sep 15, 2016 at 13:22
  • Is there a need to have three different colours for the class time? The position that they are on the grid already gives the user the information.
    – Michael Lai ♦
    Dec 11, 2016 at 23:01

4 Answers 4

Reset to default
1

An example of how transposing the data gives the illusion of a more compact table

An example of how transposing the data gives the illusion of a more compact (and mobile-friendly) table

Improve this answer
1

I have made a couple of assumptions, but this is the most compact version I can think of given the most relevant information that needs to be displayed:

  • Days of the week: A three letter label is probably the shortest and least confusing way to indicate days of the week (avoids the duplicate T and S)
  • Order of the week: A line to separate weekdays from weekends to allow the user to distinguish those sections easily
  • Class time: The position in the grid already indicates this so we can eliminate the different colours. Since not all the slots are always filled, we can also use the label (these can be made smaller) in the grid so the user doesn't have to scan back to the top. This could be replaced with actual values in the future.

enter image description here

Improve this answer
0

I remember having worked on something similar in the past. One of the options is to use grain view. Just like the Google Calendar App, you can have multiple views that reveal finer detail as you 'zoom in' (switch views). That'd also mean redoing your layout. You can even reveal the time details in the finest grain.

Improve this answer
1
  • 1
    Can you please provide more information or screenshots? I specifically do not want to create a calendar.
    – j_d
    Sep 15, 2016 at 11:37
0

No need to transpose the table either - you can make it much more compact in the same orientation:

enter image description here

Apologies for the super quick 'n' dirty mockup... you could, of course, make that even more compact still.

Improve this answer
2
  • I agree, there's no direct requirement to transpose it, however I don't think it conveys the information quite as plainly. If it were an hourly breakdown of the day, it would work to have the time along the y-axis. But because it's broken into three chunks, it seems less intuitive and scannable. Perhaps that's just my personal preference though.
    – Alex P
    Sep 15, 2016 at 13:49
  • 1
    Agreed, there is a subjective nature to it... but I like how your more vertical format allows for better mobile scaling. I was really just playing devil's advocate with this one, to show that "John Doe" doesn't HAVE to swap the axes to make it work :-)
    – Mattynabib
    Sep 15, 2016 at 13:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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