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: https://paper.dropbox.com/doc/Document-history-xF4y6zErHipG4hJwmTfMo
This pattern needs usability and accessibility testing.
Insertion background colour: #acf2bd
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.
The text was updated successfully, but these errors were encountered:
@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.
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!