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

Timeline #105

Open
govuk-design-system opened this issue Jan 15, 2018 · 9 comments
Open

Timeline #105

govuk-design-system opened this issue Jan 15, 2018 · 9 comments

Comments

@govuk-design-system
Copy link
Collaborator

@govuk-design-system govuk-design-system commented Jan 15, 2018

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

@ignaciaorellana
Copy link
Contributor

@ignaciaorellana ignaciaorellana commented Feb 2, 2018

@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
Copy link

@abbott567 abbott567 commented Feb 2, 2018

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
Copy link

@abbott567 abbott567 commented Mar 1, 2019

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
Copy link

@fofr fofr commented Mar 1, 2019

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):

screen shot 2019-03-01 at 14 38 58

@timpaul
Copy link
Contributor

@timpaul timpaul commented Mar 4, 2019

UK Parliament also use timelines here:

image

@gazjoy
Copy link

@gazjoy gazjoy commented Apr 12, 2019

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

image

@roobottom
Copy link

@roobottom roobottom commented Jun 7, 2019

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
Copy link

@abbott567 abbott567 commented Sep 16, 2019

@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
Copy link

@roobottom roobottom commented Nov 4, 2019

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.

Screenshot 2019-11-04 at 17 01 35

lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 18, 2020
Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 18, 2020
Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 18, 2020
Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 19, 2020
Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 20, 2020
Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 24, 2020
Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 24, 2020
Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 24, 2020
Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 24, 2020
Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 25, 2020
Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 25, 2020
Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 25, 2020
Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 25, 2020
Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 25, 2020
Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 25, 2020
Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 26, 2020
We’re going to use this to display a timeline of a claim’s amendments.

Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 26, 2020
We’re going to use this to display a timeline of a claim’s amendments.

Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 26, 2020
We’re going to use this to display a timeline of a claim’s amendments.

Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 26, 2020
We’re going to use this to display a timeline of a claim’s amendments.

Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 27, 2020
We’re going to use this to display a timeline of a claim’s amendments.

Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 27, 2020
We’re going to use this to display a timeline of a claim’s amendments.

Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Feb 27, 2020
We’re going to use this to display a timeline of a claim’s amendments.

Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Mar 2, 2020
We’re going to use this to display a timeline of a claim’s amendments.

Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
lawrence-forooghian added a commit to DFE-Digital/claim-additional-payments-for-teaching that referenced this issue Mar 2, 2020
We’re going to use this to display a timeline of a claim’s amendments.

Taken from src/components/hmcts-timeline/_timeline.scss in
https://github.com/hmcts/frontend, revision 0756daa.

Rich discovered this component on the GOV.UK Design System backlog:
alphagov/govuk-design-system-backlog#105

I’ve modified the stylesheet to remove the hmcts-timeline__documents,
hmcts-timeline__document-item and hmcts-timeline__document-link rules.
This is because we won’t need them in our design, and because they refer
to the non-existent #{$hmcts-images-path}icon-document.svg which causes
SASS compilation to fail.

I’ve also had to run `rake prettier:fix`, which modifies this
stylesheet, to keep the build green.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants