Interactive Systems Design - Assignment 1

Donovan Hutchinson

FlagStoreOnline.com

1. Introduction

"Flag Store Online" is a site dedicated to the sale of flags, flagpoles and accessories. Ordering can take place online, by telephone or by fax.

The home page of the site links to areas for specific types of flag or accessory. It also links to an ordering section, and a contact section.

Little information can be found on the background of the site, as the "About Us" link results in an error page.

2. Usability Analysis

2.1 Accessibility

Page titles

Throughout the site, the page titles reflect the content well, for example home page contains the title "Flag Store Online", and the U.S. Flags section contains the title "U.S. Flags". This is maintained throughout the various sections.

"Alt" tags

Most pages contain a banner-type image containing the site logo. This image contains no "alt" text.

Other images, for example the linked flag images on the home page, do contain appropriate "alt" tags.

Use of Images

Images are used sparingly, or only when necessary throughout the site. Pages load quickly, and the information is displayed in a clear manner.

The company logo does not act as a "home" link. This is a popular and easily implemented method to allow the user to return to the home page at any stage.

Errors

In total, the site contains 77 "broken" links (links resulting in a "Page Not Found" error). These links include some options on the main menu, as well as many "Order" links within the site.

While most of the product sections contain functioning pages, the "Ordering By Phone", "FAQ", "Customer Service" and "About Us" pages do not work. As a result it is difficult to obtain online assistance or find out more information about the company.

2.2 Navigation / Site structure

The home page, and some of the interior pages, contain a long left-hand navigation bar. Though this is a tidy approach, the number of links may be overwhelming.

It is not immediately apparent what the difference between "Indoor Flags & Sets" and "Indoor U.S. Flags & Sets".

Other sections could be combined, such as "Miniature U.S. Flags" and "U.S. Flags".

Multiple missing pages give a bad impression, and do nothing to reassure the user that the site is a genuine, professional company.

2.3 Consistency

Some pages retain the navigation described above, along with the layout (for example, "State & Territory Flags") while others discard the navigation completely (for example, "U.S. Flags").

The background colour changes (from blue on the home page, to white on interior pages) and on some pages several fonts are used where one font should be used.

In the "U.S. Flags" section, three links lead to pages of flag listings. On these pages, the site logo is not used.

Trying to return to the home page from these pages is not possible without using the browser's back button, as the "home" link on each page results in a "Page Not Found" error.

2.4 Ordering Process

In each product section, the products are listed in tables, with their size, price, and sometimes, an item number. On the right of each is an "Order" link.

On most of the "U.S. Flags" section, the order link results in an error page.

When the order link works, it results in a secure section of the site, containing an order form.

It soon becomes apparent that though the "order" link was situated beside a specific product, the information is not carried across into the form. Instead, it is necessary to enter the item number, size, description and price by hand. It is also not possible to order more than seven items.

There is no total indicated on the form, yet the form asks for credit card information on the same page.

Some information is marked as a required field, using an asterisk. This is clear and easy to see. However, on submitting the form, the information is not checked for missing or invalid data.

Once the form is submitted, the user is still not informed of the total or order content. Instead the user must print a page, and write by hand the time of the order, day and date ordered.

2.5 Ease Of Use

While the home page navigation ensures that it is not difficult to locate a specific flag or accessory, the order process offers little or no assistance, and is almost impossible to use.

To fill the order form, it would be necessary to either take note of order numbers, sizes and prices, and fill them out on the form. If a user returns to the site, perhaps to check a flag size, the information on the form is lost and should be retyped.

As there is no error checking in place, the user is not told of any errors. For example, it is possible to mistype a credit card number, and because the site does not check the syntax, the error is not alerted.

The navigational obstructions offered by the multitude of missing pages would only slow or frustrate the user.

3. Conclusions & Proposed Improvements

While the home page of the site is clear and relatively easy to use, there is inconsistency within much of the interior of this site. Colours, layout and fonts are not consistent. It would be an improvement to offer a consistent interface, with tested links that work.

A more streamlined navigation area would help users locate their choice of item more quickly. Similar sections could be combined under one heading, so that the user is not presented with an overwhelming number of options.

Aside from the missing information, the most troubled area of the site is the order form. Offering no feedback or error checking, the form places unnecessary demands on the user, and could result in errors or lost sales.

JavaScript form verification, and the use of cookies to store users' purchase choices could improve the functionality of the form, streamline the ordering process and result in fewer errors.

In terms of maintaining the site, the <font> tags and inline CSS commands will be removed and stored as CSS definitions in a separate CSS file. Multiple redundant tags add bulk to the page size, and are considerably more difficult to edit than when stored in a CSS file. The separate CSS file would save time both for the users and the developers.

References

1. Nielsen, J., Designing Web Usability: The Practice of Simplicity - New Riders Publishing, 2000

2. Preece, J., Human Computer Interaction - Addison-Wesley, 1994

Web Site Resources

Digital Web - www.digital-web.com

A List Apart - www.alistapart.com

Don Norman's jnd website - www.jnd.org