Changing Web Design
Sites designed and coded some years ago now necessitate rebuilding — or at least refreshing — to deal with hand-held devices, particularly cellphones as that is how the world is being viewed. Some “designerly” sites, albeit initially expensive to develop, are outdated and will NOT display on a cell phone. If your audience is between ages 8 and, oh, 50, cross-platform designs are mandatory. In addition to a redesign, many considerations remain:
- Indexing: You have less than 3 seconds to grab your visitors. Indexing on the bottom of the page (“below the fold” in newspaper jargon) is inadvisable. This can’t be seen on a mobile device, which is how many younger executives view the Web, and, generally people will not scroll down to the bottom of a page in any case.
- Graphics must be top notch and compliment the layout and site. If they are poor quality, viewers will assume that you and/or your Web designer does not know what they are doing.
Updating Your Knowledge Base:
- Whether you are going to hire a designer or are seeking to update your skills, it’s worth your time to review best internet practices from the Yale Style Guide site or Web Style Guide: Basic Design Principles for Creating Web Sites
— this is one book that will make your life easier!
- Visit the W3Consortium
- The F Pattern: This site has heatmaps from user eyetracking studies of how sites are viewed. It’s quite fascinating: Web Reading Patterns
- Pick up a well-written book on HTML and CSS: Visual QuickStart Guide (8th Edition).
Author Elizabeth Castro has been in our office since we started building websites more than 20 years ago.
More on the F-Shaped Pattern (F Means FAST)
According to Jakob Nielson, who recorded how 232 users view thousands of Web pages with their Web Content
Eyetracking visualization heat-reading software, users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe. In a few seconds, your visitors eyes move at amazing speeds across your website’s words in a pattern that’s very different from what you learned in school.
Basically, they found that the reading pattern resembles an “F”:
- Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
- Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
- Finally, users scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.
Obviously, users’ scan patterns are not always comprised of exactly three parts. Sometimes users will read across a third part of the content, making the pattern look more like an E than an F. Other times they’ll only read across once, making the pattern look like an inverted L (with the crossbar at the top).
The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn’t attract any fixations.
Heat-maps illustrate how users read three different types of Web pages:
- an article in the “about us” section of a corporate website (far left)
- a product page on an e-commerce site (center)
- a search engine results page (SERP; far right).
If you squint and focus on the red (most-viewed) areas, all three heatmaps show the expected F pattern. Of course, there are some differences.
The F viewing pattern is a general shape.
On the e-commerce page (middle example), the second crossbar of the F is lower than usual because of the intervening product image. Users also allocated significant time to a box in the upper right where the price and “add to cart” button are found.
On the SERP (right example), the second crossbar of the F is longer than the top crossbar, mainly because the second headline is longer than the first.
- Users won’t read your text in a word-by-word manner.
- The first two paragraphs must state the most important information. This is consistent with classic newspaper style — an inverted triangle is generally used to describe this.
- Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content.