blog

Design tips to make your website content more digestible

by Lucie Bertiau
19 Feb 2014
7 min read
Share this article:
Design tips to make your website content more digestible

Our role as a web designer is to present content on the web in an accessible and structured format which is better handled by a user. 

It is really important to have a good content structure to help the user read the right information, for example by using clear formatting such as headings, bullet points etc.

But besides the structure, I can suggest 3 design tips that can help make your content digestible and user friendly:                                                                                                                    

  1.  Use of contrast
  2.  Use of white space
  3.  Use of infographics

Use of contrast

Contrast is a natural layout tool. It helps to give reading order and highlight some pieces of content because of the visual stimulations such as bright colour, big typography or photography.

Using visual contrast will help give a hierarchy in the information, differentiates two separate pieces of information and gives focus to the more important section.

All those stimulations will engage the user who will be more likely to interact with a page. For instance, if the main call to action has a lot of contrast within the page, it will draw the user’s  attention who will be more likely to click.

colour contrast CTA

The Square Space website is a really good example in terms of ’Use of contrast’. They’ve adapted it into multiple variations:

Square Space pricing page

Source: http://www.squarespace.com

  • The contrasting sections of the full width photography versus flat white background of the content area provides a great differentiation between the hero section and the content section.
  • The Colour contrast within the content highlights the key element of the page, the pricing, contrasted here with the black flat colour.
  • They also played with the size contrast by using really big upper-case font versus small lower-case italic font. Again it draws the attention to the main headings and the important information that the user is looking for. 

 
Use of white space

White spaces can sometimes be perceived as a waste of space but to users it is an important element of design.

According to a study conducted by NNGroup, Users don’t read, they scan.

In line with the contrast mentioned above, white spaces help structure the content and make your eyes breathe. In this sense padding and line-height are crucial design elements.

Here is a quick mock-up showing how breathing space is essential:
importance of padding - comparison

Even though the block on the right is longer and takes more space, you are more likely to read it than the block on the left. Your eyes are seeking for comfort that white space can achieve. 

So, using white space properly, will give the user/reader a lot more clarity and will help them focus on the important elements of the page and easily find the information they are looking for. 


Use of infographics

Humans retain visuals better than text. 

Indeed, according to this study, an icon or infographic has more impact and increases readers’ attention by 82%. 

For example if you think about road signs, they need to be quickly assimilated. Imagine if they were presented as text, you wouldn’t be able to read them while driving:

icon versus text
 

Again, because users are scanning the content instead of reading it, using big infographics to demonstrate numbers or facts are more likely to be seen and digested than plain text. 

Infographics are attractive and also provides a sense of text relief. They are easier to read and remember and quick to digest. They are also giving credibility to your content while being easier to share, save or export.

Here is a nice infographic to demonstrate:

what is an infographic

In short, beside the structure, you can think about using contrast, white space and infographics to make your website content more digestible, it will drive the user into your page and help him to find the right information.

Share this article: