Responsive & Intuitive Design

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:

Concerns

  • 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:

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.
f_pattern_heat_map

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).
Heatmaps from user eyetracking studies of three websites.

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.

 

About DALSF2011

D. A. Levy is a media/marketing professional with 25+ years in traditional publishing, 30 years in ePublishing, including Mini kaleidoscope drawing. Web design, content development, editing, blogging with strong HTML/CSS/JS coding experience. Her photography has won awards, sold through galleries and gift shops, and taken her to 27 countries (www.DianneLevy.com). As Director of The Maritime Heritage Project she founded, built, researched and maintains that site, which has become one of the largest of its type in the world (www.MaritimeHeritage.org). It has been viewed from every country around the globe, receives more than 300,000 access per month, and is linked to by the California State Library, Bancroft Library, various Maritime Museums, PBS, Wikipedia, The Boston Herald, Merchant Marines, etc. Proven ability to build and optimize web pages to drive traffic for top level rankings on Alexa and Google.
This entry was posted in For Writers and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *