Inset text

[timpaul]

Inset text

Use this issue to discuss this pattern in the GOV.UK Design System.

[stevenaproctor]

@timpaul I thought this component was deprecated. https://github.com/alphagov/govuk_elements/pull/586

Or at least a rethink of how inset text and warning text worked together.

[timpaul]

It's become clear since then that it is being used on many services, often effectively.

In almost every round of research on the Design System as least one users asks us where it's gone. So we think we need something, but we also need clear guidance and good examples. And yes, it needs to be considered alongside warning text and pull quotes.

[EmmaJem]

is there a reason why this component's border is sometimes blue? @timpaul

[vanitabarrett]

Hi @EmmaJem , have you got any examples of the component with a blue border?

[EmmaJem]

Hi @EmmaJem , have you got any examples of the component with a blue border?

Hi @vanitabarrett here's and example from GOV.UK Passport replacement form:

[vanitabarrett]

Thanks for the example @EmmaJem . That looks like a custom component (or some overridden styles) added by a department, rather than something in the design system. The style and position of the blue version is a little strange, it looks a bit more like the "alert" or "notification banner" that other services have built and which the design system team are in the process of building. But the content is perhaps more suited to hint text on the input.

The inset text component in the design system is grey, and can be previewed here: https://design-system.service.gov.uk/components/inset-text/

[EmmaJem]

@vanitabarrett thank you very much for your help! I agree It was a little confusing and didn't seem to fit!

Thank you :)

[edwardhorsford]

Quite a few services have alternate / additional inset styles - I do think there's a bit of an unmet need here.

[MhariMcNaught]

I'm looking at updating the styling of our inset text component using one of the colours from our colour palette.

The grey in the GDS inset text component fails the contrast checker for graphical objects and user Interface components, using https://webaim.org/resources/contrastchecker/

Do the GDS team not see this as an issue for this type of component?

[querkmachine]

Hi @MhariMcNaught,

We don't consider the contrast of the border to be an issue in this context, as we don't consider it to be a 'user interface component' nor a 'graphical object' necessary to understand the content, which is what WCAG criterion 1.4.11 applies to.

Additionally, if a user is unable to clearly see the border due to contrast issues, the content still appears visually inset.

Hope that helps!

[MhariMcNaught]

@querkmachine that makes sense to me, thank you!

[Graeme-Laurenson]

Hi We've developed the component a little to show as below .. this is to help the user identify both the Employer and Employment period start date in one easy to scan place.. Popping it here for initial thoughts before proceeding .. Fire away! G.

[cjforms]

Hi @Graeme-Laurenson

My thoughts turn (as they do so often) to asking myself: can this interaction design suggestion be improved by thinking about the content design?

And I think maybe it can be.

Why not put change the "two levels of headline PLUS inset text" into one thing, so it reads: /start of suggestion

We hold this information about you:

Employment with ABC Digital Ltd starting on 23 September 2021

If this information is incorrect, please speak to the employer. If you remove this period of employment, you'll also remove ... /end of suggestion

I'd prefer it to say both the start date and the end date, but that information wasn't in the example. I'd prefer to know what action(s) the user can take, but that wasn't in the example either. My version uses content design to get 4 lines of differently formatted text into one line. I think you could reasonably point out that it may well be a much longer line - if that bothers you, I'd break the line between the end of the employer's name and the start date.

You may also worry that I haven't included the phrase PAYE employment for 6 April 2021 to 5 April 2022. I expect that you do know the user need for giving so much prominence to the tax year that the employment happens to fall into, but it wasn't at all clear from the example so I left it out.

Let me know whether I've missed the point.

[beccagorton-1]

Not sure if this is the right issue, but we have a slightly more unique service. For our DFE service, which is a training platform, we needed a component that highlighted actionable takeaways; something that encourages users to stop and reflect. We initially used the inset text standard component, and users fed back that it felt too dull.

We designed an adaptation of the inset text component with colour to help this content stand out more. For users who may see in greyscale, we have assumptions that the solid grey block would stand out more than the subtle grey left border.

We chose the teal colour as this was empathy tested using colour filters and appeared largely the same. Equally, we already used green and blue feedback boxes for other messages.

This component will be tested through an accessibility audit soon. This has been tested in research and has tested much more positively, and users notice them immediately.

[cjforms]

@beccagorton-1 If you're open to another suggestion, there's another way to grab and focus attention from the reader (in this case, the practitioner) which is to make the reflection questions into actual questions with a space for them to reply with their answers.

Having a 'box to type into' is a very compelling feature on the page - my eyetracking studies (years ago when we still did that sort of thing, admittedly) showed people's eyes going directly to the boxes.

(An aside: The only thing that can compete as an attractive feature on a page is the eyes of a person in a photograph looking out at the reader, but I'm not recommending that in this context due to the difficulties of representation here).

There is an another advantage of giving people boxes to type into: the box is a standard component in the design system.

You might very reasonably point out that you'd have to think about what to do with the answers that people typed in. True. To which I'd ask: What do you expect them to do with the answers to your prompts at the moment?

[beccagorton-1]

Hi @cjforms! I'm really glad you mentioned it, as this is exactly what we're testing right now :) We're trying to refine what that looks like, and I will definitely update once we've finished iterating it.

In terms of the prompt, there will be situations where the box might not be quite right (we're currently testing variations of content within the prompts as well) and we've learned from users that they don't want the box on every page, but are hapy to have prompts on every page. We've also found that the prompts make the course materials a little more engaging, as previously it was all body text with the original inset text component appearing sparingly.

[selfthinker]

The govuk publishing components have a component called intervention. That looks like it derived from the inset text component and changed some colours.

[nick-wall]

We've recently used a version of this in a service for recruiters to check a teacher's record. One the main things they're looking out for is if the teacher has any 'restrictions' such as a misconduct hearing that has prohibited them from teaching.

They won't often see them, but if there is one, we use the inset text component in red.

We didn't use warning text because it isn't always a legal warning, depending on the education setting and restriction type, and it doesn't lend itself well to multi-line content. Ours has a heading and some body content.

We didn't use a notification banner because this is more typical for a service update or flash message. It was also quite large and bordered, we wanted to start with something simpler.

We used red because it's an alert, we don't use this colour for anything else and it's familiar to users from something similar in the legacy service. It's worked with a couple of people with deuteranopia (red-green) because there are no other prominent components or colours nearby, and we've made an assumption that for greyscale viewers it would appear similar to the component's standard state.

It's tested very well in a couple of rounds of research. Every participant noticed it. Nearly every participant:

• noticed it before anything else
• mostly only talked about this

Quotes included:

"the red bar stands out immediately, it jumped out and hit me in the face"

"red bar is good it immediately jumps out, there is an issue with this person"​

""it's really clear she is on prohibition, failed induction and contact information for TRA very clear. Colouring is very useful and I am very visual"

We talked about this in a service assessment and was assessed as met the standards. It's gone into public beta, so we'll be interested to see if any more feedback comes up.

[joelanman]

@nick-wall thanks for feeding that back, one point - it should probably use the standard govuk red, at a glance it looks different:

https://design-system.service.gov.uk/styles/colour/

[nick-wall]

@nick-wall thanks for feeding that back, one point - it should probably use the standard govuk red, at a glance it looks different:

https://design-system.service.gov.uk/styles/colour/

Good point - the screenshot is using 'govuk-red' in the Figma design system, but is actually slightly darker in production

[MrHBS]

The component page says that I can use this component for quotes. When doing so, do I need to add role=blockquote? Or maybe instead use a <blockquote> instead of a <div> as shown in the example?

[rajyog7997]

How many insert text can we use on the page?