Is there an intuitive way to display weeks as text?

Question

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.

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?

Answer 1

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.

Answer 2

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

Answer 3

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.

Implementation

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:

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