What's the best way to label weekly periods?

Question

I'm dealing with a very complex layout for a big data app where user may choose different time periods to display different data. The periods apply to different sources of data, but in the end the problem I have is how to label the filters for weekly periods.

Additionally, the app has this feature: a custom time range. So, let's say: someone may choose to see data from X source, then choose a date range, then a time period filter (all time, year, month, week, day). The output for this is a bar graph (or 2, or 3 if they're combining sources), where all time is just one bar, year is as many bars as years are in the selected range and so on (there's a slider to scroll through non visible dates). While there are other (better) visualizations available, tests have shown users use the bar graph a lot, the weekly filter is one of the most used, and the ranges are between 7 and 20 weeks

The above is of foremost importance because one thing is to display 4 to 10 weeks, and a very different thing is to display 50 weeks at the time. Even though users will know about this and they will choose this option knowing data visualization will become very complex, I need to provide the best possible output for this particular problem.

In recap: I have no problem with function and behavior, my real problem is the labeling for weekly period filter: Should I use

• First Week of March, Second Week of March
• 1st Week of March, 2nd Week of March
• March 1 to March 6, March 7 to March 13
• 3/1/2016 to 3/6/2016, 3/7/2016 to 3/13/2016
• Something else?

In order to visually explain my problem, here's a simple mockup of the output for the Monthly period filter, showing multiple sources (bars)

Answer 1

Avoid the all-numbers formats, as they can be misinterpreted, especially if you have international users. Stick with the month abbreviations and simple numbers for the day ranges. One idea that has worked well for me in the past is to show the months separately from the day ranges, like this:

This looks less cluttered than some other formats and it is still very clear as to which month each day range belongs to. Note that day ranges that span month boundaries are also handled.

Answer 2

If you can line-break the labels:

. . . | | | | | | | | | . . | | | | | | | | | | | | | | . . | | | | | | | | | | | | | | | | | | | | . . . . Dec 7-13 Dec 14-20 Dec 21-27 Dec 28-Jan 4 Jan 5-11 . . 2016 2016 2016 2016-2017 2017 . . .

May be a bit crowded at the year transition, but it keeps the month in close proximity to the day in all cases.

Answer 3

• First Week of March, Second Week of March
• 1st Week of March, 2nd Week of March
• March week 1, March week 2

This is an easy to understand format as the user doesn't need to figure out the period between a starting and ending date is a week (eg. 7 March to 13 March). This goes in a similar way as quarters are used in a year.

However, it has the inconvenience that weeks might not be easy to understand as they are not "strict" weeks, which start on a Monday. For example, if a month starts on a Saturday, your weeks will not be Monday-Sunday but Saturday-Friday, which can be a bit confusing. Another option is to just indicate the starting date and try to make emphasis in the week time unit:

• Week period starting March 7th, Week period starting March 13th

Or some better phrasing, but I hope you get the idea.