Deprecate inset text for highlighting important text

[selfthinker]

This is about consolidating what is currently called "legal text" and "inset text".

This is a follow-up to the discussion on #564 and discussions I had with @timpaul and @stephengill separately.

What problem does the pull request solve?

Having two very different ways to highlight important text (with "legal text" and "inset text") is confusing. Everything on a page should be important, and when something is especially important, there shouldn't be more than one way to highlight it. There is also evidence that inset text is perceived as less important (see hmrc/design-patterns#133) and therefore often not read by users.

This still keeps the styling because it is also used for the very different purpose of showing revealed content. It only discourages the use of it.

Screenshots

Before

After

Has the documentation been updated?

Yes, this change is mostly about the documentation.

[edwardhorsford]

I disagree with this change, or at least would like to see more evidence to support it. I propose leaving as is.

What's the reasoning for aiming for one highlight style? This and the warning text pattern serve very different purposes. I don't think cases which currently use inset text should use the warning style, which means they would become regular text instead.

If we're concerned about visibility of inset text, I think this would be a good thing to test - it seems like one where eye tracking may be helpful.

NB: this style is used extensively in GOV.UK content. I don't know how a change here might those styles.

[selfthinker]

GOV.UK uses its own style guide and a change here wouldn't affect it (for good or for bad). It includes lots of other ways to highlight text which don't exist in Elements. I would also not expect a service to remove the use of inset text because of this. But future projects shouldn't use it.

[cjforms]

I'm still not at all convinced that there ought to be two different ways of 'highlighting important text', especially as we haven't yet seen any results from user research (and my previous experience would support getting rid of both of them).

So I do agree with @edwardhorsford that we need some research here, if possible including some eye-tracking.

On the other hand, I disagree with @edwardhorsford in that I am entirely happy that text that was previously inset text would now become ordinary text. If the text isn't important, why is on the page anyway? If the text isn't part of this page but only becomes revealed on a user action, why doesn't the user action take the person to a new page with the result of that action?

Finally: if you are going to keep inset text for historic reasons, please can the 'after' example:

• include some contextual text to show that the inset text only ever appears in context with other test
• have example text that does NOT have an 'if' half-way along the sentence

(Turning this particular example around rather neatly exposes why I strongly recommend 'if' before 'then'. With the 'if' correctly at the start, the example becomes: "If there are no mistakes in the application then it can take up to 8 weeks to register a lasting power of attorney" which for me at least would immediately raise the question: so what happens if there are mistakes, and how long does it take if there are? suggesting to me that the example isn't great as it stands... sorry.)

[edwardhorsford]

I don't feel like it's a case of 'everything should be important' or not. Inset text is used make a section of text look different - it might be more important or it might be different.

GOV.UK Marriage allowance is a good example of this - the inset sections are subtly different in meaning to the main body copy. Making them all body copy muddles the meaning. It either needs a distinct style, or it needs to be restructured with headings.

---

We used the inset style quite a bit in passports. After watching several hundred users go through the service, I can't honestly say one way or another if inset was helping or if it made things worse. I appreciated having it in our arsenal of typographic patterns to help structure the page.

There have been reports of inset text being entirely missed - this is really worrying and should warrant some serious study with eye-tracking. I do wonder if it's any worse than any other text though. We already know that users skim and skip lines - do they skip inset text more than average? Ideally they might skip it less than average.

I wonder if there's a good page on GOV.UK where we could set up an A/B test to explore this.

---

One final thought - do we currently have issues with inset text? From the services I assess my impression is that it isn't used excessively.

[edwardhorsford]

I figure it might be helpful to share some examples of inset text from passports. I feel like the inset text has a different meaning than the other text:

[cjforms]

Did you ever try those pages without the inset text? The 'compare' page is an example elsewhere in this thread, and it seemed to me to work perfectly OK without the inset.

I also had a look at the first page of Marriage Allowance, and it did rather shriek 'use as BEFORE example for an exercise on Start with One Thing Per Page'. So I'm not convinced it's an argument in favour of inset text. (Not having a dig at whoever developed this service and content, only once again noticing that when looking at a page with fresh eyes then inevitably various ideas tend to pop out).

To be clear: I don't think inset text is the worst thing ever; it's generally a survivable issue rather than a serious defect. My main concern is the point I've made previously, which is that it's supposed to draw attention to the highlighted text but my experience has been that it makes the highlighted text less salient.

[timpaul]

We have evidence from HMRC that some users don't notice copy styled in this way. This is the main reason we're deprecating the style.

[cjforms]

@timpaul - Useful.

Please can the text of the guidance link to the evidence discussion?

[edwardhorsford]

@cjforms we tried various bits of content, but not specifically without inset. My point was more that they weren't found to be an issue - and you can only test so much. The compare page may work fine without it too - it's a choice I leave up to the content designer.

If we do research that finds it is worse than the alternatives, I'd also support removing it.

I'm trying to dig out the GOV.UK content guidance for inset text - since it's often used for different content, removing it may have other consequences.

---

@timpaul that thread doesn't feel sufficient. With a high number of services doing research there's always going to be individual cases where things don't work. Do we have evidence that inset text is worse than regular text? or just that in certain circumstances, users don't always read? We don't have a broad base of research, or any showing an alternative is better.

Reading through the HMRC thread I see the general problem that it's hard to get users to notice everything on the page, particularly when there's a lot going on.

I can point to many cases where users haven't read the heading or the question. If I ask other researchers and designers, they'll likely tell me they've also seen the same. Does that mean the pattern is broken and we should stop using headings and questions? Clearly not.

We don't know right now if inset text is in any way worse / better / different. Without measuring the relative success between the two, we don't know how it does.

---

I don't think we can ignore that this pattern is used by GOV.UK content. Isn't the aim for GOV.UK content to move over to using elements / frontend? Some services have more longform content - should they not be able to use the same styles?

I also worry this sets a high bar for new patterns. The second time a user is observed to fail with it, it clearly is worse and the pattern is withdrawn.

[quis]

I also disagree with this change.

The examples given from HMRC are of the pattern being used ineffectively, not that the pattern is itself ineffective. Those sentences would likely be missed whether or not they were inset.

On pages that have multiple paragraphs of content, insetting is a useful tool for differentiating a particular passage. Saying that ‘everything on the page should be important’ ignores how people read.

The pattern is effective in a publishing context (for example GOV.UK or GOV.UK Notify emails) but maybe not in a transactional one. Making that clear is the change I’d be in favour of.

[joelanman]

I agree with deprecating the inset pattern. On all the projects I've worked on I haven't seen any evidence that it helps draw people's attention. We tried it specifically on Verify and found no evidence - in the end we used alternative patterns like the blue slides, and changing the content itself.

Shouldn't we have some evidence that this pattern works for users? I haven't seen any - would be very interested in seeing some.

[selfthinker]

From my description:

There is also evidence that inset text is perceived as less important (see hmrc/design-patterns#133) and therefore often not read by users.

I wonder if inset text would have made people not miss it. ;-)

The main reason why I personally feel we should do something about the inset text is that I find it very confusing from an implementer's point of view. Ed said:

This and the warning text pattern serve very different purposes.

But as someone reading the guidance and needing to implement something, I don't see a different purpose at all. The minimum that is required to fix that is changing the guidance to include which of the two kinds of highlighting text should be used under which circumstances. From reading the guidance, my interpretation is that "inset text" is for important text and "warning text" is for even more important text. I'm also confused as to why both are so very different. I assume because they "serve very different purposes" but those "very different purposes" are not in the guidance which is why I have no clue what those are.

[selfthinker]

Reading my previous comment, I also wonder how many people think "inset text" is a quote? Because that is a style very often used for quotes and people might expect it to be one?

[36degrees]

Failing tests are related to #589 and should be fixed by rebasing once that's merged.

[edwardhorsford]

GOV.UK calls them 'call outs' rather than important. From the guidance "To draw attention to content, you can use a variety of callouts. For example, you can put some text in an ‘information callout’ to indicate that it’s something related that’s worth knowing."

Note this isn't 'important', but to draw attention. I think that's an important distinction. We used this on Passports to 'call out' user specific data (first example above), reference numbers in emails, and contact info blocks.

More guidance in the Content Dropbox paper. "Info-box callouts: question every callout, and remember they break the flow. Don’t use callout after callout. Be aware that users sometimes skip over them. Good examples are for exceptions to the rest of the text on the page."

@selfthinker it sounds like our guidance for when to use inset text could be improved.

[timpaul]

Leaving this here for future reference: https://twitter.com/joelanman/status/941285632881463296

[selfthinker]

I think there are two problems here:

1. The guidance is not clear at all. #587 shows that 100% of times this pattern is used within GOV.UK Elements, it is used wrongly. (And I think Ed's examples were not good either.) That should definitely be tackled. But I don't think I'm the right person for that (as I still don't understand what it should be used for). Any volunteers?
2. We have a lot of anecdotal evidence that the current inset text is not working as intended. But we should try to gather proper data to evaluate if this is really a problem or not. As part of that I would suggest to not only test to not have it (so, testing if it's necessary to have at all) but also change its look so it looks less like a quote (so, testing if it's its style which makes it less effective or not).

[cjforms]

+1 for what @selfthinker said (apart from I'm rather more sure that she could construct a very good test if given the opportunity to do so)

[NickColley]

Following the launch of the GOV.UK Design System, GOV.UK Elements will now only get major bug fixes and security patches.

This improvement has been reflected in the new guidance for the inset text component, thanks for raising 😄