Time Input

The user needs to enter a time or pick a time slot.

Problem

The user needs to enter a time or pick a time slot.

Solution

Instead of keyboard time entry use this to let the user pick a time.

Use this whenever typing in the time is not an option or you need a more structured format.

Use the hour/minute scroller and AM/PM wheels for a 12 hour time format. familiar interface for most smartphone users.

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

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 minute or with a simple list picker with values ranging from a couple of minutes to hours. Set the steps appropriately to your use-case.

If there is available space and a limited number of choices, render an inline list versus showing a modal control.

Based on the user settings work with 24 hour or 12 hour formats. Make the AM/PM selection obvious.

Showing 6 live examples
Scroller
Scroller
Numpad
Time formats
Numpad
Steps
Steps
Timer
Timer
Session
Session
Inline
Inline

Problem

The user needs to enter a time or pick a time slot.

Solution

Instead of keyboard time entry use this to let the user pick a time.

Use this whenever typing in the time is not an option or you need a more structured format.

Use the hour/minute scroller and AM/PM wheels for a 12 hour time format. familiar interface for most smartphone users.

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

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 minute or with a simple list picker with values ranging from a couple of minutes to hours. Set the steps appropriately to your use-case.

If there is available space and a limited number of choices, render an inline list versus showing a modal control.

Based on the user settings work with 24 hour or 12 hour formats. Make the AM/PM selection obvious.

Share in SMS
  • SMS
  • Email