From 0111d7165261cb8fc899957e13b8c67201e3d6a9 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Mon, 9 Oct 2023 11:12:39 +0100 Subject: [PATCH 01/10] Add initial example --- src/components/task-list/default/index.njk | 64 ++++++++++++++++++++++ src/components/task-list/index.md.njk | 35 ++++++++++++ 2 files changed, 99 insertions(+) create mode 100644 src/components/task-list/default/index.njk create mode 100644 src/components/task-list/index.md.njk diff --git a/src/components/task-list/default/index.njk b/src/components/task-list/default/index.njk new file mode 100644 index 0000000000..dc8c41cbe5 --- /dev/null +++ b/src/components/task-list/default/index.njk @@ -0,0 +1,64 @@ +--- +title: Task list +layout: layout-example.njk +--- + +{% from "govuk/components/task-list/macro.njk" import govukTaskList %} + +{{ govukTaskList({ + idPrefix: "company-details", + items: [ + { + title: { + text: "Company Directors" + }, + href: "#", + status: { + text: "Completed", + classes: "govuk-task-list__status--black" + } + }, + { + title: { + text: "Registered company details" + }, + href: "#", + status: { + text: "Not started", + classes: "govuk-task-list__status--blue" + } + }, + { + title: { + text: "Financial history" + }, + hint: { + text: "Include 5 years of the company’s relevant financial information." + }, + href: "#", + status: { + text: "In progress", + classes: "govuk-task-list__status--light-blue" + } + }, + { + title: { + text: "Business plan" + }, + href: "#", + status: { + text: "In progress", + classes: "govuk-task-list__status--light-blue" + } + }, + { + title: { + text: "References" + }, + status: { + text: "Cannot start yet", + classes: "govuk-task-list__status--white" + } + } + ] +}) }} diff --git a/src/components/task-list/index.md.njk b/src/components/task-list/index.md.njk new file mode 100644 index 0000000000..e0c95f4379 --- /dev/null +++ b/src/components/task-list/index.md.njk @@ -0,0 +1,35 @@ +--- +title: Task list +description: Description goes here +section: Components +aliases: +backlog_issue_id: 99999 +layout: layout-pane.njk +status: Experimental +statusMessage: This component is currently experimental because more research is needed to validate it. +--- + +{% from "_example.njk" import example %} + +Use this component to summarise the status of a list of related tasks the user needs to do, as part of a [task list page](/patterns/task-list-pages/). + +{{ example({ group: "components", item: "task-list", example: "default", id: "default-1", html: true, nunjucks: true, open: false, loading: "eager" }) }} + +## When to use this component + +TODO +## When not to use this component + +TODO + +## How it works + +TODO + +## Research and testing + +TODO + +### Next steps + +TODO From 6e44241cdf354af268cf729380acbf594bbeb131 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Mon, 9 Oct 2023 11:14:33 +0100 Subject: [PATCH 02/10] Switch out image with HTML example --- .../task-list-pages/default/index.njk | 109 ++++++++++++++++++ src/patterns/task-list-pages/index.md | 10 +- .../task-list-pages/task-list-statuses.png | Bin 17678 -> 0 bytes .../task-list-statuses/index.njk | 66 +++++++++++ .../task-list-pages/task-list-whole.svg | 1 - 5 files changed, 180 insertions(+), 6 deletions(-) create mode 100644 src/patterns/task-list-pages/default/index.njk delete mode 100644 src/patterns/task-list-pages/task-list-statuses.png create mode 100644 src/patterns/task-list-pages/task-list-statuses/index.njk delete mode 100644 src/patterns/task-list-pages/task-list-whole.svg diff --git a/src/patterns/task-list-pages/default/index.njk b/src/patterns/task-list-pages/default/index.njk new file mode 100644 index 0000000000..e179534d50 --- /dev/null +++ b/src/patterns/task-list-pages/default/index.njk @@ -0,0 +1,109 @@ +--- +title: Task list +layout: layout-example-full-page.njk +--- + +{% extends "example-wrappers/full-page.njk" %} + +{% from "govuk/components/task-list/macro.njk" import govukTaskList %} +{% from "govuk/components/button/macro.njk" import govukButton %} + +{% block content %} +
+
+

Service name goes here

+ +

Check before you start

+ + {{ govukTaskList({ + idPrefix: "before-you-start", + items: [ + { + title: { + text: "Check eligbility" + }, + href: "#", + status: { + text: "Completed", + classes: "govuk-task-list__status--black" + } + }, + { + title: { + text: "Read declaration" + }, + href: "#", + status: { + text: "Not started", + classes: "govuk-task-list__status--blue" + } + } + ] + }) }} + +

Prepare application

+ + {{ govukTaskList({ + items: [ + { + title: { + text: "Company information" + }, + href: "#", + status: { + text: "Completed", + classes: "govuk-task-list__status--black" + } + }, + { + title: { + text: "Your contact details" + }, + href: "#", + status: { + text: "Not started", + classes: "govuk-task-list__status--blue" + } + }, + { + title: { + text: "List convictions" + }, + href: "#", + status: { + text: "Completed", + classes: "govuk-task-list__status--black" + } + }, + { + title: { + text: "Provide financial evidence" + }, + href: "#", + status: { + text: "Not started", + classes: "govuk-task-list__status--blue" + } + }, + { + title: { + text: "Give medical information" + }, + href: "#", + status: { + text: "Not started", + classes: "govuk-task-list__status--blue" + } + } + ] + }) }} + +
+ {{ govukButton({ + text: "Apply" + }) }} +
+ +
+
+{% endblock %} diff --git a/src/patterns/task-list-pages/index.md b/src/patterns/task-list-pages/index.md index 2fb362e6f3..db8eba262a 100644 --- a/src/patterns/task-list-pages/index.md +++ b/src/patterns/task-list-pages/index.md @@ -18,7 +18,7 @@ Task list pages help users understand: - the order they should complete tasks in - when they've completed tasks -![A screenshot showing an example of the task list page, includes a heading, and three grouped sections that each contain tasks, some of these tasks are marked as completed.](task-list-whole.svg) +{{ example({ group: "patterns", item: "task-list-pages", example: "default", html: true, nunjucks: true, open: false }) }} There’s a [coded example of a task list page](https://prototype-kit.service.gov.uk/docs/templates/task-list) in the GOV.UK Prototype Kit. To use the example, get the following code from the Prototype Kit repository on GitHub: @@ -62,16 +62,16 @@ You might find a better word to describe what a ‘task’ is for your users. If ![A screenshot showing a task list summary that says 'Application incomplete. You've completed 3 of 8 sections'](task-list-summary.png) -Make it clear to users which tasks they’ve completed and which still need their attention, by labelling them using the [Tag component](/components/tag/). +Make it clear to users which tasks they’ve completed and which still need their attention, by labelling them using statuses. -![A screenshot showing a completed tag next to a list of tasks](task-list-statuses.png) +{{ example({ group: "patterns", item: "task-list-pages", example: "task-list-statuses", html: true, nunjucks: true, open: false }) }} Use the following labels to describe the different states of a task: -- 'Not started' (in grey) if the user can start work on the task, but has not done so yet +- 'Not started' (in blue) if the user can start work on the task, but has not done so yet - 'Cannot start yet' (in grey) if the user cannot start the task yet - for example because another task must be completed first - 'In progress' (in light blue) if the user has started but not completed the task -- 'Completed' (in blue) if the user has completed the task +- 'Completed' (in black) if the user has completed the task ### Group tasks into steps diff --git a/src/patterns/task-list-pages/task-list-statuses.png b/src/patterns/task-list-pages/task-list-statuses.png deleted file mode 100644 index dab140537c8d758b17eb347564173be99d8ca328..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 17678 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

i9vV(Mnj_JGt670q*<4BpQM&uqWB$05 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 +

+ + {{ govukTaskList({ + items: [ + { + title: { + text: "Company information" + }, + href: "#", + status: { + text: "Completed", + classes: "govuk-task-list__status--black" + } + }, + { + title: { + text: "Your contact details" + }, + href: "#", + status: { + text: "Not started", + classes: "govuk-task-list__status--blue" + } + }, + { + title: { + text: "List convictions" + }, + href: "#", + status: { + text: "In progress", + classes: "govuk-task-list__status--light-blue" + } + }, + { + title: { + text: "Provide financial evidence" + }, + href: "#", + status: { + text: "Not started", + classes: "govuk-task-list__status--blue" + } + }, + { + title: { + text: "Give medical information" + }, + status: { + text: "Cannot start yet", + classes: "govuk-task-list__status--white" + } + } + ] + }) }} + +
+ diff --git a/src/patterns/task-list-pages/task-list-whole.svg b/src/patterns/task-list-pages/task-list-whole.svg deleted file mode 100644 index e72eb547be..0000000000 --- a/src/patterns/task-list-pages/task-list-whole.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From 84b40b69b4f198ba930bc5c7d9f35e228ff87e22 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Mon, 9 Oct 2023 11:10:08 +0100 Subject: [PATCH 03/10] Update content and examples --- .../task-list/all-colours/index.njk | 120 ++++++++++++++++ .../task-list/cannot-start-yet/index.njk | 45 ++++++ src/components/task-list/default/index.njk | 28 ++-- src/components/task-list/error/index.njk | 54 +++++++ .../task-list/in-progress/index.njk | 57 ++++++++ src/components/task-list/index.md.njk | 134 ++++++++++++++++-- .../task-list-pages/default/index.njk | 38 ++--- .../index.njk | 2 +- src/patterns/task-list-pages/index.md | 2 - .../task-list-statuses/index.njk | 34 ++--- 10 files changed, 448 insertions(+), 66 deletions(-) create mode 100644 src/components/task-list/all-colours/index.njk create mode 100644 src/components/task-list/cannot-start-yet/index.njk create mode 100644 src/components/task-list/error/index.njk create mode 100644 src/components/task-list/in-progress/index.njk diff --git a/src/components/task-list/all-colours/index.njk b/src/components/task-list/all-colours/index.njk new file mode 100644 index 0000000000..c7440e79bf --- /dev/null +++ b/src/components/task-list/all-colours/index.njk @@ -0,0 +1,120 @@ +--- +title: Task list with all colours +layout: layout-example.njk +--- + +{% from "govuk/components/task-list/macro.njk" import govukTaskList %} + +{{ govukTaskList({ + idPrefix: "all-colours", + items: [ + { + title: { + text: "Task A" + }, + href: "#", + status: { + tag: { + text: "Grey", + classes: "govuk-tag--grey" + } + } + }, + { + title: { + text: "Task B" + }, + href: "#", + status: { + tag: { + text: "Green", + classes: "govuk-tag--green" + } + } + }, + { + title: { + text: "Task C" + }, + href: "#", + status: { + tag: { + text: "Turquoise", + classes: "govuk-tag--turquoise" + } + } + }, + { + title: { + text: "Task D" + }, + href: "#", + status: { + tag: { + text: "Blue", + classes: "govuk-tag--blue" + } + } + }, + { + title: { + text: "Task E" + }, + href: "#", + status: { + tag: { + text: "Light blue", + classes: "govuk-tag--light-blue" + } + } + }, + { + title: { + text: "Task F" + }, + href: "#", + status: { + tag: { + text: "Purple", + classes: "govuk-tag--purple" + } + } + }, + { + title: { + text: "Task G" + }, + href: "#", + status: { + tag: { + text: "Pink", + classes: "govuk-tag--pink" + } + } + }, + { + title: { + text: "Task H" + }, + href: "#", + status: { + tag: { + text: "Orange", + classes: "govuk-tag--orange" + } + } + }, + { + title: { + text: "Task I" + }, + href: "#", + status: { + tag: { + text: "Yellow", + classes: "govuk-tag--yellow" + } + } + } + ] +}) }} diff --git a/src/components/task-list/cannot-start-yet/index.njk b/src/components/task-list/cannot-start-yet/index.njk new file mode 100644 index 0000000000..baa01bc582 --- /dev/null +++ b/src/components/task-list/cannot-start-yet/index.njk @@ -0,0 +1,45 @@ +--- +title: Task list with cannot start yet +layout: layout-example.njk +--- + +{% from "govuk/components/task-list/macro.njk" import govukTaskList %} + +{{ govukTaskList({ + idPrefix: "application-details", + items: [ + { + title: { + text: "Company details" + }, + href: "#", + status: { + text: "Completed" + } + }, + { + title: { + text: "Project details" + }, + href: "#", + status: { + tag: { + text: "Incomplete", + classes: "govuk-tag--blue" + } + } + }, + { + title: { + text: "Fund applied to" + }, + hint: { + text: "The funds will be announced on 1 April 2022" + }, + status: { + text: "Cannot start yet", + classes: "govuk-task-list__status--cannot-start-yet" + } + } + ] +}) }} diff --git a/src/components/task-list/default/index.njk b/src/components/task-list/default/index.njk index dc8c41cbe5..6c08362ba2 100644 --- a/src/components/task-list/default/index.njk +++ b/src/components/task-list/default/index.njk @@ -14,8 +14,7 @@ layout: layout-example.njk }, href: "#", status: { - text: "Completed", - classes: "govuk-task-list__status--black" + text: "Completed" } }, { @@ -24,8 +23,10 @@ layout: layout-example.njk }, href: "#", status: { - text: "Not started", - classes: "govuk-task-list__status--blue" + tag: { + text: "Incomplete", + classes: "govuk-tag--blue" + } } }, { @@ -37,8 +38,10 @@ layout: layout-example.njk }, href: "#", status: { - text: "In progress", - classes: "govuk-task-list__status--light-blue" + tag: { + text: "Incomplete", + classes: "govuk-tag--blue" + } } }, { @@ -47,17 +50,22 @@ layout: layout-example.njk }, href: "#", status: { - text: "In progress", - classes: "govuk-task-list__status--light-blue" + tag: { + text: "Incomplete", + classes: "govuk-tag--blue" + } } }, { title: { text: "References" }, + href: "#", status: { - text: "Cannot start yet", - classes: "govuk-task-list__status--white" + tag: { + text: "Incomplete", + classes: "govuk-tag--blue" + } } } ] diff --git a/src/components/task-list/error/index.njk b/src/components/task-list/error/index.njk new file mode 100644 index 0000000000..c258cac1dc --- /dev/null +++ b/src/components/task-list/error/index.njk @@ -0,0 +1,54 @@ +--- +title: Task list with an error +layout: layout-example.njk +--- + +{% from "govuk/components/task-list/macro.njk" import govukTaskList %} + +{{ govukTaskList({ + idPrefix: "application-details", + items: [ + { + title: { + text: "Contact details" + }, + href: "#", + status: { + text: "Completed" + } + }, + { + title: { + text: "Project details" + }, + href: "#", + status: { + tag: { + text: "Incomplete", + classes: "govuk-tag--blue" + } + } + }, + { + title: { + text: "Funding required" + }, + href: "#", + status: { + tag: { + text: "There is a problem", + classes: "govuk-tag--red" + } + } + }, + { + title: { + text: "Bank account" + }, + href: "#", + status: { + text: "Completed" + } + } + ] +}) }} diff --git a/src/components/task-list/in-progress/index.njk b/src/components/task-list/in-progress/index.njk new file mode 100644 index 0000000000..7123db466c --- /dev/null +++ b/src/components/task-list/in-progress/index.njk @@ -0,0 +1,57 @@ +--- +title: Task list in progress +layout: layout-example.njk +--- + +{% from "govuk/components/task-list/macro.njk" import govukTaskList %} + +{{ govukTaskList({ + idPrefix: "application-details", + items: [ + { + title: { + text: "Contact details" + }, + href: "#", + status: { + text: "Completed" + } + }, + { + title: { + text: "Work history" + }, + href: "#", + status: { + tag: { + text: "In progress", + classes: "govuk-tag--light-blue" + } + } + }, + { + title: { + text: "Qualifications" + }, + href: "#", + status: { + tag: { + text: "Not yet started", + classes: "govuk-tag--blue" + } + } + }, + { + title: { + text: "Supporting statement" + }, + href: "#", + status: { + tag: { + text: "Not yet started", + classes: "govuk-tag--blue" + } + } + } + ] +}) }} diff --git a/src/components/task-list/index.md.njk b/src/components/task-list/index.md.njk index e0c95f4379..c6c8347bb7 100644 --- a/src/components/task-list/index.md.njk +++ b/src/components/task-list/index.md.njk @@ -1,35 +1,145 @@ --- title: Task list -description: Description goes here +description: The task list component displays all the tasks a user needs to do, and allows users to easily identify which ones are done and which they still need to do. section: Components aliases: -backlog_issue_id: 99999 +backlogIssueId: 72 layout: layout-pane.njk -status: Experimental -statusMessage: This component is currently experimental because more research is needed to validate it. --- {% from "_example.njk" import example %} -Use this component to summarise the status of a list of related tasks the user needs to do, as part of a [task list page](/patterns/task-list-pages/). +The task list component displays all the tasks a user needs to do, and allows users to easily identify which ones are done and which they still need to do. {{ example({ group: "components", item: "task-list", example: "default", id: "default-1", html: true, nunjucks: true, open: false, loading: "eager" }) }} ## When to use this component -TODO +Use the task list to give users more control over how they complete long, complex services. + +Only use the task list if there’s evidence that users: + +* do not want to, or cannot, complete all the tasks in one sitting +* need to be able to choose the order they complete the tasks in + ## When not to use this component -TODO +Try to simplify the service before you use a task list. If you’re able to reduce the number of tasks or steps involved, you might not need one. + +Do not use the task list for a long service that needs to be completed in a specific order. If it needs to be completed over multiple sessions, consider allowing users to save their progress, and then to continue where they left off when they return. Use the start page to explain what users will be expected to do during the service. + +The task list should not be used as a way of showing users their answers. For this, you should use a [summary list](/components/summary-list/) instead. ## How it works -TODO +There are 2 ways to use the task list component. You can use HTML or, if you’re using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://govuk-prototype-kit.herokuapp.com), you can use the Nunjucks macro. + +{{ example({ group: "components", item: "task-list", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second" }) }} + +Users should be able to complete tasks in whatever order they like. + +The status alongside the task indicates whether they can start it. Users can select a task to start completing it. Once they have completed it and returned to the task list, the status for that task will have changed to ‘Completed’. + +Users can only move on from the task list when all tasks are shown as ‘Completed’. + +Read the [task list pattern guidance](/patterns/task-list-pages/) for more information on how to use the task list within a service. + +### Tasks + +Tasks are usually actions that the user needs to take to complete a service. In a task list, the user should be able to choose to complete tasks in any order that works for them. + +Each task within a task list includes a task name and a status. It can also include hint text if you decide this is needed. + +The whole row is linked, allowing users to select anywhere within it to start the task. + +#### Write clear task descriptions + +The task name gives users a reasonable expectation of what that task is about. For example, ‘Your contact details’ or ‘Upload evidence’. Use sentence case, and keep it short. Users of screen readers might find it difficult to navigate the task list if the task names are too long. + +If you’re finding it difficult to come up with a clear and concise task name, it might be because the task itself is too complex and may need to be separated into smaller tasks. Group questions and actions into tasks in a way that makes sense to users, based on their needs. + +#### Adding hint text + +Only use hint text if there is evidence that the user needs more information about what the task will include. + +Keep hint text to a single, short sentence. Screen readers read out the entire text when users interact with the task link. This could frustrate users if the text is long. + +Do not include links within the hint text. The whole ‘task row’ links users to the task itself, so any links within the hint text will not work. + +#### Grouping tasks + +If there are a lot of tasks to complete, you might find that grouping them makes it easier for users to understand and plan what they need to do. Tasks can be grouped into separate task lists on a page. Give each task list a short heading that clearly explains the grouping. + +Read the [task list pattern guidance](/patterns/task-list-pages/) for more information on grouping tasks. + +### Statuses + +Statuses use colour and a short descriptor to give users a quick overview of how much of the task list they have completed, and how much is left to do. + +Statuses should be helpful to users. The more you add, the harder it is for users to remember them. Start with the smallest number of different statuses you think might work, for example ‘Completed’ and ‘Incomplete’, then add more if your user research shows there’s a need for them. + +Once the user has completed the task, the status should show as ‘Completed’ and be black text with no background colour. This will draw more attention to tasks that require action. + +#### Tasks that are in progress + +You may find you need additional statuses if your user research shows that users want to be able to distinguish between the tasks they haven’t started at all, and those they’ve started but not completed. + +In this instance, instead of ‘Incomplete’, you may want to use ‘Not yet started’ to show which tasks they are yet to start. You should then use ‘In progress’ for tasks they have started but are yet to complete. + +‘In progress’ is dark blue text on a blue background colour. ‘Not yet started’ is dark blue on a light blue background colour. + +{{ example({ group: "components", item: "task-list", example: "in-progress", html: true, nunjucks: true, open: false }) }} + +#### Tasks that cannot yet be started + +If the user cannot start the task yet, for example because another task must be completed first, use the ‘Cannot start yet’ status. This should be grey text with no background colour, and the ‘task row’ should not be linked. + +{{ example({ group: "components", item: "task-list", example: "cannot-start-yet", html: true, nunjucks: true, open: false }) }} + +#### Tasks containing an error + +You should avoid tasks having an error status by using the [error summary](/components/error-summary/) and [error messages](/components/error-message/) displayed at the point that the error is made, so that the user can fix it straight away. + +If it is unavoidable that a task may end up saved but containing an error, use the status text ‘There is a problem’ and a red background. + +Do not use the red background colour for any status text except errors. + +{{ example({ group: "components", item: "task-list", example: "error", html: true, nunjucks: true, open: false }) }} + +#### Status text + +Although we recommend using consistent wording across task lists, you can change it if research shows that different text is more suitable to your service or users. + +If you are creating your own statuses, use adjectives rather than verbs. Use sentence case, and keep it short, so that it can be easily read and understood. + +#### Additional statuses + +If your user research shows that there is a need for additional status tags, you can use other colours to help distinguish between them. + +{{ example({ group: "components", item: "task-list", example: "all-colours", html: true, nunjucks: true, open: false }) }} + +## Research on this component + +This component was created by a cross-government group using research from the existing task list pattern. + +### Linking the whole ‘task row’ to the task + +User feedback from the task list pattern has shown that some users currently try to select task statuses, thinking they are buttons or links. The statuses have been redesigned to look less like buttons, and now the whole ‘task row’ is linked so that users can select anywhere within it to enter and begin the task. + +### Formatting of statuses + +The use of uppercase in task statuses makes them harder to read. User research has also shown that once a few tasks have been completed, it is harder for users to scan the page and spot incomplete tasks. + +Statuses are now written in sentence case to make them easier to read. The ‘Completed’ task now uses black text with no background colour, which will draw more attention to asks that require action. + +We have also introduced a new colour palette for statuses, using colour contrasts that meet accessibility guidance. -## Research and testing +### Known issues and gaps -TODO +While this new component is based on user research from the task list pattern, we still need to carry out user testing with this new component. In particular, we would like to test the following assumptions: -### Next steps +* the benefits of linking the whole ’task row’ outweigh the risks of accidental clicking +* the contrast of the statuses is sufficient +* the suggested wording of the statuses make the most sense to users -TODO +If you are using this component in a service, we would like to hear about any user research so that we can identify any potential issues. diff --git a/src/patterns/task-list-pages/default/index.njk b/src/patterns/task-list-pages/default/index.njk index e179534d50..23fd0e0434 100644 --- a/src/patterns/task-list-pages/default/index.njk +++ b/src/patterns/task-list-pages/default/index.njk @@ -11,7 +11,7 @@ layout: layout-example-full-page.njk {% block content %}
-

Service name goes here

+

Service name

Check before you start

@@ -20,12 +20,11 @@ layout: layout-example-full-page.njk items: [ { title: { - text: "Check eligbility" + text: "Check eligibility" }, href: "#", status: { - text: "Completed", - classes: "govuk-task-list__status--black" + text: "Completed" } }, { @@ -34,8 +33,10 @@ layout: layout-example-full-page.njk }, href: "#", status: { - text: "Not started", - classes: "govuk-task-list__status--blue" + tag: { + text: "Incomplete", + classes: "govuk-tag--blue" + } } } ] @@ -44,6 +45,7 @@ layout: layout-example-full-page.njk

Prepare application

{{ govukTaskList({ + idPrefix: "prepare-application", items: [ { title: { @@ -51,8 +53,7 @@ layout: layout-example-full-page.njk }, href: "#", status: { - text: "Completed", - classes: "govuk-task-list__status--black" + text: "Completed" } }, { @@ -61,8 +62,10 @@ layout: layout-example-full-page.njk }, href: "#", status: { - text: "Not started", - classes: "govuk-task-list__status--blue" + tag: { + text: "Incomplete", + classes: "govuk-tag--blue" + } } }, { @@ -71,8 +74,7 @@ layout: layout-example-full-page.njk }, href: "#", status: { - text: "Completed", - classes: "govuk-task-list__status--black" + text: "Completed" } }, { @@ -81,8 +83,10 @@ layout: layout-example-full-page.njk }, href: "#", status: { - text: "Not started", - classes: "govuk-task-list__status--blue" + tag: { + text: "Incomplete", + classes: "govuk-tag--blue" + } } }, { @@ -91,8 +95,10 @@ layout: layout-example-full-page.njk }, href: "#", status: { - text: "Not started", - classes: "govuk-task-list__status--blue" + tag: { + text: "Incomplete", + classes: "govuk-tag--blue" + } } } ] diff --git a/src/patterns/task-list-pages/have-you-completed-this-section-error/index.njk b/src/patterns/task-list-pages/have-you-completed-this-section-error/index.njk index c8857dec93..edc8bd0ffa 100644 --- a/src/patterns/task-list-pages/have-you-completed-this-section-error/index.njk +++ b/src/patterns/task-list-pages/have-you-completed-this-section-error/index.njk @@ -16,7 +16,7 @@ title: Have you completed this section error – Task list pages } }, errorMessage: { - text: "Select whether you've completed this section" + text: "Select whether you've completed this section" }, items: [ { diff --git a/src/patterns/task-list-pages/index.md b/src/patterns/task-list-pages/index.md index db8eba262a..1ffe0b5940 100644 --- a/src/patterns/task-list-pages/index.md +++ b/src/patterns/task-list-pages/index.md @@ -6,8 +6,6 @@ theme: Pages aliases: backlogIssueId: 72 layout: layout-pane.njk -status: Being worked on -statusMessage: A cross-government group is collaborating on work to update this pattern and build it as a component. --- {% from "_example.njk" import example %} diff --git a/src/patterns/task-list-pages/task-list-statuses/index.njk b/src/patterns/task-list-pages/task-list-statuses/index.njk index 0107853f25..69611c4318 100644 --- a/src/patterns/task-list-pages/task-list-statuses/index.njk +++ b/src/patterns/task-list-pages/task-list-statuses/index.njk @@ -16,8 +16,7 @@ layout: layout-example.njk }, href: "#", status: { - text: "Completed", - classes: "govuk-task-list__status--black" + text: "Completed" } }, { @@ -26,8 +25,10 @@ layout: layout-example.njk }, href: "#", status: { - text: "Not started", - classes: "govuk-task-list__status--blue" + tag: { + text: "Incomplete", + classes: "govuk-tag--blue" + } } }, { @@ -36,27 +37,10 @@ layout: layout-example.njk }, href: "#", status: { - text: "In progress", - classes: "govuk-task-list__status--light-blue" - } - }, - { - title: { - text: "Provide financial evidence" - }, - href: "#", - status: { - text: "Not started", - classes: "govuk-task-list__status--blue" - } - }, - { - title: { - text: "Give medical information" - }, - status: { - text: "Cannot start yet", - classes: "govuk-task-list__status--white" + tag: { + text: "Incomplete", + classes: "govuk-tag--blue" + } } } ] From 46b6d0d4f31a4c05d6ee6a3e58ba5b345f6ae54e Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Tue, 3 Oct 2023 10:27:55 +0100 Subject: [PATCH 04/10] Remove link to prototype kit code Thought we'd already done this... --- src/patterns/task-list-pages/index.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/patterns/task-list-pages/index.md b/src/patterns/task-list-pages/index.md index 1ffe0b5940..8b1a9c1a3c 100644 --- a/src/patterns/task-list-pages/index.md +++ b/src/patterns/task-list-pages/index.md @@ -18,10 +18,7 @@ Task list pages help users understand: {{ example({ group: "patterns", item: "task-list-pages", example: "default", html: true, nunjucks: true, open: false }) }} -There’s a [coded example of a task list page](https://prototype-kit.service.gov.uk/docs/templates/task-list) in the GOV.UK Prototype Kit. To use the example, get the following code from the Prototype Kit repository on GitHub: - -- [HTML from the task list page's HTML file](https://github.com/alphagov/govuk-prototype-kit-task-list/blob/main/templates/task-list.html) -- [custom styles from the task list page's SCSS file](https://github.com/alphagov/govuk-prototype-kit-task-list/blob/main/sass/_task-list.scss) +Task list pages use a [task list component](/components/task-list) for each group of tasks on the page. ## When to use this pattern From b941f92c5b5e56e11ba6ee3b726636febb48e772 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Tue, 3 Oct 2023 10:33:54 +0100 Subject: [PATCH 05/10] Remove suggestion of including a summary We didn't find any evidence of requiring this when reviewing the pattern, and most services using this pattern on live services do not include this. --- src/patterns/task-list-pages/index.md | 6 ------ .../task-list-pages/task-list-summary.png | Bin 24908 -> 0 bytes 2 files changed, 6 deletions(-) delete mode 100644 src/patterns/task-list-pages/task-list-summary.png diff --git a/src/patterns/task-list-pages/index.md b/src/patterns/task-list-pages/index.md index 8b1a9c1a3c..da8628c231 100644 --- a/src/patterns/task-list-pages/index.md +++ b/src/patterns/task-list-pages/index.md @@ -51,12 +51,6 @@ Where possible, task names should: ### Show the status of the tasks -Include a summary above the task list to say how many tasks have been completed. - -You might find a better word to describe what a ‘task’ is for your users. If your service is an application form, each task might be a ‘section’ of questions to complete. - -![A screenshot showing a task list summary that says 'Application incomplete. You've completed 3 of 8 sections'](task-list-summary.png) - Make it clear to users which tasks they’ve completed and which still need their attention, by labelling them using statuses. {{ example({ group: "patterns", item: "task-list-pages", example: "task-list-statuses", html: true, nunjucks: true, open: false }) }} diff --git a/src/patterns/task-list-pages/task-list-summary.png b/src/patterns/task-list-pages/task-list-summary.png deleted file mode 100644 index 1f22967657b33809bfceaab41d03eb7743cea4f5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 24908 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 Date: Mon, 9 Oct 2023 10:36:45 +0100 Subject: [PATCH 06/10] Rename pattern to "Complete multiple tasks" This helps to distinguish it from the component page. --- src/components/task-list/index.md.njk | 4 ++-- .../default/index.njk | 0 .../index.njk | 0 .../have-you-completed-this-section/index.njk | 0 .../index.md | 14 +++++++------- .../task-list-statuses/index.njk | 0 6 files changed, 9 insertions(+), 9 deletions(-) rename src/patterns/{task-list-pages => complete-multiple-tasks}/default/index.njk (100%) rename src/patterns/{task-list-pages => complete-multiple-tasks}/have-you-completed-this-section-error/index.njk (100%) rename src/patterns/{task-list-pages => complete-multiple-tasks}/have-you-completed-this-section/index.njk (100%) rename src/patterns/{task-list-pages => complete-multiple-tasks}/index.md (89%) rename src/patterns/{task-list-pages => complete-multiple-tasks}/task-list-statuses/index.njk (100%) diff --git a/src/components/task-list/index.md.njk b/src/components/task-list/index.md.njk index c6c8347bb7..7f4a10c50b 100644 --- a/src/components/task-list/index.md.njk +++ b/src/components/task-list/index.md.njk @@ -42,7 +42,7 @@ The status alongside the task indicates whether they can start it. Users can sel Users can only move on from the task list when all tasks are shown as ‘Completed’. -Read the [task list pattern guidance](/patterns/task-list-pages/) for more information on how to use the task list within a service. +Read the [task list pattern guidance](/patterns/complete-multiple-tasks/) for more information on how to use the task list within a service. ### Tasks @@ -70,7 +70,7 @@ Do not include links within the hint text. The whole ‘task row’ links users If there are a lot of tasks to complete, you might find that grouping them makes it easier for users to understand and plan what they need to do. Tasks can be grouped into separate task lists on a page. Give each task list a short heading that clearly explains the grouping. -Read the [task list pattern guidance](/patterns/task-list-pages/) for more information on grouping tasks. +Read the [task list pattern guidance](/patterns/complete-multiple-tasks/) for more information on grouping tasks. ### Statuses diff --git a/src/patterns/task-list-pages/default/index.njk b/src/patterns/complete-multiple-tasks/default/index.njk similarity index 100% rename from src/patterns/task-list-pages/default/index.njk rename to src/patterns/complete-multiple-tasks/default/index.njk diff --git a/src/patterns/task-list-pages/have-you-completed-this-section-error/index.njk b/src/patterns/complete-multiple-tasks/have-you-completed-this-section-error/index.njk similarity index 100% rename from src/patterns/task-list-pages/have-you-completed-this-section-error/index.njk rename to src/patterns/complete-multiple-tasks/have-you-completed-this-section-error/index.njk diff --git a/src/patterns/task-list-pages/have-you-completed-this-section/index.njk b/src/patterns/complete-multiple-tasks/have-you-completed-this-section/index.njk similarity index 100% rename from src/patterns/task-list-pages/have-you-completed-this-section/index.njk rename to src/patterns/complete-multiple-tasks/have-you-completed-this-section/index.njk diff --git a/src/patterns/task-list-pages/index.md b/src/patterns/complete-multiple-tasks/index.md similarity index 89% rename from src/patterns/task-list-pages/index.md rename to src/patterns/complete-multiple-tasks/index.md index da8628c231..1234975162 100644 --- a/src/patterns/task-list-pages/index.md +++ b/src/patterns/complete-multiple-tasks/index.md @@ -1,8 +1,8 @@ --- -title: Task list pages -description: Task list pages help users understand tasks involved in completing a transaction, the order they should complete tasks in and when they have completed tasks +title: Complete multiple tasks +description: Task lists help users understand tasks involved in completing a transaction, the order they should complete tasks in and when they have completed tasks section: Patterns -theme: Pages +theme: Help users to… aliases: backlogIssueId: 72 layout: layout-pane.njk @@ -16,7 +16,7 @@ Task list pages help users understand: - the order they should complete tasks in - when they've completed tasks -{{ example({ group: "patterns", item: "task-list-pages", example: "default", html: true, nunjucks: true, open: false }) }} +{{ example({ group: "patterns", item: "complete-multiple-tasks", example: "default", html: true, nunjucks: true, open: false }) }} Task list pages use a [task list component](/components/task-list) for each group of tasks on the page. @@ -53,7 +53,7 @@ Where possible, task names should: Make it clear to users which tasks they’ve completed and which still need their attention, by labelling them using statuses. -{{ example({ group: "patterns", item: "task-list-pages", example: "task-list-statuses", html: true, nunjucks: true, open: false }) }} +{{ example({ group: "patterns", item: "complete-multiple-tasks", example: "task-list-statuses", html: true, nunjucks: true, open: false }) }} Use the following labels to describe the different states of a task: @@ -89,7 +89,7 @@ If the user selects ‘No, I’ll come back to it later,’ mark the task as 'In If the user selects ‘Yes, I’ve completed this section,’ mark the task as 'Completed'. -{{ example({ group: "patterns", item: "task-list-pages", example: "have-you-completed-this-section", html: true, nunjucks: true, open: false }) }} +{{ example({ group: "patterns", item: "complete-multiple-tasks", example: "have-you-completed-this-section", html: true, nunjucks: true, open: false }) }} Always allow users to go back into a task to change their answer. @@ -97,7 +97,7 @@ Always allow users to go back into a task to change their answer. If the user does not select an option, show an [error message](/components/error-message/) to say: 'Select whether you’ve completed this section'. -{{ example({ group: "patterns", item: "task-list-pages", example: "have-you-completed-this-section-error", html: true, nunjucks: true, open: false }) }} +{{ example({ group: "patterns", item: "complete-multiple-tasks", example: "have-you-completed-this-section-error", html: true, nunjucks: true, open: false }) }} ## Research on this pattern diff --git a/src/patterns/task-list-pages/task-list-statuses/index.njk b/src/patterns/complete-multiple-tasks/task-list-statuses/index.njk similarity index 100% rename from src/patterns/task-list-pages/task-list-statuses/index.njk rename to src/patterns/complete-multiple-tasks/task-list-statuses/index.njk From 136c684864b880ca450df34c809b3b04503f8a56 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Mon, 9 Oct 2023 12:05:46 +0100 Subject: [PATCH 07/10] Move guidance to the pattern page --- src/components/summary-list/index.md | 2 +- src/components/tag/index.md | 4 +- src/components/task-list/index.md.njk | 48 ++-------------- src/patterns/complete-multiple-tasks/index.md | 57 +++++++++++++++---- src/patterns/step-by-step-navigation/index.md | 2 +- 5 files changed, 54 insertions(+), 59 deletions(-) diff --git a/src/components/summary-list/index.md b/src/components/summary-list/index.md index b1ebef8976..9a380a4711 100644 --- a/src/components/summary-list/index.md +++ b/src/components/summary-list/index.md @@ -25,7 +25,7 @@ You can use it to display metadata like ‘Last updated’ with a date like ‘2 The summary list uses the description list (`
`) HTML element, so only use it to present information that has a key and at least one value. -Do not use it for tabular data or a simple list of information or tasks, like a [task list](/patterns/task-list-pages/). For those use a ``, `
    ` or `
      `. +Do not use it for tabular data or a simple list of information or tasks, like a [task list](/components/task-list/). For those use a `
`, `
    ` or `
      `. ## How it works diff --git a/src/components/tag/index.md b/src/components/tag/index.md index 71ab20ec23..fd8b2729ef 100644 --- a/src/components/tag/index.md +++ b/src/components/tag/index.md @@ -15,7 +15,7 @@ Use the tag component to show users the status of something. ## When to use this component -Use the tag component when it’s possible for something to have more than one status and it’s useful for the user to know about that status. For example, you can use a tag to show whether an item in a [task list](/patterns/task-list-pages/) has been ‘completed’. +Use the tag component when it’s possible for something to have more than one status and it’s useful for the user to know about that status. For example, you can use a tag to show whether an item in a [task list](/components/task-list/) has been ‘completed’. ## How it works @@ -27,7 +27,7 @@ Tags are just used to indicate a status, so do not add links. Use adjectives rat Sometimes a single status is enough. For example if you need to tell users which parts of an application they’ve finished and which they have not, you may only need a ‘Completed’ tag. Because the user understands that if something does not have a tag, that means it’s incomplete. -The [task list pattern](/patterns/task-list-pages/) has an example of how to show one status using tags. +The [complete multiple tasks pattern](/patterns/complete-multiple-tasks/) has an example of how to show one status using tags. Or it can make sense to have two statuses. For example you may find that there’s a need to have one tag for ‘Active’ users and one for ‘Inactive’ users. diff --git a/src/components/task-list/index.md.njk b/src/components/task-list/index.md.njk index 7f4a10c50b..99218da80f 100644 --- a/src/components/task-list/index.md.njk +++ b/src/components/task-list/index.md.njk @@ -42,7 +42,7 @@ The status alongside the task indicates whether they can start it. Users can sel Users can only move on from the task list when all tasks are shown as ‘Completed’. -Read the [task list pattern guidance](/patterns/complete-multiple-tasks/) for more information on how to use the task list within a service. +Read the [complete multiple tasks pattern guidance](/patterns/complete-multiple-tasks/) for more information on how to use the task list within a service. ### Tasks @@ -70,57 +70,17 @@ Do not include links within the hint text. The whole ‘task row’ links users If there are a lot of tasks to complete, you might find that grouping them makes it easier for users to understand and plan what they need to do. Tasks can be grouped into separate task lists on a page. Give each task list a short heading that clearly explains the grouping. -Read the [task list pattern guidance](/patterns/complete-multiple-tasks/) for more information on grouping tasks. +Read the [complete multiple tasks pattern guidance](/patterns/complete-multiple-tasks/) for more information on grouping tasks. ### Statuses Statuses use colour and a short descriptor to give users a quick overview of how much of the task list they have completed, and how much is left to do. -Statuses should be helpful to users. The more you add, the harder it is for users to remember them. Start with the smallest number of different statuses you think might work, for example ‘Completed’ and ‘Incomplete’, then add more if your user research shows there’s a need for them. - -Once the user has completed the task, the status should show as ‘Completed’ and be black text with no background colour. This will draw more attention to tasks that require action. - -#### Tasks that are in progress - -You may find you need additional statuses if your user research shows that users want to be able to distinguish between the tasks they haven’t started at all, and those they’ve started but not completed. - -In this instance, instead of ‘Incomplete’, you may want to use ‘Not yet started’ to show which tasks they are yet to start. You should then use ‘In progress’ for tasks they have started but are yet to complete. - -‘In progress’ is dark blue text on a blue background colour. ‘Not yet started’ is dark blue on a light blue background colour. - -{{ example({ group: "components", item: "task-list", example: "in-progress", html: true, nunjucks: true, open: false }) }} - -#### Tasks that cannot yet be started - -If the user cannot start the task yet, for example because another task must be completed first, use the ‘Cannot start yet’ status. This should be grey text with no background colour, and the ‘task row’ should not be linked. - -{{ example({ group: "components", item: "task-list", example: "cannot-start-yet", html: true, nunjucks: true, open: false }) }} - -#### Tasks containing an error - -You should avoid tasks having an error status by using the [error summary](/components/error-summary/) and [error messages](/components/error-message/) displayed at the point that the error is made, so that the user can fix it straight away. - -If it is unavoidable that a task may end up saved but containing an error, use the status text ‘There is a problem’ and a red background. - -Do not use the red background colour for any status text except errors. - -{{ example({ group: "components", item: "task-list", example: "error", html: true, nunjucks: true, open: false }) }} - -#### Status text - -Although we recommend using consistent wording across task lists, you can change it if research shows that different text is more suitable to your service or users. - -If you are creating your own statuses, use adjectives rather than verbs. Use sentence case, and keep it short, so that it can be easily read and understood. - -#### Additional statuses - -If your user research shows that there is a need for additional status tags, you can use other colours to help distinguish between them. - -{{ example({ group: "components", item: "task-list", example: "all-colours", html: true, nunjucks: true, open: false }) }} +Read the [complete multiple tasks pattern guidance](/patterns/complete-multiple-tasks/) for more information on status colours and text. ## Research on this component -This component was created by a cross-government group using research from the existing task list pattern. +This component was created by a cross-government group using research from the previous task list pattern. ### Linking the whole ‘task row’ to the task diff --git a/src/patterns/complete-multiple-tasks/index.md b/src/patterns/complete-multiple-tasks/index.md index 1234975162..fbcb36cb1a 100644 --- a/src/patterns/complete-multiple-tasks/index.md +++ b/src/patterns/complete-multiple-tasks/index.md @@ -10,7 +10,7 @@ layout: layout-pane.njk {% from "_example.njk" import example %} -Task list pages help users understand: +Complete multiple tasks pages help users understand: - the tasks involved in completing a transaction - the order they should complete tasks in @@ -18,22 +18,22 @@ Task list pages help users understand: {{ example({ group: "patterns", item: "complete-multiple-tasks", example: "default", html: true, nunjucks: true, open: false }) }} -Task list pages use a [task list component](/components/task-list) for each group of tasks on the page. +Complete multiple tasks pages use a [task list component](/components/task-list) for each group of tasks on the page. ## When to use this pattern -Only use a task list page for longer transactions involving multiple tasks that users may need to complete over a number of sessions. +Only use a complete multiple tasks page for longer transactions involving multiple tasks that users may need to complete over a number of sessions. -Try to simplify the transaction before you use a task list page. If you’re able to reduce the number of tasks or steps involved, you might not need one. +Try to simplify the transaction before you use a complete multiple tasks page. If you’re able to reduce the number of tasks or steps involved, you might not need one. ## How it works -You should show a task list page: +You should show a complete multiple tasks page: - at the start of the transaction - at the start of each returning session -If you use a task list page in your service, you'll need to: +If you use a complete multiple tasks page in your service, you'll need to: - group related actions into tasks - show the status of the tasks @@ -55,12 +55,47 @@ Make it clear to users which tasks they’ve completed and which still need thei {{ example({ group: "patterns", item: "complete-multiple-tasks", example: "task-list-statuses", html: true, nunjucks: true, open: false }) }} -Use the following labels to describe the different states of a task: +Statuses should be helpful to users. The more you add, the harder it is for users to remember them. Start with the smallest number of different statuses you think might work, for example ‘Completed’ and ‘Incomplete’, then add more if your user research shows there’s a need for them. -- 'Not started' (in blue) if the user can start work on the task, but has not done so yet -- 'Cannot start yet' (in grey) if the user cannot start the task yet - for example because another task must be completed first -- 'In progress' (in light blue) if the user has started but not completed the task -- 'Completed' (in black) if the user has completed the task +Once the user has completed the task, the status should show as ‘Completed’ and be black text with no background colour. This will draw more attention to tasks that require action. + +#### Tasks that are in progress + +You may find you need additional statuses if your user research shows that users want to be able to distinguish between the tasks they haven’t started at all, and those they’ve started but not completed. + +In this instance, instead of ‘Incomplete’, you may want to use ‘Not yet started’ to show which tasks they are yet to start. You should then use ‘In progress’ for tasks they have started but are yet to complete. + +‘Not yet started’ uses a blue background, and ‘In progress’ uses a light blue background. + +{{ example({ group: "components", item: "task-list", example: "in-progress", html: true, nunjucks: true, open: false }) }} + +#### Tasks that cannot yet be started + +If the user cannot start the task yet, for example because another task must be completed first, use the ‘Cannot start yet’ status. This should be grey text with no background colour, and the ‘task row’ should not be linked. + +{{ example({ group: "components", item: "task-list", example: "cannot-start-yet", html: true, nunjucks: true, open: false }) }} + +#### Tasks containing an error + +You should avoid tasks having an error status by using the [error summary](/components/error-summary/) and [error messages](/components/error-message/) displayed at the point that the error is made, so that the user can fix it straight away. + +If it is unavoidable that a task may end up saved but containing an error, use the status text ‘There is a problem’ and a red background. + +Do not use the red background colour for any status text except errors. + +{{ example({ group: "components", item: "task-list", example: "error", html: true, nunjucks: true, open: false }) }} + +#### Status text + +Although we recommend using consistent wording across task lists, you can change it if research shows that different text is more suitable to your service or users. + +If you are creating your own statuses, use adjectives rather than verbs. Use sentence case, and keep it short, so that it can be easily read and understood. + +#### Additional statuses + +If your user research shows that there is a need for additional status tags, you can use other colours to help distinguish between them. + +{{ example({ group: "components", item: "task-list", example: "all-colours", html: true, nunjucks: true, open: false }) }} ### Group tasks into steps diff --git a/src/patterns/step-by-step-navigation/index.md b/src/patterns/step-by-step-navigation/index.md index 31450250e6..094a450ce8 100644 --- a/src/patterns/step-by-step-navigation/index.md +++ b/src/patterns/step-by-step-navigation/index.md @@ -33,7 +33,7 @@ Do not use the step by step pattern: - when most of the guidance or services that make up the journey are not on GOV.UK - when the user only needs to read guidance and not take an action - when there’s no logical or helpful order to complete the tasks - for example, when you’re mostly presenting the user with a series of options -- inside a transactional service – use the [task list pattern](/patterns/task-list-pages/) instead +- inside a transactional service – use the [complete multiple tasks pattern](/patterns/complete-multiple-tasks/) instead ## How it works From cbb97ca2701021008e9a4b3916982a4c880034da Mon Sep 17 00:00:00 2001 From: Paul Robert Lloyd Date: Mon, 9 Oct 2023 10:37:56 +0100 Subject: [PATCH 08/10] Fix typo and remove scare quotes --- src/components/task-list/index.md.njk | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/task-list/index.md.njk b/src/components/task-list/index.md.njk index 99218da80f..7436d000b4 100644 --- a/src/components/task-list/index.md.njk +++ b/src/components/task-list/index.md.njk @@ -64,7 +64,7 @@ Only use hint text if there is evidence that the user needs more information abo Keep hint text to a single, short sentence. Screen readers read out the entire text when users interact with the task link. This could frustrate users if the text is long. -Do not include links within the hint text. The whole ‘task row’ links users to the task itself, so any links within the hint text will not work. +Do not include links within the hint text. The whole task row links users to the task itself, so any links within the hint text will not work. #### Grouping tasks @@ -82,15 +82,15 @@ Read the [complete multiple tasks pattern guidance](/patterns/complete-multiple- This component was created by a cross-government group using research from the previous task list pattern. -### Linking the whole ‘task row’ to the task +### Linking the whole task row to the task -User feedback from the task list pattern has shown that some users currently try to select task statuses, thinking they are buttons or links. The statuses have been redesigned to look less like buttons, and now the whole ‘task row’ is linked so that users can select anywhere within it to enter and begin the task. +User feedback from the task list pattern has shown that some users currently try to select task statuses, thinking they are buttons or links. The statuses have been redesigned to look less like buttons, and now the whole task row is linked so that users can select anywhere within it to enter and begin the task. ### Formatting of statuses The use of uppercase in task statuses makes them harder to read. User research has also shown that once a few tasks have been completed, it is harder for users to scan the page and spot incomplete tasks. -Statuses are now written in sentence case to make them easier to read. The ‘Completed’ task now uses black text with no background colour, which will draw more attention to asks that require action. +Statuses are now written in sentence case to make them easier to read. The ‘Completed’ task now uses black text with no background colour, which will draw more attention to tasks that require action. We have also introduced a new colour palette for statuses, using colour contrasts that meet accessibility guidance. @@ -98,7 +98,7 @@ We have also introduced a new colour palette for statuses, using colour contrast While this new component is based on user research from the task list pattern, we still need to carry out user testing with this new component. In particular, we would like to test the following assumptions: -* the benefits of linking the whole ’task row’ outweigh the risks of accidental clicking +* the benefits of linking the whole task row outweigh the risks of accidental clicking * the contrast of the statuses is sufficient * the suggested wording of the statuses make the most sense to users From ced829bf9cbb716d133dc0f3e7de5d5fd87c488e Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Mon, 9 Oct 2023 11:30:12 +0100 Subject: [PATCH 09/10] Update the roadmap and upcoming components --- src/community/roadmap/index.md | 1 - .../upcoming-components-patterns/index.md | 19 +------------------ 2 files changed, 1 insertion(+), 19 deletions(-) diff --git a/src/community/roadmap/index.md b/src/community/roadmap/index.md index 7b8e7aec92..b40f5f10c9 100644 --- a/src/community/roadmap/index.md +++ b/src/community/roadmap/index.md @@ -45,7 +45,6 @@ We're also: - running more workshops on accessibility - organising [Design System Day 2023](https://design-system.service.gov.uk/community/design-system-day/) - [updating the typographic scale](https://github.com/alphagov/govuk-design-system/issues/2289), including increasing the minimum text size on mobile -- hosting community co-design work to turn the [task list pattern](/patterns/task-list-pages/) into a component (thanks to the community) ## Coming up next diff --git a/src/community/upcoming-components-patterns/index.md b/src/community/upcoming-components-patterns/index.md index 12a4841878..1166590aba 100644 --- a/src/community/upcoming-components-patterns/index.md +++ b/src/community/upcoming-components-patterns/index.md @@ -2,7 +2,7 @@ title: Upcoming components and patterns description: Anyone can propose, develop or contribute to new patterns and components, or improvements to existing ones. section: Community -aliases: maps, task list, autocomplete, choosing a date, navigation +aliases: maps, autocomplete, choosing a date, navigation theme: What we’re working on layout: layout-pane.njk order: 1 @@ -38,23 +38,6 @@ If you’d like to help us build these components and patterns, join the convers } ] } - }, - { - key: { - text: "Task list" - }, - value: { - html: "A community collaboration to build the existing task list pattern into a component." - }, - actions: { - classes: "govuk-!-text-align-left", - items: [ - { - href: "https://join.slack.com/t/task-list-collab/shared_invite/zt-1gfbxa78k-Ql8885Iuan17w5v26F6yVQ", - text: "Join the Task list Slack group" - } - ] - } } ] }) }} From d564fc42572fb68a95c45c936bfbf6ad24bc8ad8 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Mon, 9 Oct 2023 11:47:58 +0100 Subject: [PATCH 10/10] Archive task list pages pattern --- src/patterns/task-list-pages/index.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 src/patterns/task-list-pages/index.md diff --git a/src/patterns/task-list-pages/index.md b/src/patterns/task-list-pages/index.md new file mode 100644 index 0000000000..f0320a415f --- /dev/null +++ b/src/patterns/task-list-pages/index.md @@ -0,0 +1,7 @@ +--- +title: Task list pages +layout: layout-archived.njk +ignoreInSitemap: true +--- + +The task list pattern has been renamed [complete multiple tasks](/patterns/complete-multiple-tasks/) and a new [task list component](/patterns/equality-information/) published with updated guidance.