What pattern should I use for choosing duration of an event?

Hi, I’m currently working on a project and one of the actions there is choosing the lenght of an event (so hours and minutes) and at first I drew it as a slider. Then, I decided that it was a pretty stupid idea because how do I limit the number of options (as in: which duration is at the end of the slider). Now I’m thinking about two input fields, where users can type in whatever number they need. But is that the only good option? Would you have some hints as to how to go about this thing?

1 Like

If you want to accept any length, the input-field ist imho the best option.

I would check out what https://www.eventbrite.com.au/ do. Another good place to get inspiration for booking events could be Hotel booking forms and flight booking forms. There are loads of ways to do this.

Are there any good defaults you could use? Maybe you can see from analytics or studies that users usually set lengths in hours or days. That would be a good way to find out which sliders you may use.

Yes, you should always allow the length to be input by typing, to make it accessible for everyone.

One field may make sense, if people usually input whole hours or days, but not for shorter periods.

It may make sense to allow people to input all kinds of values, like 3 days, 72hrs or even 3:47:51. If your frontend can recognize this, cool. If not, give people more input fields and display the period in a readable way, so people can make sure the system got it right. Eg. I input 3:00:00, which should be translated to 3 hours, 0 minutes and 0 seconds.

All this depends on local custom so make sure you cover all ways your customers may want to write in time.

Check this out Structured Format design pattern

1 Like