iT4Communities - Before and After

These design changes were carried out following a heuristic evaluation of the iT4C website. Find out about our approach to heuristic evaluations.

Problems	Solutions

Placing links above the main site logo falsely gives the impression that they lead to separate domains. Equal importance is given to all site sections irrespective of their usefulness. It's hard to tell where you are in the site. It's hard to tell that you've even come to the right site (note: this is not the ICT Hub website, iT4C is part of the consortium delivering ICT Hub). A meaningless tag-line isn't much help. Gimmicky stock photography detracts from the site's credibility. If you're interested in your site's credibility you might want to read the Stanford Guidelines for Web Credibility. Heavy-handed content styles make the page feel cluttered. Items in the left-hand menu are saturated with a profusion of redundant graphical devices (lines, gaps and bullets). Items in the left-hand menu are not very clickable (only the text can be clicked, not the space around it). Pages waste space by not filling the window.	We moved the main links to below the logo making it obvious that they are part of, rather than alternatives to, this site. We placed links into 2 groups depending on their importance with links like contact us being demoted to a small header area. By highlighting the link to the current page, in this case the homepage, we allow visitors to see where they are at a glance. We demoted the sponsor's (ICT Hub) logo, allowing the main site logo to fulfill it's function of telling visitors where they are. The client supplied an improved tag-line: introducing volunteer IT professionals to charities needing IT help which does a better job of getting across the point of the site. Find out more about writing taglines. We replaced the nasty stock photography with a subtle gradient to maintain visual interest in the top of the page. (Following the principle of Occams Razor) we created serene content styles. We used minimal design elements to create a much calmer but equally functional look and feel for the left-hand menu. By making the link area fill the perceived buttons, we made the site feel more responsive. Interaction geeks among you may have noticed that this column of buttons now hugs the edge of the page – making them easier to click when the browser is in full screen mode. Users can make the page as wide or as narrow as they like because content now occupies 100% of the window.

Problems

Solutions

Placing links above the main site logo falsely gives the impression that they lead to separate domains.
Equal importance is given to all site sections irrespective of their usefulness.
It's hard to tell where you are in the site.
It's hard to tell that you've even come to the right site (note: this is not the ICT Hub website, iT4C is part of the consortium delivering ICT Hub).
A meaningless tag-line isn't much help.
Gimmicky stock photography detracts from the site's credibility. If you're interested in your site's credibility you might want to read the Stanford Guidelines for Web Credibility.
Heavy-handed content styles make the page feel cluttered.
Items in the left-hand menu are saturated with a profusion of redundant graphical devices (lines, gaps and bullets).
Items in the left-hand menu are not very clickable (only the text can be clicked, not the space around it).
Pages waste space by not filling the window.

We moved the main links to below the logo making it obvious that they are part of, rather than alternatives to, this site.
We placed links into 2 groups depending on their importance with links like contact us being demoted to a small header area.
By highlighting the link to the current page, in this case the homepage, we allow visitors to see where they are at a glance.
We demoted the sponsor's (ICT Hub) logo, allowing the main site logo to fulfill it's function of telling visitors where they are.
The client supplied an improved tag-line: introducing volunteer IT professionals to charities needing IT help which does a better job of getting across the point of the site. Find out more about writing taglines.
We replaced the nasty stock photography with a subtle gradient to maintain visual interest in the top of the page.
(Following the principle of Occams Razor) we created serene content styles.
We used minimal design elements to create a much calmer but equally functional look and feel for the left-hand menu.
By making the link area fill the perceived buttons, we made the site feel more responsive. Interaction geeks among you may have noticed that this column of buttons now hugs the edge of the page – making them easier to click when the browser is in full screen mode.
Users can make the page as wide or as narrow as they like because content now occupies 100% of the window.

Accessibility

In addition to proposing the design changes listed above, our brief included delivery of a template for the new design developed in HTML and CSS. Behind the scenes the original iT4C site had a significant number of problems relating to accessibility. These problems had been identified in an independent review carried out by AbilityNet.

To address these accessibility issues, we rebuilt the page using strict standards-compliant XHTML 1.0 so that the content would all be displayed in a sensible order and could be easily understood when viewed without any styling applied to it (both by humans and/or any device that supports this standard, such as a screen reader for users with visual impairments). We then developed and applied the design styling using the CSS 2.0 standard.

The template was tested for consistency in Firefox 2.0 (Windows, Mac and Ubuntu Linux), Internet Explorer 6 and 7 (Windows), Opera 9 (Windows) and Safari (Mac).