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

Back link #32

Open
govuk-design-system opened this Issue Jan 12, 2018 · 7 comments

Comments

6 participants
@govuk-design-system
Copy link
Collaborator

govuk-design-system commented Jan 12, 2018

Use this issue to discuss the back link component in the GOV.UK Design System.

Guidance

https://govuk-design-system-production.cloudapps.digital/components/back-link/

Discussion

Discuss this component in the comments below.

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (In progress) Jan 12, 2018

@govuk-design-system govuk-design-system moved this from In progress to Published in GOV.UK Design System Community Backlog Jan 12, 2018

@timpaul

This comment has been minimized.

Copy link
Contributor

timpaul commented Jan 23, 2018

Home Office have made some improvements to the back button which we should consider adopting.

Details here:

@ignaciaorellana

This comment has been minimized.

Copy link
Contributor

ignaciaorellana commented Jan 24, 2018

Sounds like a good idea, maybe we could ask @owenm6 more about this

@owenm6

This comment has been minimized.

Copy link
Collaborator

owenm6 commented Jan 24, 2018

I've been working it up for contribution but we don't have a lot of research to go on at the moment. I'll try and chase that up as we have a few teams using it.

@owenm6 owenm6 self-assigned this Jan 30, 2018

@owenm6

This comment has been minimized.

Copy link
Collaborator

owenm6 commented Jan 30, 2018

Suggested changes to the back link pattern

When not to use this component

On non-linear flows including a back link could confuse users or stop them completing a task

How to use this component

Adding a page title or ‘back to previous page’ makes it clearer to the user what to expect from the interaction. It also helps increase a users confidence that they will not lose their work.

Research

We have seen some users not understand the context of the current back link design. This has caused them anxiety.

Some users have been concerned that using the back link would lose their work.

Adjustments to design

  • change triangle to arrow (chevron)
  • use link colour for consistency

screen shot 2018-01-30 at 10 00 37

Code and examples

@ignaciaorellana

This comment has been minimized.

Copy link
Contributor

ignaciaorellana commented May 1, 2018

@igloosi found this example of 'back link' for the 'Visas and Immigration: Apply for British citizenship by naturalisation' service (also has a 'Check your answers' and 'Progress indicator')

screen shot 2018-05-01 at 11 53 22

screen_shot_2018-05-01_at_10 34 38

@timpaul timpaul added the component label May 21, 2018

@nickcolley

This comment has been minimized.

Copy link
Contributor

nickcolley commented Oct 18, 2018

I think there is an opportunity to increase the target size of this component to satisfy WCAG 2.1 Level AAA https://www.w3.org/TR/WCAG21/#target-size

One way to do this would be to have an invisible overlay that increases the touch area, I have made an example of this here: https://back-link-bigger-target-size-example.glitch.me/

@amyhupe

This comment has been minimized.

Copy link
Contributor

amyhupe commented Jan 9, 2019

Dropbox Paper audit

On 9 Jan 2019 the Design System team reviewed a Dropbox Paper document discussing the back link component.

The aim was to reduce the number of places containing guidance and code by:

  • migrating relevant, useful content into the Design System itself
  • recording important research findings in the community backlog
  • removing the original Dropbox Paper page

Below is a record of the outcomes of that review.

If you need to, you can see the original Dropbox Paper content in the internet archive.

Review outcomes

Updates to the Design System

The Design System team will carry out the following updates to ensure that relevant, useful content from the Dropbox Paper file is added to the Design System.

Update the Question pages guidance to say do not disable the browser back button.

Update the back link guidance to say hide the back link if it relies on JavaScript and JavaScript is not available.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment