Brow Net Wins

Good web page design does not differ much from print. Consistent branding, clear and readable type and optimum white space still apply.

On screen reading gravity
Heat maps generated from user eye-tracking studies suggest a dominant reading pattern is shaped like a letter ‘F’. Users first read in a horizontal movement, usually across the upper part of the content area where the brand sits, forming the F’s top bar.

Next, users track down the page and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This forms the F’s lower bar.

In other studies, the dominant reading pattern is typified by a letter ‘Z’. This is more applicable to pages which do not scroll and have a maximum depth of 500 pixels. These may include a homepage, or an html email.

Like the ‘F’, the reader begins with a strong horizontal sweep. Where the ‘Z’ pattern differs is where the eye moves next. It falls to the bottom left, and then tracks right where it comes to rest.

The top right and bottom left are the power spaces. These should be reserved for important images, headlines and branding.

Page alignment
What both patterns suggest is a web page should be branded at the top of the page. Text should range left, ragged right, creating a hard left edge to guide the eye to fall downward.

Centred or right aligned pages should be treated with care. They work against natural readability.

Choosing fonts for web pages
Font sizes pose a major problem for web page design. In print, body copy is still readable at 9pt. On the web, it can be no smaller than 11pt. Content taken from a printed page and placed on a web page will run deeper, because the type has to be larger.

HTML code has some limitations for type. Font types are limited to default PC fonts. In addition, fine typographic controls available in print are not well catered for by HTML. For a long time, designers favoured Flash, as it provided greater typographic control.

However, new versions of Cascading Style Sheets (CSS) have provided some answers like space before headlines and leading control.

Unlike print, sans serif fonts are easier to read than serif. Research proves the sans serif is read 11.5% faster than serif. As a rule of thumb, use no more than three fonts on one page. Avoid reversing body copy (white text on a coloured background). Reversed content is easy to read in print, but hard work on screen.

Allocate white space
The tendency is to coat the entire web page with content. The idea being ‘more is better’. When it comes to readability, less is better. A page with no white space is congested and confusing. A well-spaced web page ‘breathes’ and allows the reader to gauge the hierarchy of elements.

White space is no accident. The more white space surrounding elements like logos and headlines, the more attention they are given. For example white space between paragraphs and in the left and right margins increases comprehension by almost 20%. (Lin, 2004)

Layout using grids
The use of the layout grid system allows for flexibility and creativity while maintaining a sense of order uniting all the page elements. Grids are not literally drawn on the page – they are merely a guide. Nor do elements need strictly fit one column.

In the example note how the elements can break out and range across multiple columns to create contract.

A simple page may only require a three or four column grid. A complex page might need nine columns.

The more columns you add, the greater flexibility is in your layout.

Grouping page elements
Web pages need to communicate a sense of order. By grouping major elements together in designated areas your reader can quickly scan the page and be drawn in to read further. Elements in proximity imply a relationship.

Consistency
When engaging with a page long enough, the reader’s eye becomes ‘trained’. A trained eye which has grown accustomed to the page, can read more. To effectively train the eye, make sure type, grid, and grouping of elements are consistent.