Article
0 comment

LivingGreener website

LivingGreener.gov.au home page

LivingGreener.gov.au home page

LivingGreener.gov.au centralises a lot of knowledge available on living more sustainably, especially government information about rebates, grants and loans available. Although there are many websites out there that tackle various aspects of sustainability and what we can do about it, this website’s unique strategic goal is to centralise lots of disparate informatio, encourage further activity, and increase the community’s awareness and uptake of rebates and grants available from the government.

I and other consultants were involved at PTG Global with the user experience design for LivingGreener, including:

  • Personas and want maps design based on user research, website traffic analysis and statistics from the Australian Bureau of Statistics
  • Information architecture, including an overall conceptual model based on leading people at whatever point they were at, on a journey towards being more active to live more sustainably
  • User interface design, with wireframes and prototypes and working with content writers to structure content to integrate action points throughout the website

Go to: livinggreener.gov.au

Article
0 comment

Interpreting usability heuristics for websites, intranets and web applications

Heuristic evaluation is a common technique for assessing the usability and business performance of websites, intranets and web applications. It involves checking a website against a set of best-practice guidelines to identify any issues to fix or improve.

A commonly-used set of guidelines is a set of ten heuristics published by Jakob Nielsen (Molich and Nielsen, 1990). These are listed below, with their original explanations in italics.

These guidelines are over ten years old, and aimed more at desktop software. They’re still an effective consistent application of ‘common sense’ principles, but aren’t optimal for online interaction design and usability. I went searching for some contemporary commentary on these heuristics but couldn’t find much, so I thought I’d write some descriptions on how to interpret each guideline for websites, intranets and web applications, rather than just software. Hope they’re helpful for you.

Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

This first guideline relates most closely to systems that lock user access while carrying out a process, such as making a person wait while searching the system, or validating credit card information. If a person has to wait, they should be given some sort of estimation of status, and how long they will have to wait. Simple indicators like a progress bar are useful for setting up an accurate expectation of time required for the person to wait.

The option to cancel is also useful; an explicit Cancel button is a better method of stopping a process, rather than allowing someone to resort to using the Back button on the browser, which may trigger a system error.

Match between system and the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Websites should be designed to harness the existing domain model – i.e. the real-world concepts, patterns and language of the domain – in which the website will be used. Audiences that are familiar with the domain will find the website to be more intuitive.

This means using navigation labels, language and terminology that is free from jargon and other technical language and references. Sometimes, though, technical language is necessary if the audience at which the website is targeted is familiar with this technical language.

User control and freedom

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

This guideline relates more to applications (like word processing software) than websites, where user actions are much more tied to functions on something (like a document), where it is important to allow a reversal of action (undo).

But it is still linked to the visibility of system status and placing system control firmly in the hands of the user. For the purposes of websites, it’s important to always indicate orientation within the website: where in the website hierarchy the person is, and the path back to a familiar location (e.g. the home page).

Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Whether the ‘platform’ in the guideline above is an operating system, a software family, or websites in general, there are conventions that people are familiar with that are useful for all systems to follow. People arrive at a website carrying expectations of website behaviour learned from all other websites they have visited. For example, the logo of a company on a website tends to be linked to the home page.

Consistency is also crucial within websites, in terms of the tone and language used, the layout and formatting of the page design, and the navigation appearance and behaviour.

Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Online forms and multi-step sequences on websites should be crafted to maximise people’s understanding of the task at hand, as well as minimising the chances of incorrect information entry.

Modern AJAX-based form field validation methods can give instantaneous feedback, so that people are aware of incorrect information in form fields well before they click the Submit button.

Recognition rather than recall

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

In a similar way to the consistency and standards guideline above, websites will be easier to use if the elements involved in a task or process are all displayed to the person, so that the person need not rely on memory about those elements as well as thinking about how to perform the task at hand on an unfamiliar website. A simple example to display an online cart’s contents and total price at all points during the shopping, checkout, delivery and payment sequences for an online sale.

This guideline is also crucial for the display of navigation. If a person is viewing a page that is four layers deep within a website, the labels for all four layers should be clearly visible in the navigation.

There may also be the expectation that the website should recognise return visitors, or partially-completed transactions. If someone has already entered information into a website, it should capture it and re-display it when appropriate, so that they shouldn’t have to enter it again.

Flexibility and efficiency of use

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

This guideline is aimed squarely at desktop software, which could include several ways to achieve the same task. For example, formatting text as bold in word processing software could be triggered by selecting the function from a top menu, a toolbar button, a keyboard shortcut, or a selection from a menu activated by a click of the right mouse button.

Allowing users to tailor frequent actions also hints at the ability to create macros – or pre-set sequences of actions – and assigning custom keyboard shortcuts to those actions.

Websites can still implement this guideline by assigning more frequently-used actions or more frequently-accessed pages several methods of access, such as sets of ‘quick links’, and more prominent navigation cues and links. Bookmarks, whether managed on a website (such as delicious.com and dig.com), or part of the browser software, are another example of how people can tailor their online experience to cater for more frequently-accessed websites.

Websites that are more optimised for accessibility feature shortcut keys to trigger primary navigation links, so that the keyboard can be used to navigate the website in addition to (or rather than) the mouse.

Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Although this guideline has been written with software in mind (‘dialogues’), the principle of integrating visual design with functionality remains the same: the visual design of a website should facilitate and not distract from the goals of the website.

Whether those goals are to simply expand a company’s brand experience into the online space, or to convert casual interest in a product to an online sale, or to convert an interested observer into a committed ambassador for a not-for-profit cause, design elements should be assessed for whether they are helping the goals or hindering. Following the guideline above, if they are hindering then it should be considered to modify or remove such elements.

Studies also indicate that a website’s visual design is an integral part of its performance. A Stanford University research study (How do People Evaluate a Web Site’s Credibility? Fogg et al, 2002) found that the ‘design look’ of a website was mentioned most frequently in terms of how online audiences assessed a website’s credibility.

Help users recognize, diagnose and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

This guideline’s heritage is also from desktop software, but the intention to articulate clear messages and solutions is just as applicable to websites, especially applied to broken links, form validation messages and instructional text.

Examples of implementing this guideline include tailored 404 (‘File not found’) error pages that offer alternative courses of action (such as links to key content pages and a search function), and using AJAX-powered real-time form field validation with descriptive help text.

Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

The complexity and comprehensive function offerings of most software require help documentation of some sort, but websites should not require accompanying help text. Sound information architecture, consistent navigation, well-designed layouts and clear well-written content should be enough for websites to be intuitive and easy to use.

Notable exceptions include online forms and web applications that serve specific domains or specific skill-sets. In these cases, help text that is clear, concise and contextually-relevant, located next to form fields, greatly increases form usability. There are also plenty of conventions that online forms should use, to take advantage of online audience’s previous experience of forms on other websites, such as the ‘shopping cart/checkout/payment’ pattern.