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