Make start time explicit when previewing a broadcast

We recently introduced a form control that lets user choose when a
broadcast ends.

Based on the most recent research participant, we think:
- there is a specific misunderstanding of what this control does
- there is a general low level of understanding of what a ‘broadcast’
  means

People will try to understand what a ‘broadcast’ is by using mental
models they have for other kinds of messaging, for example text
messages.

Other kinds of messaging are one-to-one, i.e. they go from a sender to a
recipient. They are not ongoing in any way.

Emails and texts are sent at a time (and for all practicable purposes
are received at that same time). So, when we present the user with
a form that controls time, they might well assume it controls the time
when the message will be sent.

This is a feature we offer for sending messages using a spreadsheet, and
that’s where we’ve borrowed this pattern from.

We reinforce this assumption with the labelling of the form control. By
front-loading it with the word ‘When’ we are playing to the users
confirmation bias, i.e. they are interpreting the meaning of the control
in a way that confirms their prior beliefs about how messaging works.

So this commit does two things:
- re-labels the form to front-load the word ‘End’ not ‘When’
- adds text to the page explaining when the broadcast will start, so
  there’s a chance of overriding that confirmation bias

If we can get users to go through this before sending a broadcast for
real, it could help them learn what a broadcast is, and how it differs
from sending text messages.

app/main/forms.py

@@ -993,7 +993,7 @@ class ChooseBroadcastDurationForm(StripWhitespaceForm):
         )
 
     finishes_at = RadioField(
-        'When should this broadcast end?',
+        'End time',
     )
 
 

app/templates/components/radios.html

@@ -24,11 +24,12 @@
  field,
  hint=None,
  wrapping_class='form-group',
- show_now_as_default=True
+ show_now_as_default=True,
+ bold_legend=False
 ) %}
  <div class="{{ wrapping_class }} {% if field.errors %} form-group-error{% endif %}">
    <fieldset>
-     <legend class="form-label">
+     <legend class="form-label {% if bold_legend %}govuk-!-font-weight-bold{% endif %}">
        {{ field.label.text }}
        {% if field.errors %}
          <span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">

app/templates/views/broadcast/preview-message.html

@@ -29,9 +29,16 @@
   {{ broadcast_message.template|string }}
 
   {% call form_wrapper() %}
+    <h3 class="govuk-heading-s govuk-!-margin-top-6 govuk-!-margin-bottom-1">
+      Start time
+    </h3>
+    <p class="govuk-body govuk-!-margin-bottom-4">
+      Your broadcast will start when it’s approved by another member of your team.
+    </p>
     {{ radio_select(
       form.finishes_at,
-      show_now_as_default=False
+      show_now_as_default=False,
+      bold_legend=True
     ) }}
     {{ page_footer('Submit for approval') }}
   {% endcall %}