darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-04-09 11:54:14 -04:00
Code Issues Packages Projects Releases Wiki Activity

Improve pacing and sequence of information in the broadcast tour

Browse Source 
This commit refines which information we show on each page.

Specifically we’re
- adding some wording (‘at exactly the same time’) to try to communicate
  the immediacy
- giving the ‘loud noises’ message it’s own screen to really draw
  attention to it
- moving the ‘no phone numbers bit’ later in the journey, and
  experimenting with explaining why that is, to make it clearer how it’s
  different to a text message
This commit is contained in:
Chris Hill-Scott
2020-08-25 11:31:25 +01:00
parent 19ce1bd43a
commit dbfe293b4e
9 changed files with 2659 additions and 2595 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/broadcast-tour/3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 34 KiB

BIN
app/assets/images/broadcast-tour/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

5151
app/assets/images/broadcast-tour/artwork.ai
View File

File diff suppressed because one or more lines are too long

2
app/main/views/broadcast.py
View File

@@ -23,7 +23,7 @@ from app.utils import service_has_permission, user_has_permissions
@user_has_permissions()
@service_has_permission('broadcast')
def broadcast_tour(service_id, step_index):
if step_index not in (1, 2, 3, 4):
if step_index not in (1, 2, 3, 4, 5):
abort(404)
return render_template(
f'views/broadcast/tour/{step_index}.html'

11
app/templates/views/broadcast/tour/2.html
View File

@@ -3,8 +3,8 @@
{% extends "admin_template.html" %}
{% block per_page_title %}
In an emergency, you can broadcast an alert to every mobile phone in
the affected area.
In an emergency, broadcast an alert to every mobile phone in
the affected area at exactly the same time.
{% endblock %}
{% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
@@ -15,12 +15,9 @@
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<h1 class="heading-medium">
In an emergency, you can broadcast an alert to every mobile phone in
the affected&nbsp;area.
In an emergency, broadcast an alert to every mobile phone in
the affected area at exactly the same time.
</h1>
<p class="govuk-body heading-medium">
You do not need to know people’s phone&nbsp;numbers.
</p>
<p class="govuk-body heading-medium govuk-!-margin-bottom-6">
<a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".broadcast_tour", service_id=current_service.id, step_index=3) }}'>
Continue

9
app/templates/views/broadcast/tour/3.html
View File

@@ -3,7 +3,7 @@
{% extends "admin_template.html" %}
{% block per_page_title %}
An emergency alert looks a bit like a text message.
The phone will make a loud alarm noise, even if it’s set on silent.
{% endblock %}
{% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
@@ -14,12 +14,8 @@
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<h1 class="heading-medium">
An emergency alert looks a bit like a text&nbsp;message.
The phone will make a loud alarm noise, even if it’s set on silent.
</h1>
<p class="govuk-body heading-medium">
It also makes a loud alarm noise, even if the phone is set
on silent.
</p>
<p class="govuk-body heading-medium">
<a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".broadcast_tour", service_id=current_service.id, step_index=4) }}'>
Continue
@@ -28,6 +24,7 @@
</div>
<div class="govuk-grid-column-one-half">
<img src="{{ asset_url('images/broadcast-tour/3.png') }}" alt="">
<link rel="preload" href="{{ asset_url('images/broadcast-tour/4.png') }}" as="image">
</div>
</div>
</div>

30
app/templates/views/broadcast/tour/4.html
View File

@@ -3,40 +3,32 @@
{% extends "admin_template.html" %}
{% block per_page_title %}
You’re in training mode.
An alert looks a bit like a text message.
{% endblock %}
{% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
{% block content %}
<div class="navigation-service">
<div class="navigation-service-name govuk-!-font-weight-bold">
{{ current_service.name }} <span class="navigation-service-type--training">Training</span>
</div>
</div>
<div class="banner-tour banner-tour-no-fixed-height banner-tour-with-service-name">
<div class="banner-tour banner-tour-no-fixed-height govuk-!-margin-top-0">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<div class="govuk-grid-column-one-half">
<h1 class="heading-medium">
You’re in training mode.
An alert looks a bit like a text message.
</h1>
<p class="govuk-body heading-medium">
There’s no risk of broadcasting a real alert.
It’s broadcast directly from a mobile phone mast, so you don’t
need to know anyone’s phone number.
</p>
<p class="govuk-body heading-medium">
Get used to the system now, so you know what to do in an&nbsp;emergency.
</p>
<p class="govuk-body heading-medium">
When you’re ready, you can turn off training mode.
</p>
<p class="govuk-body heading-medium">
<a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".service_dashboard", service_id=current_service.id) }}'>
Continue to dashboard
<a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".broadcast_tour", service_id=current_service.id, step_index=5) }}'>
Continue
</a>
</p>
</div>
<div class="govuk-grid-column-one-half">
<img src="{{ asset_url('images/broadcast-tour/4.png') }}" alt="">
</div>
</div>
</div>

43
app/templates/views/broadcast/tour/5.html Normal file
View File

@@ -0,0 +1,43 @@
{% from "components/banner.html" import banner_wrapper %}
{% extends "admin_template.html" %}
{% block per_page_title %}
You’re in training mode.
{% endblock %}
{% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
{% block content %}
<div class="navigation-service">
<div class="navigation-service-name govuk-!-font-weight-bold">
{{ current_service.name }} <span class="navigation-service-type--training">Training</span>
</div>
</div>
<div class="banner-tour banner-tour-no-fixed-height banner-tour-with-service-name">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="heading-medium">
You’re in training mode.
</h1>
<p class="govuk-body heading-medium">
There’s no risk of broadcasting a real alert.
</p>
<p class="govuk-body heading-medium">
Get used to the system now, so you know what to do in an&nbsp;emergency.
</p>
<p class="govuk-body heading-medium">
When you’re ready, you can turn off training mode.
</p>
<p class="govuk-body heading-medium">
<a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".service_dashboard", service_id=current_service.id) }}'>
Continue to dashboard
</a>
</p>
</div>
</div>
</div>
{% endblock %}

8
tests/app/main/views/test_broadcast.py
View File

@@ -137,7 +137,8 @@ def test_broadcast_pages_403_for_user_without_permission(
(1, 'Continue', partial(url_for, '.broadcast_tour', step_index=2)),
(2, 'Continue', partial(url_for, '.broadcast_tour', step_index=3)),
(3, 'Continue', partial(url_for, '.broadcast_tour', step_index=4)),
(4, 'Continue to dashboard', partial(url_for, '.service_dashboard')),
(4, 'Continue', partial(url_for, '.broadcast_tour', step_index=5)),
(5, 'Continue to dashboard', partial(url_for, '.service_dashboard')),
))
def test_broadcast_tour_pages_have_continue_link(
client_request,
@@ -161,7 +162,8 @@ def test_broadcast_tour_pages_have_continue_link(
pytest.param(1, marks=pytest.mark.xfail),
pytest.param(2, marks=pytest.mark.xfail),
pytest.param(3, marks=pytest.mark.xfail),
4,
pytest.param(4, marks=pytest.mark.xfail),
5,
))
def test_broadcast_tour_page_4_shows_service_name(
client_request,
@@ -179,7 +181,7 @@ def test_broadcast_tour_page_4_shows_service_name(
)
@pytest.mark.parametrize('step_index', (0, 5))
@pytest.mark.parametrize('step_index', (0, 6))
def test_broadcast_tour_page_404s_out_of_range(
client_request,
service_one,