Website Design Part 2 – Readability and Web conventions

Website Design Part 2 – Readability and Web conventions


Written by

Papa Whale


June 18, 2014



Website Design

Last week, we made an incursion into the obscure territories of the human psyche, by breaking down the natural mental laws (how our brains work) in terms of processing the functionality and design of a website.  We did all this without hitting our heads against the wall.  Now that’s something to be proud of!

Today we're going to take a more laid back approach, by covering the very important but often easier to understand principles of readability and web conventions.

Website Design: Readability

At its core, readability is probably one of the most important concepts in web ergonomics.  You want your visitor to make it from the top of your page to the bottom of your page and be able to take in everything they see. In fact, your website can actually adhere to all the ergonomic principles we covered in the previous post and STILL be unreadable!

There’s been a lot of research on the topic of readability in the last century, especially since the arrival of the Internet, because, as you all know, reading a screen is not quite the same thing as reading a book!  Therefore, let’s examine the basic principles: Readability of the visual language, and readability of the text.

Readability of the visual language

How many times have you landed on a page with a shining pink background scattered with flashing yellow stars where the blue text is surrounded by a red box … Geo-Cities anyone?  We're more about readability here, and less about inducing seizures. Sometimes though, truth is stranger than fiction.

Choosing a font style that contrasts nicely with the background is paramount.  It’s crucial to have clickable items stand out from the rest of the text on every page.  Keep it simple. Don’t get too creative when it’s time to choose your colors.  More often than not, you can't go wrong by picking neutral, solid colors that blend well with a nice complimentary background.

Readability of the text

There are 3 ways of evaluating the readability of the text ㅡ the understanding of it, the perception of the font, and the paragraph structure.

1 - The understanding of the text

The understanding of the text is a vast subject that refers to web writing techniques. For now, we'll offer one great tip:  Put down that thesaurus, and stick to using words that the average person (and visitor of yours) would know.

2 - The perception of the font

The perception of the font is trickier. Certain type of fonts are known to be usually more readable on a screen: these are the Serif and Sans-serif fonts. In any case, avoid the cursive and fantasy fonts as much as possible.

Along the same lines, you should never write an entire sentence in capital letters since research has proven it’s more challenging to read.

Which sentence is easier to read?WHICH SENTENCE IS EASIER TO READ?

In much the same spirit, you'll want to avoid overusing bold, italic, and underlined font styles in your sentences.

3 - The paragraph structure

Be conscientious with your paragraph structure.  No visitor of yours wants to navigate through multiple paragraphs, block of text after block of text, without adequate line spacing.  Line spacing the different paragraphs and concepts are some of the simplest things we can do while formatting, so there's no excuse to get sloppy here.

You should also align your text left to ensure a regular spacing between the words.

Website Design: the conventions

We’ve finally reached the most delicate concept of web ergonomics:  web conventions. Web conventions are the norms we've come to expect every website to follow.  They make our lives easier and they bring familiarity.  We know where certain things are supposed to be on web-pages because of the sites that came before ours ╼ the sites that led by example by staying true to web design conventions that made the most sense, and the browsing experience the most pleasurable.

Here's a few web conventions that are commonly used all around the globe:

  • Your brand logo should always appear in the upper left-hand corner and should link to your homepage.
  • You should use the term “shopping cart” instead of “shopping bag” or “shopping list” when you refer to the list of items that your user is about to buy.
  • You should have a menu with clickable items.

Web Ergonomics Checklist  

Now, that’s a lot of rules to take in!

Here's a checklist to review to ensure your website follows only the best Web Ergonomics:

Rule Check!
The Law of Good Gestalt: Is my logo simple and recognizable?
The Law of Proximity: Are my contents/clicking areas of the same type physically close?
The Law of Similarity: Do my buttons /clicking areas look alike (Size, Shape, Color, Content, Behavior)?
Fitts Law: Are my profitable areas big and close enough?
Miller’s Magic Number: Does my menus and pick-lists contain between 5 and 9 items?
Hick’s Law: Are my offers simple and in appropriate number?
Readability of the visual language: Does my content and clickable elements stand out from the background?
Readability of the text: Do I use a language that my users are familiar with?
Readability of the text: Do I use a readable font?
Readability of the text: Is there an interline spacing between my paragraphs? Is my text aligned left?
Web conventions: Does my website respect the most common web conventions?

You now have all the tools you need to ensure your website is as ergonomically-friendly as can be.

Good content + great web ergonomics (mixed in with a good ad or two) = Long-term profitability!

From the blog

Discover more blog post about media buy, adult traffic and more.