Dead-simple way to let a user select multiple time ranges

Question

I've been brainstorming about this problem for over a week now and cannot come up with a sensible way to do it.

Basically, I am building a component the purpose which is to let a user select a series of time ranges that can either be specific or general. This needs to be presented in a braindead-simple manner so that even non-tech-savvy users can figure it out with no effort and without looking at an instruction video or reading more than two lines of text. Specifically, the time ranges will be used to schedule deliveries (and are thus intended to let the user specify when they are available to accept them).

There will be two modes: specific and general, which I've decided I will separate with tabs. The "specific" mode is easy and is something I have covered (the user will pick two time windows); however, the more complicated one (and the one we want as default - so it is crucial for it to be very straightforward) will be the "generic" mode, in which the user should be able to communicate their availability in as specific and simple a manner as possible (for instance, "This week I am available weekdays after 6pm, except for Thursday, and also all day on Saturday").

I've thought about various ways of implementing this, but everything I come up with feels either counterintuitive, ugly, or weird. Some of the ideas I ran through were: bunch of checkboxes/text fields (simplest but ugly), a calendar where they can select time ranges (pleasant to look at but might confuse less-technical people; also cumbersome if I need to select, for example, 6-10pm each weeknight - I'd need to do it 5 times), I also thought of a free-form textbox where people can simply type a blurb about when they are available - but this is going to be ridiculously complex and bug-prone for such a simple task, etc.

So, I was wondering if anyone has any ideas on how to best approach this. I am primarily a developer, not a UX guy, so I am sure this problem has already been solved by the UX community because I can't imagine that this use case is so rare. However, after searching, I wasn't able to find anything relevant (maybe there is a term for this that I'm not familiar with?).

Many thanks in advance.

Answer 1

Like others have said, this is almost impossible to solve for the general case. Knowing the actual parameters, however, a tailored design can be developed that covers most cases (e.g. Pareto’s 80%:20%) well and still supports the exceptional ones.

If we have to consider only the working/sunlight hours for the week or 5–10 days following today and half-hour precision is sufficient, an interactive calendar grid/table will work. Every span of 30 minutes is represented by a single cell. The columns represent days (labelled tomorrow and then by day and month or just day of week, i.e. Tue or Tuesday etc.) and the rows represent clock times.

Intuitive interaction would be to click or tap each cell individually to toggle its status between available and occupied (or what have you). This can be cumbersome. I therefore suggest to allow “drawing”: when the mouse button or finger tip on a touch screen is pressed down on a cell, a draw mode is activated that changes cells from the binary state which that cell currently is in to the other; it affects all cells that are dragged over while the finger is still down, but only the ones within the same state of course.

Answer 2

your problem needs breakdown.i think there are two kinds of issue, the date range you want to repeat and another you don't.

No Repeat: This week I am available weekdays after 6pm, except for Thursday, and also all day on Saturday Repeat: 6-10pm each weeknight

I just designed UI that might resolve your both problems. have a look below.

1. In each day, you can define the timeframe as well in multiple days.

2. Clicking on week-title(sun,mon) you can select respective days ( easy for weekend huh?)

you can get little ideas from here too:

https://dribbble.com/shots/1821532-DatePicker

https://dribbble.com/shots/372959-Date-Picker-2-Month-View-with-Time-Option

Answer 3

Unfortunately, calendars are hard for people to understand and use well and consistently.

What about allowing people to respond with text availability and then you code that into something? If you have a few hundred users right now that probably isn't too bad for a CS person to take care of while you scale a good solution.

You could even do A/B testing with the two options: 1) the best UX you can figure out and 2) the text free form field. Then look at completion rates and happiness.

Answer 4

There isn't a dead simple solution to this, but here's the simplest way I could think of:

http://jsfiddle.net/b3f6wvyp/1/

Allow the user to specify 1 or more time windows. A time window is comprised of a date and 2 times ('from' and 'to'). When a new time window is added it copies the contents one currently last in the list. The input widgets I used for this example are the basic HTML5 ones and they can be embellished upon.

There's no getting around that the user must enter a date and 2 times values. The trick is to use the easiest to use methods/widgets available. Exactly what these easiest methods/widgets are I'll leave to another discussion - if it's a web app then maybe use jQuery UI or YUI widgets, if it's a native app use the native widgets/conventions, if available.

The important thing is to clearly show these groupings of a date, a 'from' time and a 'to' time, these time windows, as units, and have easy ways of adding and removing these them.