web design layout principles

8/8/2019 Web Design Layout Principles

http://slidepdf.com/reader/full/web-design-layout-principles 1/5

b Design Layout Principles file:///C:/weblog/Web%20Design%20Layout%20Principles.htm

f 5 07/05/2007 12:14 PM

Web Design Layout Principles

Why are most web pages designed the way they are?

Many web page

look very similar.Why?

The reason why so many web pages look similar may to some

extent be because people copy each other's layout. But more

important is that there are simple, sound reasons for the

common way in which web page layout is structured. The

common structure does not happen by chance, it is based on

simple, easy-to-understand layout principles.

Structure of theNew York Timesarticle pages

Look at a New York Times article published on the web on the

17 December 2002 as shown below. Why is the page split into

three main columns, with the main article in the middle

column?




f 5 07/05/2007 12:14 PM

Left column,usually containsnavigation tools.

Advertisement inside themain text column tomaximize attentiongrabbing.

Main text in a broader middle column, 59-80character positions per line.

Right column, containsadditional information of uwhen reading the main tex

How the NewYork TimesArticle Page is

Structured

Most web pages have a common structure. Usually three or four

columns, the main text in the middle column, navigation info in

the left column, additional reading connected to the main text in

the right column. Why is this structure so common? As you cansee from the picture above, the New York Times article has a

width of 780 pixels. Why do so many web pages have a similar

structure?

1. Screen Width

The explanation is rather simple.

Note first, that it is very cumbersome, for a web page reader, to

have to scroll horizontally to view a web page. Because of this,

most people give their web browser a wide enough window, so

that most web pages can be shown without horizontal scrolling.

This means that most people give their browsers a main

viewing window which is at least 780 pixels wide. A few people

with small screens instead set their main viewing window at 640

pixels.

Second, it is known that many visitors to a web site do not go

beyond the first page. Therefore, web site designers want to

cram as much information as possible into a single page. So,

they usually design their web pages for viewing with a width of

at least 780 or 640 pixels, sometimes a little more. When the

width is larger than this, they often put

not-absolutely-necessary information in the rightmost column.

Note that a person with a 640 pixel wide window can read the

left and middle columns in the New York Times example above

without any need for horizontal scrolling.

2. Font Size

Now, how can you cram a lot of information into a fixed-size

page? By using small-size fonts. The main text in the NY Times

article uses font size "-1", one step smaller than the web

browser setting. Most of the text in the margins uses font size

"-2" combined with the Arial font, which is good for cramminglots of text into a small space and still keeping it readable. The

choice of a serif font for the main article is because this gives

the page a newspaper like feeling, and also serif fonts are

easier on the eye when reading large texts. Many other web

pages, which do not have any large main article, do not use

serif fonts at all.

3. Line Lengthand Number of Columns

Thirdly, it is well known that people can read text fastest if the

text has about 30-50 characters per line. More than 80

characters per line makes the text much more difficult to read.This means that with a small font size, and browser windows

set to 700 or more pixels wide, the text has to be split into

columns, usually about three or four columns. But you cannot,

as in a newspaper printed on paper, let users read one column




f 5 07/05/2007 12:14 PM

down, and then continue at the top of the next column,

because this requires scrolling up and down for the reader to

switch between columns.

Many web pages thus have the main text in a wider middle

column, and uses the two border columns for indexes,

commands and advertisements. The reader of the main text in

the middle column will then not need to scroll up and down.

Many people have their web browsers set to a default font size

of 16pt, and this is the default setting of major browsers at

installation. This default setting gives best readability for text

which is not split into columns. Such texts need a large font

size, otherwise there would be much too many characters per

line. But since most major web pages limit the line length in

various ways, they can also use relative fonts smaller than the

default setting of the web browsers.

In summary:

People give their web browsers wide windows, to avoid

horizontal scrolling.

a.

Web browsers have a rather large default font size, to get

reasonable number of characters with such wide web

browser windows.

b.

But major web pages reduce the line length by using

columns, and they can then use a font smaller than the

default setting of the browser.

c.

How the YahooHome Page isStructured

Look at the Yahoo Home Page. This page, as it looked like on 21

September 2001, is shown below with some added bullets and

lines to show the structure of the page. Note that the page uses

many columns of small text in the Arial font to cram a

maximum of content into a given space and still making the

text readable.




f 5 07/05/2007 12:14 PM

4. Tree Structurewith 3-14arcs/node

On top of the Yahoo page above, I have added black arcs and

bullets to show the main structure within the page. Note that

the page is organized into a tree structure, where each node of

the tree has between 3 and 14 outgoing arcs. The information

objects are usually either about 200 pixels wide, or contain all

their information on a single line. The content of many web

pages have, like the Yahoo example above, a tree structure

with multiple subbranches. Why?

If there was no structure, the reader would have to read

through all the text to find what the reader is looking for. With a

tree structure, a reader can rapidly scan the tree, deciding at




each node where to go on. Actually, with a fast processor, the

fastest search would be with a binary tree, with only one

incoming and two outgoing arcs from each node. However, the

human brain is not a fast processor, and each new node takes

some human effort to recognize, and a binary tree would have

more nodes from the top to the bottom of the tree. Thus,

around 3-14 arcs/node is probably what gives the lowest effort

for a human to traverse the tree. The human mind also seemsto be designed to easiest handle about 3-7 items at a time.

Conclusions

Many web designers probably have not done an analysis like I

have done above. But they still design pages according to

similar principles. What I have tried to show is that there is no

magic in this, that simple logical reasoning can explain why web

pages look like they do!

By Jacob Palme, Stockholm University and KTH Technical University.

web design layout principles

Documents