Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Task list #72

Open
govuk-design-system opened this issue Jan 12, 2018 · 107 comments
Open

Task list #72

govuk-design-system opened this issue Jan 12, 2018 · 107 comments
Labels
pattern Goes in the 'Patterns' section of the Design System

Comments

@govuk-design-system
Copy link
Collaborator

govuk-design-system commented Jan 12, 2018

Use this issue to discuss this pattern in the GOV.UK Design System.

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (Published) Jan 12, 2018
@timpaul timpaul added the pattern Goes in the 'Patterns' section of the Design System label May 21, 2018
@abbott567
Copy link

Thought I'd just weigh in with a tweak we have had to implement for this pattern.

We are currently using it in a case working system and we had an issue where if one agent went in and chose some options that meant the task was not complete, to other agents it looked like no work had been done at all.

So, we needed a way to differentiate between a section that had not been looked at and a section that could not be completed. So we have added a grey 'not complete' badge to say 'yes, i've looked at it, but it's missing some information' vs 'nobody has looked at this section at all'.

screenshot-localhost-3000 2018 05 30 12-41-14

@peteblakemore
Copy link

peteblakemore commented Jul 2, 2018

Interesting to see you've also removed the numbers from the side of each task, @abbott567 . On the service I'm working on we will also use a task list, but the tasks needn't be completed in order, so this approach would work well for us.

@kubabartwicki
Copy link

kubabartwicki commented Jul 18, 2018

We just finished a mission in which we worked on a part of Digital Marketplace where users can search for cloud hosting, software and support. We redesigned an existing task list and put it at the start of the service: https://www.digitalmarketplace.service.gov.uk/buyers/direct-award/g-cloud/start


Things we knew before

  • Users aren't aware of how the service works which results in non compliant behaviour
  • Some use the service twice a week, some will only ever use it once
  • Tasks in the service include complex interactions, such as searching and filtering
  • Tasks need to be completed in order

Things we learned

Put a static version of task list at the start of the service

screenshot-www digitalmarketplace service gov uk-2018 07 18-15-09-43

We had a hypothesis that task list would be a great way to explain how to use our service. To test, we replaced our old start page which had a search bar on it, with a task list.

This performed really well: it made the process transparent and cleared up a few confusions. We previously tried doing this with a start page pattern, but users found it annoying and a barrier to search.

Our static task list has no badges and is treated as static content rather than something users can interact with.

Put guidance alongside tasks

We modelled our task list around the idea that each step has a single task associated with it and some guidance. This is different to the task list in GOV.UK Elements, which assumes that each step consists of a bunch of tasks.

Doing it this way ensures that users can access guidance at all times but they don’t to tell us they read it each time they use it.

Use badges

“Completed” and “Can’t start yet” worked really well. They helped users realise what to do next and a few times made them realise that the page they are looking at is interactive and changes as they walk throughout the process.

screen shot 2018-07-18 at 15 08 19

It’s not always obvious what the steps are

The hardest part of this work was getting the steps right – we tested 5 different iterations of the task list before we ended up with the 5 steps we have now.

The most interesting one here is step 3, which refers to a lengthy offline process which a lot of our users currently get wrong. Returning users found it annoying to have to confirm "I've done this" each time, so we had to tweak the way the step is explained and acted upon.

We went with “Confirm you have read and understood how to assess services”. This means that the step is about reading our guidance about a process, rather than completing the process, which can take weeks and has very blurry edges as to where it ends and begins.

@PeteWilliams
Copy link

Thought I'd log a couple issues we've seen In the Civil Money Claims project. The first of which has had quite serious consequences for the user involved, and led to a complaint.

image

'Completed' marker misleading
A defendant in the live service was responding to a claim saying that they owed some money. They completed the required task in order to defend their claim, then were returned to the task list where that task was marked ‘completed’. The user thought this meant they’d filed their response, so they didn’t continue to the ‘Check and submit your response’ task. As a result they were issued with a CCJ for not responding.
This user was partially sighted and using a screen reader, but we think that may be a red herring, as apparently this has come up in testing with sighted users too.

Users not completing all sections
Over 20% of users in our live service got the error telling them to complete all tasks before continuing.
We've seen a few causes of this in testing:

  • Some users skip anything in 'Before you start'
  • If a task is phrased as a question, and the user's answer is 'no', some will think they don't need to fill it in
  • When the task list is dynamic - ie new tasks appear when you select certain things in other journeys - users often don’t see the new task and just skip it, especially if it was at the end of a section
  • Some users simply do not realise that they have to complete all the tasks before they can continue

Any thoughts on how to resolve these issues would be much appreciated. My current thinking is to try adding 'You must complete all tasks before continuing' to the top, which may help both issues if people actually read it.

@kr8n3r
Copy link

kr8n3r commented Aug 15, 2018

Has anyone tried/tested by moving the tag to the left, below the task description?

@charge-valtech
Copy link

charge-valtech commented Aug 15, 2018

Working on the "Apply for a Blue Badge" service.

We started testing with this in our prototype from last week. Overall, it's tested really well - it helps users realise how far along the application they are, and prepares them for what is coming up. We take users to the task list for the first time after they complete the "Check eligibility" section. 5 out of 5 users understood this on first land, they see the "Completed" tag and understand what the next section is that they need to complete.

One issue we did see though, was once a few tasks had been completed in the list, it becomes more difficult to see the sections that are incomplete. The page becomes more difficult to scan.

We are toying with the idea of a subtle "Not started" tag which is a light blue or something.

All users spotted and understood that they needed to hit "Submit and pay" at the end of the list for the application to be submitted.

@anna-kayPA
Copy link

anna-kayPA commented Aug 15, 2018

We use the tasklist in the probate service.

User needs

  • Know where I am and what is coming up
  • Take breaks if required

Differences between ours and the beta tasklist

including why and how we've tackled it

Users can't complete items in any order. They can't for example pay before they've filled in the application.

  • we use a start button per section rather than a text link. Users understand green buttons as it provides clear guidance of what to do next. If they return to the service mid task, the button says "continue"
  • we use the lozenge "can't start yet" (replicated from the digital marketplace design by @kubabartwicki) so users know that they can't skip ahead - they can't skip ahead because we use information from earlier questions to decide what to ask in later sections.

Our service is in public beta and we have had a tasklist in our service for over a year.

probate-tasklist-2

Users will have been screened and created an account before they land on the tasklist.

Ongoing challenges

For some users, there is a step in the process where they need to wait for someone else's response before being able to proceed to the next task. When this happens, we do not show the green button. Instead we include content below that section header informing the user that they can't proceed yet. We believe this causes users confusion until they read the content. We are working on a way to help users easily understand that they need to pause for now.

@kubabartwicki
Copy link

kubabartwicki commented Aug 15, 2018

@PeteWilliams

That's a really interesting issue – I wonder if it's to do with users recognition of the steps as things they need to do? That's what we struggled with the most on Digital Marketplace (#72 (comment))... eg maybe if "Submit" was more about "Submit response" and "Respond to claim" about "Prepare response" it could be more effective and clearer to users what the badges mean and refer to? 🤔

@helenadt
Copy link

@PeteWilliams it seems like there may have been a number of things at work there. I have not used this pattern so can only add some thoughts.

I wonder if it is worth trying to reintroducing the green button for the final task? I.e. for 'Check and submit a response'. Might make it clearer how you finish. Has anyone tried this?

It also feels like there might be something about the first set of tasks being 'Before you start'. By being at the task list am I not already started?

@sunilkathare
Copy link

We are using the task list pattern to design an online version of the C110A application, which is 22 pages long, where local authorities can apply for a care, supervision or emergency protection order.

Local authority solicitor or legal assistant can use this application to start the process to place a child at risk of harm under the care of the local authority.

Why we are using this pattern?

  • Users can see the whole form, not just the parts they’ve answered

During user research we found users liked to see all the sections in the application in the form. One question per page pattern, shows just the first few questions. You must answer these before moving to the next section. It can be reassuring to know all the questions. So, you know what to do. It helps to know what information you need to gather if you know that questions.

  • Users can answer questions in any order

If you can’t yet answer question 3 – maybe you are still gathering information – you can still answer question 8. One question per page pattern online forms progress linearly – you must answer one question before seeing the next. With the task list pattern you can answer question in any order.

  • Save and restart applications

With the task list pattern you can add information as and when you get it. For example, in international cases, you have to wait till you get important information. As it is not linear, you don’t have to enter all information in one go.

  • Save time

Users don’t need to go through all the questions in the application form and can skip entire sections like the international section. Users don’t need to waste time saying no to questions that they don’t need to answer and fill only sections they need to. Fewer pages to load and fewer buttons to click means that they end up saving time!

apply-for-care-order-desktop

apply-for-care-supervison-or-epo

apply-for-care-order-phone
apply-for-care-order-tablet

@quis
Copy link
Member

quis commented Aug 30, 2018

We’re trying this variation of the task list pattern on GOV.UK Notify:

image

There’s some more detail in this pull request: alphagov/notifications-admin#2250

I’ll update this comment once it’s been live for at least a month and we can measure how effective it’s been.

@charge-valtech
Copy link

We noticed screen reader users getting a bit frustrated by having to tab through every section each time they came back to the task list.

I've prototyped this solution to see if it helps things. A hidden link similar to the "Skip to main content" that takes the focus to the first incomplete link on the page.

Screen recording of it in action

@timpaul
Copy link
Contributor

timpaul commented Sep 1, 2018

Great idea @charge-valtech ! If you try it out in research let us know how it performs.

@joelanman
Copy link
Member

@sunilkathare thanks for sharing that! Do you have any findings from user research? Are you finding any of the same problems as some other teams? For example users not realising which sections they have to complete

@sunilkathare
Copy link

sunilkathare commented Sep 17, 2018 via email

@phillipsr
Copy link

Hi everyone - just thought that it might be useful to contribute to this chat. We've been working on Register as a Childminder for a while at Ofsted (in private beta) and have gone through multiple iterations of the task list. Our complicating factor is that we can have 6 legitimate statuses of a task (Done, Started, Waiting (to progress the task someone else has to do something), Flagged (a reviewer has flagged a problem they need to correct), To Do, and Do Last). The image below shows how we've created new statuses in a similar vein - although its not actually possible to have all of them shown at once, so take that with a pinch of salt.

suggested_tasklist_colours_black

In our testing these have all worked really well, and now that we have tweaked the colour scheme for some earlier contrast issues we would pass our accessibility audit (combining the statuses with alternative descriptions). Without being able to use the task list pattern, our application is very long and involves lots of different areas - so this brings them together nicely. We also have the challenge that tasks can be done in any order (except for the last one), and users frequently (want and need to) complete the form over multiple visits and over a long period of time. So having the task list as a check point of where everything is up to is incredibly useful for them.

We'd be really happy to share any of our findings with anyone that is interested, or to hear any other observations.
Rich - richphillips_ofsted on slack

@joelanman
Copy link
Member

We've heard a lot of research to say that some users don't know they have to complete all tasks. It's also the case that screen reader users can't easily get an idea of their progress, whereas sighted users can get an impression by seeing the 'completed' tags.

So, we'd like to suggest a change and get some research on it:

Once a user has completed at least one task, add a summary line above the task list to say how many tasks have been completed.

"You have completed 2 of 6 tasks"

@PeteWilliams
Copy link

One potential problem with that is that, in our case at least, the number of tasks can be dynamic.
You might start with 'You have completed 1 of 4 tasks', which then becomes 'You have completed 3 of 7 tasks'. So it could be quite misleading - though that may be better than the alternative.

@marthaboggins
Copy link

Have performed two sets of tests with this pattern being part of the flow. The numbering left user's thinking they had to do the tasks in order - which is not the case. Otherwise they had no issues with it.

From my POV I'd like to see how you intended the links to work once the user has Completed a section. Do they simply go back to same pages with the fields pre-filled?

@phillipsr
Copy link

@marthaboggins
I think that's an interesting question. In our register as a childminder service, we had a summary page at the end of each task. Therefore, if the task was complete, clicking the link would take them to the completed summary page - thus allowing users to select which question they need to revisit. We found this to be better than navigating users to the beginning of the task.
Has anyone else tried any other approaches?

@stevenaproctor
Copy link

@marthaboggins A couple of services in HMRC removed the numbers when the sections could be completed in any order. The order they appear in the list should be based on user research and what makes sense to users.

@phillipsr When a section is incomplete, the services I mentioned take people back through pre-populated versions of the screens they have seen. This was because partially completed check answers pages confused people and also to remove the task-list-inside-a-task-list feeling.

When a section is complete, when they go back in it is to a complete check answers section that allows them to change their answers. If this leads to a change in journey, they would be taken through the screens in the normal way and given a new check answers page at the end.

From what I understand, this has tested well with users in different services.

@joelanman
Copy link
Member

@PeteWilliams hmm good point, though isn't that already implied by the task list itself, even without a summary?

@chrisadesign
Copy link

We've heard a lot of research to say that some users don't know they have to complete all tasks. It's also the case that screen reader users can't easily get an idea of their progress, whereas sighted users can get an impression by seeing the 'completed' tags.

So, we'd like to suggest a change and get some research on it:

Once a user has completed at least one task, add a summary line above the task list to say how many tasks have been completed.

"You have completed 2 of 6 tasks"

Hey @joelanman how does this work with sections? What counts as a task here, the numbered items or the sub-items within?

@joelanman
Copy link
Member

@CHdesign it would be total number of sub items - the rows that eventually get Completed tags

@chrisadesign
Copy link

Brill, we're looking at one at the moment, I'll test it out.

@frankieroberto
Copy link

Has anyone considered whether COMPLETED should be displayed in block caps or not? Some of the variants above use title case instead.

Our content designers have heard of some research suggesting that block caps present accessibility issues, but I don’t know whether that still applies for single words, as in this context?

The GOV.UK Style guide only suggests not using block caps for large amounts of text.

@nicprice
Copy link

nicprice commented Feb 1, 2022

The tick adds meaning, though the alignment affects the ability to scan down the list.

Also, with to do lists, the user is the one who can mark as done, whereas if I've understood correctly, this will be the service which decides based on rules. So we might need to be careful to distinguish from to do list

@asier-hmrc
Copy link

I agree the indented ticks make scanning difficult. They look like some sort of bulleted sub-section.
The checkboxes keep the left hand edge uniformly aligned and easier to scan, but a checked box can imply it can be unchecked.

@cjforms
Copy link

cjforms commented Feb 1, 2022

Possibly they are in danger of looking too much like checklist. Another point of view might be that they are, in fact, checklists.

It's always seemed a bit odd to me that they got implemented with a 'tag for status that looks a bit like a button at a glance but isn't a button'.

@steve-oconnor
Copy link

@cjforms We're working on making them less 'buttony'. That and the uppercase has always been a problem for me.

@asier-hmrc
Copy link

@steve-oconnor I agree, uppercase has low readability.

@frankieroberto
Copy link

@steve-oconnor @cjforms @nicprice @asier-hmrc thanks all for the helpful feedback - I should clarify that this is all work-in-progress / design exploration at this stage.

I've done another version indenting all the items so they align:

Screenshot 2022-02-07 at 13 37 37

With this, there’s a question of what the initial view should be (when all incomplete) – should they all be indented still, or only once 1 of the items has been marked as completed?

Another option might be to "outdent" the ticks, although this would only work on wider viewports, and would have to switch to indenting when narrower I think:

Screenshot 2022-02-07 at 13 38 39

@cjforms we recently added some guidance around marking tasks as completed which suggested that users can be asked this within the task itself (after all the required questions have been answered). I think this is probably better than an empty box appearing on the task list itself, as it's within the context of the task (for example, on the "check your answers" page)?

@asier-hmrc
Copy link

@frankieroberto What if the "completed" where to move right next to the task and away from the 'to do' column. Just a thought.

image

@christopherthomasdesign christopherthomasdesign moved this from Published to Actively working on in GOV.UK Design System Community Backlog Feb 14, 2022
@steve-oconnor
Copy link

@asier-hmrc My problem with that idea is the visual "clutter" it creates. My eyes dart around the screen as opposed to scan down a list.

@asier-hmrc
Copy link

@steve-oconnor Yes I agree about the clutter. The "completed" tags are loudest on the page with its white-on-dark-blue style, maybe if they could be played down.

I think there is something intuitive though, about moving tags to one side away from the pending/to-do column as they get done. Using tag position/alignment as a status indicator to reinforce its content. We can't rely on colour. Glancing at the right hand instantly shows what is left to do.

@steve-oconnor
Copy link

Absolutely can't rely on colour, which is why there is an element of shade to the different statuses. This is being reviewed for the task lists specifically though. The completed status looks like a button and, for usability, we will be testing if it is better to give visual emphasis to incomplete rather than complete sections.

Still not convinced by moving tags around 😁

@frankieroberto
Copy link

Here’s a current work-in-progress of the design for the Tags Statuses in the task list that @steve-oconnor and I have worked on:

Screenshot 2022-03-10 at 12 03 09

Colour names are tbc (naming the 2 with transparent backgrounds is tricky!).

Our current thinking is that the CSS classes would be named after colours, for example govuk-task-list__status--blue, rather than statuses govuk-task-list__status--in-progress, as some services may use different status labels, depending on their needs and users. However the accompanying guidance pages may well strongly suggest certain pairings of status labels and colours.

The one exception is the red status, which we’ve labelled govuk-task-list__status--error to try and strongly imply that it should only be used for a task in an error state (which should hopefully be rare).

@DanGuyMOJ
Copy link

DanGuyMOJ commented May 23, 2022

We have done a lot of testing on this pattern on the Modernising lasting powers of attorney (LPAs) project. Here is what we found:

  • People tend to complete in the listed order
  • If steps are numbered, people tend to complete in that order
  • People like to see all steps—we tried collapsing steps so the next step was more obvious but people like to see them all, particularly if returning after signing in
  • Don’t list guidance or ‘read’ items as extra tasks—people get overwhelmed by too many steps
  • Condense list into the fewest steps possible
  • Guidance can instead be shown as the first page once someone has clicked on the respective task item
  • Only show steps that require an action
  • Task list is less overwhelming in a two-thirds column that a full column

task-list

In our service, we also have a point at which information needs to be locked so that other users can sign. For this, we introduced a ‘Locked’ status. People understood this but did have questions for what would happen if they found out they needed to change information later.

locked-state

@cjforms
Copy link

cjforms commented May 23, 2022

Thanks @DanGuyMOJ

I'm especially interested in the topic of Lasting Power of Attorney (LPA) and similar directives, and I'd like to know more about this point:
"Don’t list guidance or ‘read’ items as extra tasks—people get overwhelmed by too many steps"

For LPAs, there are many detailed and quite complex choices that people must make that will be recorded in the LPA and will then become binding, often in difficult circumstances. For example, I've seen people struggle with:

  • What is a 'power of attorney' anyway?
  • What's the difference between 'donor' and 'attorney'
  • What's the difference between 'attorney' and 'replacement attorney'? Can these be the same person?
  • Why is the 'donor'?
  • What is a 'person to notify' and why would I want one?
  • Who is a 'certificate provider' and why do I need one?

In your research, did the participants already have all their choices made about the different roles and who would fill them before they attempted the transaction?

or did they work it all out while filling it in? If so, when did they read the stuff that explained it all to them?

I'd also really like to know what you did in the research to check whether the final LPA as filled out was an accurate reflection of their wishes. (This is a known problem in medical consent processes and I suspect in the world of advance directives too).

Or was this research where they were doing the LPA from a scenario? I'm fine with doing that as it also has a value, of course!, but it would make me very hesitant about dropping guidance items.

I do appreciate the point that reading guidance (which in this case, I'd much prefer to frame as 'thinking about your decisions and discussing them with the people involved') for LPAs is pretty daunting. That's partly because these are decisions and discussions that many people do find extremely daunting. It's the only case I know of where the actual advice from a legal association is "blame it on your attorney" (see the section about 'Starting the discussion' in this from the American Bar Association Toolkit for Health Care Advance Planning - .pdf :)

@nfren
Copy link

nfren commented Jun 13, 2022

At the Intellectual Property Office, we are currently investigating using this pattern in our replacement patent application service.

The problem
The current service is a minimum of 14 steps long - users must go through each step to be able to apply, even though they don't have to supply information at every step (there are different types of patent applications, each with different minimal set of requirements).

Our users
We have a very wide spectrum of users who use the service: from the novice member of the public to the legally trained Intellectual Property (IP) professional.

How it has tested
The task list approach has tested well.

Feedback we’ve had is that dividing the application into smaller tasks makes the process much less daunting for novice members of the public. The legal professionals can also quickly complete only the tasks they need to (rather than having to traverse the whole application).

As we plan to house this behind an account, users can also complete it in their own time, rather than a single sitting – choosing the sections they want to complete when they have the information to add, in the order that suits them.

Testing with members of the public did identify the need for some brief guidance to introduce the different sections of the application. This initially caused us some issues as we wanted to avoid the page becoming too busy, but we worked with a content designer and found a solution which works for all users.

We have a preceding screen before the task list where the user selects the type of application they want to make – this then informs which sections are shown as required.

This is a recent change as we previously tried including this on the same screen as the task list. It had mixed responses from testing as some users struggled to make the connection between the section where they completed the individual tasks and the section where they chose the type of application they wanted.

We are continuing to iterate this revised approach, and still need to test it properly. However, we’re confident this change means the user will have a clear connection between the application type selected and the tasks they need to complete, whist retaining the flexibility to complete tasks in the order that suits them.

image

@frankieroberto
Copy link

@nfren

At the Intellectual Property Office, we are currently investigating using this pattern in our replacement patent application service.

Thanks for sharing your research! Great that it is working well so far for you.

I’m curious that you are using the ‘tags’ on the right for Optional vs Required! That’s not a pattern I’ve seen before. Are you also communicating which tasks have been “done” as well somehow, or did you not find a need to do this?

@nfren
Copy link

nfren commented Jun 16, 2022

Thanks @frankieroberto - hope you found it useful

We tried a number of different iterations of the tags, but found that 'Optional' and 'Required' have achieved the best results so far. They give clarity to the user on the minimal amount of information they must supply to support an application, while still giving them the option to supply additional information if they wanted to.

Once they have completed a task, the tag changes to 'Completed'. Additionally, if they part complete a task, the 'In progress' is used.

@patrick-sansom-HMRC
Copy link

a while back I tested the task list pattern with a screen-reader user. they mentioned that it would be good if a link could be added to enable them to skip over the completed tasks and go straight to the other tasks.

I can see there were similar comments about this earlier, do you know if anything has been added to the code to address this?

@SebHoward
Copy link

Following up on the post @nfren shared last year. At the Intellectual Property Office, we are now nearing the end of our Beta phase for the IPO Transformation. Within the apply process, we have continued to make use of the Task list pattern and have iterated how we use it throughout our Beta.

Our requirements at the IPO are complex and therefore we have adapted the task list pattern in some areas to meet them. I will talk about this in more detail below.

Summary of our requirements

  • Patent law dictates many of the requirements within our service. The most impactful to the task list being the requirement for when information must be submitted to the IPO. During the initial apply journey, some information is optional but we must give them the ability to complete it.
  • During Beta, requirements that Alpha did not address were identified. These include:
    • Permissions - before the application is submitted, have the ability to set who can view and manage an application whilst drafting and post-submission.
    • Access to draft applications - ability to copy a link to the draft application for sharing with others.

How it has changed in Beta

In beta, we have made a number of further iterations to our task list. Some as a result of the new requirements and some to align with the standard pattern again, which has led to it testing better with our users:

  1. Tags are now exclusively used for the completed status. We've reverted to using the tags as documented, using them to describe the completion status of that particular task. And using headings to communicate which tasks are required or optional.
  2. For the new requirements mentioned above, we have added body text at the bottom of the page. This design decision was made with the aim of balancing the needs of our professional and novice users - having the feature for our professional users who need it, without confusing novice users who don't. This implementation will need further research as the service continues.

Secure beta design documentation - Frame 3 (1)

How it has tested

Our main challenge when testing with users has always been how we communicate which tasks are optional and which are required. By returning more to the original pattern and adapting it in different ways, we have landed on a design that tests well with users in their understanding of optional/required.

Guidance only tasks have been removed from the task list. User research showed that novice users would read this before starting the service and our professional users would never have a need to access it. In replacement, we have provided in-context guidance within the tasks and developed a pre-apply guidance strategy.

Users have also appreciated the familiarity of the pattern - recognizing it from completing their tax return.

Overall, our task list is now consistently testing well with our users.

@bazzle
Copy link

bazzle commented Aug 17, 2023

Regarding the application status "Referral incomplete" line, which changes to "Referral complete" line, in our case.

One of our user testing participants was confused by this.

Upon seeing Application complete followed by You have completed 5 of 5 sections, they thought "Application complete" means the form is submitted. And believed at this stage no further action was needed to submit the referral.

image

@steve-oconnor
Copy link

@SebHoward Great to hear it's testing well. Do you plan to include the new tag designs?

@joelanman
Copy link
Member

@bazzle I would think that if there's a task the user needs to do, that should be part of the task list? If all tasks are complete then the overall task should be complete. So if there's an outstanding task (Submit?) then that should be added, and it would then read 5 of 6 completed.

@SebHoward
Copy link

@SebHoward Great to hear it's testing well. Do you plan to include the new tag designs?

Hi @steve-oconnor I'm not aware of the new tag designs? I believe we are using the latest version published on the Design System. Could you drop a link to the tags you mean? :)

@querkmachine
Copy link
Member

@SebHoward New tag designs are being introduced in v5 of Frontend. We're planning to provide a pre-release for testing soon™, but in the meantime you can see the new tag designs in our review app: https://govuk-frontend-review.herokuapp.com/components/tag

@bazzle
Copy link

bazzle commented Sep 12, 2023

Thanks for clarifying, we've been using the pattern incorrectly, in situating the Submit button at the bottom of the task list. We'll think about making Submit its own task, or including it at the bottom of check your answers.

@mattia-gobbo
Copy link

For 'Send an SR1 medical evidence form' we've used the Task list pattern and extensively tested its use with users. Overall, user were able to understand what task were involved and check progress, especially because all the section headings were visible above the fold with no need to scroll.
From research we have identified the following points that could improve users experience and interaction with its elements:

image (8)
Considering the user will interact with the page to understand the tasks that are involved in completing the form, check progress on the form and would never interact with the page when all the sections are completed, the H2 indicating the application is incomplete (in our case framed as 'SR1 form incomplete') doesn't provide much value to the user and might be irrelevant as it won't change status depending on the progress of the user.

image (10)
Considering the user must complete the questions of a section in order and mandatory questions cannot be skipped (otherwise these would be flagged with an error), on the questions of the form there should be a exit route to allow the user to not answer the specific question at that time and come back later. For that reason, in our service, we've introduced a 'Return to SR1 form sections' link within a button group as an exit route. When clicked, the link would take the user to the page with the task list and wouldn't save whatever the user inputed in that question.
We extensively tested the wording of the link, what worked best was using the form 'Return to + [Heading of the page with the task list]' as a suggestion of where the user would be taken.

image (13)
image (9)
A link to the 'Check your answer' page is enabled only when previous section of the form are completed to prevent the user to access to that page when the form is not fully filled in. Although, this raises accessibility issues as 'Check your answers' is not picked up by screen readers as link but as simple text and could confuse screen reader users when it's then read as link.
It's not clear from the guidance what the status of the tag should be when the user visits the page that was previously disabled and than clicked 'back' to return to the task list page. Shouldn't it be 'In progress’ as the user has started to check their answer since that's the task the user needs to carry out in that page? There is space for improvement in the interaction between the task list and the CYA patterns.

0-1694622984519
image (11)
For optional questions, rather than asking a radio question at the end of the task to check if the user has completed the section, we've asked a conditional question upfront to check if the user has that piece of information (e.g. Do you have the patient NINo?). In this way the user is then branched to a question in which can input that piece of information or the next question depending on their selection. The question would be considered 'completed' at the point of the conditional selection.

image (12)
We've tested a version of the task list in which all the questions were listed, so the user could see specifically what questions were completed and could start to fill in the form from any point they preferred. Although, this wasn't feasible to be developed using the CASA framework as the code library of this last one is designed so the user can start from the first question of a whole section and complete the following one in order.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pattern Goes in the 'Patterns' section of the Design System
Development

No branches or pull requests