We are scheduling tasks, working with time fields on a daily basis. Need to set up a meeting, schedule a pick-up or plan for next week? Time entry is involved.

If we think about time in a purely technical way, it boils down to a sum of ticks or an object with an hour, minute, second and millisecond part. That’s a bottom up approach, but if we put ourselves in the shoes of the user, we’ll have to think about it differently.

To find the best way our users can pick times we’ll need to unpack and put things in context.

Typing it in

The most simple way for the user to set a time is typing it in, which works in certain scenarios.

Think of something like typing in “Pick up anniversary cake at 4pm tomorrow”. The app will then figure out that “4pm tomorrow” is an actual date and a time, and will set my reminders accordingly.

However most of the times we need the entry in a more structured format than just free text.

So it all gets down to a list of options the user has to pick from. For staying true to the context we need to skim it down as much as we can and keep the list as short as possible.

Reducing the number of options and errors

Setting minimum and maximum values is important. Let’s say the user needs to pick a time during business hours.

Don’t let the users double-book a time slot. If you have appointments every 30 minutes, set the steps to 30 minutes. It reduces the number of available options and helps the user think in terms of 30 minute blocks.

By setting boundaries and making invalid dates un-selectable we can reduce errors and improve the user experience.

Hour/Minute scroller

Pretty straight forward on a phone. Familiar interface for everyone with a smartphone. Render a separate wheel for hour, minute and AM/PM when working with a 12 hour format.

View interactive example

Numpad

Use it in situations when typing is easier. Have the AM/PM buttons easily reachable where it makes sense.

View interactive example

Timespan

In some cases it makes more sense to select a timespan instead of picking an exact time. You can do it with a two wheel layout, for hour and minutes or with a simple list picker with values ranging from a couple of minutes to hours. Set the steps appropriately to your use-case.

Inline options

If you have a limited number of options it might make sense to expose them right on the form instead of adding another layer for a modal. You can render a list of options. Turn them on/off depending on availability and let the user pick a time.

Time Format

Be aware of the cultural differences. Based on the user settings work with 24 hour or 12 hour formats. Make the AM/PM selection obvious. If you are expecting a time in a different timezone than the user is in, make it clear: “All times are in UTC”.

Be context aware, don’t let the user pick 7 PM for an appointment if your business is closed at that time.

If you are looking for quick, no-hassle solutions that can be literally implemented in minutes, check out the products we provide at Mobiscroll.