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

Showing text changes #126

laurenceberry opened this issue Mar 6, 2018 · 2 comments

Showing text changes #126

laurenceberry opened this issue Mar 6, 2018 · 2 comments


Copy link

@laurenceberry laurenceberry commented Mar 6, 2018

Showing text changes


An insertion and deletion pattern we're using to show changes in a text.


On the Digital Marketplace we have used this pattern in 2 places and I've spoken to other teams within GDS who have prototyped similar designs.

See a related discussion on dropbox-paper:

This pattern needs usability and accessibility testing.


Insertion background colour: #acf2bd
Deletion background colour: #fdb8c0

We have hidden text to announce inserted or removed text, adding a ',' slows the screenreader down. I think we need to understand more about how to announce inserted or deleted content in a user friendly way for screen reader users.

screen shot 2018-03-06 at 16 42 34


screen shot 2018-03-06 at 16 14 43

mar-06-2018 16-19-18

Copy link

@ignaciaorellana ignaciaorellana commented Mar 21, 2018

@laurenceberry Hi Laurence, sorry for the late response! Thanks for this. It would be interesting to see if there are other departments in government using something similar (with a similar user need). If you want to and have time, you could try to ask via the digital service designer mailing list or slack to ask for examples. That would help us understand if it could be a useful pattern for other services in gov.

@timpaul timpaul added the pattern label May 21, 2018
Copy link

@robinparker robinparker commented Feb 9, 2021

I've recently been working on 'Get help with remote education', which is essentially a signposting service for education providers (ie. teachers, headmasters etc) looking for resources and guidance to help them formulate and improve their school or college's remote education provision.

During a short discovery phase we identified a need to be able to revisit the site and quickly and easily identify what had been changed, added or updated. This is so that senior leadership teams can assess whether they need to take any actions based on the new or updated content. School and college staff are obviously under extreme pressure at the moment so it was important that it was as clear as possible exactly where those content updates were on the site. We went with the following approach, starting with highlighting updated content from our landing page;


The blue tags are intended to highlight the most recent, or most important, changes. This is curated on a manual basis by our Policy team and Content Designer.

Then, within the linking pages, we introduced markers/tags at the top of the relevant section. The 'show updates' element shown here is essentially a custom 'Detail' component that summarises the changes that have been made. The screenshots here show the hidden and visible states.



When 'show updates' is selected, the summary text is shown along with an anchor link that takes the user directly to the relevant content. This updated content is also highlighted with a yellow background. The idea here was to mimic the type of highlighting you might see in a Word document, and it generally tested well with users.

This works OK when the new or updated content is in one neat little block on the page, but when the updates or changes are spread throughout the document it becomes messier. This is something we're still working on!

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
4 participants