2

As part of a filter panel (mobile app only), users should be able to filter on a time range for when their will be food available for them to pick up.

What is a better option for the time pickers:

Option 1

  1. Drop downs enter image description here

Option 2

  1. +/- pickers enter image description here

Option 3

  1. Arrow pickers enter image description here

Another option is to not require users to set both the start and end times, and allow them to just specify one time (this will result in less options displayed in the filter return but may be better usability or more logical behaviour for users):

Option 4: enter image description here

Improve this question

6 Answers 6

Reset to default
3

This kind of choice should be as simple and intuitive as possible; And i would prefer selected a pre configured option, rather than selection a "start hour" and a "end hour". The pizza hut solution of @NPN seems to go in the right direction

Even if specific hour range should be available as an option. User will appreciate that you have simplified its choice making

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
1

To elaborate more on the options, I would say the option 4. My recent experience with the PIZZAHUT online order, they have set the current time(Pick up now) with the local time display to the user and indicate when the user can pick up the order. That is important if the app is a target for different time zones or it is more user-friendly as I feel it when I did the ordering.

Ex: enter image description here

Improve this answer
1

I would be advice you to be careful with something like this, culture will have a significant impact on the design.

Why is culture important

I am Dutch and here it is usually so that when you select a certain time everyone will be there at that time (not 15 / 30 min later). My personal preference will be Option 4, but with a small change that the time will be a dropdown instead a +/- increment.

In a different country, like in the US, a between time might be better. I believe you do a lot by car in the US so a between time might be better incase you get stuck in trafic.

The wireframe option of @Renaud is a good inbetween version. I prefer this wireframe over that of @Kitanga Nday because it has less options, so the goal of an action is more clear.

Why the dropdown instead of incrementing?

Currently the local time for me is 14:30 (2:30 PM), if I want to pick it up after work I will need to press the + increment atleast 16 times with an increament of 15 min. A dropdown will solve this issue.

Improve this answer
4
  • But my design uses the drop-downs
    – Kitanga Nday
    Jun 26, 2018 at 19:21
  • Asking the user to estimate when exactly they think they can do something leads to information overload, because there is too much that can happen that leads to you r estimate being wrong. And yes, to people that does matter, even though most don't realize it. This is why I placed the buttons at the top, they are a quick way for a user to just guess, without worrying too much about details
    – Kitanga Nday
    Jun 26, 2018 at 19:24
  • 1
    I understand what you tried to do, the reason I prefer the version of @Renaud over yours is because of Hick's Law: 'The more options a user has, the more time they will take to make a decision.'. The questions I have with your version is as followed: 'What will happen when I select 2 hours? Will I still need to specify a certain time?' while the Renaud version gives you 2 possible actions, either I select an amount of min or I specify the exact time.
    – Kevin M.
    Jun 27, 2018 at 20:06
  • Hick's law is the reason why I suggested the extra buttons. Pretty much my design is the same as @Renaud, only difference is his is better laid out. btw, if you give a user a time range, each minute is arguably it's own option. So from 02:00AM to 03:00AM you have 60 options already.
    – Kitanga Nday
    Jul 1, 2018 at 17:42
1

Making the choice should be as fast as possible. I can't remember why, but I know giving the user the fastest way to make a choice (by narrowing down their available choice pool) will lead to a better user experience.

EDIT: As I explained in @Kevin's answer, it's because of information overload. The options placed at the top ("15min", "30min", etc.) are there so as to make it easier for the user to guess. But @Kevin had a good point about culture, if your app is going to be used by people from different countries, make certain you take that into consideration.

With that said, you probably want to use Option 1 (I prefer it to Option 2), but with some buttons at the top of it:

Pickup time filter wireframe

The time range below should of course update to match the button selected.

This will work well with most users, since they probably want to make the choice as quickly as possible. Giving the user only the option of picking the time range could lead to information overload. Using only buttons leads to less mental work, and this will lead to faster choice. Which is good, i guess.

This might be one of the reasons why YouTube uses this horizontal bars instead of a slider to change the video's speed:

Youtube video speed selector

Additionally, you can use some machine learning to tailor the experience to the user. If the user keeps picking 15mins then make sure that the 15mins button is already selected. If the user keeps picking a certain time range (e.g. from 02:00AM to 04:00AM), then have the app respond accordingly.

Improve this answer
0

For general usage, I'm missing an option that combines several approaches, using common values for quick entry, nudge buttons (arrows or +/-) for quick adjustments and a text field for precise tweaking.

Google Maps uses this in its directions UI:

Google Maps time picker

Whether it's right for your project, though, can be determined through user testing. I'd recommend doing a few qualitative user tests with your target group on the devices you're primarily targeting to find the right design, and setting up analytics to collect quantitative data afterward.

As for +/- vs arrows for nudge buttons: I've seen both used, so both should be good choices. You should make sure that your specific iconography is clear and doesn't conflict with anything else in your UI. User testing will help with that, too.

Improve this answer
2
  • Thanks! And in your opinion, do you feel it is a more intuitive experience to simply set one time and use that as the sole criteria, rather than start/end times, where they are anchored and used as multi-criteria?
    – Casey Lewis
    Nov 27, 2017 at 3:16
  • @CaseyLewis That's something to test for your particular use case. Personally, from experiences in ordering food delivery, the main time information I was looking for was when it will get to my office. (30 mins.? in 2 hours?) For that, I'd need a filter by max. delivery time. I've only ordered lunch this way, but I could also imagine one might want to filter by opening time at night or on a week-end. Perhaps an "Open now" checkbox might suffice, though. Talk to potential users, see what their experiences were in the past.
    – Tin Man
    Nov 27, 2017 at 18:29
0

I think I would go with option 5th.

Option 5: enter image description here

This way user chooses the date by +- buttons if in case the time is next hour or otherwise can use dropdown to access all the options.

Improve this answer

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.