Improve the opening times input UX

[ob6160]

Background

Right now toilet opening times have to be painstakingly input one-by-one, leading to it becoming a fairly time consuming process.

A recent piece of anonymous user feedback further highlights the need for some improvements here:

When editing opening hours can we have a way to say its the same every day to save typing it out multiple times? I see some people are putting opening in the comments and this may be why.

Here's an example of what the user interface looks like currently:

It takes fourteen discreet actions to input each of the open/close times for every day in the week.

How can we improve this experience for our users? Can we perhaps allow for a single range (0700—1700) to be repeated across each of the input fields?

[Ocoldwell]

I've a few approaches that we could try and they might help with the user experience:

• When someone knows the opening times, it might be slightly better UX for the opening times to be open by default, as that's up to an additional 7 actions a user must make to enter data for a week. This may create data issues of it's own, wherein a user manually inputs the times but doesn't remember to close a day of the week.

• We could have an additional input which sets a global/default range at the top of the form, when this is updated it will fill all time range inputs where a toilet is open with this value, which then allows a user to then fine-edit as necessary.

• Another option we could try is for the user to set the first range themselves, and then when they select the next row of inputs the previous value will populate the row range which they then can adjust as necessary.

• We could also try having a toggle switch with the question "Is it open the same time each day?" which the user can click which would reduce the inputs to one which they can then edit, we can then populate the form data in the correct format for the 7 days.

[harryharrold]

There's some excellent suggestions right there - @ob6160 do we have any data as to which pattern of opening hours is most common?

If it's usually the same for 7 days - maybe the fourth, usually open 5 days the same, then weekends different - maybe the second or third?

[ob6160]

Thanks both, @harryharrold good shout. @Ocoldwell thanks for the considered list of ideas.

When I get a mo I'll run some queries against the db so we can determine what people usually put down to better evaluate our options.

[Ocoldwell]

Another idea we could try including an edit all tickbox/toggle which when toggled on will mean any changes to time inputs will edit all time inputs for the week. Then if fine grain changes are needed they can toggle it off.

[ob6160]

As an aside (aware a little off topic) @Ocoldwell if you fancied a separate future challenge - I feel like the whole form could do with a bit of a refactor / design refresh, the code is quite complex, making more involved changes like this quite difficult. I've avoided touching this up until now because the form has historically been a bit of a pain to improve/edit haha

[Ocoldwell]

@ob6160 I took a quick look last night at the form code and thought the changes would be fairly awkward to implement as is. I'm happy to take a look at refactoring and improving it, it might take me a few weeks to finish as I'm due on a minimal computer holiday for the next two weeks. If that isn't an issue, I'll start taking a look at it tonight.

I saw that you're currently revamping the design system and moving away from cssinjs & Emotion, so I can look at refactoring out that reliance too.

[ob6160]

amazing, thank you! no pressure in terms of time, just really happy that you're interested in helping. I'm not planning to touch anything that would conflict with those changes.

[Ocoldwell]

I'm not sure on preference for this but I have an initial PR almost ready to go for this issue which introduces the Edit All Open Hours checkbox in the existing form, I'll finish it up by writing some cypress tests tomorrow. I can carry on with refactoring as a separate issue if this functionality would be a help now.

[ob6160]

sounds like a good plan! Please go ahead and raise the pr then i'll tick the Vercel build so we can try it out and work out if we want to proceed with that idea.

Making a new issue to track the wider refactor sounds good as well 👍