SURL Home


Criteria for optimal web design (designing for usability)

By Michael L Bernard

 How should information be positioned in a typical website? 

The organization of information within websites is vital to its overall usefulness. In fact, a study by Morkes and Nielsen (1997)found that their experimental website scored higher in usability when text was

  • written concisely (58%)

  • easily scannable (47%)

  • written in an objective instead of a promotional style (27%)

than web pages in their control condition. That is, viewers tend to move quickly from page to page. Instead they usually scan for information that is of direct interest to them. Accordingly, it is suggested that text should be:

  • Very succinct

  • Include only one key idea per paragraph

  • Use highlighted keyword or phrases, and

  • Use bulleted lists when possible

Users have grown accustomed to looking in certain areas on a screen to find specific items (Bernard, 2001). Analyzing users' expectations of where they expect specific web objects to be located revealed that generally,

  • Internal web links were expected to be located on the upper left side of the browser window (Figure 1).

  • External web links were expected to be located on the right side or lower left side of the browser window (Figure 2).

  • The "back to home" link was expected to be located at the top-left corner and the bottom-center of the browser window (Figure 3).

  • The internal search engine was expected to be located at the top-center of the screen (Figure 4), and

  • Advertisement banners were expected to be located at the top of the browser window (Figure 5).

In follow-up study (Bernard, 2002) that analyzed participants who bought at least one item online revealed that:

  • The login/register button was expected to be located at the upper-left corner of a web page (Figure 6).

  • The shopping cart (basket) was expected to be located at the top-right corner of a web page (Figure 7).

  • The help button was expected to be located at the upper-right side (Figure 8).

  • Links to specific merchandise items were expected to be located at the left upper-center of a web page (Figure 9), and

  • The account/order button was expected to be located at the upper-right of a web page (Figure 10).

The figure below shows the combined location expectations for the ten web objects.

Chart

Location for internal web page

Figure 1.  Location for internal web page links

 

Location for external website links

Figure 2.  Location for external
website links
 

Location for "back to home" link

Figure 3.  Location for "back to
home" link

Location for search engine

Figure 4.  Location for internal
search engine

 

Location for advertisement banners

Figure 5.   Location for
advertisement banners

 

 Location for the login/register button 

Figure 6.   Location for the login/register button 

 

Location for the shopping cart button

Figure 7.   Location for the
shopping cart (basket) button

 

   Location for the help button

Figure 8.   Location for the help
button

 

Location for links to merchandise items

Figure 9.   Location for links to 
merchandise items

    Location for the account/order button

Figure 10.   Location for the account/order button

 
Users often miss important pieces of information simply because it is not seen.
This often occurs because they forget or are unwilling to scroll in a particular direction (especially horizontally), and thus do not see the information that is located outside of the primary viewing area. To reduce this problem, important website information should always fit within the typical horizontal viewing area of the screen. To do this, the rule is still to design for lower resolution settings. According to real-time analysis of Web surfers by MyComputer.com, 800 x 600 currently is the most frequently used computer screen resolution.

Average Computer Screen Resolution
January 2001
Resolution % of Users
640 x 480 8.9%
800 x 600 49.5%
1024 x 768 22.5%
1280 x 1024 2.0%
Unknown 14.8%
(MyComputer.com, 2001)

The actual usable size to avoid any scrolling at this resolution is 595 x 295 pixels (the safe width for printing at this resolution is 535 pixels). Most users however have their resolution set at 800 x 600 (31%). To avoid scrolling here, the usable size is 750 x 425 pixels. A compromise would be to place the most important information within areas that are visible at lower resolution settings, while placing less important information in areas visible at higher resolution settings.

In addition, when users do scroll, they may not see the information because it is placed in a typically low information-priority area, such as the bottom of a page (Nielsen, 1999) or placed in an area where users typically would not expect it to be placed.

Fluid layouts are significantly preferred to both centered and left-justified layouts. In a study by Bernard and Larsen (2001) participants indicated they perceived the fluid layout (which the margins are not fixed at any particular width) as being the best suited for reading and finding information, as well as having a layout that is most appropriate for the screen size (for both small and large screens). They also indicated that the fluid layout looked the most professional, and consequently preferred it to other layout conditions. Conversely, the consistently least preferred condition was the left-justified layout. A possible reason for the lack of preference for this layout is that users had to horizontally scroll in order to see all the information on the page. As discussed above, users particularly dislike to horizontally scroll.

Links with summaries are perceived as the most usable and are preferred to links without summaries.  A study by Baker, Bernard, and Riley (2002) found no statistical differences in search time across conditions with links with summary, links only, and full text. However, the summary condition was perceived as being the easiest in finding information, being visually pleasing, promoting comprehension, participants' satisfaction with the site, and looking professional. The summary condition was the most preferred, while the full text condition was the least preferred. The full text condition was perceived as being most difficult to find information, not promoting comprehension, not being visually pleasing, and not being satisfying.

Participants reported that they preferred the summary condition over the Links only condition because the brief summaries accompanying the links often guided them to the information they were searching for. Participants commented that, in the links only condition, they sometimes felt as if they were "jumping blindly" into the article. Several participants also reported that they did not like having to scroll through all of the articles in the full text condition. This study suggests that providing a small amount of information about an article on a page is superior to having long, scrolling pages filled with articles.

In presenting a list of links, we found that it is best if they are bulleted. For instance, as discussed in Usability News, Spain compared the accuracy rates for three link conditions: bulleted links, space between the links, and a no bullet/no space condition. It was found that the accuracy rate was

  • 100% for bullets

  • 89% for spaces, and

  • 67% for no spaces.

All participants preferred either the bullets or spaces; no one preferred the no space condition (Spain, 1999). In support of this, Parkinson, Sisson, and Snowberry (1985) found that menus with spacing were searched 25% faster than menus without spacing.

References

To top of page

Software Usability Research Lab
Dept of Psychology
Wichita State University
Wichita, KS 67260-0034

Optimal web Home | Usability News | WSU HCI Lab | WSU Human Factors | WSU Psychology


Contact: Michael Bernard with questions regarding this site.
Last update: March 31, 2003
URL: http://www.optimalweb.org
Disclaimer and terms of use