diff --git a/app/views/design-system/patterns/charts.html b/app/views/design-system/patterns/charts.html index f078583c..5830fc20 100644 --- a/app/views/design-system/patterns/charts.html +++ b/app/views/design-system/patterns/charts.html @@ -33,6 +33,10 @@ Select a school +
  • + Get to an answer +
    • + diff --git a/app/views/design-system/patterns/get-to-an-answer.html b/app/views/design-system/patterns/get-to-an-answer.html new file mode 100644 index 00000000..3aa6cc89 --- /dev/null +++ b/app/views/design-system/patterns/get-to-an-answer.html @@ -0,0 +1,170 @@ +{% extends "layouts/layout.html" %} + +{% set serviceNav = "Design system" %} +{% set path = "design-system/patterns/get-to-an-answer" %} +{% set title = "Get to an answer" %} +{% set description = "Ask users questions to determine what information they need. Users are guided to relevant content based on how they respond to a short series of questions. " %} +{% set mainClasses = 'govuk-!-padding-top-0 ' %} + +{% block content %} + +
    +
    +
    + +
    + + + +
    + +
    + + Patterns +

    {{title}}

    + +

    {{description}}

    + +

    When to use this pattern

    + +

    You can create a questionnaire as part of a service or campaign website to help users understand:

    + +
      +
    • what they can get (such as support, advice or benefits)
      • +
    • what actions to take, if that depends on their situation
      • +
    + +

    When not to use this pattern

    + +

    You cannot use this pattern to:

    + +
      +
    • work out if someone is eligible to use your service (use the pattern to check a service is suitable instead)
      • +
    • perform calculations +
    • combine with external data such as financial information to confirm eligibility +
    • collect information from users
      • +
    + +

    Whilst there’s no limit on the number of questions or answers you can create, it is recommended to use no more than 10 questions. Anything more complex may meet user needs better if designed as a service.

    + +

    How it works

    + +

    With this pattern you can:

    + +
      +
    • create a series of questions and answers
      • +
    • use single or multiple-choice answers
      • +
    • apply question branching (sending users to specific questions based on their previous answers)
      • +
    + +

    The user is asked a question and based on their answer they are then:

    + +
      +
    • asked another question +
    • shown a results page that you create +
    • linked to another page on your website or elsewhere +
    + +

    The user is asked a question and based on their answer they are then:

    + +
      +
    • asked another question
      • +
    • shown a results page that you create
      • +
    • linked to another page on your website or elsewhere
      • +
    + +

    It uses the existing question components from the GOV.UK design system.

    + +

    Here's an example of how this pattern works. Links on the results pages are broken to avoid any impact to the live service.

    + +
    + + + +
    + + + +

    How to add to your service

    + +
      +
    • as a link
      • +
    • embedding an iframe
      • +
    • integrating into Contentful
      • +
    + +

    There is full guidance on ‘Get to an answer’ for how to do this.

    + +

    Visual style

    + +

    By default, all questionnaires use DfE styling.

    + +

    Do not change the visual style unless there’s a clear user or business need. You may cause accessibility issues by customising styles.

    + +

    If you need to customise the visual style, for example to match campaign branding, you can change colours and add a decorative image (generic images which do not give any additional information to the content). Any change must still meet accessibility standards which includes testing colour contrast against WCAG levels.

    + +

    Get started

    + +

    To use ‘Get to an answer’ you must:

    + +
      +
    • have a DfE education email address
      • +
    • agree to the terms and conditions
      • +
    + +

    To create a questionnaire, sign in to ‘Get to an answer’.

    + +

    For more detail on how to set up your questionnaire read the guidance in the ‘Support’ section.

    + +

    Before a questionnaire can be made live you will need to complete all the steps in the ‘Prepare to publish questionnaire’ section.

    + +

    The technical documentation for ‘Get to an answer’ provides further information on how the component works.

    + +

    Help improve this pattern

    + +

    If you would like to develop additional functionality to meet your service’s requirements, we encourage teams to build on this pattern. For example, you might need more complex question logic.

    + +

    If you would like to propose a change, you can:

    + + + +
    + +
    +
    +
    + +{% endblock %} \ No newline at end of file diff --git a/app/views/design-system/patterns/index.html b/app/views/design-system/patterns/index.html index b9f7d59c..29b7655e 100644 --- a/app/views/design-system/patterns/index.html +++ b/app/views/design-system/patterns/index.html @@ -33,6 +33,10 @@ Select a school +
  • + Get to an answer +
    • + diff --git a/app/views/design-system/patterns/select-a-school.html b/app/views/design-system/patterns/select-a-school.html index 5552f2cd..0e84359b 100644 --- a/app/views/design-system/patterns/select-a-school.html +++ b/app/views/design-system/patterns/select-a-school.html @@ -23,13 +23,15 @@
  • Patterns
    • -
  • - Charts + Charts
  • Select a school
    • +
  • + Get to an answer +