Web Design & SEO

Most Important

Always put the most important information first. using the inverted pyramid method of information organization. Turn the pyramid upside down providing the big information first then work your way down to the point as you work your way down the page. In addition to starting big, work in these other factors; F shape, scanning, the fold, and word choice.

F Shape

The F shape refers to the way we read a web page. First, the eyes cross the page horizontally at the top of the page. Next the eye crosses the page horizontally in the middle. Lastly the eye runs down vertically on the left side of the page. The placement of images, logos, page title, headers (h1 tags), sub-headers (h2 tags), and subject/paragraph headers should fall in the F shape.

Scanning

Most readers scan the page without reading it. So, take advantage of this by using size and color to give scanners information quickly. Make your headers, sub-headers, subject/paragraph headers, and links stand out from the rest of the text by using a different color and/or larger font size than the body text. Write in short paragraphs, and bold italicize or underline keywords or important text.

The Fold

The fold is approximately 800 pixels from the top of the web page. Most readers spend 80% of the time above the fold. and 20% below the fold. So, put the important information above the fold. However, remember scrolling below the fold is easier than clicking to another page to finish reading a fraction of information. So don’t create a new page just to keep all your information above the fold. While readers do scroll down below the fold they are less likely to scroll horizontally. Avoid forcing the reader to scroll horizontally by keeping your page width at 960 pixels or less.

Word Choice

The words you choose for your headers, sub-headers, and subject/paragraph headers must give the scanner the information they need to know if they are going to slow down and read your body text. So, choose your word wisely. Make them short and informative. Use plain language, use specific terminology, follow naming conventions, and action oriented words. Avoid bland, generic words, made-up words, and leaving the information-carrying text to the end.

Get Results

I have created the graphic below using these factors the inverted pyramid, the F shape, scanning, the fold, and word choice. Follow these guidelines when writing for your web pages and get results.

how to write for a website graphic

Resources

v How Users Read on the Web by Jakob Nielsen

v F-Shaped Pattern For Reading Web Content by Jakob Nielsen

v Scrolling and Attention by Jakob Nielsen

v First 2 Words: A Signal for the Scanning Eye by Jakob Nielsen

v Horizontal Attention Leans Left by Jakob Nielsen

v Microcontent: How to Write Headlines, Page Titles, and Subject Lines  by  Jakob Nielsen

 

 

IMD360 week 1

Leave a comment