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.
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.