6 tips to improve scannability from a design professional

Last week, I did a deep dive into all the different reasons why scannability is essential for well-performing websites. Now, it’s time to give you a rundown of some of the most important tips and tricks I use when I want to improve scannability.

They are:

  1. Cut down your content
  2. Use visual hierarchy in typography
  3. Use the introvert pyramid writing method
  4. Break up the content with whitespace and images
  5. Embrace scanning pattern conventions
  6. SEO friendly content writing tips

1. Cut down your content

Cutting down the content should be the first thing on your list if you want to improve scannability. Decreasing the copy on a page will improve scannability and the overall user experience of the page. It’s the easiest way to enhance the experience for your visitors. After all, the less there is for people to read, the more likely they will read and consume the content.

“If something requires a large investment of time — or looks like it will — it’s less likely to be used.”

Steve Krug, Don’t Make Me Think

It’s a sign of quality writing when you get to the point as quickly as possible. Which further improves your overall impression. Keep your messages on point by removing as much content – and copy – as possible.

“Get rid of half the words on each page, then get rid of half of what’s left.”

Steve Krug, Don’t Make Me Think

One idea per paragraph

One great pro-tip when it comes to quality writing for the web is to keep one idea per paragraph. Web paragraphs are typically much shorter than traditional essay or book paragraph. Use this to your advantage. Cover more points quicker.

A screenshot of this article's draft without web appropriate spacing.
Compare this article’s design to a screenshot of this article’s draft without web appropriate spacing. Which one is easier to scan?
(Click on the image to zoom.)

2. Use visual hierarchy

There are a variety of different design concepts you can leverage to improve scannability. When the size, color, or font-weight clearly indicates the most important element, it’s easier for a visitor to scan the key pieces of information. If everything on this page were the same, nothing would stand out, and you couldn’t scan the headlines. To improve scannability, use these elements strategically to break up chunks of texts and highlight key pieces of information.

A screenshot of this article's draft without visual hierarchy.
Now, compare this article’s design to a draft without any visual hierarchy. Again, which one is easier to scan for main points?
(Click on the image to zoom.)

Blogs are a great example of visual hierarchy. You can always quickly identify what the titles and headlines are. And, you can instantly scan blog posts to get a general idea of what’s discusses. The same concepts can be applied to landing pages, homepages, etc.

Number your main points such as headlines

Another quality pro tip is to use numbers in your headlines. They have been proved to improve scannability and readability. Numbers capture attention and keep the reader oriented.

3. Use the introvert pyramid writing method

The inverted pyramid comes from journalism and news reporting. It has become a highly popular method in online writing too.

The concept is simple, you provide the most crucial information first to grab people’s attention. You answer the questions of Who? What? Where? When? How? and Why? to provide the reader with the information they need to know first. Only then you provide the additional and trivial details as you continue writing, eventually getting to the least important information that would be ‘the nice to know stuff‘ – such as background information.

“[The introvert pyramid] format is valued for two reasons. First, readers can leave the story at any point and understand it, even if they do not have all the details. Second, it conducts readers through the details of the story by the end.”


The inverted pyramid is a preferred writing method online. It allows the visitor to quickly scan the top of the content to get a general idea. This lets the visitor decide whether or not they found the right information and should continue reading. It also emphasizes that vital information will be easiest to locate, such as through headings.

Fun fact: The term “bury the lead” comes from writers not using the inverted pyramid method and so not including the attention-grabbing and vital elements of the story in its opening paragraphs.

4. Break up the content with whitespace and images

Images, photos, and illustrations are your friends! Images improve communication with readers and visitors. First of all, they communicate points and ideas much quicker than words. Second, they help the reader visualize points and ideas too. Third, they’re great for added context and improved clarity.

Screenshot of www.antforfigma.com that demonstrated visual hierarchy and use of icons for improved scannability.
The shown section from Ant Design System’s homepage demonstrates a well-designed feature list includes icons and visual hierarchy resulting in improved scannability of this particular section.

Graphic elements especially are a fantastic tool for breaking up content. Simple visual cues like arrows, spirals, or patterns help in guiding a person’s eye around a page. At the same time, photographs or illustrations are great in making a point visually instead of verbally.

“Long spans of dense text are daunting and unapproachable to readers. Write short headings, short sentences, and short paragraphs that are easy to read—and more visually appealing.”

Microsoft, Scannable Content

Whitespace has a similar effect as images since whitespace also helps break up the content. Designers use whitespace to create page sections and/or to guide a visitor’s eye. Cluttered designs are intimidating and daunting. They force a visitor to put in mental effort in making sense of it which they never are willing to do. Naturally, it’s just about impossible to get a visitor to reading anything if there is no spacing around words. That’s because you’re making them work. Which they won’t do because they don’t have to. So, they will bounce.

A screenshot of www.createwithplay.com - a landing page that's a great example of well utilized whitespace and imagery which resulted in improved scannability, readability, information retention, UX and so on.
Play’s landing page covers a lot of information. Yet this specific section of the design has plenty of whitespaces and a video demonstrating the product.

But, if there is plenty of white space and graphical elements to make the reading experience smoother, the visitor will, in fact, stick around to hear you out. All this further improves scannability too.

5. Embrace scanning pattern conventions

There are several common scanning patterns, such as:

Simply put, designing a layout that will fit into one of those patterns will ensure your visitors will have a much easier time scanning your page. Whereas a layout, no matter how creative, that makes it difficult for visitors to scan, will get in the way and negatively influence the user experience and website metrics. Using traditional web conventions helps improve scannability too.

An image showing three separate eye scanning patterns.
Image sourced from Nielsen Norman Group demonstrating scanning patterns.

6. SEO friendly content writing tips

Lastly, let me give you a few pro tips for leveraging a few tricks that will improve scannability and your SEO results.

  1. Use bulleted or numbered lists
  2. Emphasize with bold or italics
  3. Use subheadings

Search engines, like Google, factor in user experience into their SEO rankings. People are more likely to read bolded texts or a list than a paragraph of text because they stand out. It goes back to the visual hierarchy from the second tip. These three ideas improve scannability which also improve the overall experience. Those two factors also positively affect your SEO rankings.

Additionally, SEO spiders understand that subheading, bolded texts, and lists are created for emphasis. That’s why the information – and the keywords found within them – are more heavily weighted by search engines as well.

The takeaway

Frankly, I could go on with more tips to improve scannability. Scannability is a critical aspect of a high-quality website. The above six tips are a great starting point. Use these points to evaluate whether or not your website’s scannability can be improved further.