Web users and web design

Remember that web users tend to be self-centric.  Visitors to your web site are usually interested in locating specific information only. And first-time visitors are more likely to return to your site and do business with your company if your site is attractive and easy to use.

Because up to 80 percent of web users scan web page content, it is the web designer's job to create a site that allows the user to find the information they seek quickly. This should result in attracting more business to the site.

A company's web site gives the web user a first impression of the business. If the site is visually unappealing or awkward to use, there is a stronger possibility that users will leave your site for a competing one.

Some general tips used by web designers to achieve customer satisfaction are as follows:

• easy-to read text
• no unnecessary text
• no clutter
• easy-to-navigate format

easy-to read text

The average person reads 25 percent more slowly from a computer monitor than from print. Using text that is easy to read makes for a better web site experience.

no unnecessary text

Because users scan for specific information, there is no need to force them to read irrelevant text. The user will lose interest and leave the web site. Good writing and editing optimize text content.

no clutter

Content is essential but the web site layout is just as important. The layout must be easy to understand.

easy-to-navigate format

The web user must be able to navigate intuitively through your web site. Getting "lost" in a web site is disconcerting for the user and detracts from the experience of visiting your site.

Effective page layout and layout elements

Web designers often configure web sites using the inverted pyramid structure, as is common in newspapers.

Like newspapers, many web sites feature the main content on their front page, but they also provide summaries and directions to the other stories – often along the left-hand column.

The inverted pyramid structure enables the user to view a summary of the content and navigate easily to the story of interest. Also, users don't have to read content that doesn't interest them. They just read their chosen content by clicking the summary link.

The inverted pyramid structure suits the Web, because hyperlinks allow quick access to the relevant story. Web sites can also provide users with backdated stories and links to related stories of interest – facilities newsprint can't offer.

Before beginning work designing your web site, you need to understand all the elements of its layout and how they interact with each other. These web page layout elements include

• margin
• color
• space
• navigation
• rule
• white space
• table
• paragraph

margin

The margin determines how close the content displays to the browser window edges.

color

This provides an overall sense of organization for the site.

space

The separation of elements on the page is an important factor in site appeal and legibility.

navigation

Elements that control user movement through the site are of key importance.

rule

This divides the page content into related sections.

white space

This reduces page clutter.

table

This distributes elements into position on a page.

paragraph

This controls how the text on your page will be grouped.

Page layout can also be implemented using Cascading Style Sheets (CSS) styles. Using CSS styles instead of, or in addition to HTML elements, elements such as tables can optimize a site by giving a smaller HTML footprint.

Developing and implementing project-specific guidelines on how all elements are used in the web site ensures a smooth and consistent feel to the finished product. If these issues are not addressed early in the development process, resources may be wasted on correcting them at a later stage.

Common layout formats

By conforming to common web page layout formats, you are giving users what they expect to see. Although the user may not know the products or service that you provide, they will understand how to use your site.

Where the navigation elements are placed is largely dependent on the amount and type of information the site contains. They are most commonly placed

• at the top
• at the left

Sites that need to display a large amount of content simultaneously use what is called a distributed layout.

Black or dark text on a white or light background is also a common layout format, because it is the style that users are most used to. It is widely accepted as the most legible.

There are various text and background color combinations that reduce legibility. Professional web designers avoid using these combinations. Examples might include dark blue text on a bright red background, or light yellow text on a white background – lack of contrast, dimness, or bizarre color changes can all affect legibility.

Speed and scrolling

If the file size of the page is too large and takes a noticeable time to download, the user is more likely to leave for another site.  To minimize download times, web designers use images as economically as possible at the design level.  They use the smallest possible file formats and apply optimization to further reduce file size.

(Displayed below) shows the web page file sizes needed to produce one-second or ten-second response times for different connection speeds.

Within the one-second response size limit, the user feels that they are moving freely through your site. Above the ten-second response size limit, it is likely that you will lose the user's attention.

You can design your web page for various screen resolutions or screen sizes. This relates to the number of pixels that are displayed on a screen at a time and hence the amount of information that can be displayed on a user's screen. Earlier web applications were designed for a setting of 640x800, with the standard later moving to 800x600. Later standards are now 1024x768 and higher.

When designing a web application, you need to take into account that even customers using a resolution of 1027x768 and higher may not maximize their browser so 800x600 may suit them better. Browsers also subtract approximately 50 pixels in width and 200 pixels on the top and bottom of the page. While 640x480 is no longer common, it may be still be used by clients with older computers and those using large fonts.

You should test your applications at different screen sizes and try to ascertain your customers' needs when designing web applications.

Because most users only scan web pages it is advisable to avoid horizontal scrolling. You should therefore ensure as far as possible that users do not have to scroll left or right to view page content. This may involve deciding to design for the lowest resolution or it may involve determining and designing for the resolution used by the majority of your users.

White space and page layout

Users scanning for key information do not want to wade through cluttered pages. And if your page is full of disorganized information, users are more likely to miss something you want them to see.

You can have as much information as you want in a web site, but there is no need to have it all on one page. Information on each page should be concise, with links to greater subject detail.

It is important to let the user decide what they want to read, rather than forcing them to read content they have no interest in.

White space is an important layout concept used by web designers. It assists in the development of uncluttered web pages with clearly distributed content. Most web users prefer this style of content delivery.

Transparent GIFs

It is possible to create white space by inserting a transparent GIF into your web page. You adjust the HEIGHT and WIDTH attributes of the tag to suit your needs.

Alternatively you can use CSS padding properties to space images. For example the following code inserts 20 pixels to the right of the image, flowers1. jpg
<img src="../images/flowers1.jpg" alt="Red tulips" width="100" height="120" style="margin-right:20px;" />

Tables

By default, everything written in HTML is aligned to the left. Using tables is a method of neatly distributing content throughout a web page.

Often web designers create tables that span the entire width of the browser. They then populate selected cells with text, leaving others blank.

The HTML table border setting is then set to zero, making it invisible to the user. The result is a web page with text distributed neatly across the full width of the browser.

Frames

Frames can be used for good page layout. However, good planning and care is needed when using frames, because they can affect both navigation and layout. Frames also affect other parts of web site development and deployment.

More browsers now support layered elements. These can be used to lay out your web page neatly. However, whereas Netscape uses the tag to achieve this, Microsoft Internet Explorer conforms to the standard CSS positioning of all elements. This means that two separate scripts are needed to ensure that the page will look correctly on both browsers.

Summary

Web users are self-centric and tend to scan through web pages seeking only key words and phrases. Designers need to make their web sites attract business from these users by allowing them to find the information they seek quickly and easily, thus retaining their interest.

Web sites use the inverted pyramid structure commonly used in newspapers, with the added advantage of hyperlinks. The front page has a main feature together with summaries containing links to more detailed content. Users can easily reach the content that interests them.

Common layout practices include placing navigating buttons on the left or on the top of the web pages. These help the user to navigate your site easily.

To keep the user's attention, the page download speed needs to be considered. There is a greater likelihood of the user moving to a competitor's web site if your site takes too long to view. You should also save the user ever having to scroll your page horizontally by using 640x480 resolution and a maximum page width of 600 pixels. This also ensures that your page will be visible at all resolutions.

Having a neat, uncluttered look to your web site is crucial for first impressions. Proper use of white space and distribution of text and images is used to attract users. White space can be inserted in web pages using transparent images, tables, frames, or by positioning.

Web 301: Usability and usability testing