From d42db17ba531b23b871278053b2a064d72cc925c Mon Sep 17 00:00:00 2001 From: Myles Muda Date: Fri, 4 Oct 2024 12:07:42 +0100 Subject: [PATCH] Updating content for the add multiple things guidance page Signed-off-by: Myles Muda --- .../images/patterns/choose-document-type.svg | 125 ++++++++++++++++++ .../pages/patterns/add-multiple-things.tsx | 36 ++++- 2 files changed, 157 insertions(+), 4 deletions(-) create mode 100644 apps/docs/assets/images/patterns/choose-document-type.svg diff --git a/apps/docs/assets/images/patterns/choose-document-type.svg b/apps/docs/assets/images/patterns/choose-document-type.svg new file mode 100644 index 00000000..2048bad4 --- /dev/null +++ b/apps/docs/assets/images/patterns/choose-document-type.svg @@ -0,0 +1,125 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/docs/src/common/pages/patterns/add-multiple-things.tsx b/apps/docs/src/common/pages/patterns/add-multiple-things.tsx index 20b44ce4..464b953e 100644 --- a/apps/docs/src/common/pages/patterns/add-multiple-things.tsx +++ b/apps/docs/src/common/pages/patterns/add-multiple-things.tsx @@ -10,6 +10,7 @@ const section = 'Patterns'; const subsection = 'Help users to'; const applyAddAnother = require('../../../../assets/images/patterns/add-another.svg'); +const chooseDocumentType = require('../../../../assets/images/patterns/choose-document-type.svg'); const Page: FC = ({ location }) => (
@@ -43,8 +44,13 @@ const Page: FC = ({ location }) => (

When to use this pattern

This interaction allows a user to add single or multiple items, check they are correct - and provide an option to add more. This pattern can be used to add people to an application, - add items to a list or upload files.

+ and provide an option to add more.

+

This pattern can be used to:

+
    +
  • add people to an application
    • +
  • add items to a list
    • +
  • add multiple files
    • +

Follow this pattern:

  • to help confirm an action
    • @@ -54,12 +60,31 @@ const Page: FC = ({ location }) => (

How it works

-

When adding multiple items of the same thing, the pattern should:

+

Add multiple items

+

To help users add multiple items of the same thing, the pattern should:

  • remember previous choices
  • give clear guidance on the flexibility of choices
+

Add multiple files

+

Allow users to add files one at a time, check the files on a subsequent screen, and add more if required in an add multiple files loop.

+

If document categorisation is required, allow the user to select the document type before uploading the file.

+
+ An example of an interaction to select the document type before uploading the file +
+

Where possible, split tasks up into shorter flows, with 'Check answers' screens at the end of each mini task, rather than after a long task.

+ +

Research

+

In four rounds of research with external users, we found:

+
    +
  • displaying the uploaded documents on a subsequent screen reduces the cognitive load for the user and enabled users to upload multiple documents without encountering issues
    • +
  • users became familiar with the loop of categorising and adding more documents and were reassured when they could see them being added to the list each time
    • +
  • asking the user to input additional information relating to the document they are uploading prior to the upload document step worked better
    • +
  • splitting tasks up avoided issues and confusion because it gave the user more flexibility at each step
    • +
+

More research is needed with users with access needs.

+

Accessibility

If your service uses this pattern, let us know of any insights you have on accessibility considerations.

@@ -69,6 +94,7 @@ const Page: FC = ({ location }) => (
  • Firearms licensing
  • Refugee integration loan
    • +
  • Manage asylum claim

More research is needed. If your service uses this pattern, get in touch to share your user research findings.

@@ -77,8 +103,10 @@ const Page: FC = ({ location }) => (

This pattern needs improving. We need evidence about:

  • how to write for this pattern
    • -
  • variations for adding multiple smaller pieces of information
  • alterations for internal caseworking systems
    • +
  • adding detailed information about multiple things in a long task flow or as part of a longer form
    • +
  • access to needs testing
    • +
  • how users with access needs respond

To contribute, add your thoughts and research findings to our GitHub discussion, or follow our contribute guidance.