Thursday, April 10, 2008

Chapter 6 - Page Layout

Page layout has to accomplish two things:
1) convey information clearly
2) allow users to easily navigate thru the site

Similar to a newspaper layout
* the most important items are in the top position and use larger, bolder type in headlines
* Unlike a newspaper, iimportant content should be centered near the top because that is how viewers read web pages

It is important that viewers easily recognize the top and bottom of each page.

The proper line length aids in readability.
Page length should fit the purpose of the page.
Scroll only when needed.
Usually, home pages are shorter.


Most important points to consider in page design:
1) White space, clean, uncluttered layout
Users need to easily find information on the page.

2) Be consistent in page layout and navigation
Helps users scan better when they see what they expect on every page.

3) If items are compared, make it easy
It's difficult if information doesn[t fit on a page or too much scrolling is needed.

4) Establish a page hierarchy
Most important items are placed higher up on the page.

5) Align page elements, either vertically or horizontally
Keep it consistent so a user's eyes are not forced to jump around the page.

6) Use fluid layout
This automatically adjusts the page size to monitor resolution for larger sizes (1024 px. x 768 px. or higher)
Non-fluid layout doesn't hurt usability, but most users prefer to be in contol and use all the space their monitors are capable of.

7) Density is % of screen filed with text & graphics
Use white space in moderation.
Too much can make it tougher to scan & often requires unnecessary scrolling.

8) Line length
Users read faster with longer line length (75-100 characters per line)
Make sure text columns are wide enough. Too narrow slows down readability (at least 50 characters per line)
Users prefer shorter length even though it takes longer to read.

9) Use frames when certain navigation functins are needed to access information on the other side of the screen.
Ex. - map of United States


A proven and trusted design principle
Form follows function.

No comments: