I am working on an application where a set of data is displayed, based on a specific week. The user selects this week from a drop down box, and one of my objectives is to format the way these week options display in this drop down box. The dropdown is a set requirement; I am only formatting the way the weeks display in that list.

At present, the drop down displays a list of options, all labelled "2017-07-06"; but these are just placeholders.

I have done some HCI research, in the past; and I feel confident that the weeks should be displayed in the form of "<start> to <finish>". For example, the current placeholder displays as "2017-07-06", and I would change it to "2017-07-06 to 2017-07-13". Weeks will always start on Sunday, but so far, that appears irrelevant. I am unsure if this is the best way, or more specifically, if there is an effective solution to intuitively displaying weeks as text. I have found some valid information for days, but nothing for displaying entire weeks.

I am designing for a users purely in Australia, but I am certain that this should only have an impact on the format of day month, instead of month day. There is no requirement to meet ISO standards; so we do not necessarily have to use a strict number format.

Is there a particularly intuitive way to display weeks as text, or is the matter to subjective?

  • 1
    Does your company conform rigidly to the ISO 8601 format (YYYY-MM-DD) or are other, potentially more readable formats an option? – DarrylGodden Jul 26 '17 at 8:30
  • @DarrylGodden, thank you for your feedback. There are no ISO requirements, so more readable formats are acceptable. – Gnemlock Jul 26 '17 at 8:33
  • 2
    @DarrylGodden Interesting that you claim other date formats to be more readable when the entire point of the ISO format is to provide a single format that cannot be misinterpreted. It also seems logical to go from big to small in a date format. Outside of a calendar view I can't immediately come up with a more unambiguous format. – Cronax Jul 26 '17 at 12:55
  • 2
    There's a difference between misinterpretation and readability. – DarrylGodden Jul 26 '17 at 12:58
  • 2
    Is there any reason not to just use a date picker? (it's trivial to go from a date to the timespan containing that date, you can do that on the back end) – Jon Kiparsky Jul 26 '17 at 15:21

Ah Socrates answered whilst I was drawing, so ignore the text ones as I'm suggesting the same thing, the other type is a calendar control programmed to select a week, for the line on which you place the cursor.

Socrates is right, you need to test your users with different types to find out what works for them.

Week Selector

  • 1
    I was about to say: what's wrong with using a date picker? – Stephan Bijzitter Jul 26 '17 at 12:15
  • 2
    @StephanBijzitter. Depends how far back or forward in time you might want to go. Date pickers are fine for short spans of time, but often horrible for jumping back ten years. – TRiG Jul 26 '17 at 15:53
  • Why do you people in North America feel inclined to start the week on Sunday? It makes so much sense to start on Monday. When most office workers start their work week. And your work/weekend is nicely grouped together, rather than getting stretched out across the week. I am triggered – Ruslan Jul 26 '17 at 19:32
  • 3
    @Ruslan "According to the Hebrew calendars and traditional Christian calendars, Sunday is the first day of the week.[1] However, according to the International Organization for Standardization ISO 8601, Sunday is the seventh and last day of the week.[2]" en.wikipedia.org/wiki/Sunday – MiniRagnarok Jul 26 '17 at 19:56
  • @Ruslan: Like a rope, a week has two ends. – Kevin Jul 27 '17 at 1:46

The matter is a bit subjective and it would require testing to ensure your users get the right idea.

Apart from keeping these UI elements contextual i.e Have text that clearly indicates that the user is selecting a whole week.

A solution I'd suggest to try out would be:

Write fully the name of day the week is starting (You and me know it's a Sunday but a reminder never hurts) and write next to it the number of the week it is within the year. That can indicate even more that what the user is seeing is a week.

Some examples:

  • Sunday, 2017-07-09 (Week 28)
  • 07/09 - 07/15 (Week 28)
  • July 9th - July 15th (Week 28)
  • Sun, 07/09 - Sat, 07/15

For the last two examples you can potentially omit the week number I imagine.

Also, do you really need to mention the year in your date-picker? How far do the dates go?

Would it be better to have the dates listed under a year progressively (so they select the year first) and then just see all those dates associated with that year?

Some questions that I personally have as a user and might be worth looking into.

As always, test any different methods you come up with and more specifically test for your locale. Are you sure there isn't already a set way that Australia projects dates like this? Check local and governmental websites to get an idea.

P.S Keep in mind the reverse dates that your system is using, are already quite confusing for me as a European. At first I wasn't sure if this is June or July we're talking about:P

  • 1
    "Would it be better to have the dates listed under a year progressively" What if the week is 31st December '17 - 6th Jan '18? – Michael Jul 26 '17 at 12:28
  • We do not know how far these dates go and if end of year weeks are going to be available anyways. We don't know what the app is for, so I am only replying in context. But you are right, that immediately indicates to us that the original approach might not be the right one and more consideration is needed. – Socrates Kolios Jul 26 '17 at 13:57
  • 4
    Avoid '07/09' style dates in anything that might be used by users from different countries. The US (uniquely, I believe) reverses the order of day and month from everyone else. – Jack Aidley Jul 26 '17 at 14:51

I did something similar for the back-end of a quite known hotels reservation site (I can't disclose, so sorry for the lack of images).

A bit of context and explanation: What we discovered when researching is that there were very common behaviors on specific periods of time. Namely: weekends, holidays, seasonal and week of the month. Since back-end users needed to mass apply conditions to these periods of time, instead of using dates, we allowed for bulk modification on these predetermined periods of time. So, an admin user could select "all second weeks on summer" and mass apply data with one click.

Because of the above, I had to find a way to identify periods of time. The one of interest for this question is week.

So what I did is simply name them as week 1, week 2, week 3. Immediately after doing this, I found some obvious issues with this approach:

  • it would only work if the first day of the month was Sunday, which obviously won't happen the following month
  • even considering the above, what happens with orphan days? (in this case, 29th, 30th, 31st)
  • If we assign the orphan days to (say) week 5, what happens with the remaining days of the week?

So what I did is to consider the above issues as follows:

  • First week of the month will always start on Sunday
  • First week of the month will be the first Sunday with date of that specific month
  • If a week from previous month (5th week) requires days from the following month, then they're added continuing the day progression until the first Sunday of the next month. For example: Week 5 of month: Wed 28, Thu 29, Fri 30, Sat 1 // Week 1 of following month: Sun 2, Mon 3, Tue 4..... . This usually results on 5th week NOT HAVING 7 DAYS.
  • Fifth weeks are bound to be incomplete weeks

This way, we could define some virtual time periods (or virtual blocks) that users can quickly modify with a few clicks, even within years.

Additionally, there is the issue of reservations spanning thru different virtual blocks, but I won't expand since it won't help you at all.


With the above in mind, we created a timeline interface. Again, since I can't show what we did, think of something like the example below:

enter image description here

The difference with this example is that users could filter views, displaying different levels of granularity (like any calendar: year, months, days) or using virtual blocks (weeks as mentioned, but there were others).

Then I had to solve what matters to you: labeling. Due to the problems mentioned above, this was of paramount importance. What I chose to do was to name the block as week [n], then starting and finishing date. For example:

**Week 2:** Jul 23 - Jul 29

Please note that I didn't use numbers to call months, but the month abbreviation (which dynamically changes based on language settings).

And that would be the answer to your question and the reasoning behind it!

Some considerations

Please note this:

  • Instead of using first Sunday of the month, you can use a First day of the month approach, and it will work the same
  • I applied this to a timeline interface (as shown), a calendar view and checkbox based filters. I assume you'll need to have extra considerations if you want to use dropdowns
  • All the above being said, think twice on WHY apply something like this. If your scenario doesn't consider weeks as virtual blocks, then you might be OK with just a time picker

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.