Improve content with FISH & CHIPS

Posted by Alan Trow-Poole on January 26, 2021 in Content Strategy, Design Thinking, UX Design |One Comment

In this case study I shall describe how I applied UX principles to content (text and graphics) to deliver an improved user experience for an intranet used across the UK and USA.

Introduction

I was hired by a multinational electricity and gas utility company that served customers in the UK and USA. My role was lead UX Architect and was responsibilities for planning organising and execute a series of usability tests on the new company intranet currently in development.

Usability findings

The usability tests highlighted the need for:

• Improved search – Searching for content was slow and more relevant search results needed.
• More useful Home page – The “home” was mostly featured news without personalisation.
• Accessibility issues – Issues were discovered around typography, reliance on colour (e.g. text links)
• Poor content – Often outdated, hard to understand and poorly organised. This was the biggest concern.

How can UX help with poor content?

The team responded to the usability findings by re-designing how the CMS surfaced content, added controlled meta-data to content to improve “search”, added targeted news and included personalisation to the Home Page. The accessibility issues were fixed, mostly by increasing contrast ratios to meet WCAG 2.0 level AA or AAA standards: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

It was fairly straight forward to action most of the usability findings except for the feedback on content.

With such a large volume and scope of content needed across different business units in the UK and USA, the content writers needed a common approach to assess the difference between poor and good content, understand what good content looked like and how to consistently fix it.

I was asked if I could apply UX principle to help improve content usability. The content team had already performed a gap analysis, not all legacy content was worth migrating and there was plenty of new content required. They also had a good handle on what the business and the users wanted. They didn’t need help with tone of voice, writing style or branding, or grammar (luckily for me). Instead they wanted a simple prescriptive way to say this content needs improvement because of XYZ and this can be fixed, making it more usable, by applying specific principles.

I was certain I could recommend UX principles which could help. I was less certain (at the start) if I could package these into something that could be consistently used to make a difference.

What is content?

By “content” I mean: text, images, audio, video and animations. The majority of the content for this project was text and images, although videos and animations were used as well.

What follows is a brief summary of the research I did for this assignment starting with some key background points.

First impressions really do count

Some studies have suggested people make first impression judgements in less than one second and visual appeal plays a big part: https://cxl.com/blog/first-impressions-matter-the-importance-of-great-visual-design/

So if you are hoping for a positive first impression like, “wow this looks interesting” compared to a negative reaction such as, “yikes this looks so bad!” you probably have less than one second to do it. Your users can’t read anything worthwhile in less than a second, but can easily visually scan the entire page of content visible and perceive something, positive or negative in this time. So what can be perceived at-a-glance? Within milliseconds our eyes interpreted by our brains make judgement calls on organisation, quality, interest, relevancy. This in the main is due to content layout, what draws attention: headlines, imagery and contrast and simplicity. Understanding how to adapt content so it can be more positively perceived means you can design for understanding and communication and make a good first impression.

Vision is optimised to see structure and relationships. If we don’t design for this users might perceive a different meaning https://atrowpoole.wordpress.com/2014/07/15/gestalt-principles-of-visual-perception/

What do you see? An old or young lady? • A vase or two faces? • A dog?

Don’t make me read (users scan for keywords)

First impressions provide the “hook” to get users interested or confirm they are in the right place, so what comes next? Well if you aren’t providing answers to questions users have, most users will rapidly go somewhere else. Even at the “wow this looks interesting” stage users aren’t reading as they would read a book. Instead they are typically scanning for keywords they believe are related to their enquiry. So designing for scanning is really important, you may have the answers to your visitors questions but if these are buried in a wall of text they won’t be able to find them.

Most intranet users don’t read but instead scan content looking for keywords, https://www.nngroup.com/articles/concise-scannable-and-objective-how-to-write-for-the-web/

Help users do their job first

Most intranet users aren’t looking for entertainment or browsing for interesting news articles. They are looking for information and support to help them do their job.

• Basic needs of intranet users are:
  • I want to know something
  • I want do something
  • I want to share something
• Only 20-28% of text will be read: https://www.nngroup.com/articles/how-little-do-users-read/

Research

I was in the fortunate position to understand a lot about the requirements of the new intranet, this would help me recommend UX design principles for improving content usability. Many of these design principles if applied to content would help tremendously, including understanding how to design for human visual perception notably Gestalt Principles: https://atrowpoole.wordpress.com/2014/07/15/gestalt-principles-of-visual-perception/

I also researched documentation and help systems writing guidelines many from large global technology companies like IBM and Yahoo. I reviewed the latest findings on eye-tracking and how people’s gaze patterns vary when reading online (zig-zag, F-pattern, pinball etc.) https://www.nngroup.com/articles/text-scanning-patterns-eyetracking/

I selected this first list of principles

I created several lists of UX principles and writing guidelines but narrowed it down to 9 recommendations:

1	Make it easy to scan your content quickly e.g. use front-loaded (seal below) bulleted lists.
2	Decide on an information hierarchy: what’s most important, less important and least important. Emphasise the most important content with higher contrast, size, or position higher up the page.
3	Front-load paragraphs and bullet points with keywords your users are expecting to find.
4	Keep your sentences simple and short. Use clear and simple language that can easily be understood by your anticipated audience.
5	Intentionally design to create a good initial impression. Think about clear meaningful titles and simple headings and images with visual narrative (describes something relevant) and not just eye-candy.
6	Headings and sub-headings should be short, clear, simple, descriptive and in the terminology users are familiar with.
7	Get to the main points fast. Publish calls-to-action and main points so they appear first towards the top of the page this will also help with search results pages. Then include summary information, then detailed points. This enables users to decide if the content is right for them and continue reading. This style of writing is used in newspapers and is referred to as inverted pyramid writing.
8	Find ways to make your content interesting. Encourage users to read more. If you don’t write interesting copy users won’t read it.
9	Organise your content into smaller chunks (paragraphs) Each chunk describes a single concept or idea only.

Recommended content writing guidelines

FISH & CHIPS Acronym

To avoid the content writers having to learn a long list of UX recommendations, I decided to create the FISH & CHIPS Acronym. This saves time and space and makes the recommendations easier to learn.

I presented the approach in a workshop to the entire UK and USA content editing team. I anticipated some push-back, but instead it was received with some excitement. The team now could evaluate content against each letter of the acronym and they now had a common language to describe content e.g. “this content needs chunking and more front-loading of keywords”. I understand it’s now common practice to apply “FISH & CHIPS” to all intranet content.

Front-load paragraphs and bullet points with keywords your users are expecting to find.

Initial impressions are important. Use clear meaningful headings, simple layout. Your images are not just for decoration or eye-candy, they should communicate a visual narrative that supports something relevant. Good visual design really does matter.

Scannability refers to how readable your content is, knowing users read online differently, they scan looking for keywords rather than reading every word you publish. Your content should be easy to scan.

Headings and sub-headings should be short, clear, simple, descriptive and using the terminology users are familiar with. 

and…

Chunk Content “Chunky Chips”! Organise your content into smaller chunks (paragraphs). Each chunk should preferably describe a single concept or idea only.

Hierarchy of information. Decide on what’s most important, less important and least important. Emphasise the most important by higher contrast, size or position higher up the page especially important for images.

Interesting content encourages users to read. This also applies to images which should have visual narrative, support the text but not compete or distract from the main points, unless the image is the main content. If you don’t write interesting content users won’t read it.

Pyramid (inverted) write the main points first at the top. Explain what users need to know first. Follow-up with details. This enables users to decide if the content is right for them quickly and continue reading or not.

Simple short Sentences are easier to understand. Use clear and simple language that can easily be understood emphasise important key words especially if they relate to the main point. Use descriptive text links and ideally left align text.

or more visually …

Fish and Chips

Applying FISH & CHIPS to content

Here are some examples of before and after applying FISH & CHIPS. The text is redacted to protect client confidentiality, however, you can still get a sense of the benefits of this approach.

When looking at the content design in the first example, notice how busy and potentially confusing it appears. There isn’t a clear Hierarchy and keywords are scattered throughout the content, rather than being Front-loaded. This negatively impacts Scanability. It’s difficult to determine Headings and sub-headings. Content is published in large blocks rather than into smaller Chunks. Overall the layout doesn’t create a positive initial impression or appear Interesting.

Now refer to the After applying “FISH & CHIPS”. A main heading with supporting text below establishes a clear hierarchy. The image is attractive, has visual narrative rather than an abstract icon. The result is a positive emotional reaction and initial impression. Chunking content and front-loading keywords make the content easier to scan. White or negative space is used to communicate structure. Wherever possible horizontal and vertical lines and borders are removed in order to simplify. If a border is used it stands out because it’s different.

Example 1 – Before and after intranet page

Here is another example. Notice how in the original content design users are presented with a wall of text. Almost all the content is published inside boxes and these are so close it’s difficult to understand individual sections. Also giving the box headers a high contrast changes the information hierarchy making these box containers more important than the content. There is little evidence of chunking, simple sentences, front-loading, making scanning very difficult. Overall the initial impression isn’t very positive and the layout isn’t interesting.

Applying “FISH & CHIPS” produces a simpler, more interesting, more scannable in other words a more usable design.

Example 2 – Before and after intranet page

I recently learned the new intranet has been a huge success and has won a company Chairman’s Award and “FISH & CHIPS” played a significant part in achieving this.