IT 4 Communities Heuristic Evaluation

Table of Contents

• Introduction
• Methodology
• References
• Results
• Sitewide (including navigation issues)
• Forms
• Volunteer and Charities registration forms

• Volunteer registration and login
• General members area issues

• Searching for work packages

• Requests for work packages

• Some comments about email

• Appendix

Key

Usability Issue

Severe Usability Issue

• Possible solution

Introduction

Methodology

References

Results

Sitewide (including navigation issues)

The site provides very little feedback to users about where they are. [1]

The top menu is above the site logo and there is a significant space between the menu and the page content which may cause the menu to be overlooked. The hierarchical position of these tabs suggests that they might be links to other, related, websites.

• Place the tabs below the logo.

The navigation contains links to the page you're already on. [1]

• Remove self referential inks.

Users can't tell which links they have followed in the past. [1, 4]

• Use a visited link colour.

General lack of task-oriented design. [1, 6, 10]

The site doesn't seem to have been developed with common tasks in mind. Instead it looks like a branded, slightly customised out-of-the-box database front end.

Even if users know the purpose of the website and have an idea of the tasks they want to carry out, the design and architecture does little to direct users towards their goals or inform them what the next steps in a task might be.

• (On the homepage) use a strapline and <title> to tell people what they at this site.
• Add prominent instructions to key pages - don't rely on elements within the sitewide navigation to show users what to do next.

Orange headings could be mistaken for links. [4]

• Create a visual style which differentiates Headings and links

Too many styles in general. [8]

• Redesign the site to effectively use a small palette of styles.

The inclusion and position of the IT4C logo in the header is problematic [4]

The IT4Communities logo and tagline in the header might get overlooked because it looks like a banner advert.

• Show only one logo (place it in the top-left).
  

The LHM varies significantly from page to page within main sections of the site and with no apparent consistency or logic. [4]

• Drastically reduce the number of items in the LHM.

Arbitrary Subdivision of The LHM. [4, 8]

Some menu items link to anchor points within pages. [4]

• Better to give menu items their own pages.

Navigation makes direct links to PDF files without warning. [1]

• Use a gateway page (more info link)

Link and page names are different. [4, 6]

The labels in the navigation menus should match closely if not exactly with the title and main heading of the pages that they link to. Failure to do this inhibits the user's capabilities for recall and hinders navigation back to a previously visited page.

Specific examples:

• Decide on the right term and stick to it.

Unnecessary visual devices used to add semantic meaning. [1, 4, 8]

The LHM contains several styled boxes within a single larger box. Each mini box has a border as well and uses horizontal lines as well as bullets to delineate the elements. These elements may be irrelevant and may make it more difficult to interpret the interface rather than easier.

• Redesign the LHM.

Text is generally too small for average users by default. [10]

• Make the text bigger.

Menu items are difficult to click. [5]

The clickable area of the links in the top menu and LHM is relatively small (when considered with the amount of space that there is to aim at around the links).

• Make the entire available space an active part of the link.

No sitewide search facility. [4]

• Consider adding a sitewide search facility.
• As a usefulness and findability issue, consider making the bulk of the content available for people to search without being logged-in.
  

The main logo image is not a link back to the home page. [4]

• Make the mail logo image alink back to the homepage on every page apart fromthe homepage.

Non standard location for site map link. [4]

• Place this near the search facility.

The order of top menu headings may not be optimized for the goals and expectations of site visitors. [2]

e.g. the 'Site Map' and 'About IT4C' links may be less relevant to the average user's task than the Volunteers, Charities and Companies links so they might be better if they placed after those links.

• Consider promoting the Volunteers, Charities and Companies links.

Documents are not properly structured [4]

Nested headings (i.e. h1, h2, etc) are not used properly (if at all) and there is a general lack of structure within pages.

• Content should be semantically marked-up, for example with heading tags.

Content is not presented or written in an easily digestible format. [2]

• Don't use links with titles like 'choosing' as they don't make sense out of context.
• Make sure each page has valuable and valid content (e.g. there are links to 'Profiles' but there's no content on that page - only an explanation that at some, unspecified time there will be).

Confusing terminology is used throughout the site. [2]

Inappropriate terminology is used in content, as link titles and form field labels.

Examples (this is not a complete list):

• Request ID
• Work Package
• Individual vs. Company
• Login ID
• Job Status
• Sharing contacts type
• Referring bodies
• Years in Industry
• Work package name
• Region detail
• Skill type
• Other skill type
• ICT Hub
• What is VCS IT?
• Profiles
• Project Definer
  

• Terminology should be carefully considered in order to ensure that they will be understood by the audience (e.g. 'Username' instead of 'Login ID'). This should be done on a sitewide basis (including error pages and emails).
• Acronyms should be expanded.
• Use more friendly, polite and non technical language

URLs are all ugly and unhelpful. [7]

• Use server software to mask these and present a more understandable addresses (mostly to benefit experienced users)

Don't make references to the physical layout of a page. [4]

e.g. Instructions on the volunteers page to 'Use the links on the left' make reference to the physical shape of the rendered page. This is bad because the way a page will be rendered (e.g. on a mobile device) can't always be predicted.

• References to elements in a page should refer to the element by name.

Forms

Forms take a long time to complete. [7]

• Reduce the number of times users must switch from mouse to keyboard in order to complete the form
• Reduce the number of required fields during signup and encourage users to add to their details later.
• Suggest a typical time for filling in this form along with stating the number of steps required.

Form fields do not provide enough clarity about what they are for. [2, 6]

• Sharing contacts type (it's not clear what the effect of selecting either of the available options will be)
• Login ID (the system should either be forgiving and allow mistakes - preferable - or should provide tips to reduce the likelihood of errors occurring)
• Password (the system should either be forgiving and allow mistakes - preferable - or should provide tips to reduce the likelihood of errors occurring)
• Address (this field is displayed as a text area so it looks like the whole address is expected but there are separate fields for town city, postcode, etc)
• Days between reading emails - tell them why you want this info (and why it is required)
• 'Email opt out' should be opt in rather than opt out.
• Other skill type (more information is required about what to put here)

Required fields are not obvious. [6]

• Don't denote required fields with asterisks. Spell it out in each case with 'required'.

Multiple selection lists are hard to use. [6]

• Replace these with groups of tick-boxes

Free text fields require formatted data. [5]

e.g. An error is generated when a user enters a post code such as 'BN12PQ' ('Post code must consist of two strings separated by space character') but there is no information suggesting that this is necessary.

• Be more forgiving and allow more flexibility in the data accepted.
• Provide a less error prone method of data input (such as separate fields).
  
• Suggest alternatives.
• Provide better instructions and catch these before the form is submitted (using Javascript).
• Provide case sensitivity information next to a form field where it is required or, better still accept data in any case
  

Forms should not need a cancel button. [8]

• Remove cancel buttons.

(In some instances) form labels are almost indistinguishable from links. [6]

• Create an alternative style for form labels.

Volunteer and Charities registration forms

Validation error messages are not displayed near the problems they refer to. [6, 9]

• Display error messages next to the fields that they relate to.

Validation error messages are not optimised for the target audience. [2, 9]

• Don't use words like 'integer'.

Not all errors are reported at the same time when a form is submitted. [1, 5]

When a form is submitted with errors, only some of the errors are highlighted to the user. After fixing these errors and resubmitting the form, more errors relating to different fields are reported.

• Highlight all errors at the same time.
  

Volunteer registration and login

By default drop-down lists (generally) show no options. [1, 6]

• Replace these with radio buttons (where a 'catch all' is set by default).

Members are required to login after successful registration. [8]

• Log users in automatically and be present them with the information they are most likely to want.

The login form uses the term 'User' the sign-up form used 'Login ID'. [4]

• Pick one term and stick to it across the site. I suggest 'username' as a better alternative.

General members area issues

Links related to user's accounts are too far from the user's name. [6]

The name is in the top right whereas the other links are in the submenu towards the bottom left.

• Group them together at the top.

After logging in there is no feedback to inform users that they are now logged in. [1, 6]

Once logged in users are shown nothing particulary useful and there is no clear task-oriented information or guidance.

• Present users with the information they are most likely to want after logging in and display clear indicators that users are logged in.

When logged in the links to the account information and member's area are not highlighted and are easily overlooked. [6]

• Use existing conventions to determine where such information is best placed and make sure it is prominent.

After creating an account, why is it necessary to agree to the disclaimer again when amending or updating your account details? [5]

• Don't make them do it again.

No feedback is provided to inform the user that they have been logged out. [1]

• Provide this feedback.

Searching for work packages

The search controls are not intuitive or easy to use and provide poor feedback [1, 6]

Users can't see all the options that have been selected in the lists so can't easily tell what the current search relates to. Also, multi-selection lists are less usable than indivdual links.

• Consider providing a browsing interface mechanism that allows users to see the options that they have selected at a glance.
• Use ordinary links or check boxes instead of multi-selection lists.

The search controls are too prominent. [8]

The search controls take up so much space at the top of the page that they may obscure the results from most users.

• Reduce the space that the search controls occupy or reposition them.

The search results are too many steps away from initial sign-up. [7]

• Since this is core information we suggest making them available on the homepage with an RSS feed.

The results appear inflexible and information could be presented more efficiently. [7]

The instructions to 'Click a column heading to sort by that column' should not be necessary. Even though the table columns can be sorted in this way, it is not clear from the design of the table. Results should be sorted by something relevant to the user by default (e.g. post code), not by ID number as at present.

• Make the column headers look clickable.
  
• Sort the results by something relevant to the user by default (e.g. post code).
• Let the search results expand to fill the screen (they are too narrow at present).
• Carry out some user research to determine what information should be displayed in this table.

Requests for work packages

Search capabilities are unnecessary for this task. [8]

A search interface is highly inappropriate for a dataset that typically contains 1 item.

• 'Requests for work packages' and 'Assigned work packages' could be a single page.
  
• 'Requests for work packages' should display a message telling users that they will be emailed when they're approved.

Whole pages used for status messages. [1, 8]

• Confirmation messages should be embedded inside useful pages (rather than being given their own page).
• When a user completes a task this is a good opportunity to suggest the next thing they could do.
  

Unnecessary confirmations. [3, 8]

• If it's really important to allow users to go back to a previous state after submitting a form, have the system carry out their original request and provide an obvious undo facility.

Lack of feedback about the number of steps involved in a task [1]

Assuming that the charity is signing up in order to define a project, there's no hint that this process involves more than one step.

• Try to reduce the number of steps required.
  
• Make it obvious to users that there are several steps in this process. For example by displaying numbered steps across the top of the page during the signup process.

Some comments about email

Too much text. [8]

e.g. 'Your project [my project] has been published to the IT4Communities website as [My Project]' I don't need to know what it's been published as unless name has become unrecognizable.

• Reduce the length of the footer - only include information that's going to be useful to most people.

The sender is unclear. [1, 2, 4, 7]

• Show a real a real person's name and email address in the header and show the person's name in the footer but don't mention another email address. This also has their benefit that they can be replied to.

Messages do not encourage action. [6]

• Use emails as an opportunity to provide useful links (but not too many, maybe 2 or 3 max).
• Send links to actual login pages or, better still, send links which log the user in automatically (which means they don't have to recall their login details).