Layout Issues
Focal Point of page
The focal point is the most important element on the page -- what you want the viewer to see
There should be only ONE focal point on a page.
A page can use perspective to lead a user to look at a specific piece of information.
A page can use color and contrasting values (light/dark) to lead user's to look certain places too.
Your page design should lead the viewers' eyes to the focal point.
Examine these images and answer the questions.
Where does your eye go when you look at this image?
Why?
What is the focal point of the photo (where your eye rests in the end)?
Where does your eye go when you look at this image?
Why?
What is the focal point of the photo (where your eye rests in the end)?
Where does your eye go when you look at this image?
Why?
What is the focal point of the photo (where your eye rests in the end)?
Page Layout
Page layout is done in columns and rows
Common page layouts using CSS, not Tables:
- HTML Utopia book: Chapter 8, Simple CSS Layout
shows how to
- design page layout
- create header, sidebar (right or left), and content areas using CSS
- HTML Utopia book, Chapter 9, Three-column Layouts shows how to
- add a second sidebar, and do 3 column layout.
- Uses Float property
- shows how to place footer at bottom of page even when columns are uneven in length.
- HTML Utopia book, Chapter 10, Fixed-width layouts shows how to
- use CSS to style tables
- deal with IE 6 problems with floats
- zoom layouts for disabled users
Balance in page layout: --
- scroll down to view balanced and unbalanced page design in figures on Optimal Web Design
- Figures 1a and 1b. Examples of balanced and unbalanced page layouts
- Figure 2a and 2b. Examples of stable and unstable layouts.
- stable layout: Notice the space around the objects and the space separating the objects from the page margins -- easier to view objects
- unstable layout: objects hang on the edge and bottom of the page
Interface with sequential and nonsequential screen
- sequential: even rows and columns are easier to view
- nonsequential: elements are not lined up.
Animated GIFS
Animated Gifs
annoying and distracting
- Whatever is moving on a page gets all the attention
- A place for the eye to rest is important. The place the user's eye rests should be the most important object on the page, not an unimportant animated GIF.
Examples of more annoying elements on Web pages
Donald Norman's Human Centered Design
The original guru of usability in technology design (we will cover his ideas again later).
A summary of Norman's teaching:
- keep it simple. Make it visible and obvious how to use a technology, such as a web page
- make it intuitive to use, so the user cannot mistakenly choose the wrong object to perform a task
- take advantage of what the user already knows in your design - if you can create a good mental map, operation will be easy
- provide feedback so the user knows how the object (page) is operating
- When all else fails, standardize!
top
