From 053ed96974f2f45d347652c5353ecf68bd7073d7 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 27 Jul 2020 17:25:13 +0100
Subject: [PATCH] Make start time explicit when previewing a broadcast
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                                  | 2 +-
 app/templates/components/radios.html               | 5 +++--
 app/templates/views/broadcast/preview-message.html | 9 ++++++++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/main/forms.py b/app/main/forms.py
index 985f50bc6..f6f2716f3 100644
--- a/app/main/forms.py
+++ b/app/main/forms.py
@@ -993,7 +993,7 @@ class ChooseBroadcastDurationForm(StripWhitespaceForm):
         )
 
     finishes_at = RadioField(
-        'When should this broadcast end?',
+        'End time',
     )
 
 
diff --git a/app/templates/components/radios.html b/app/templates/components/radios.html
index 477f0135c..2b3aa0a02 100644
--- a/app/templates/components/radios.html
+++ b/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 }}">
diff --git a/app/templates/views/broadcast/preview-message.html b/app/templates/views/broadcast/preview-message.html
index 8fa7a771c..70a196078 100644
--- a/app/templates/views/broadcast/preview-message.html
+++ b/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 %}