Many web sites remain in a “static” state for extended periods of time. This may be counter-productive, as visitors are seeking something “new” each time they visit the site. One simple way to keep a site fresh and vibrant is through the use of a rotating main image. This is nothing new … Google changes their page appearance daily.

Using javascript, have embedded a series of rotating images that change each time a visitor “lands” on the page. To see how this works, click your browser’s ‘refresh’ button to see the changes.

Red mapping indicates longest eye pauses, followed by yellow and blue. Gray indicates little to no time spent on these areas of the layout, such as the generic images that have been placed on this page.

An interesting study has been published by Jakob Nielsen entitled, “Eyetracking Web Usability“.

Using monitor mounted infrared sensors, Nielsen’s research studied eye flow and linger times across various web page layout designs to learn what attracted and kept the viewer’s attention, and what did not.

In his findings, Nielsen covers a range of topics … including discussions on photography, navigation, type usage, color, graphics, animations, ad placement and overall layout of a web page.

For web designers and marketers, Nielsen’s work can be a useful tool in determining how best to design a web page for maximum effectiveness.

To read and see more, as well as download a PDF-formatted chapter from the book, go to: http://www.useit.com/eyetracking/ There is also a link on this page for ordering the published work.

One of the least desirable effects of a web page is having a large amount of material that falls below the ‘fold’ … a term that defines the page content that lies below the visible part of a web page display. If there is a high degree of content, the visitor may have to scroll down to an extensive degree.

Part of the problem is that most web pages have their navigation elements (buttons and links) placed above the fold. When a reader scrolls down through the page content, they often lose access to those links and buttons until they scroll back up to the top of the page.

Embedding what is known as an “iFrame” (innerframe) into a web page allows for an image or another element, such as a separate web page, to be inserted into the parent web page. The iFrame tag can be configured to a set width and depth, scrolling attributes, and borders.

In the example above, an iFrame has been inset into the central section of the page and will serve as a placeholder for a dozen or more main content pages. It has been configured to not exceed a specified vertical depth, which means that on most browser resolutions, the entire page fits without needing to scroll. If the main content window contains elements that exceed the iFrame’s specified vertical height, then it allows that window to switch to a scrolling mode. The advantage to this design scheme? Above the fold navigational elements are always visible, regardless of where the viewer has scrolled to in the iFrame, and eliminates the need to scroll back to the top of the page to reach other main topic links.

What are web visitors using for a monitor when visiting a web site? How should a page be designed given those parameters?

I recently reviewed these questions on one of my most heavily trafficked sites using Google Analytics.

We’ve seen a growing trend towards what are called “widescreen” monitors. For future reference, I’ll refer to them as “16:9 aspect ratio” monitors. Up to this point in time, all monitors were “4:3 aspect ratio” monitors. The aspect ratio can best be described as a display that is “x” units wide by “y” units tall.

On the site where I gathered data, the results were revealing. In a sampling of 3,000 visitors … 52% were using monitors with a 4:3 aspect ratio, 37% were viewing at a 16:9 ratio, and the rest were viewing at other ratios commonly found on netbooks and cell phones. The most frequently used screen resolution (34%) was 1024 x 768 pixels, followed by 1280 x 800 (14%).

For the designer, it is imperative to create pages that will fit in the widest range of monitors without the need for side-to-side scrolling, which most visitors find quite annoying and can leave a negative impression of the site. The designer should also consider that the visitor may be using sidebars or tabs on their browser, further reducing horizontal window space.

Someday … it will be a widescreen world. For now, consider the numbers and design accordingly!