The Best Mobile UI for Picking Date and Time
Booking appointments online is a challenging task on mobile devices. One reason is that most interfaces use native iOS and Android pickers that are a pain to use.
Native pickers are the input components that spin like slot machines. The user has to swipe their finger up and down each slot to select a date and time.
If they swipe too hard, they could easily miss the intended input. To select the correct input, they have to carefully swipe to the value they want with the right amount of force.
Picking a date and time on a booking form shouldn’t feel like a silly game. Users want to book their appointment and move on with the next activity in their life. The more time they waste fiddling with the native picker, the more frustrated they’ll get.
It’s best not to use native pickers for selecting dates and time. Instead, designing chip components will allow you to provide a more seamless user experience.
Chip components are versatile because you can use vertical or horizontal ones depending on the context. With dates, it’s better to use vertical chips because the text label isn’t that long.
The text in a date chip includes the day name and number. The day number and abbreviated day name fit nicely in a vertical chip. As a result, you can display more of them in a row.
A single row is enough to display seven days. If the user needs to see more days, they will swipe, and the row will scroll like a carousel component. The peripheral chips would bleed on the screen edges to signify the carousel functionality.
When the user selects a chip, it will highlight with a high-contrast, 2-pixel black border. The chips are easy to tap with the finger because of their ample margin spacing.