Most people find a web page less readable than paper pages and take about one third longer to read it. We need to make it easier for them so they will stick around and keep on reading.
A well-designed web page deserves a great title
Visitors can arrive from a search engine - unannounced - at any page on your site. They need to see immediately that this is exactly the page they are looking for, or they will back up to the search engine and click on its next link. They will be lost to you.
Make sure the first thing they see is a great title. A great title gives an obvious, clear, description of what the reader will find on the web page. It does not need to be flashy, cute or clever. Make sure the title displays before that huge banner ad or flashy graphics.
Often it is worth thinking up a great title before you start to design a web page. If the title is designed to tell readers what the page is about, it will also remind you and keep you on track.
Key information at the top of every web page
When you design a web page layout make sure that there is a place for interesting, key information at the top of the page. The first view of the page needs to let readers know it is worth their time to read the rest of the page. Your design of a web page should allow your author (this may well be you) to include relevant content and sub-titles in a reader’s first view of the page and give hints on what is to come.
Design a web page with easy-read chunks
Web page design needs to accommodate easy-read chunks of content. These chunks contain approximately 100 words with a line length of about 50 characters. Your authors will need to limit themselves to only one idea per chunk and edit-out stuff that is not needed.
When you design a web page, make sure that graphics or tables do not interfere with the easy flow of text within chunks. Allow for the use of bulleted lists; these let authors present lots of information, clearly and concisely.
Good web page design uses readable colour combinations
Many experts believe you cannot go wrong with black text on a white background for easy reading. Others argue a major factor in computer fatigue is the high contrast between black and white on a computer screen compared to the contrast between reflected light from black and white on a paper page.
Some web designers use dark text on a light coloured background to try to improve readability. They believe reducing the contrast between the text and its background reduces eye fatigue.
You will not be able to make a decision based only on this small sample but explore some other sites and see what you think.
Others recommend light text on a dark background to reduce contrast. The jury is still out - you will need to decide for yourself. I personally don’t like because it is unpopular with visitors who want to print out pages, even though there are ways to overcome the problems involved.
Again you will need to explore other sites and think of your audience and the audience dynamic you are trying to produce.
Some color combinations are atrocious and should always be avoided.
They are sure to chase away your readers. This is one of them
And this is another color combination to avoid when designing a web page.
Some color combinations work well and can enhance the readers experience of your web site.
This one has a professional look to it.
Here is another acceptable color combination.The background is unobtrusive but the hint of color reduces the contrast between text and background. This is cool background color, think about your audience and how they will react to the colors before you make color combination decisions.
Select fonts for the computer screen
Serif fonts, ones with small feet like this, improve the recognisability of words and the flow of your eyes across text when used on paper pages but often do not display well on computer screens. Verdana was designed specifically for the pixel display of computer screens but may not be available on all browsers. For this reason it is best to define a family of fonts for your paragraph text. The browser will use the first one it has available. The font family most often chosen is Verdana, Ariel, Helvetica.
If you want to know more there is a tutorial from webmonkey on web typography that really explains font decisions well.
Make careful decisions about the size of your fonts, do not take control away from users who may be visually impaired and want to increase font size. Expressing your font size in pixels gives you control but prevents users changing it easily. Expressing font size in ems is better but can get complicated. You hand over control to the end-user, leading to challenges in your web page design.
Paragraph text on this web site is set at 1em. This makes the font size the default size set by the user’s browser. Some people think this is to large and choose 0.9em. Bigbaer presents a clear explanation of this.
Choose line height for easy reading
Line-height has a big influence on readability of text. Increasing line-height above 100% increases readability because it makes it easier for readers to find their way back from the end of one line to the beginning of the next. The line height for my normal paragraph text is 150%. The line-height of this paragraph is 100% and you can see how crowded the text appears.
Great on-line font tester for web font decisions
There is a great online font tester which allows you to try out a wide range of different options for your font decisions.
Careful with capitals
Capitals reduce the quality of the information the reader gets and makes words harder to read. This is related to the lack of variation in font height (FONT HEIGHT), which makes it harder to recognise a word from its visual pattern, If you want to emphasise a word use bold rather than capitals and only do that occasionally.
Avoid graphics behind your text
When you design a web page on your own computer the graphics may look great. However, graphics display differently on different browsers and when placed behind text may render the text unreadable. A safe general rule is to keep text and graphics separate.
Tagged with: Design
Print