Timeline

[govuk-design-system]

What

Help users understand the history of a document, object or process by showing them a sequence of timestamped events.

Why

Variants of this pattern are already in use in multiple internal services at Home Office, DWP and HMCTS.

Examples

• Timelines: DWP design patterns
• Timelines: DWP design examples
• Timeline: Home Office Design System
• Timeline: HMCTS design system

[ignaciaorellana]

@abbott567 Hey Craig, I was looking at the Design examples from DWP and spotted that you are working on this. Could you link to it or share your work? would be interesting to see

[abbott567]

Hi Ignacia,

At the moment it’s very much just trying to get people sharing things that fall outside known patterns. We’re trying to avoid trying to define patterns and components for the moment because it often ends up so low level that everything just grinds to a halt whilst people argue over what is a pattern etc.

So, the design examples repo is our attempt at just trying to get people sharing designs. We’ve created an issue template to ask some simple questions such as: ‘Which service are you using this on?’ and ‘Has this been accessibility tested?’. The aim is to get a bit of consistency of things that solve a problem and give people a bit of reassurance as to how mature a design is, rather than trying to define anything as a pattern just yet. In time, if enough people use it and there's enough research behind it, maybe then we try and define it as a pattern.

Alongside this we had our first meet up about it last month. We figured getting everyone in a room once a month might help keep momentum up.

At the meetup, we showed the GitHub repo and how to add screenshots to it. We also did a workshop where people brought along examples of a ‘search feature’. We found we had 5 just at the meetup, and I’m aware of another 2 or 3. So we have lots of people reinventing the wheel each time.

The workshop was to try and define what exactly it was it was doing and to see if we could try and compile our 7/8 different versions down to maybe 1 or 2. We found we can probably start with 2. We had a lookup, which wasn’t really a search. It was putting in a national insurance number and getting back exact matches. If there was no match there were no results. Then, there was the fuzzy matching search a bit like Google. Where if you get no exact matches it returns similar things.

So, the next step is to try and refine a decent version of both of these so anybody in future doing a search or lookup has a place to start. We are also planning the next meet up and hoping to do some deep dives into services to see if we can start to identify more of these things that are similar across services.

Here are the slides from the meet up https://docs.google.com/presentation/d/1xGiKEqWXGRobEH32TfN6wGnBG8t4ygOavOS0_8j3iDM

And @htmlandbacon also wrote a blog post about it: https://medium.com/@colinoakley/thoughts-from-dwp-digital-design-patterns-meet-1-4de66bbccaee

If there is anything else I can help with just give me a shout =)

[abbott567]

I'd like to propose our DWP timeline pattern for this. It's been around 10 months since the first conversations on this sprouted up, and since then we've used this in several services and refined our guidance on it. I think it's in a good position to be pushed upstream. Our example is here: https://dwp-design-examples.herokuapp.com/example/timeline

The only caveat is that we've only been using it on staff facing services, so using it in citizen facing services might need additional guidance.

[fofr]

I think @BlancaTortajada made a similar timeline design to the DWP one for data.gov.uk, which we repurposed a little in the whitehall prototype (https://prototype-whitehall.herokuapp.com/document-history):

[timpaul]

UK Parliament also use timelines here:

[gazjoy]

We used the DWP timeline for Jobseekers allowance. (Staff facing).

[roobottom]

I'm looking at using a timeline on a payment service in HMRC (probably based on the DWP pattern). Does anyone have any research or data on if users expect to see recent items at the top or bottom of the list?

[abbott567]

@roobottom we've always used it where people expected to see it at the top. Usually it updates between a page refresh, so if it was at the bottom it would create unnecessary scrolling.

[roobottom]

I used the timeline for the VAT repayment tracking service. You can browse the code & demo.

We based this off the DWP pattern. Users found that they understood that the most recent items would appear at the top.

An internal usability review said we shouldn't use grey text for the dates.

[andyjones81]

I've now left the Gambling Commission, but on our recent project, I implemented a slightly revised version of the HMRC one for a complaints process timeline and it worked very well in research with users of assistive tech and non-assistive tech. It was also tested by DAC and found no issues with it. You can see it in use on the complaints page.

The main feedback from users was it makes the steps easy to understand, they are in an order that makes sense, but also that the order wasn't mandatory. We did get some feedback that if it had to follow a specific step order (step 1, 2 3) that they should be numbered, so we extended the component to have numbers too for use elsewhere.

https://www.gamblingcommission.gov.uk/public-and-players/guide/page/how-to-complain

[NikhilNanjappa]

Has there been any progress on this ? Its under "Needs more details" column.

Any clear idea as to what do we need to get this component added to GOVUK components ?

[rosie-brave]

Is there any research that shows that oldest to newest is the preferred order?
Any research to show whether "on" is required as part of the time and date stamp in order to be understood?

[CharlotteDowns]

We've just added some guidance on how to 'share findings about your users' with us 📝. This will help us learn more about how your users interpret a timeline within your service.