2

I'm working on a mobile-first interface where users will be able to choose a range of dates. Most users will want to use date ranges occurring in the near future. However, there are users who will want to see dates in the distant past and future.

Because of these different use cases, I want to allow users to type in the dates they want in the text fields AND choose dates from a calendar view.

In my wireframe below, the calendar widget has dropdowns for the month & year so users can easily navigate longer time ranges. So, the starting date month and ending date month may have many months in between.

How do I indicate that these are not consecutive months and that the user is selecting all dates in between?

wireframe showing date picker

Improve this question
2
  • 1
    Do you have user test results showing that user are assuming the months are consecutive? I’d expect most will notice the name of the months and recognize there are months included in between, just like they would when using the text boxes alone. Maybe you’re asking for a solution to a non-existent problem. Maybe you’re seeing users confused by seeing two calendars appear when they tap the Starting date calendar icon to enter its one date, but that’s a different problem.
    – Michael Zuschlag
    Jan 21, 2017 at 18:52
  • That's an excellent point, Michael. I have not started user testing because I'm still working on the initial design. Maybe users will easily understand the non-consecutive month views without indicating months in between.
    – Janet
    Jan 23, 2017 at 14:03

3 Answers 3

Reset to default
1

You already do with the top line, showing when the start and end dates are, but yes it is potentially confusing when looking just at the visuals. On the last calendar app I worked on a few years back, this problem was worse because the standard phone screen size was 4" (aka iPhone 5); now, assuming you aren't too worried about that viewport (though plenty own an iPhone SE), there's enough real estate to display more.

There are a few easy ways to solve the problem:

  1. Display text/image that indicates continuation - Don't have the calendars connect directly. Instead, have a break between them and show either via text, an image, or an emoji (since that's all the rage now) that it is a continuation, not two sets of ranges.
  2. Do not display selectable calendar months - This is a more intrusive approach, where instead of showing two months that users can select through, you only allow for users to enter the range, and on doing so they may receive a month view dropdown/selector. This remedies any chance for confusion because the user will have to manually move the end date month to their desired month.

There's also a solution between these two which I think could work better: use a calendar selector that displays the full year by month, instead of full months with selectable dates. Something like Windows does natively:

enter image description here

That way users, when selecting a start and end date, choose the month (or have the option to go from the existing month with that month's own view) and have the option to view the entire year to select that the full range. Following this method also allows you the opportunity to include additional ranges, because that's no longer a limitation of the UI (aka more available room), though frankly this isn't easy tech to build. Then again, it's been a few years since I've worked on mobile calendars...there's probably something open source that's available.

Improve this answer
1
  • Your #1 answer sounds like what I'd like to do. Your #2 answer seems like it will create a lot more clicking for most users.
    – Janet
    Jan 23, 2017 at 14:09
1

I much prefer a visual indicator of the months in between the starting and ending dates so users don't have to click too many times to make their selection. I've been exploring other sites to see how they display non-consecutive dates. I couldn't find a travel site which showed anything except consecutive dates. Then I remembered seeing something similar in Doodle polls where the times in between look folded up. Does this option seem clear? Or do you think users will think they can click the folded portion to view additional options? non-consecutive dates in Doodle

Improve this answer
1
  • I would try clicking the folded part, but perhaps that's just me.
    – MMacD
    Jan 23, 2017 at 15:11
1

Overlay your calendars (or move the THRU down to the second calendar), and to show continuity, change "start" and "end" to "from" and "thru", continue your grey overlay, and lay in the dates from the succeeding/preceding months (I didn't spend a lot of time on the sketch, but I hope it's illustrative anyway)

Improve this answer
4
  • I like this idea, but I wonder if it is clear that the two calendars are related?
    – Janet
    Jan 23, 2017 at 14:10
  • @Janet: I forgot to suggest making the dates into tabs. I'll go refresh the sketch.
    – MMacD
    Jan 23, 2017 at 14:15
  • I got a bit lost when doing the grey scales (the 5 & 12 should have been picked out), but the relating is carried by the terminology (from...thru...), the inclusion of days from the succeeding/preceding months (lead out/lead in), the greying (which should really be distinctive -- e.g. white out of blue-- not just grey), and the tab metaphor (tabbed folders are perceived as related)
    – MMacD
    Jan 23, 2017 at 14:59
  • 1
    Added color -- you can see the increase in relatedness. (except the 5 and 12 in the new calendar should be white [sigh] paint in haste, repent at leisure.
    – MMacD
    Jan 23, 2017 at 15:08

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.