Website Readign PatternsWebsite design these days is much more complicated than just what looks “pretty.” With the emergence of eye-tracking technology and studies on the psychology of web browsing, layout and graphic designers have many more factors to consider when building a website.

The F-Letter

One of the most prominent revelations about web browsing arose through an eye-tracking study conducted by Nielson several years back. Results showed that computer users’ line of vision followed a distinct “F-shape” when viewing webpages: Their eyes would scan the top line from left to right, move down to read another line, and then vertically scan down the rest of the page. Consequently, many websites have begun to place the most relevant headlines and information in the top two sections of the page.

F is for Formatting

Eye-tracking has also shown that headlines most effective in grabbing attention are big, bold, and boring – “boring” meaning neither fancy nor flashy. Contrary to popular belief, special neon font detracts attention rather than draw it. Users tend to associate extravagant style and bright colors with advertisements, something their brain is programmed to ignore. Plain, attractive font in solid colors is ideal, as it neither overwhelms nor subliminally bothers the user.

Formatting with bold, italics, underlines, or capitalization also draws attention to a body of text. However, moderation is important: Users become overwhelmed with too much bolding or exclamations with CAPITALS!

F is for Focus

Slight adjustments in size and layout can vastly change user focus. Using white space through large margins, wide line spacing, and paragraph breaks keeps clutter away and the user’s eyes focused on the content. Smaller font induces more in-depth reading, while larger font prompts quick scanning. Information broken up into small, bite-sized paragraphs is much better received over large blocks of text. Eyes are also attracted to bullet points and numbers in their numerical form, e.g. “1,000,” because they stand out in the midst of all the words.

F is for Faces

Eyes naturally focus on text before images. Images, however, are powerful tools in conveying messages and information as well. Large images with clear faces are the most effective, as the brain is inherently drawn to human faces over inanimate objects.

F is for Fuchsia

Even though content is important, first impressions are made from colors. Half of users visiting a website don’t return because of the color scheme, making it a primary design concern.

Different colors are known to induce different reactions. Red stimulates excitement, which can promote increased appetite, quicker thinking, and impulsive behavior such as gambling. It is why red is used in stop signs and entertainment logos like Coca Cola, ESPN, or Zynga. Blue, on the other hand, used in logos like Facebook, Twitter, or Skype, is a neutral color that does not evoke immediate or strong emotions.

Effective color schemes for a brand and website use complementary colors and cater to the site audience. Red or orange is used for stimulation, blue for rational thinking, and white or gray for minimalistic elegance. Using immediate contrasting colors is overwhelming for the user’s eyes unless they are separated by a neutral color like white or gray, like the Pepsi logo. Darker color schemes usually use black, white or gray, and a bright version of blue, red, or green. The lighter colors are almost always dominant over black to facilitate readability.

F is for Form

People’s eyes are drawn to contrasting geometric shapes and sizes. Using triangles to point to a textbox or placing a large circle in midst of small ones is a way to attract attention to content in the shapes. On the other hand, repetitive shapes and sizes, such as a grid, allow the audience to browse the page at their leisure rather than look at specific content.

Furthermore, flat designs are preferred over 3D graphics, which can become overwhelming with the resolution and software. Consequently, 3D graphics are usually mainly for websites catering to a specific niche, such as models for engineers or architects, anatomic body parts for surgeons, or a roleplaying world for gamers.

F is for Future

With all the research coming out about user focus and mood, it is easy to get bogged down with information when creating a website. More and more designers are becoming savvy in appealing not only to the eye, but also to the psychology of the customer. Website design is no longer a tool or an art; it has become a form of scientific awareness. For optimizing a website to be not only attractive, but also effective, it is important to consult with a professional website design firm.

The Science Behind a Web Page: Website Reading Patterns

Quick Quote