darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-26 17:24:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add a tour for users new to broadcast services

Browse Source 
This is an initial, prototype-quality attempt at introducing some kind
of tour for users new to broadcasting. A lot of the users we’re speaking
to don’t have a good concept of what broadcasting means, which is
causing usability problems down the line.

We did a similar thing in the early days of Notify to explain the
concept of message templates and personalisation.
This commit is contained in:
Chris Hill-Scott
2020-08-03 13:37:34 +01:00
parent b2b58ec044
commit 19b42e3331
16 changed files with 3400 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/templates/views/broadcast/dashboard.html
View File

@@ -10,6 +10,14 @@
<h1 class="govuk-visually-hidden">Dashboard</h1>
{% if current_user.has_permissions('manage_templates') and not current_service.all_templates %}
<nav class="govuk-!-margin-top-2 govuk-!-margin-bottom-6">
<a class="govuk-link govuk-link--no-visited-state pill-separate-item govuk-!-padding-top-4 govuk-!-padding-bottom-4 govuk-!-font-weight-bold" href="{{ url_for('.choose_template', service_id=current_service.id) }}">
Start by creating a template
</a>
</nav>
{% endif %}
<h2 class="heading-medium govuk-!-margin-bottom-2">Live broadcasts</h2>
{{ ajax_block(

41
app/templates/views/broadcast/tour/1.html Normal file
View File

@@ -0,0 +1,41 @@
{% from "components/banner.html" import banner_wrapper %}
{% extends "admin_template.html" %}
{% block per_page_title %}
Step 1
{% endblock %}
{% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
{% block content %}
<div class="banner-tour banner-tour-no-fixed-height govuk-!-margin-top-0">
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<h1 class="heading-medium">
You’ve been invited to use GOV.UK Notify to broadcast alerts
</h1>
<ul>
<li>
Broadcasting is a new technology for alerting members of the
public
</li>
<li>
It should be used when there’s an imminent risk to life
</li>
</ul>
<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=2) }}'>
Find out how it works
</a>
</p>
</div>
<div class="govuk-grid-column-one-half">
<img src="{{ asset_url('images/broadcast-tour/1.png') }}" alt="">
<link rel="preload" href="{{ asset_url('images/broadcast-tour/2.png') }}" as="image">
</div>
</div>
</div>
{% endblock %}

44
app/templates/views/broadcast/tour/2.html Normal file
View File

@@ -0,0 +1,44 @@
{% from "components/banner.html" import banner_wrapper %}
{% extends "admin_template.html" %}
{% block per_page_title %}
Step 2
{% endblock %}
{% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
{% block content %}
<div class="banner-tour banner-tour-no-fixed-height govuk-!-margin-top-0">
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<h1 class="heading-medium">
A broadcast will alert every phone in an area
</h1>
<ul>
<li>
The alert will appear even if the phone’s screen is locked
</li>
<li>
The phone will play an alarm sound even if it’s set to silent
</li>
<li>
Any phone that enters the area while the broadcast is live will
get the alert
</li>
</ul>
<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) }}'>
How to try it out
</a>
</p>
</div>
<div class="govuk-grid-column-one-half">
<img src="{{ asset_url('images/broadcast-tour/2.png') }}" alt="">
<link rel="preload" href="{{ asset_url('images/broadcast-tour/3.png') }}" as="image">
</div>
</div>
</div>
{% endblock %}

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

@@ -0,0 +1,43 @@
{% from "components/banner.html" import banner_wrapper %}
{% extends "admin_template.html" %}
{% block per_page_title %}
Step 3
{% endblock %}
{% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
{% block content %}
<div class="banner-tour banner-tour-no-fixed-height govuk-!-margin-top-0">
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<h1 class="heading-medium">
You have a trial account
</h1>
<ul>
<li>
There’s no risk of triggering a real, live broadcast
</li>
<li>
Get familiar with the system now, so you’re ready to use it if
there’s an emergency
</li>
<li>
When you’re ready, apply for a live account
</li>
</ul>
<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 class="govuk-grid-column-one-half">
<img src="{{ asset_url('images/broadcast-tour/3.png') }}" alt="">
</div>
</div>
</div>
{% endblock %}