Rocketface® Webmaster's Workshop
Design A Website
A beginners guide to building a classic website


Including the step-by-step webmasters tutorial    "How to Design a Website"
Rocketface® Workshop Sitemap Webmasters Archive Tutorial Index Privacy About Search AddThis Social Bookmark Button




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
      (Fig. 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).

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

    		•

    Figure 1. Location for internal web page links

    Figure 2. Location for external website links

    Figure 3. Location for "back to home" link

    Figure 4. Location for internal search engine

    Figure 5. Location for advertisement banners

    Figure 6. Location for the login/register button

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

    Figure 8. Location for the help button

    Figure 9. Location for links to merchandise items

    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.

    Author: Michael L Bernard Software Usability Research Lab Dept of Psychology
    Wichita State University
    Wichita, KS 67260-0034

    Webpage Designing
    Designing Web Pages
    		Designing good webpages begins with good webpage layout. So what do you want on this most important first screen?
    All About Design Principles and Elements
    		Basic website design elements to consider. A truly shocking number of web designers are unfamiliar with the basic principles and elements of design.
    An Issue of Width - The Resolution Problem
    		There is a problem that has plagued the web ever since graphical designs for web pages started to become common, and yet it's a problem that's never been solved.
    Critical Web Design Rules
    		Content is King! If you want a website to generate back-links and have quality content the search engines love, be sure to make it readable by both people and search engines.
    An Easy Way to Choose Attractive Color Combinations
    		Lots of people struggle to come up with attractive color combinations when designing logos, banners or web sites. So, here's an easy technique that only takes a few minutes.
    8 Ways To Improve Bad Website Design
    		You're website reads well and you're proud of it. But, you've tried and tried to create something that looks good too, and you can't seem to get it together.
    Professional Webpage Layout
    		Examining the methods of professional webpage layout. The individual pages in your website must have a layout that allows the visitor to find out as much as possible about your webpage at a glance.

    Check out the webmasters article archive.

    Copyright© 1999 - 2008
    Rocketface® Graphics    		 Rocketface® Workshop Analyze Organize Develop Implement Maintain Site Map Index