5

I want to display dates of a course. The times are all the same but dates may be any dates

This is the way they are display at the moment in a list, not good as there is a lot of repeated information and its hard to read.

6pm - 7pm 03/06/2016

6pm - 7pm 04/06/2016

6pm - 7pm 09/06/2016

6pm - 7pm 10/06/2016

6pm - 7pm 11/06/2016

6pm - 7pm 16/06/2016

6pm - 7pm 17/06/2016

6pm - 7pm 18/06/2016

6pm - 7pm 23/06/2016

obvious way is a calender but it could be one date a month for 6 months so that seems like wasted space.

any other ideas to display them in the best way for the user? something that works on a mobile (so can fit in a relatively small width)

Improve this question

7 Answers 7

Reset to default
5

I might lean more towards my left mockup, just for the sake of being explicit. The left one is a bit more explicit with the exact times for the courses, but the right is a bit cleaner (if you think users will notice the message--this could be tested though).

I lean towards spelling out the dates when possible to accommodate users who come from different cultural backgrounds. For example, I am used to mm/dd/yyyy format, so it took me a minute to realize that these dates were all in the same month.

Repeated data isn't that bad if it's easily scannable. For example, I look at the left mockup and, since all of the "6pm - 7pm" times are lined up, I can see very quickly that I don't need to continue analyzing that column. It's obvious that it's repeated, so I can safely ignore it.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
4
  • 2
    +1 for spelling out the month names but I'd go one step further and add the day. I hate when a site/app just gives me numbers because the very first thing I need to do is figure out what day of the week it is... I don't want to book on the weekend (my free time) nor do I want to book on Thursdays because I have that thing.
    – scunliffe
    May 27, 2016 at 23:07
  • @scunliffe agreed, good point.
    – maxathousand
    May 27, 2016 at 23:42
  • 1
    Thanks @maxathousand. For me the right hand sketch is far easier to read and doesnt seem to imposing as you have removed some of the information. I still feel like there is a better way than a (potentially very) long list. but your version is certainly an improvement on mine,.
    – fiscme
    May 28, 2016 at 6:50
  • @fiscme well you could ask the user to pick a month and year first, then return only the dates for that month. I'm not sure what exactly your use case is, so that might or might not work for your situation.
    – maxathousand
    May 29, 2016 at 6:00
2

Looking at all the answers it has shown me that I don't need to remove all duplicate information, just display it better. However I thought that abstracting the month out of it it could make things a little clearer to read as well. So building on previous answers ideas (thanks all) and a couple of my own, I came up with this. It's not the official 'answer' as yet, and would appreciate any comments.

enter image description here

Improve this answer
1
  • I like the sorting by month and the contrast between the fixed and variable information. I think the table is visually noisy, so I would consider removing at least the column and row borders. Also, the separation between the week-day and month-day makes it hard to read it as a single unit i.e. Thursday the 6th. Consider using alignment instead of column separation.
    – Andre Dickson
    Oct 11, 2016 at 5:08
0

Building upon maxathousand’s second mockup and scunliffe’s comment on weekdays, and if research of user needs reveals the preference to focus more on the week-view rather than the specific time of day, a calendar view may provide a quicker at-a-glance assessment. Calendars of several courses could therefore be combined, to help the student better detect conflicts, busy and fee periods. enter image description here

Improve this answer
2
  • Thanks, my concern with this is that in theory it could be one or two dates a month for 6 months. so thats a lot of wasted space and redundant information if i use a calendar (it was my initial thought and certainly seems like the easiest at-a-glance view though)
    – fiscme
    May 29, 2016 at 6:52
  • @fiscme, I agree with your concerns of making efficient use of the space. I was making this suggestion in terms of scalability, since a primary benefit of a calendar is to avoid conflicting events or monitor opportunities for other activities such as studying, etc. I understand that although your users only take one course at the time, it be hard to combine schedules of several courses.
    – Vittorio
    May 29, 2016 at 14:07
0

It's typically good practice to put the information that's most important to your user up front in a situation like this. In this case, if you put the repeating times up front you force your users to wade through them to get to the info they care about in each row. So, I would put the dates first followed by the times.

I also recommend dropping the leading zeros from your dates, because they add unnecessary characters (#s) to these alpha-numeric strings. Here are a couple of quick mockups i threw together that showcase several ideas of ways you can make the information easier to absorb. As you can see, i experimented with color behind the most important information, bold v. non-bold, different text colors for the important v. less important info, and different text sizes. I do also agree that alternating row colors enhance usability when you have multiple rows of intricate values.

enter image description here

Improve this answer
0

I feel we should do this way (refer the attached image). enter image description here

In this design the dates are highlighted with the respective training. It includes training name and timings. User has all the details at one place with primary content highlighted visually.

Attached another screen. enter image description here

Visual credits to Behance - Pouya Ahmadi

Improve this answer
2
  • It's highly irregular for calendars to be arranged vertically, as in that picture. It took me a while to figure out where the next events were located.
    – maxathousand
    May 30, 2016 at 3:48
  • @maxathousand its on vertical order and easy to scan or very good legibility. This option is like out of box thinking.
    – Grafix Guru
    May 30, 2016 at 4:35
0

Commenting on @fiscme

enter image description here

This seems to be a better solution, although in September 2016 and later months the user may need to scroll to check the current and upcoming schedule. This solution may also allow to link each class to a syllabus, if it has already been segmented by date, or other class-related content.

Improve this answer
0

I'd say strip out any unnecessary information. As others have said, don't repeat the times. Also, why is the year important? I don't know what year it is? Day of the week is much more important than the year. If multiple years are available, distinguish by adding the year after the month.

Also, should this be actionable? Seems like I'd want to select a date in the same place where I see the options.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer

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.