32

I'm updating a form which has elements for each day of the week, and the user needs to select a start time and end time for each day. Currently this is just 14 different text boxes where users can type the time, however, I feel this is a little sloppy and could be improved.

I tried using the timepicker from here (Directives > Timepicker), but having 14 of them on the page looked even more cluttered that before.

Does anyone have any idea's that would work well for this?

Improve this question
4
  • 5
    Is there any pattern to entering the times? Are they likely to be the same on each day, for example? If they are 14 random different times, there is no other way than ask for 14 inputs separately.
    – Rumi P.
    May 14 '14 at 10:37
  • It's for a job application, and the inputs are for availability times, so what time can you start/finish on each day, so they could all be different, but I'd imagine the majority will be between 6-8 am for start time and 6-7 pm for finish time.
    – TMH
    May 14 '14 at 10:43
  • you can use vitaly's graphical approach, but arrange the hours from left to right, so it is less space consuming. Do you have fixed timeslots like every 10 mins, or is any time possible?
    – user48144
    May 14 '14 at 21:26
  • I'd look at all the calendar apps out there (Outlook, Google Calendar, iCal, etc.) as they all have this issue have have solved it in various ways already.
    – DA01
    May 16 '14 at 18:48
61

I would progressively reveal details to a user as they need them. Consider what would your smart defaults would be? Are there assumptions that you can make that would get most users most of the way there? A couple you could consider:

  • Sunday and Saturday are typically off days for US workers. Is this true for you? If so, then let's go ahead and default them to "off", yet allowing for them to be turned "on" in case someone works a different schedule.
  • Default the working hours Monday through Friday to 8:00am to 5:00pm (17:00). Does your company work normal business hours? Set these defaults to those values.
  • Learn over time. Will a user have to enter these hours in every week? Every month? If so, modify the system's defaults to the user's work pattern.

An example:

Possible Solution Wireframe

Improve this answer
9
  • 1
    I do like this UI design a lot. 1): Dependent as the form is for a job application, so add times for any days they can work, which could be weekends. 2) Our venues are open (i believe) 6 am through 10 pm so it could be anywhere between those, but also it could be outside of that as there are always IT staff on call at all times. 3). This is only when they apply, so it will only be filled in once by a user, but I was going to update the defaults based on averages from applications in the database when we get some data to work with.
    – TMH
    May 14 '14 at 14:03
  • 2
    The one minor issue i see is that it's not very friendly to people that prefer using the keyboard. (The select boxes will work, but the way they respond to key presses isn't really conducive to time entry IMO.) As long as you don't have to switch between keyboard and mouse, though, it's tolerable.
    – cHao
    May 14 '14 at 16:11
  • I think I'm going to change my design to something very similar to this, but I'm think maybe instead of dropdowns go back to text boxes but have the hint and the time like Google Search. Example: if a user types in 8:0, when they leave the element or press enter in fills it in as 8:00 am
    – TMH
    May 15 '14 at 13:01
  • 1
    @Keavon Adobe Illustrator. :)
    – Hynes
    May 17 '14 at 5:31
  • 4
    I would add one more button to this. Next to Monday's times, I would put a "copy down" button that fills in Tuesday to Friday with the same times that I just entered for Monday. That way, if I want to have 9:00am - 6:00pm for every weekday, I only have to enter it once, not five times.
    – Dawood ibn Kareem
    May 18 '14 at 1:33
36

I would try to use the Google Calendar approach. You spread out the days with an acceptable level of detail/resolution and then the users just drag to mark the time ranges. If a higher level of detail is required, they can fine-tune each time.

enter image description here

It took me about 5 seconds to enter these 6 time ranges.

Improve this answer
5
  • If there are no reasonable defaults, this drag approach is great! If there are defaults for the time spans, though, it's probably worth using them (like in Hynes' answer).
    – Brian S
    May 14 '14 at 21:43
  • Naturally this view can also support default time ranges, pre-selected on the table.
    – Vitaly Mijiritsky
    May 15 '14 at 5:29
  • 1
    Also, if the time ranges are pretty consistent from day-to-day, it may be worth allowing users the ability to drag across days. That way, setting up something like a typical work week can be done with a single click-and-drag.
    – Dan Lyons
    May 15 '14 at 17:36
  • This is nice but easier said than done...try coding exactly this.
    – JonH
    Dec 9 '14 at 16:27
  • @JonH I'm pretty sure that somebody at Google did.
    – Vitaly Mijiritsky
    Dec 24 '14 at 6:18
4

What I've come up with is using this slider, I've set the default values to 8:00 and 17:00, i think this is much easier to use than having to type in dates manually.

Also I might overriding the start/finish default times with the average from previously filled in forms once we have some data to use, but that's just an idea at the moment.

Improve this answer
6
  • Is this your answer? It feels more like a comment to your original post.
    – Hynes
    May 14 '14 at 13:05
  • Yeah this is my answer, at the moment at least, if I find something I feel works better I'll update it. I can't mark this as the answer for another 2 days though.
    – TMH
    May 14 '14 at 13:08
  • very cool idea! One thing I noticed: If you move one slider over the other, you have to move it back again before moving the other one. You might want to fix that, but it's a minor issue and could aswell be by design.
    – iFreilicht
    May 14 '14 at 16:50
  • 1
    Seems a little fiddly to find a specific date. I would consider having a standard calendar date picker as a fallback.
    – Amicable
    May 15 '14 at 13:55
  • It's nice but when the range is large, it's hard to set a particular date. Better to have an option to set specific date without guessing its location on the bar.
    – etaiso
    May 18 '14 at 8:09
2

I would imagine for something like a job interview people are likely to want to be flexible, and try to be available as much as possible.

  • You could have every day default to "available whole (working) day", and then only display the time pickers if the user goes in to edit a particular day.
  • You could also give the user the option to select multiple dates (e.g. display the interview dates on the page as an interactive date grid where they can click and drag to select) and apply their start and end selections to the selected range.
Improve this answer
2
  • 2
    I like your first idea, what I've come up with is using this slider refreshless.com/nouislider/examples/working-with-dates I've set the default values to 8:00 and 17:00, i think this is much easier to use than having to type in dates manually
    – TMH
    May 14 '14 at 11:43
  • Ah, yes that's a really nice idea. You should post it as an answer to your own question.
    – Franchesca
    May 14 '14 at 12:03
2

Why not use something like Google's Moto X alarm clock:

Setting 1 Morning: 6AM Evening: 8PM

Mon() Tue() Wed() Thu() Fri() Sat() Sun()

+New setting

So you set the time first, and then decide on which days this setting would apply. you could choose to add a new setting, if so, again enter time and select remaining days it would apply for.

Improve this answer
1

Ideas

  • Limit workday period to just two: Mon-Fri, Weekend
  • Add checkbox "Set each day period" (only for users who need it)
  • Use slider with 1h step for day work period
Improve this answer
1

Speaking as somebody who has to fill in these things:

Make it so that I can use the keypad, because then I'm way faster than any fancy design mouse-clicky thing you can come up with. The Enter key should move the input focus to the next field and not submit the form. To start with, the input focus should be in the first field by default, so that I can keep my hands on the keyboard.

So entering 900 should be parsed to 09:00. If you're in AM/PM-land, you might be able to apply some smartness to guess which 700 I meant. If that's not reliable, let me add the AM/PM tag by affixing a - or + to the number.

Improve this answer
4
  • 2
    The enter key should not move input to the next, that's what the Tab key is for.
    – Lie Ryan
    May 16 '14 at 12:45
  • Talk to a secretary. They work wonders with their right hand on the keypad and the left hand sliding a ruler over the sheet of paper they're copying the numbers off of.
    – Stefan Schmiedl
    May 16 '14 at 13:14
  • Then they probably should get a numeric keypad with tab keys or figure out how to remap their keyboard. In any case, this is a UI for entering 14 items, not 1000, there's no reason to break the convention for this.
    – Lie Ryan
    May 16 '14 at 22:24
  • Spoken like an artist, who paints the way he likes. Convention can be inconvenient ... keyboard layout is a prime example. But thanks for the pointer to the tabby keypad!
    – Stefan Schmiedl
    May 17 '14 at 4:56
0

It would be worth having something akin to the Nest app's scheduling feature where you can copy a day's schedule and paste it onto another day. Huge time saver.

Improve this answer
2
0

I faced a similar situation a couple of months ago in a project that required to create time-ranges and date ranges and send them as a JSON document in order to load them inside an ArShaw FullCalendar.

The solution I came with was the following (the project is in spanish but I tried to translate it accordingly):

Possible solution to your UX situation

So, we ask the user to select a time-range (15, 30, 45 and 60 mins), then the user needs to choose a start date (Head Row of the calendar table) and a start time with an end time (vertical left row in the calendar's table). After the user clicking the "Open Time Slots" button, the program will create those time ranges and put them into the calendar as separated events that can be clicked to see their details.

Optionally, the last recurrent form allows the user to repeat the time range up to a new selected date limit.

We actually tested this funcionality in the Latin American market where this application is being used and some things have changed since the first time we launched it.

  • For example, we added the icons at the left of the date and time inputs because some users didn't know they were inputs.

  • We added some popovers (blue small text) that informs the user about the funcionality of that input.

  • We also expend time on tutorials on how to set the time slots in the calendar because it is not a straight forward action, however, after teaching the user how to make use of it, he/she really appreciated the funcionality because the user only needed to create time slots one time for them all.

  • We also did a research on our target users who we first thought were the doctors, we later discovered that the actual users were the assistants.

Here's a screenshot on how the calendar looks with open events:

Calendar with events

Improve this answer

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.