notifications-admin/app/templates/views/design-patterns-content-guidance.html

{% from "components/banner.html" import banner_wrapper %}
{% extends "withoutnav_template.html" %}

{% block page_title %}
Design patterns and content guidance – GOV.UK Notify
{% endblock %}

{% block maincolumn_content %}

<div class="grid-row">
  <div class="column-two-thirds">

    <h1 class="heading-large">
      Design patterns and content guidance
    </h1>

    {% call banner_wrapper(type='warning') %}
      <h2 class="heading-medium">This content is a work in progress</h2>

      <p>It should not be relied upon</p>
    {% endcall %}

    <section id="contents">
      <h2 class="heading-medium" id="contents">Contents</h2>

      <ul class="list list-bullet">
        <li><a href="#when-to-send-notifications">When to send notifications</a></li>
        <li><a href="#design-patterns">Design patterns</a></li>
        <li><a href="#content-guidance">Content guidance</a></li>
      </ul>
    </section>

    <section id="contents">
      <h2 class="heading-medium" id="when-to-send-notifications">When to send notifications</h2>

      <h3 class="heading-small" id="send-notifications-to-reduce-anxiety">Send notifications to reduce anxiety</h3>

      <p>Talk to your call centre staff to find out why people call – this is probably why they are anxious. For example:</p>

      <ul class="list list-bullet">
        <li>I made a claim online – did it go through?</li>
        <li>I sent you an application – did you receive it?</li>
        <li>I sent you some supporting documents – did you receive them?</li>
        <li>Did you approve my application?</li>
        <li>Have you sent my new passport yet?</li>
        <li>Has my application got lost or stuck somewhere?</li>
      </ul>

      <h3 class="heading-small" id="tell-users-if-they-need-to-do-something">Tell users if they need to do something</h3>

      <p>If someone needs to do something, tell them. For example:</p>

      <p>Your MOT expires on 28 September – get an MOT</p>

      <p>The deadline for tax returns is 31 January – complete your self assessment tax return</p>

      <p>Your passport photo didn&#8217;t meet our standards – take a new photo</p>

      <h3 class="heading-small" id="security-checks">Security checks</h3>

      <p>When someone does something important, send a security check to the people who might be affected. For example:</p>

      <ul class="list list-bullet">
        <li>We registered a Lasting Power of Attorney in your name</li>
        <li>You no longer own the freehold for 1 Candle Street, Mile End, London</li>
        <li>Sainsburys Ltd applied for planning permission for 3 Candle Street, Mile End, London</li>
      </ul>

      <h3 class="heading-small" id="2-factor-code">2-factor code</h3>

      <p>When someone wants to sign in, send a 2-factor authentication code to the number you have on file. For example: Your GOV.UK verification code is 123 456</p>
    </section>

    <section id="design-patterns">
      <h2 class="heading-medium">Design patterns</h2>

      <h3 class="heading-small" id="collecting-contact-preferences">Collecting contact preferences</h3>

      <p>Use radio buttons to ask the user how they&#8217;d like to be contacted:</p>

      <ul class="list list-bullet">
        <li>by post</li>
        <li>be email</li>
        <li>by text message</li>
        <li>by phone call</li>
      </ul>

      <p>When the user selects a contact method, dynamically prompt them for contact details (if you don&#8217;t already have them)</p>

      <p>Ask the user to pick <strong>one</strong> primary contact method. Users don’t like duplicate notifications.</p>

      <p>You can still contact them by other contact methods if appropriate.</p>

      <p>Collect these using the patterns in the <a href="https://www.gov.uk/service-manual/user-centred-design/resources/patterns/index.html">Government Service Manual</a> and the <a href="https://designpatterns.hackpad.com">Hackpad</a>.</p>

      <h3 class="heading-small" id="telltheusertheyregoingtoreceivenotifications">Tell the user they&#8217;re going to receive notifications</h3>

      <p>Tell the user that you will send them notifications. For example: </p>

      <blockquote>
      <p>We will email you about this petition, and nothing else. You can unsubscribe at any time</p>
      </blockquote>
    </section>

    <section id="content-guidance">
      <h2 class="heading-medium">Content guidance</h2>

      <h3 class="heading-small" id="include-one-important-message">Include one important message</h3>

      <p>Don&#8217;t explain the whole process – just tell the user what will happen next.</p>

      <ul class="list list-bullet">
        <li>If the user needs to do something, tell them what they have to do. Include a link if possible – see our <a href="">Information security guidelines</a></li>
        <li>When will the next thing happen? If the next step is important, tell them when it will happen. For example, we&#8217;ll make a decision by 28th October.</li>
        <li>How long until they are done? If the next step isn&#8217;t important, just tell them when they&#8217;ll be completely finished. For example, you&#8217;ll get your new passport by 2nd November.</li>
      </ul>

      <p>Don’t send a message for steps that aren’t important to the user. For example, you don’t need to tell the user about background checks unless they fail one of the checks.</p>

      <h3 class="heading-small" id="writing-for-notifications">Writing for notifications</h3>

      <ul class="list list-bullet">
        <li><strong>Write tailored content. You&#8217;re writing to just one person – so tell them exactly what they need to know</strong></li>
        <li>Write as if you’re speaking – use personal language (you, we etc)</li>
        <li>Tell the user when you’ll do something (by Tuesday, by 28th October) not how long you’ll take (within 3 working days, within 6 weeks)</li>
        <li>Follow <a href="https://www.gov.uk/topic/government-digital-guidance/content-publishing">GOV.UK content guidance</a></li>
      </ul>

      <h3 class="heading-small" id="writing-for-sms">Writing for SMS</h3>

      <ul class="list list-bullet">
        <li>Get the most important message in the first sentence</li>
        <li>Write one idea per sentence</li>
        <li>Make it as short as possible – but don’t use jargon or acronyms without explanation</li>
        <li>Don&#8217;t say ‘Dear’ or ‘Hi’ – just launch straight in</li>
      </ul>

      <h3 class="heading-small" id="writing-for-emails-and-letters">Writing for emails and letters</h3>

      <p>Say ‘Dear’, not ‘Hi’ – some people prefer ‘Hi’ and some prefer ‘Dear’, but only the people who prefer ‘Dear’ care enough to complain when we say ‘Hi’</p>

  </div>
</div>

{% endblock %}