Wednesday, March 10, 2010

Assessment 1 Part B - Usability test

Website

www.bunnings.com.au

Test script

My name is Sanjeewa, and I’m going to be walking you through a Website usability test today.

I am trying to find if it is easy and clear for people to use a particular
web site for a company.

First it is important to note that we’re testing the web site, not you.
You don’t need to worry about making mistakes.There is no wrong action or
answer. You can select or choose what you think is the right answer or
action.

I will now open the home page of the website for you.

First, I’m going to ask you to look at this page and tell me if you can,
Identify whose web site it is,
What do you think can be done on the site,

Now I’m going to ask you to do this task without using Search facility on the site.

Scenario:
Imagine you need to replace your kitchen's sink tap with a new stainless steel tap. And you have decided to find a stainless steel kitchen sink tap and it's price using this web site.

Objective:
To find out if it is clear for the Website users to perform a very common task and interpret the results.

Expected outcomes:
Find exactly what they are looking for.
Can't find what they are looking for and the reason is clear. Ex: the item is not sold, item is sold but not shown on the Website.
Can't find what they are looking for and the reason is not clear. Ex: not sure if the item is sold, not sure if the item is shown on the Website.

Observations

Test subject one
Identify site - Easily identified, familiar with Bunnings warehouse stores

Things that can be done - Was able to easily identify and interpret the top navigation provided. Was not clear about Bunnings trade.

Actions performed to achieve task -
Identify and use the navigation bar - Used the right hand navigation links, selected Bathroom and kitchen link,
Identify the correct product range - Yes
Browse for the required product - User was not clear once the page is displayed what should be the next action should be. The image at the main section of the page contain a list of items, including "Sinks and Tapware" and provides a link labeled "For our full range, please visit your nearest store".

User interpreted this as clicking on the link which will enable the user to view the full list of products.

Then used the top navigation, used "Our range" tab, clicked on "Bathroom and Kitchen" link which displayed the same previous page as in the above step.
It wasn't clear all products are not listed.

User comment - I am not sure how to find the kitchen tap, I think it's not on the Website.

Test subject two
Identify site - Was able to identify and familiar with Bunnings warehouse stores

Things that can be done - Was able to identify and interpret the top navigation provided.

Actions performed to achieve task -
Identify and use the navigation bar - Used the top navigation bar, selected Bathroom and kitchen link,
Identify the correct product range - Yes
Browse for the required product - User was not clear once the page is displayed what should be the next action should be. Spent more time looking at all the other navigation links trying to verify if there is a more appropriate link provided.

When pointed to the image at the main section of the page containing a list of items, including "Sinks and Tapware" and a link labeled "For our full range, please visit your nearest store".
User interpreted this as clicking on the link which will enable the user to view the full list of products. Clicking on this link user arrives at a page to select the store locations and addresses of store locations.

It wasn't exactly clear if the taps are included on the Website or if this is the right actions to locate it.

User comment - I am not sure how to find the kitchen tap, may be it's included on the Website, but I can't find it.

Recommendations

The text should clearly convey for products not listed on the web site, the user need to visit the store or an alternative option such as a customer service contact number.
Also the Website should be utilised to convey the full range of products that are stocked.

Friday, March 5, 2010

Assessment 1 Part A - Website Review

Website

Bunnings Warehouse

URL

http://www.bunnings.com.au

Description

Bunnings is a hardware and home improvement business with stores located across Australia.
Their aim is to provide lowest prices on all stocked items.

Image of homepage of Bunnings.com

Target audience

Their Web site is aimed at serving the customers, mainly adults who are home owners, renovators or in the building and home improvement industry. The company also intend to communicate information to general public on how the organisation is helping the community and environment, information for their suppliers and people looking for employment.

For customers the web site provides a variety of information. The range of products stocked, DIY videos and instructions. Interactive features provided to customers are tools such as paint amount calculator or flooring cost calculator and the personalized gift card creation feature.

Home page

Home page of a Website is the most likely page many users will visit in a Website.
Therefore it should convey key ideas of the bussiness, assist users to find what they need, reveal site content and use visual design to enhance the site (Neilsen, 2002).

Distinctive Bunnings logo and the company tag line "lowest prices are just the beginning" are found in the top banner of the website. Corporate information can be accessed with menu tab contact us & about us. Another menu tab provides information on sustainability solutions which increases company credibility.
(Nielsen, 2002) described including a one-sentence tag line and grouping all corporate information in one distinct area as important criteria for making the site's purpose.

A search facility is provided to help users find what they need.

Examples of real site content, link names with most important keywords are important to reveal the site content to users (Nielsen, 2002). Bunnings have achieved this by naming menu items such as our stores, product range and gift cards. The flash animation on the home page also displays real products available within the stores enhancing the sites content.

Images of staff are shown with their corporate uniform making it easy for people to relate to actual store assistants. This is described by Nielsen (2002) as using meaningful graphics to enhancing visual design rather than decorating the pages with stock art.

On the other hand Nielsen (2003) prefers using a liquid layout for web sites allowing the users to adjust page size. Bunnings uses a jello design that centers the content the browser. Also the navbar has a home page link which is described by Nielsen (2003) as a cause for the user to doubt the current location they are at and a waste of time clicking a link leading to the current page.

Changing the site design from jello design to liquid design can be achieved by utilising CSS techniques. Configuring the width property to 100% will enable the browser to display the content on the whole browser window. Along with this initial change configurations for spacing, margins, text, images and page layout columns need to be considered too.

The home tab found on the navigation bar should be disabled once the user is on the home page. Likewise the corresponding tab for the page should be turned off once the user is on a page that's featured on the navbar and highlight in a way that it indicates the current location.

Positives

  • Convey key ideas of the bussiness
  • Assist users to find what they need
  • Visual design to enhance the site
  • Search facility provided

Negatives

  • Jello site design
  • Providing a link to the page it self

Improvement

  • Use CSS techniques
  • Turn off menu items based on page


Navigation

The guideline from Web Accessibility Initiative (2000) on Website navigation is to provide clear and consistent navigation mechanisms. This is to increase the possibility and ease of finding the information a person will need from the Website. Bunnings Website employs a top navigation bar as the main navigation mechanism of the site. White letters on the red background provide good contrast. Terms used for labeling the menu items are appropriate for the target audience and the main tasks they will perform on the site.

On each of the site's pages a left hand side navigation bar is displayed clearly indicating the current page the user is at.

Breadcrumb trails are provided on all pages increasing the web site usability as suggested by Nielsen(2007). They provide a secondary form of navigation and also allows the user to return to higher levels with one-click.

A negative aspect of the navigation is DIY and Gift cards appear as two separate items on the main navigation bar as well as a second level item within Our range from the main menu. Therefore grouping of these items could have been improved by placing them only in one place.

Positives

  • Clear and consistent navigation
  • Use of breadcrumb navigation

Negatives

  • Same item placed in different categories of menu

Improvement

  • Review and categorise items
  • Reduce the number of tabs in the main navigation

Page layout

The site uses a jello page design and a three column page layout consistently on all of the sites pages. Left side column for a side navigation menu and a right hand side column to change your store location function are provided. Middle section of the page provides a clear page heading of what the page is about and the main content.

Use of adequate white space is a concept to increase readability (Felke-Morris, 2009). Bunnings Website has used white space on the pages to separate blocks of text as well as images and text.

Positives

  • Consistent page layout
  • Good use of white space

Negatives

  • Jello page design

Improvement

  • Utilise a liquid page design

Color scheme

Bunnings Website is consistent with their corporate color scheme of green and red. However this poses an accessibility issue due to a most common color blindness for men which include difficulty distingguishing between red and green.

World wide web consortium,(2005) recommends using other additional information such as text descriptions of colors or indicating required fields by placing an asterix(*) to convey important information apart from color and the provision of user overrides of the website styles.

Positives

  • Consistent color scheme

Negatives

  • May cause problems for people with color blindness

Improvement

  • Use text other marker to convey import information

Graphics, images and multimedia

Multimedia has been used to increase the site presentation and user experience. The flash content provided on the main page is displayed properly on browser versions Firefox 3.0.1, Google chrome 4.0, Safari 4.0 and IE 7.

If the browser does not have adobe flash plugin installed the web page is displayed with a message stating the fact as well as a link to download the plugin.

Turning off the browser images causes the site to not display the main menu.

Positives

  • Multimedia has been used to enhance the site interactivity
  • If required plugins not found a link provided to download

Negatives

  • Without images the top navigation bar does not work properly

Improvement

  • Provide text equivalent for every non-text element

References

  • Felke-Morris, T, 2009, Web development & design foundations with XHTML, Pearson education

  • Letourneau. C., Freed. G., 2000, Provide clear navigation mechanisms, Checkpoints for guideline, W3C, Web accessibility initiative,
    Retreived from http://www.w3.org/WAI/wcag-curric/chk14-0.htm

  • Nielsen, J, 2002, Top ten guidelines for homepage usability, Alertbox,
    Retrieved from http://www.useit.com/alertbox/20020512.html

  • Nielsen, J, 2003, Top ten most violated homepage design guidelines, Alertbox,
    Retrieved from http://www.useit.com/alertbox/20031110.html

  • Nielsen, J, 2007, Breadcrumb navigation increasingly useful , Alertbox,
    Retrieved from http://www.useit.com/alertbox/breadcrumbs.html

  • World Wide Web Consortium, 2005, How people with disabilities use the web, Retrieved from http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/Overview.html