User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I want to use a time picker for desktop only. It's not for mobile.
A few options I have are:
A. use 2 dropdowns with format HH:MM for start and end time with 30 minute slots B. use 2 time pickers from Material Design or similar that allows selection from the dial
https://m3.material.io/components/time-pickers/overview (accessibility is also taken into account)
What can be the criteria to prefer one to the other?
To start with, if all time slots are 30-minute intervals, you don't need to display the end time. Instead, just list the start time options (e.g., 9:00, 9:30, 10:00) and indicate the duration elsewhere.
When comparing A and B, the Material design certainly has a modern and refreshing appearance, while the dropdown is more basic. However, it's important to consider consistency across the app and determine whether the Material design fits the overall design language or is overkill. Setting the design aspect aside, a dropdown is more flexible in terms of adding functionality and enhancing the app's usefulness. For instance, you might find adding a day picker in front of the time dropdown useful, the dropdown saves space while making app more scalable.
Also, note that the implementation of the dial picker is currently only planned stated in the the website, so it's something to keep in mind. I have a mockup
