4

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.

3
  • Is the number of days limited (maybe one week starting tomorrow)? Is the time of day limited and is precision to the hour sufficient?
    – Crissov
    Nov 16, 2015 at 19:42
  • @Crissov Yes and yes. The number of days can be limited to the next week or two, hour of day can be limited, and hour (or ideally half-hour precision) is sufficient. One of the things I was thinking about is going along with a variation of Obelia's answer (but replace the textboxes with, maybe, a clock control (one like on android)), and have a calendar preview component (which would show a week view rather than a month view) that would show a preview of all of their available time ranges highlighted.
    – Ruslan
    Nov 16, 2015 at 23:37
  • 1
    A 7 × ~20 cells table it is, then. The hour blocks are toggled when clicked or hovered over with mouse button hold down (which simulates natural touchscreen interaction).
    – Crissov
    Nov 17, 2015 at 0:16

4 Answers 4

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.

1
  • You're an absolute genius. Thanks so much. I will be sure to ping you about whether the users like this or not :)
    – Ruslan
    Nov 27, 2015 at 4:13
3

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?)

enter image description here

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

1

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.

1
  • Yes, that will be the last resort... But it's something I really wanted to avoid. I'd rather go with a bunch of checkboxes...
    – Ruslan
    Nov 15, 2015 at 16:07
1

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

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

enter image description here

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.

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.