Users need to schedule a time to send a batch of messages

[quis]

First design (2016): alphagov/notifications-admin#903
4 days (2016): alphagov/notifications-admin#979
New radios (2017): alphagov/notifications-admin#1222
Buttons not links (2019): alphagov/notifications-admin#2938
New design (2023): alphagov/notifications-admin#4847

Live: https://www.gov.uk/notify

Prototypes: https://time-and-day-pickers.glitch.me
Alice Bartlett – Burn your <select> tags: https://www.youtube.com/watch?v=CUkMCQR4TpY

[tombye]

The first design (2016)

This just asked the user to chose whether to send the batch now or on the hour for any hour in the next 24 hours.

Screengrab from alphagov/notifications-admin#903.

This initial design already contains a few features that carried through into future iterations:

• having all options as radio buttons but hiding all except the one for 'Now' initally, because most jobs will send immediately
• keeping 'Now' visible when an hour in the future is chosen
• hiding all other options by default, or when a hour in the future is chosen, and using a button to show them again

[tombye]

4 days (2016)

Increases the number of hourly timeslots to include any hour in the next 4 days.

Screengrab from alphagov/notifications-admin#979.

Incorporates the following changes:

• 'Later' button is replaced with a button for each of the next 4 days
• pressing the 'Choose another time' button reverts to the initial state, showing 'Now' and buttons for the 4 days

[tombye]

New radios (2017)

Screenshot from alphagov/notifications-admin#1222.

Incorporates the following changes:

• plugs in the new style of radios from GOVUK Elements which uses CSS to create a single colour, high contrast, design
• changes the style of the buttons for each of the next 4 days to look like links
• adds a 'Back' button (which also looks like a link) to the bottom of the radios for hours

[tombye]

Buttons not links (2019)

Screenshots from alphagov/notifications-admin#2938.

Changes the styling of the following buttons from links to the secondary button style from design system:

• the buttons to show radios for each hour in a day
• the 'Back' button below the radios which returns things to the inital state

[tombye]

Update to solve accessibility problems (2023)

The component was audited for accessibility issues by the Digital Accessibility Centre (DAC) in February 2021. They reported:

• having a single, preselected, radio in the default state was confusing
• use of a button to expand another section (the buttons for each day) without semantics to communicate this is confusing

We also needed to allow users to choose an hour in the next 7 days, not 4.

We redesigned the component to look, and work, like this:

Closed by default	Open (choose day to send)

Open (choose time to send)	Closed with date and time chosen

Notes on redesign

We did a lot of prototyping before we chose the design shown here: https://time-and-day-pickers.glitch.me/.

Other usability features we put into this design:

• you now have to confirm your choice of timeslot by clicking a button or pressing enter instead of just clicking it, to make it easier to change your mind
• to reduce the amount of times we change what is focused, we now only do it when moving between the 'views' for days or timeslots and only focus:
  • the previously selected day or timeslot, or
  • the first one, if none was selected
• changing focus to a button (for a day) or radio (for a timeslot) causes its containing fieldset to be announced when using a screen reader which gives useful context on the new content we introduced
• the new visual design makes it easier to add support for more days, as evidenced by us extending them to 7 shortly after releasing the redesign
• the visual design of the expanding button borrows from GOV.UK's new navigation menus, adding consistency

The redesigned component was tested by DAC on Oct 9th 2023 and produced no issues.