Web design for usability

Scanning

Very few people will be prepared to read the full content of a web page. It is much more common that a visitor will scan the page for the information they want, then read only that.

Web pages that aren't scannable are frustrating.

The rule in designing a page to be scanned is to break up the content into manageable chunks.

Highlighted boxes are very useful for drawing attention to important bits of text. Just as importantly they add interest to a page and help break up the text. I'd imagine you read the box above before the first paragraph.

Should the image be an African or Indian elephant?

If possible make use of images to break up the content. The human mind is much better at scanning for images than text, and a picture tells a thousand words.

And don't ever write paragraphs of more than 3-4 lines. I've managed to do this on this very website, and even I switch off after the first 3 lines or so.

Directing the eye

The important part of your web page is the section that contains the useful content. You should direct the visitor's eye to this content.

One way to direct the reader's attention is to make the content stand out more than the rest of the page. This means placing the important content on a prominant part of the page, and avoiding the use of bright or moving images elsewhere on the page that might prove distracting.

Put aside a few hours and read the Eyetrack study very carefuly. The site has helped me a great deal.

Text size

If your text is too small it becomes difficult to read quickly. Your content will have to be really important for people to even bother with it.

Scrolling

Visitors will not scroll down a page unless they are very interested in the content. We are way below the fold here. Split long pages into several shorter pages. They reduce the scrolling and visitors get a break while they open the next page....


...which is about Optimizing images for the web

HOME - ACCESSIBILITY - SEO - SPECIFICATION - CSS - USABILITY - STANDARDS

Introduction

Layout

Navigation

Web images

Web Accessibility

Website Specification

Search Engine Optimisation

Learn CSS

Web Design Guide

Web Standards

Business web design
VORD Web Design