Option to include "how not to do it" examples in patterns and components

[martinwake]

Context

It might be useful in some cases to illustrate how a pattern or component can be misused. We considered this for the Key details bar component but decided against in this case.

One question is: what is the point of a fully coded example of what not to do? This means a flat image might be a better solution. If we do use an image, we need to be careful that we do so in an accessible way and don't use the image to convey information that isn't available in the written guidance on the page.

A fairly clean way of styling this image to make it readable while also making it clear that it is not to be used is shown on the Question page pattern in the GOV.UK Design System:

The ALT text for this image reads: alt="Screenshot of a progress indicator that shows five questions."

Discussion prompts

• Are "bad examples" helpful?
• If so, in what circumstances?
• How should we represent them?
• There will often be many ways to get something wrong - is there a risk that people assume something is OK if it's not explicitly forbidden?

[martinwake]

Another option from the Office for National Statistics is to have "Do" and "Do not" sections in the text: