From c212010a00dfb660da1b1999aec9c946060dc756 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 | 33 ++++- 2 files changed, 156 insertions(+), 2 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..c7d1df2c 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 }) => (
@@ -45,6 +46,12 @@ const Page: FC = ({ location }) => (

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.

+

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 +61,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 +95,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 +104,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.