Timeline (illustrative list)

[davidhunter08]

Example

Journeys used on

1. Request repeat prescription
2. Waiting times

Related

GOV.UK Design System discussion

Progress

Design checklist

• [x] Gather evidence and consolidate designs
• [x] Create a rough proposal (Figma)
• [x] Build a working version (HTML or Native)
• [ ] Tested with users
• [x] Draft guidance
• [ ] Design sign off

Development criteria

• [ ] Make WCAG 2.2 compliant
• [ ] Add HTML / Nunjucks version
• [ ] Add vue.js version
• [ ] Add Figma version
• [ ] Add design system guidance

[davidhunter08]

Team Compass are looking at using a timeline on referrals.

Screenshot


Key areas to test

Wait times

• Flipped the timeline and removal of current status from within the graphic, instead placed as regular text beneath.

Can users still identify what is currently required from them? Do they know they have no actions to take?


• Title changed from ‘wait lists’ to ‘treatment wait lists’

[davidhunter08]

User research from Team Compass...

[davidhunter08]

Example from prescriptions...

[davidhunter08]

Examples

Timelines out in the wild:

GitHub

BBC News

HMRC Design Patterns

https://design.tax.service.gov.uk/hmrc-design-patterns/timeline/

Adidas App

 The colour contrast 😢

[michaelgallagher]

@davidhunter08 we only ever tested this with staff (in internal-facing services, e.g. case management), but we did quite a lot work on timelines when i was working in hackney

see here

[growe88]

More examples

Some more examples of timeline components out there.

Trainline

 

CityMapper


DHL


Amazon


IKEA


TFL Go


[Tosin-Balogun]

Prescription and medicines team use this component to inform user the stages their medicine will go through before it reaches them

[growe88]

Collection of assorted information pertaining to Timeline Component

Insights: [Kainos] Participants think of their appointments and healthcare in the immediate sense, “what is the next step and when will that be”. Hence a visual timeline component was used. [Kainos] All users understood where they were and found the timeline useful, and also correctly identified what the dates were referring to [Kainos] Participants likened the visual to amazon deliveries and found it easy to identify where they were and what was next in the journey [Compass] The page was deemed to be particularly text heavy. Having the visual graphic helped to break this up and provide additional context through a means separate from text content.

/

Quotes: "Having the visual really helps" "Having a visual puts a map in your mind that it's coming up. Be less prone to forget about it." "It's reassuring, even if it's a rough month. Nice to know." "I'd like to see all my appointments on my timeline, even if they had been cancelled" /

Pain points since identified: [Compass] Participants expect the graphic to be dynamic; moving along and changing as they progress through the presented pathway. The timeline is static and generic, and so this does not meet user expectations.

(creds to Joe Galliford)

[davidhunter08]

Design update

HTML prototype (u: app / p: redesign)

Design decisions

From @growe88

We have reduced the variations of the nodes on the timeline.

• By having two variations of node, and two variations for line, we have reduced the cognitive load on users when trying to understand the component.
• This should make the timeline, and therefore the information it represents, easier to interpret.

We have identified two different uses in which our interaction designers use this component.

• Some use cases have the timeline component used as a visual list, using the nodes to depict next steps in a static component.
• Other use cases utilise the component as a progress indicator, making the nodes and corresponding lines blue to display current status and progress made.
• Both examples of usage are valid forms of interpreting the Timeline component.

Design work in Figma

Research questions

• Do users understand where they currently are in the timeline? Including users with visual impairments.

[davidhunter08]

The contrast ratio between the timelines's grey line and page background colour is 1.84:1. The timeline is not interactive so it technically doesn't need to meet the 3:1 but we need to make sure this works for users with visual impairments.

[davidhunter08]

Note: The current design is overriding heading styles (changing font weight to normal with only the current item being in bold)... is this ok?

This is how it looks without overriding the heading styles...

Easier to scan?

[Graham-Pembrey]

Is it possible that users might think there's a correlation between the amount of space between nodes, and the relative amount of time that step will take?

So for example, in the attached image, there is more space between 'Pharmacy processing' and 'Collect' than there is between 'GP approval process' and 'Pharmacy processing' because of the extra line of body text. That could be seen as representing a greater length of time.

This might just be something that we want to include in our guidance, as a possible perception to be aware of and to test for?

[jjulier]

Quick question just to check my understanding - is the content in the screenshot included on your comment above @Graham-Pembrey the actual content a user would see? To me it looks like a user would see 'Awaiting approval' OR 'Rejected' not both simultaneously? Same for the content under 'Pharmacy processing'.

[Graham-Pembrey]

Yes really good point @jjulier and something I had overlooked. I think you're right: for the example I shared, in actual usage, users would actually only see one of the pieces of body text beneath the headings. That would make the line length more consistent. It might just be something for teams to consider if one stage in the process has more body content than others.

[davidhunter08]

The team working on 'Apply for proxy access' tested a timeline on a confirmation page...