Testing ease of use

To make sure that the PSD web site is easy for someone to use I will be assessing and perfecting two different aspects of the site. This will be done by more testing and editing. The two aspects are:

• Accessibility
• Browser compatibility

accessibility

Ensuring that all the information on the site is accessible to all is essential. The company already prides itself in providing accessible software solutions, so their website has to be accessible. This has been done by conforming to the WCAG 1.0 standard at Priority Level Double-A.

The XHTML must also be validated to check for compliance with the XHTML 1.0 Strict recommendation. This was done when I tested the functionality of the site on the previous page. Therefore PSD is permitted to display the following image on each page of their web site.

Optimising the accessibility

While continuing my use of the very helpful tool: Watchfire WebXACT I discovered that the display controls that I had implemented for visually impaired users were each missing a vital element. The functions were using the event handler “onclick” on it's own without having the handler “onkeypress” too. Below is the code before editing:

<ul>
<li><a href="#" onclick="setActiveStyleSheet('High contrast','layout');return false" title="High contrast">&raquo; High contrast</a></li>
<li><a href="#" onclick="setActiveStyleSheet('Default style','layout');return false" title="Default style">&raquo; PSD theme (Default) </a></li>
<li><a href="#" onclick="setActiveStyleSheet('','layout');return false" title="Plain Text">&raquo; No style</a></li>
</ul>
<ul>
<li><a href="#" onclick="setActiveStyleSheet('Small Text','text');return false" title="Small Text">&raquo; Small text</a></li>
<li><a href="#" onclick="setActiveStyleSheet('Medium Text','text');return false" title="Medium Text"> &raquo; Medium text (Default)</a></li>
<li><a href="#" onclick="setActiveStyleSheet('Large Text','text');return false" title="Large Text">&raquo; Large text</a></li>
</ul>

Not having “onkeypress” stops users without a mouse or a pointer that uses the click function from using these controls. Indeed, the lack of this event handler was a fundamental design error. However, this has now been adjusted. Below the newly added code is emphasised:

<ul>
<li><a href="#" onkeypress="setActiveStyleSheet('High contrast','layout');return false" onclick="setActiveStyleSheet('High contrast','layout');return false" title="High contrast">&raquo; High contrast</a></li>
<li><a href="#" onkeypress="setActiveStyleSheet('Default style','layout');return false" onclick="setActiveStyleSheet('Default style','layout');return false" title="Default style">&raquo; PSD theme (Default) </a></li>
<li><a href="#" onkeypress="setActiveStyleSheet('','layout');return false" onclick="setActiveStyleSheet('','layout');return false" title="Plain Text">&raquo; No style</a></li>
</ul>
<ul>
<li><a href="#" onkeypress="setActiveStyleSheet('Small Text','text');return false" onclick="setActiveStyleSheet('Small Text','text');return false" title="Small Text">&raquo; Small text</a></li>
<li><a href="#" onkeypress="setActiveStyleSheet('Medium Text','text');return false" onclick="setActiveStyleSheet('Medium Text','text');return false" title="Medium Text"> &raquo; Medium text (Default)</a></li>
<li><a href="#" onkeypress="setActiveStyleSheet('Large Text','text');return false" onclick="setActiveStyleSheet('Large Text','text');return false" title="Large Text">&raquo; Large text</a></li>
</ul>

All I did was duplicate the “onclick” event's attributes and assigned them also to the new “onkeypress” event handler. Now the entire site, including the blog and the display controls is easy for anybody to use.

browser compatibility

To make sure that the website is easy to use I tested it in the top three web browsers:

1. Internet Explorer
2. Mozilla Firefox
3. Opera

The web site's compatibility with the most common screen resolutions was also checked. The three most common resolutions are: 800x600, 1024x768 and 1280x1024. I also tested the site using the well known text-only web browser: Lynx for extra assurance of solid usability.

Internet Explorer

The most widely used version of IE is 6, but now version 7 has come out it I felt it necessary to test the site in both. Below are screenshots of the index.html page in both versions at 1024x768.

The site performed very well in IE and "looks very professional" according to some of my colleagues.

Mozilla Firefox

The latest version of Firefox is 2.0 and seeing as it is an open-source piece of software I took the puritanical route of testing it on a open-source platform: Linux. More specifically, the ubuntu distribution. Below are screenshots of the site in Firefox 2.0 on ubuntu 6.10 at 800x600 and 1024x768resolutions.

The default stylesheet did not break on both occasions.

Opera

Below are screenshots of the site in Opera 9 on ubuntu 6.10 at 800x600 and 1024x768.

Because Opera uses the same engine as Firefox (Gecko) the results were nearly identical.

Lynx

Below is a snapshot of the PSD in Lynx. As you can see the website's structure is in a logical order with the feeds at the top and the navigation appearing after a summation of the company's operation.

I am of the opinion that not many sites provide this level of ease of use to all internet users.

NEXT >