Website Design Principles
Design for Eye Path
When a visitor sees a website page, particularly for the first time, they visually scan it to make sense of it. The specific choreography of the eye path is based on both what the user expects, based on their experience with other website pages and based on visual cues on the page. For example, the user generally expects to see the site main identifier in the upper-left, contact info in the upper-right, etc. Larger fonts, bright colors, or motion on the page will attract the eye and the visitor will try to process all this information in an effort to understand better how they can get what they need.
Designing with this in mind means to adhere to website design conventions and paradigms, so the visitor can effortlessly find what they want where they actually expect it. It also means using size, color and motion judiciously to guide the visitor’s eye to support an understanding of the page information structure.
References
- The Best of Eyetrack III: What We Saw When We Looked Through Their Eyes
http://www.poynterextra.org/eyetrack2004/main.htm (offline) - Eye tracking study reveals 12 website tactics
http://www.directcreative.com/blog/eye-tracking-websites
Design for Progressive Comprehension
Website page should be designed to provide maximum benefit in the least amount of time and requiring the least amount of brain processing from the website visitor. Key metrics for comprehension:
- 1 second – visitor should get a positive feel for the website and its professional appearance at a glance
- 5 seconds – visitor should understand where they are within the site structure
- 20 seconds – visitor should be able to find on page the paragraph or link of interest
- 60 seconds – visitor should be able to get the information they need, in concise format
All design decisions, from layout, font size, color, animation, images, etc. are subservient to effective and efficient comprehension.
Practical Tips
- For longer pages, start with a summary of the key idea, follow with details and end with a conclusion, reinforcing the summary at top
- Divide longer pages into sub-sections, each starting with a descriptive sub-header
- Chunk text copy into nuggets that can be easily scanned and understood
- Paragraphs of no longer than 3-5 lines of text (as displayed in the website)
- Organize several paragraphs around one larger idea and provide that group with a heading
- Avoid distracting elements; use font size, color, animation, etc. as needed to guide eye path movement and to support the specific hierarchy of elements on page