Graphics tutorials - GIMP 2.6

To watch more like this go to http://www.youtube.com

Assignment 1 Part C - Website design report

Executive summary

Analysis

The document describes conceptualization, design, production and test phases of the project for developing the Website for Nubbings hardware.

Standards used

XHTML with transitional doctype validation according to W3C validation, CSS with W3C validation, javascript, .mov, .avi, .wav, .jpg multimedia technologies, Level A accessibility compliance to WCAG 2.0

Testing strategy

Combination of automated/online tools and individual testing criteria will be used for unit tests and Website tests.

Storyboards

See design section.

Layout

Liquid layout, three column content pages, top and left hand side navigation, breadcrumb navigation

Multimedia

Images – Easy to recognize, capture a variety of detail,
Audio – Ideal for conveying instructions, explaining a process
Video – Ideal for explaining a process

Accessibility

Significance – Allow access to information for every person regardless of their ability, need or preference

Compliance guidelines – Web content accessibility guidelines 2.0 Level A compliance

Conceptualization

Nubbings Hardware has over 100 stores across the eastern side of the country and Tasmania. The wide range of products the company stocks include hardware, home improvement, paint and accessories, power tools and gardening needs. Quality and service is the pride of Nubbings.

Company aim is to provide further service by building a Website which will enable customers to access their product range, DIY project information, FAQs and contact staff via email for further assistance.

Target audience –

DIY enthusiasts, trades people

Gender: male and female

Age: mostly adults

Language style: easy and informative

Interests: home improvement, renovation, gardening

Short term goal –

Working site prototype should be available by 4th June 2010

Home page and main content pages will be functioning

Analysis

Information topics

Product range – Hardware, gardening, power tools, paint, home ware & accessories

DIY projects – Images, animations, videos, audio

FAQs – Categorised list of FAQs

Contact us – List of contact numbers, email ids

About us – Company profile, store locator

Functionality requirements

The site will provide a product search facility in the product page.

The site will provide a DIY project search facility in the DIY page.

Customers will be able to email staff requesting more information on

specific problems they encounter with projects or products

Environmental requirements

Typical target audience requirements

Hardware – x386 PCs, Mac computers

OS – Windows, Mac, Unix/Linux based

Memory – 512 MB minimum

Screen resolution – 800 * 600, 1024 * 768, 1280 * 1024

Bandwidth – 56 Kbps modem access minimum

Web hosting requirements

Web server – Unix OS and Apache Web server, email, support for server side scripting

PostgreSQL or MySQL database

Web based file manager for uploading files or minimum FTP access

Content requirements

Corporate branding – Company logo and company tag line “quality and service – our pride” must be present. Corporate colours must be clearly evident on the site.

Review competitor sites

Bunnings hardware – Web site was reviewed and a report is compiled at http://sf-itc216.blogspot.com.

Design

Site organization –

A hierarchical site organization will be used for the Website. The home page will be distinctive from other content pages and the information topics will be used to create the main navigation of the site. Each content page will contain a left side vertical menu as the second level navigation.

Hierarchical site organization is chosen as it will enable easy grouping of related content, provide a logical structure for the site and will only use 5 categories in the main navigation. 5 items are easy for humans to remember according to the seven plus or minus two rule (Miller, 1956).

Page layout –

Page layout is designed as a three column layout on all content pages except for the home page. This has been suggested by Felke-Morris (2009) as the most interesting layout. This layout enables the pages to be designed combining different types of content organized into distinct sections.

Navigation –

Top menu navigation will be present in the content pages with a link to home page. Home page will provide access main information content via grouped sets of links.

Breadcrumb navigation will be included in the site allowing users to easily identify the location they are in, one-click access to higher site levels & take up very little space as identified by Neilsen (2007)

Fonts –

Content text will be created with the use of common fonts such as Arial, Verdana. This facilitates pages to be displayed consistently on a variety of browsers and is a best practice identified by Felke-Morris (2009).

Graphics –

Graphic design best practices of Web color palette use, antialiased text images and small image file sizes (less than 8K) will be used for commonly used graphics on the site.

Images –

Image resolution will be set to 72 pixels per inch as suggested by Lengel (2002) the most suitable resolution for Web. Actual images of products will be shown on the products page enabling people to see what the product looks like exactly, packaging and the size where applicable. Accessibility criteria will be complied by the use of “alt” and “longdesc” attributes and usability will be achieved by enabling efficient page loading via specifying height and width attributes for the images.

Audio –

DIY section will include audio instructions as it will be an ideal way to convey instructions and information over the Web according to Lengel (2002). An example would be checking all components are in the package after buying a product and preparing it for first time use. The files will be created in .wav format as it is widely used in Web and user controls will be provided to start & stop the content from playing. 22 KHz sampling will be used to create the files. Accessibility will be achieved via including text alternative to the sound media and usability will be provided via including links to available/required browser plugin downloads.

Video –

DIY section will include videos as it is an ideal media type to explain a process on the Web according to Lengel (2002). An example is fixing the battery to a power tool. Using a video the process can be shown exactly as an store assistant would instead of a lengthy instruction manual. The files will be created in .mov or .avi file formats with 240 by 180 pixel size to allow for 56K modem connections. Accessibility will be achieved via including text alternative to the media and usability will be provided via including links to available/required browser plugin downloads as well as user control to start, stop the video playback.

Prototype design –

• Page title -Home page
• Description - Main page of the Website. This will be the entry page for most users.
• Suggested graphic elements - Company logo, an image or graphic to enhance visual interest
• Other special features - Visibility and access into all available content within the site

• Page title - Products page
• Description - Page for products information topic
• Suggested graphic elements - Company logo, images of products for the selected category or search
• Other special features - Search tool for products
• Special information needs - Images prepared and optimised for Web use, accessibility support for images

• Page title - DIY page
• Description - Page for DIY information topic
• Suggested graphic elements - Company logo
• Other special features - Main video of the latest DIY project and access to previos DIY videos, a list of popular DIY videos
• Special information needs - Videos prepared and optimised for Web use, accessibility support for video

• Page title - FAQ page
• Description - Page for FAQ information topic
• Suggested graphic elements - Company logo
• Special information needs - List of categorised list of customer raised FAQs

• Page title - About us page
• Description - Page for about us information topic
• Suggested graphic elements - Company logo, an image or graphic to enhance visual layout
• Other special features - Top main navigation bar, left column secondary navigation bar

• Page title - Contact us page
• Description - Page for contact us information topic
• Suggested graphic elements - Company logo
• Other special features - A form to fill out and submit

• Page title - Store locator page
• Description - Page for locating nearest store for the entered postcode or suburb
• Suggested graphic elements - Company logo
• Other special features - A map of store location closest to entered postcode or suburb

Production

Software requirements

Web authoring tool – Amaya 11.3.1

Coding – Komodo edit 5 IDE with SVN source control

Audio – Audacity 1.2.6

Graphics, image processing – GIMP 2.6.8, Inkscape 0.47

Accessibility guidelines to follow

An accessible Website caters for people with disabilities to use the Web by providing alternatives to content or tasks they cannot otherwise access. Also people with changing needs such as aging, or people with different needs, preferences and situations are also catered to by making a Website accessible according to W3C(2008c). Due to the nature of Web and technologies accessibility barriers to print, audio or visual media can be much more easily overcome providing unprecedented access to information and interaction for people with disabilities according to W3C(2008c)

Web site development will follow Level 2 Web content accessibility guidelines as suggested by W3C (2008a) and will aim to meet HTML, CSS, SMIL & Client side scripting technologies to achieve level A success criteria. Below 12 items will be focused as suggested by W3C (2008b) reference list to meet the above requirement.

WCAG 2.0 quick reference(http://www.w3.org/WAI/WCAG20/quickref/Overview.php) is listed below as a guideline to be used in the development.

• 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed
  into other forms people need, such as large print, braille, speech, symbols or simpler language.
• Suggestions to be followed in production
• Short text alternative
• H36: Using alt attributes on images used as submit buttons
• H2: Combining adjacent image and text links for the same resource
• H37: Using alt attributes on img elements
• H53: Using the body of the object element
• Long text alternative
• H45: Using longdesc (HTML)
• H53: Using the body of the object element
• 1.2 Time-based Media: Provide alternatives for time-based media.
• Suggestions to be followed in production
• G58: Placing a link to the alternative for time-based media immediately next to the non-text content
• H53: Using the body of the object element
• 1.3 Adaptable: Create content that can be presented in different ways (for example simpler
  layout) without losing information or structure.
• Suggestions to be followed in production
• G138: Using semantic markup whenever color cues are used
• H51: Using table markup to present tabular information
• H44: Using label elements to associate text labels with form controls (HTML)
• H65: Using the title attribute to identify form controls when the label element cannot be used (HTML)
• H71: Providing a description for groups of form controls using fieldset and legend elements (HTML)
• H85: Using OPTGROUP to group OPTION elements inside a SELECT (HTML)
• H48: Using ol, ul and dl for lists (HTML)
• H42: Using h1-h6 to identify headings (HTML)
• 1.4 Distinguishable: Make it easier for users to see and hear content including separating
  foreground from background.
• Suggestions to be followed in production
• G14: Ensuring that information conveyed by color differences is also available in text
• G122: Including a text cue whenever color cues are used
• 2.1 Keyboard Accessible: Make all functionality available from a keyboard.
• 2.2 Enough Time: Provide users enough time to read and use content.
• 2.3 Seizures: Do not design content in a way that is known to cause seizures.
• 2.4 Navigable: Provide ways to help users navigate, find content and determine where they are.
• Suggestions to be followed in production
• H69: Providing heading elements at the beginning of each section of content (HTML)
• H50: Using structural elements to group links (HTML)
• 3.1 Readable: Make text content readable and understandable.
• Suggestions to be followed in production
• H57: Using language attributes on the html element (HTML)
• 3.2 Predictable: Make Web pages appear and operate in predictable ways.
• 3.3 Input Assistance: Help users avoid and correct mistakes.
• Suggestions to be followed in production
• G83: Providing text descriptions to identify required fields that were not completed
• SCR18: Providing client-side validation and alert (Scripting)
• G84: Providing a text description when the user provides information that is not in the list of allowed values
• G85: Providing a text description when user input falls outside the required format or values
• 4.1 Compatible: Maximize compatibility with current and future user agents, including assistive
  technologies.
• Suggestions to be followed in production
• G134: Validating Web pages
• G192: Fully conforming to specifications
• H88: Using HTML according to spec

Organize site structure

Develop and unit test

Each Web page will be tested with the test criteria identified under the testing section.
Additionally there will be a check list created to test each page for the unique features & functionality within the page.

Testing

Different browsers –

IE version 7.0, FireFox version 3.0, Safari version 4.0, Chrome version 4.1

Web site appearance and functionality should be available and function as it was designed on above browser versions.

Screen resolutions –

800* 600 minimum, 1024 * 768, 1280 * 1024

Web site appearance and functionality should be available and function as it was designed on above browser versions.

Accessibility validation –

www.cynthiasays.com

www.vischeck.com/vischeck (for colour deficiency testing)

Mark up validation –

W3C validation service for HTML and CSS

Javascript –

Test the Website by disabling the javascript on the browser

Images –

Test the Website by disabling the images on the browser

References

• Felke-Morris, T, 2009, Web development & design foundations with XHTML, Pearson education
• Lengel, J, 2002, The Web wizards guide to multimedia, Addison Wesley
• Miller, G, 1956, The magical number seven, plus or minus two,
  Retrieved from http://psychclassics.asu.edu/Miller/
• Nielsen, J, 2007, Breadcrumb navigation increasingly useful, Alertbox,
  Retrieved from http://www.useit.com/alertbox/breadcrumbs.html
• W3C, 2008a, Web content accessibility guidelines (WCAG) 2.0,
  Retrieved from http://www.w3.org/TR/WCAG/
• W3C, 2008b, How to meet WCAG 2.0,
  Retreived from http://www.w3.org/WAI/WCAG20/quickref/Overview.php#ensure-compat
• W3C, 2008c, Introduction to Web accessibility,
  Retrieved from http://www.w3.org/WAI/intro/accessibility.php

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.

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.

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