Designing with content: how using content patterns can help

6 minute read

Content patterns are blueprints made of words. If you have a lot of content items of the same type, designing the content layout in the same way and repeating content elements is a good idea.Content patterns reuse the same word structures, so only unique content, additional to those structures, jumps out at the user. They also allow the user to scan and compare information in multiple places on a like for like basis.

They’re good for an overall feel of consistency, which builds user trust and also improves usability. I love consistency, so I am a big fan of content patterns.Unlike traditional page design templates, with the dreaded ‘lorem ipsum’, they focus on repeating user-friendly content. You could think of them as moulds for turning out good quality content.

Content patterns are for all content items, not just whole pages

A content item can be a little bit of content that repeats in different places: it’s not necessarily a whole page of content.A careers website has many job profiles, which users are likely look at one after the other. It makes sense for the user and the content management system (CMS) editor to have sections consistently positioned.You’d use the same wording for subheadings and the same copy for repeated content elements, descriptors and labels. You may have a shared tag set. Repeated wording is the content pattern for smaller content items.

Content element content pattern example

Making sure all your job profiles use the format when required qualifications are listed. For example, always “3 A levels, grade A to C”, not sometimes “3 A-Levels (A-C)” and elsewhere “3 A to C grade A levels”.

Descriptor content pattern example

Using the same word flow to describe career progression opportunities in the job profile section on career development.That could be:

Example of a descriptor content pattern

In the example above I’ve highlighted words and grammar that would be our descriptor content pattern. These are “A typical career path is”, “Alternatives may be”, “or” and the commas and full stops.There may not always be more than one alternative career path, so you would describe how to handle that in notes accompanying the pattern.

Labels content pattern example

Labels, for example input field microcopy, are easier to interact with when they are consistent.The GOV UK Design System has some excellent, user-tested input field label content patterns, for example names, dates and asking for email addresses. Their email address example also includes a contextual data use explanation, which complies with GDPR:

GOV.UK Example of asking for an email address

Tag sets can follow a content pattern

If you’re going to tag your content to allow users to browse all content on a particular topic, for example medical job roles, having a shared, consistent tag pool is essential for usability.

For consistency you need your tags to have the same grammar form. That would be deciding to use nouns, like ‘medicine’, ‘education’, ‘agriculture’, adjectives, like ‘medical’, ‘educational’, ‘agricultural’ or adverbs, like ‘curing’, ‘teaching’, ‘farming’.You also need to decide on a comprehensive list of tags, or have rules in place for creating new tags to avoid editors creating multiple versions of a similar tag.

Keeping tags consistent

You might also decide to tag job roles by the priorities jobseekers have, such as: ‘supportive’, ‘lucrative’, ‘creative’ (adjectives) or ‘helping people’, ‘making money’, ‘creating things’ (gerunds: longer but clearer language).Tag word formats need to be consistent. Having a content pattern for them can help achieve this. For example, “sector is a noun, purpose is a gerund”.Here is that pattern applied consistently:

Example of consistent content tagging

and inconsistently:

Example of inconsistent content tagging

When you choose a pattern for tag content, try to consider how it will work in all cases, and how it will scale. To make and validate these decisions, test with users to find out what works best for them.

Are content patterns important, or just a style thing?

Content patterns are very good for usability, so that users know where to expect what, for example skills, qualifications, career path. Consistency builds trust in the content. Presenting users with consistent descriptors will reassure them, and give them confidence in your site as a source of expert information.Reusing content descriptors saves users time, as they’ll start to recognise them and be able to easily scan read for the unique content after visiting a few profiles.You’re also reducing the cognitive load it takes to comprehend web content. When content follows patterns it’s much easier to process. The reader’s brain has less “chewing” to do (parsing the information), and can get on with swallowing and digesting (absorbing) the content faster.For example, they’ll very quickly spot “grade A to D” as opposed to “grade A to C” when they’ve already instinctively tuned into where to find and how process the grades info from the previous profile they looked at on your site.So content patterns are most definitely not just a style thing.

GatherContent supports and promotes content pattern use

Disclaimer: I am not a shareholder. I’ve just been a very happy user of this ContentOps platform.Content patterns are already great for an individual who wants to make content consistent across multiple pages. I used content patterns to create a consistent layout and user experience for the new Readability Guidelines wiki from Content Design London.But imagine content items being produced by multiple editors across an organisation. In various locations. Then content patterns really come in handy.In 2016 I used GatherContent for the National Careers Service job profiles redesign, to:

  • make sure many items of content serving the same function used the same user-tested terms and structures
  • reflect the style guide in content patterns
  • make user testing reports available alongside the content patterns
  • allow subject matter experts (SMEs) to comment in a readable format
  • allow content designers to edit, without document versioning issues

The project was the Skills Funding Agency’s National Careers Service job profiles redesign. It’s now live on GOV UK as the Explore Careers Beta.

The following screenshot shows the top part of the design of one of the job profiles for secondary school teacher.

Screesnhot of secondary school jon profile on GOV.UK

The content pattern is Title: job role title (Secondary school teacher), sub-heading with alternative role titles (High school teachers, secondary school tutor), short descriptor of role (Secondary school teachers teach children from 11 to 16, or up to 19 in schools with sixth forms). Then there are elements for average salary, typical hours and a ‘you could work’ section, to allow unusual working hours or environments to be flagged.The job profile content is divided into sections. Each subheading was user-tested and after several iterations, this is what is currently live:

Subheadings on GOV.UK secondary school teacher profile information page

Each job profile has lots of content elements, components and other patterns, including: salary, typical hours, daily tasks, working environment, how to become one, career path, training opportunities and related careers.Using GatherContent allowed me to create a job profile content template with defined subheadings and content elements, based on user research. This was used as a blueprint to create 100s of job profile content items.Remote editors and SMEs were able leave comments when reviewing and fact checking job profile content. The organisation’s style guide and the user testing reports were easy to access from within GatherContent, which brought everything into one place.

Perhaps best of all the template could be edited in situ, once, yet changes were rippled across all instances. This allowed content iteration based on user testing results, without slowing down content production. Just refreshing any job profile created from the original template would apply any updates made to the template.

The content item’s function was to describe a job role to students choosing A levels, education leavers and people looking to change career, in a way that was easy for them to interact with and understand.When we discovered users found x content element more usable than y, I edited the template. All the job profiles already created from it updated to reflect the new content element and all new ones created from the template used the new element.

More content pattern examples

2 years ago at GDS I designed content for the local government service patterns, a pilot project for local council use of an identity verification tool. The local service were patterns for the entire digital and offline provision of 2 local council services, and included repeated content elements, like the eligibility content pattern.

Earlier this year I worked through Content Design London as a consultant at a legal organisation, helping them define a particular content type for a specific set of user needs.GatherContent could definitely help if such projects were to scale up. It’s a brilliant way of ensuring consistency and updates across multiple content items, especially if your content designers and editors happen not to be coders or GitHub natives. I can’t advocate for it enough.

How to get started with content patterns

Content patterns are about not reinventing the wheel. Just as you’d copy and paste a fiddly bit of HTML coding that you know works, you can copy and reuse a user-tested content element.Top tips:

  • Apply content patterns where you have content that repeats.
  • Use the GOV.UK design system patterns and components.
  • Take a consistent approach to creating content by using best practice, inclusive style guides. like Readability Guidelines which has usability-evidenced advice.


Content Creation: The Essential Guide

Practical advice to help you create effective content for your audience and your business.

About the author

Lizzie Bruce

Lizzie is a content consultant at Content Design London, where she runs workshops and training courses. She’s previously worked at GDS and has 15 years’ content experience in the charity, public and private sectors. She is motivated by creating user-focused, inclusive content design and is currently coordinating research for the collaborative Readability Guidelines project. She also writes content UX articles for Prototypr and Digital Drum, and has created a set of writing for web best practice tip cards.

Related posts you might like