Add an example of the task list pattern

[gemmaleigh]

This PR:

• adds an example of the task list pattern to the docs
• links to the new example from the tutorials and examples page

The prototype and research for this pattern can be found here.

Here is the Hackpad page for this pattern.

Screenshots:

Where the tutorials and examples page has been updated:

Before:

After:

[sanjaypoyzer]

Would be good to have some guidance on where and how to use this pattern. Is there a recommended length of service that requires a task list?

Not sure if this guidance would go in the hackpad or in the prototype kit though, but either way it should be linked really.

[HarryTrimble]

@sanjaypoyzer we've planned to published a guide on Service Manual, that links to the example page in the prototype kit. Reason being the audience is less design and development and more managers and operations people.

Drafted what the guide might be like

Could add something about how long a service needs to be to warrant using the task list pattern

[sanjaypoyzer]

So maybe it's outside the scope of this PR, but it would be great to get links from the prototype kit to guidance about how to use the patterns included in it in general.

[HarryTrimble]

To make the example more transaction like rename tasks:

• 'Check eligibility, cost and time' to 'Check eligibility'
• 'Read rules' task to 'Read declaration'
• 'Do training' to 'Provide a photo'

[selfthinker]

The inline-block is not necessary because the float makes it automatically be block.

[selfthinker]

Regarding the CSS in general, I noticed two things:

1. This uses mostly ems while most things from the frontend toolkit etc use px (for spacing, fonts, etc). Ideally those shouldn't be mixed.
2. Most spacing seems arbitrary ("magic numbers"). It would be good to either base it on something existing (e.g. $gutter) or something new or add comments which explain where a number is coming from, especially if it relates to and affects other numbers.

[HarryTrimble]

@edwardhorsford and @timpaul have suggested tasks that can't be completed yet, for example 'Submit and pay', should have no link and be in grey.

[sanjaypoyzer]

@HarryTrimble Seems confusing to me. It's the same as disabled button, which I think we decided a while ago are always a bad idea. We should provide feedback to the user on why they can't do that thing, either before or after they click it. Preferably before, or if that makes the design too noisy, with an error message after they click it.

Don't assume that making it not styled as a link will make people not click it / know that it's not a link - I saw people in research last week clicking lots of body text words.

[edwardhorsford]

@sanjaypoyzer this was my suggestion. We need to be clear that some steps can't be completed yet. Perhaps this isn't clear - something to test / iterate.

It's not necessarily good to provide feedback to a user before or after they click on it - and we don't actually know that users will click it. There should be enough visual affordance that it's clear the step can't be started - without requiring error messages.

FWIW we try to avoid disabled buttons, but they are not "always a bad idea".

[joelanman]

maybe we leave this aspect of the pattern out until it's been through user research?

[HarryTrimble]

@joelanman I reckon that's a good shout.

We need to define how and when we do further user research on existing patterns

[HarryTrimble]

@edwardhorsford suggested we only have 'Submit and pay' task in the final section, which I agree.

[edwardhorsford]

I'd be tempted to have the tags similar to the alpha / beta tags - uppercase, etc. The current ones also look visually non-centred on mobile.

Thoughts?

[HarryTrimble]

All caps are harder to read. Makes it difficult to see the shape of the word, as Magaret Calvert argued when they changed road signs away from all caps.

@keithiopia said lower case is easier to read when I discussed the labels with him.

That said, might not matter as much, as it's the same word repeatedly. Does look "nicer" in all caps.

Does all caps effect screen readers?

[keithiopia]

@edwardhorsford @HarryTrimble Is the pattern for alpha and beta tags something that should be repeated for things that aren't alpha and beta tags?

[HarryTrimble]

@timpaul said put the task statuses in all caps 'COMPLETED', which I agree

[HarryTrimble]

Can the URL be https://govuk-prototype-kit.herokuapp.com/docs/examples/task-list-page

[HarryTrimble]

@gemmaleigh final task titles and statuses:

[gemmaleigh]

@HarryTrimble final?

Here's a screenshot:

[HarryTrimble]

@gemmaleigh perfect