Anda di halaman 1dari 15

Online Forms

Usability Design Guidelines

Department of Innovation, Industry, Science and Research


Version No. 1.3
The Hiser Group is a member of the Serco Group of companies
Copyright © 2006 the Hiser Group Pty Ltd. All rights reserved.
Even though The Hiser Group has reviewed this document, The Hiser Group makes no warranty of
representation, either expressed or implied, with respect to this document, its quality, accuracy,
merchantability, or fitness for a particular purpose. As a result this document is provided “as is” and
the reader assumes the entire risk as to its quality and accuracy.
In no event will The Hiser Group be liable for direct, indirect, special, incidental or consequential
damages resulting from any defect or inaccuracy in this document, even if advised of the possibility
of such damages.
The warranty and remedies set forth above are exclusive and in lieu of all others, oral or written or
implied. No employee of The Hiser Group Pty Ltd is authorised to make any modification, extension
or addition to this warranty.
The guidelines in this document remain copyright of The Hiser Group Pty Ltd. However, the
Department of Innovation, Industry, Science and Research may reproduce this publication in full,
modify it, store it in a retrieval system or transmit it in any form or by any means, electronic,
mechanical, photocopying, recording, or other wise to its partners as required. Any such publication
must include attribution to The Hiser Group in a prominent position.
Many of the designations used by manufacturers, developers and sellers to distinguish their
products are claimed as trademarks. Where the designations appear in this publication, and The
Hiser Group Pty Ltd was aware of the trademark claim, the designations have been printed in capital
letters.
Printed in Australia

Version No Date Authors

1.0 7 February 2006 Elisa Bond


Jessica Enders
1.0 16 February 2006 Lucy Henderson –
DIISR
1.2 7 July 2006 DIISR
1.3 10 September 2007 DIISR

Department of Innovation, Industry, Science and Research


Online Forms Usability Design Guidelines v 1.3
Contents

Contents
1. About these guidelines .................................................................................................. 4

2. Usability guidelines for online application forms........................................................ 5

2.1 Overall customer experience ................................................................................... 5


Make it easy for users to find the form ..................................................................... 5
Create a good first impression ................................................................................. 5
Encourage user trust................................................................................................ 6
Encourage user interest and feedback .................................................................... 6
Create a flexible design which will support the needs of different users .................. 6

2.2 Moving around the form (navigation, workflow & orientation)................................... 7


Make it easy for users to understand the workflow and structure of the form .......... 7
Make it easy for users to identify next steps (links and buttons) .............................. 7
Provide efficient navigation within the form .............................................................. 8
Provide users with a quick, efficient workflow .......................................................... 8

2.3 Reading the form (written content & language)........................................................ 9


Style of language ..................................................................................................... 9
Grouping of information ........................................................................................... 9
Make it easy to complete the content....................................................................... 9

2.4 Viewing the form (layout & presentation) ............................................................... 11


Page layout ............................................................................................................ 11
Use of images ........................................................................................................ 12
Readability ............................................................................................................. 12
Accessibility ........................................................................................................... 13
Appropriate use of colour ....................................................................................... 13

2.5 Interaction design................................................................................................... 14


Error handling ........................................................................................................ 14

3 Standards and other sources of information............................................................. 15


Accessibility ........................................................................................................... 15
Government Best Practice Checklists .................................................................... 15
Content .................................................................................................................. 15
Form performance ................................................................................................. 15
Interaction design................................................................................................... 15
Visual design.......................................................................................................... 15

Department of Innovation, Industry, Science and Research Page 3


Online Forms Usability Design Guidelines v 1.3
About these guidelines

1. About these guidelines


In January 2006, the Department of Innovation, Industry, Science and Research (DIISR) commissioned the
development of a set of general guidelines to assist their clients with designing useable and useful online forms.
This document contains usability guidelines that are specific to online forms.
“Usability” describes the ability of customers to use an online form to full advantage (so that the technology assists
and supports users, rather than hindering them), and so the form achieves business objectives.
The guidelines have been phrased with DIISR clients in mind. Also included is a brief summary of the impact of
each guideline upon the user experience. This is to help developers and designers understand how adopting the
guidelines will affect their users' experience.
The intended audience of this document are the form owners and organisations involved in the development of
online forms, particularly SmartForms, the dynamic and interactive electronic government forms. This document will
assist clients with the design and development of online forms that are useable by their customers.
.

Department of Innovation, Industry, Science and Research Page 4


Online Forms Usability Design Guidelines v 1.3
Usability guidelines for online application forms

2. Usability guidelines for online application forms


2.1 Overall customer experience
Make it easy for users to find the form
What to do How this impacts users
Provide text links to access the form in any appropriate context Supports a quick efficient workflow.
throughout your web site. Increases traffic to your form.
If the form is likely to be very important to or frequently used by clients: Users may give up if they experience
• Consider providing short cuts from the home page or main menus of difficulties or delays finding your form.
your web site to a page describing the form and its purpose. Some users may not even realise you
• Provide a URL that is simple, short & memorable offer the form.

If your customers include people whose first language is not English, Provides equity of access to your
ensure there are links to language options which direct them to other application form.
versions of the form, or to a translation service at an appropriate point in Increases the number of clients who
the user page workflow (e.g. the home page of your site or the main page potentially may complete your form.
of your form)

If your web site offers several similar forms, consider clarifying which Users sometimes navigate to the wrong
forms are appropriate for which users. page (despite clear labels).
If these forms are positioned in another part of the website, provide text Minimise frustration and time wasted by
links at the end of the introduction to redirect these users. completing the incorrect form.
Streamline the user workflow.

Create a good first impression


What to do How this impacts users
When possible avoid using embedded fonts in PDF files as they enlarge Less time to download and render a form.
the size of the file. Fonts that are available in Adobe Reader and not
embedded are:
- TimesRoman, TimesBold, TimesItalic, TimesBoldItalic
- Helvetica, HelveticaBold, HelveticaOblique, HelveticaBoldOblique
- Courier, CourierBold, CourierOblique, CourierBoldOblique
- Symbol, ZapfDingbats

The page title of the first page must clearly state the purpose of the form. Help orientate users by quickly
Provide one or two sentences that briefly clarify the purpose of the form confirming they have arrived in the page
and who should use it. Keep this text to a minimum of two sentences so it they expected.
does not overwhelm users. Use brief sentences. If there are multiple Make it easier to quickly scan text. Users
sentences start each sentence on a new line. frequently avoid reading large blocks of
text.
Tell users about the number of steps or pages in the form and how long The courtesy of informing users allows
it will take to complete before they are required to start entering details them to plan when they will complete the
into the form. form.
Supports user preferred workflow and
behaviour.
Make it clear where to go to begin using the form. For example, provide Make it easy for users to identify the
a prominent action button at the bottom right of the first page. If your form navigation of their next step.
has multiple pages, avoid making the user scroll and search for action
buttons on the first page.

Department of Innovation, Industry, Science and Research Page 5


Online Forms Usability Design Guidelines v 1.3
Usability guidelines for online application forms

Encourage user trust


What to do How this impacts users
Regularly review spelling and grammar as part of your publishing Spelling and grammatical mistakes and
process. broken links all undermine user
Regularly review links throughout the form to rectify any broken links. confidence in your services and your web
site.
Users interpret this to mean you do not
value their needs enough to make an
effort.
Only display up-to-date and accurate content. Currency of information is very important
Make sure the date the page was last updated is in the footer area of the to some users. Users may lose
form. confidence in the accuracy of information
you provide if the page content has not
This is particularly important if the type of information or service you been recently reviewed.
provide needs to change over time.

If applicable, ensure privacy, terms and conditions, and security Promote user confidence and trust in
policies are clearly displayed and users are directed to these at your services. Users value honesty and
appropriate times during the process. transparency.
Make sure these policies are in everyday language, in a legible font style
and uncluttered layout that is easy to scan.
Give users the option to print these details to read later.

Encourage user interest and feedback


What to do How this impacts users
Use a direct, active tone that is polite and courteous. Encourage users to develop a positive
For instructions address your customer in the second person (i.e. ‘you’). attitude to your service and your web site.
This makes them more willing to interact
with your agency and more likely to
complete the form.
Inform users about important details before they start the form detail. For Avoid users being frustrated or annoyed
example users often want to know costs, delivery times or turnaround if they are unable to complete the form
times for email responses upfront. quickly because they are missing a vital
Advise users about any information needed to complete the form bit of information.
particularly if they are not likely to have at hand and will need to obtain it
from elsewhere. (e.g. number for bank accounts, customer accounts,
passport number).

Create a flexible design which will support the needs of different users
What to do How this impacts users
Provide a link to allow users to correctly print any page within the form Users generally scan text and do not like
on A4 paper to read large amounts of text online.
Some users prefer to get on with the form
and read details at a later time (e.g.
terms & conditions) This supports an
efficient user workflow.
A single column layout for form content is preferable. This layout is easier for the user's eye to
scan.

Department of Innovation, Industry, Science and Research Page 6


Online Forms Usability Design Guidelines v 1.3
Usability guidelines for online application forms

2.2 Moving around the form (navigation, workflow & orientation)


Make it easy for users to understand the workflow and structure of the form
What to do How this impacts users
In the first page of the form, advise users about the number of steps or Users can confidently decide whether
pages in total and how long it will take to complete the form before they have sufficient time before they
users are required to enter details. commence.
See ‘Create a good first impression’ for other guidelines relevant to the Increases user trust
first page in the application form.

For multiple page forms, use a prominent visual style to indicate the Provides clear cues to orientate users.
number of steps or pages. The users’ current position within the form Help users feel in control of their
should be obvious to them as they progress. experience. Users are more likely to
complete longer forms if they have visual
feedback about their progress.
Allow users to see what is coming up.

Ensure the order of content in the form is designed as an efficient Save users time and effort.
workflow and is logical to the user to work through. This is in preference Make it easy for users to stay interested
to ordering the content to suit form developers or those processing the and focussed on filling the form in.
submitted data.
Users are more likely to complete a form
Use numbering for any lists of questions. that is logical and easy to follow.
Numbering questions can help users
orientate their position within the form. It
can also help with analysis of data
afterwards.
Provide a confirmation page after the application form has been Encourages confidence both in your
submitted: services and the overall process.
• Provide feedback to confirm the application form has been received.
• Advise users what will happen next.
• Be specific about timeframes if you need to contact them.
• Provide clear buttons for logical next steps to complete other tasks
within your web site.

Make it easy for users to identify next steps (links and buttons)
What to do How this impacts users
• For multi page forms, present all the main navigation items as a Makes it quick and easy to identify the
group of prominent action buttons in a row at the end of each page. navigation options and move onto the
• Use consistent positioning for buttons. Order buttons from least next step.
frequently used (on the left) to most frequently used (on the right). Users only need to look at the one
For example: location to identify what they can do next.
o The far right button should be the most preferred next step Users from a culture that reads left to
e.g. ‘Next X’. right, tend to favour the bottom right of
o To the left of this provide other options e.g. ‘W Back’. page.
o The button on the far left should be the least likely or most Consistent order and placement of main
‘dangerous’ option e.g. ‘U Cancel’ action buttons minimises error.
Provide text links and other buttons within the page content where Users should be able to predict the
users need and expect them. interaction of links and buttons.
• Ensure text links are easy to identify and are distinguishable from Reduces the potential for user confusion
other page text. Ideally, adopt the web standard of blue underlined and supports efficient workflow.
links. However, the visual style of links should be consistent with the Users should not have to waste time
rest of your web site. hunting around the page and hovering
• Use buttons where an action or function of some kind is performed. their mouse over text to identify where

Department of Innovation, Industry, Science and Research Page 7


Online Forms Usability Design Guidelines v 1.3
Usability guidelines for online application forms

Ensure the buttons are next to the information it affects. For the links are.
example, if a command button applies to a group of page elements,
display the button to the right of those elements.

Use labels for links and buttons that clearly identify the type of content Help users identify their next step. Use
or activities users can expect in the destination page. For example, in a clear button labelling to help users know
simple one page application, the main button label might be ‘Send what to expect.
details’, for longer forms it might be ‘Continue X’. Gives users a sense of confidence and
Where possible use link and button labels that identify the specific type of certainty when navigating through your
content that will appear on the destination page e.g. ‘Apply now’ to start form.
the process or ‘Go to < title of next page>’.
Ensure users can readily identify the point at which critical actions are
about to occur. For example, at the point where an application is about to
be sent to your agency. The button labelling should clarify these key
actions before the user clicks the button. Most pages might have
‘ContinueX’, but when users get to the last page of data entry this might
be replaced by ‘Send application’.
Avoid using ‘Submit’ as some users feel this language is too technical,
unfriendly or authoritative.

For more complex application forms, if you provide a visual Gives users greater flexibility and support
representation of the steps in the process, consider allowing users to click a wide range of user behaviour.
any link so they can complete the steps in any order they like (if
technically possible). This is particularly useful if your form requires users
to gather a lot of details to complete the form.

Provide efficient navigation within the form


What to do How this impacts users
Provide navigational aids (eg. links, table of contents) for long forms This provides an efficient method of
containing a lot of text and fields. navigation allowing users to go directly to
a particular place in the form rather than
having to read through it page by page.

Provide users with a quick, efficient workflow


What to do How this impacts users
Minimise the amount of data users are required to enter. Avoid asking Many users are irritated by being slowed
for details that slow the workflow if they are not directly related to the down by questions or tasks that they
main compliance objective. perceive as irrelevant to their interests.

Users should not have to read and complete, or choose to ignore Streamline the workflow by making it
irrelevant details. easier to complete the form.
If possible, do not present content that is irrelevant to the users' situation. Save users time and frustration.
Consider designing the workflow so that selections made by users or Minimise cognitive effort by avoiding the
details they provide can modify subsequent information. Some potential need for users to work out what is
ways of streamlining the workflow to only show relevant information relevant, and what to ignore.
include:
If users learn to skip some parts of a
• Dynamically reveal or hide sections of content within the same page page they may overlook a detail that it is
• Subsequent pages have sections of content revealed (or hidden) relevant, resulting in an error.
• Direct users to a variation of a page (particularly if a significant
proportion of the user audience will need to provide a larger amount
of different information)

For multiple page forms, allow users to save data they have entered Avoid the frustration of users losing data
and return to complete the form at any point in the process. they have entered and the inconvenience
of having to re-enter the same data.

Department of Innovation, Industry, Science and Research Page 8


Online Forms Usability Design Guidelines v 1.3
Usability guidelines for online application forms

If information is needed from another part of your site to complete the Allow users to stay on task. Support
form, consider providing this information within the process structure (e.g. efficient workflow.
as a dedicated page in the workflow or as a pop-up window.)

2.3 Reading the form (written content & language)


Style of language
What to do How this impacts users
Ensure all text and labelling used throughout the form is as brief as Support simple minimalist design.
possible without losing clarity of meaning to your users. Make it quicker to read.
Reduces visual clutter and makes the
form look less daunting.
Use plain everyday language and avoid computer or technical jargon, Make it easier to learn how to use the
euphemisms, trendy words or clichés. For example, use ‘send’ instead of application.
‘submit’, and use ‘required information’ instead of ‘mandatory fields’. Encourage users to engage with your
Define any jargon or technical terms that cannot be avoided. site.

Ensure language is inclusive and meets the requirements of the Encourage a welcoming positive user
following legislation: experience.
• Racial Discrimination Act 1975. Users are more likely to complete the
• Sex Discrimination Act 1984. form if they do not feel alienated by the
• Human Rights and Equal Opportunity Commission Act 1986. language.
• Disability Discrimination Act 1992.

Avoid using a passive voice or a tone that is too formal as some users Encourage users to develop a positive
will perceive this as unfriendly and unapproachable. attitude to your service and your web site.
This makes them more willing to interact
with your agency and more likely to
complete the form.
Use positive language for messages and errors that do not 'blame' the
user. The following structure for error messages is recommended:
• What the error is
• Why the error occurred
• How to fix it

Where possible, adopt the recommendations of the Style Manual and the
Web Publishing Guide (previously the Commonwealth Style Guide)

Grouping of information
What to do How this impacts users
Each page should contain related data. Support users’ preference to scan web
pages.
Use clear sub-headings to group related sets of content within each Help users quickly understand the type of
page. The sub-heading should summarise the type of content or activities information on each page.
the user can expect to find.
Improve user confidence by giving them
a sense of control over their experience.

Department of Innovation, Industry, Science and Research Page 9


Online Forms Usability Design Guidelines v 1.3
Usability guidelines for online application forms

Make it easy to complete the content


What to do How this impacts users
Design your pages so that instructions and descriptions are not needed. Make it easy to identify instructions for
Users tend not to read instructions and go directly to the data entry fields users scanning the page.
and screen controls because these invite users to interact and have Concise clear instructions make it quicker
greater visual prominence. Avoid unnecessary instructions that are self- to complete the form and minimise user
evident by the page design e.g. ‘Complete all the details below and click error.
on the Continue button’
Only provide concise instructions in context where your users need them
to understand what they need to do. For example:
• Provide general instructions about completing a page at the
beginning of the page content. Ideally these should only be the width
of the page content. If more than one line of text is required, use
short sentences and start each new sentence on a new line.
• Provide instructions about a specific section of the page at the
beginning of that section, immediately after the sub-heading.
• Display concise tips (within brackets) or examples in close proximity
of the field they refer to, preferably in the same row as the field. If
possible, position tips before the data entry box so that blind users of
screen reader software will hear the tip before they enter the data.
• Use ALT tags that display definitions of terms used when users
hover their mouse over them.

Use screen controls appropriately and consistently. For example use: Make the interaction as intuitive as
• Drop-downs to select a single item from a list of related items possible by leveraging users existing
knowledge of screen controls.
• Radio buttons to select one item from mutually exclusive options
Reduce potential for user error.
• Check boxes to allow selection of multiple options
• Pop-up windows if users need to:
o select one or more items from a large number of options
(e.g. more than 20 items in a drop-down menu or as check
boxes)
o when users need to see details at the same time as the
content in the main window
o read a print-friendly view of a larger amount of text (e.g.
terms and conditions)
• Consider using dynamic, multiple drop-down menus when there are
hundreds of choices to streamline the workflow.
• Tabs to group information into different data views. Note: Avoid using
tabs as a navigation tool or in combination with navigation menus
unless a thorough user-centred design process has been followed.

Provide reasonable default text wherever possible. Allow users to easily Make it quicker to complete the form.
change these.

• Where appropriate, provide a range of options that users can select Make it quicker and easier to complete
(e.g. in a drop-down list, set of checkboxes, or pick list) rather than the form.
require users to write details into a data entry box. For example, if Minimise user errors
users need to provide a date, your form could provide three drop-
down menus to select the Day, Month, and Year. Avoid confusion about the type of details
users need to provide or the best way to
• Ensure there is a complete range of options that will anticipate the
format details.
majority of users' choices.
Gather accurate, consistently formatted
• Where appropriate, provide an ‘other’, ‘not applicable’ or ‘none of the
data.
above’ selection to minimise error and confusion if none of the
options are suitable. This applies to any type of presentation e.g.
drop-down list, set of check boxes, and options in a pick list.

Do not make users remember any information from a previous page or Reduce user cognitive load.
require re-entry of data. Pre-populate fields with known information Support an efficient user workflow.
wherever possible, either from details the user entered on a previous
page OR from any information you may already have in a database.

Department of Innovation, Industry, Science and Research Page 10


Online Forms Usability Design Guidelines v 1.3
Usability guidelines for online application forms

Leave validating user input to the system. Do not expect the user to enter Reduces potential for data entry errors
data in a specific format (eg. telephone number with area code in and frustration at having to re-enter data
parentheses). Instead use the system to translate the data entered by if original input is incorrect.
the user into the chosen format for storage and display.

2.4 Viewing the form (layout & presentation)


Form layout
What to do How this impacts users
The order of the content within each page should support a workflow Users will find each page easier to scan
that allows users to logically and efficiently complete the tasks. and quicker to complete.
Position the most important information at the left and top centre of a Ensure vision-impaired users have a
page comparable experience of completing the
All fields should have field labels that appear before the related field when form.
reading left to right. Avoid users having to go back to
complete sections of the page out of
order.
Help users notice important information.
Left align field labels, headings and text, and align other page elements Make the page quick and easier to scan.
so that the page seems streamlined and uncluttered. Quality layout encourages user
User a consistent page layout throughout the form. confidence in the design of the form.

Group related items together. Allow users to quickly scan the page to
Use sub-headings to visually group related fields and information on the identify the type of content and activities
page. available.
Use larger white spacing to visually separate major sections of related Give users a sense of control and
information. Use narrower white spacing between rows within those confidence about what to expect.
sections to make them look like they belong together.
Be rigorous in aligning items.

Ensure page titles and sub-headings stand out from standard page text Reveal the hierarchy of page content.
by using a larger font size. Make it quicker to scan the page to
understand what is required.
Give users confidence about what to
expect.
Consider using a unique, easily identifiable visual style for important Minimise users overlooking important text
text consistently throughout the form. Some examples:
• Blue underlined text for links embedded within page content
• Use red bold text for error messages

Use tables for columns of information or database information only if Make it easy to locate the correct row
there are more than three rows of information. and read across the columns.
Use a sub-heading for the title of the table. The title should clarify the type
of content or its purpose.
Use column headings that summarise the type of content in each column
but are not too abbreviated for users to understand their meaning.
Consider using a darker colour and reversed white text for column
headings.
Display items in alphabetical order, or use an order that is most logical to
users.
Use pale grey background shading for alternate rows.

Data entry fields or boxes where users can enter text: Ensure data entry fields are easy to use
• Must be large enough to allow users to see the information they have and the content entered is easy to read.
entered. Minimises error.

Department of Innovation, Industry, Science and Research Page 11


Online Forms Usability Design Guidelines v 1.3
Usability guidelines for online application forms

• Should reflect the anticipated length of the user’s input


• Should be presented in a way that is natural for them to interact with
and minimises error.

Avoid visual noise and unnecessary page elements. Each visual Support a simple, minimalist design.
element should only be included if it adds meaning or conveys a piece of Make the page content easy to scan and
information. understand
For example, avoid using boxes around groups of related items. The layout and page design should be
Exceptions where a box outline is appropriate: unobtrusive so users can focus on what
• Around a group of fields that relate to a specific action button, such they need to see, when they need to see
as multiple fields relating to a single search button. it.
• Around a table The data and content on the page is the
most important and should be more
• Avoid horizontal divider lines, bars, banners or wide graphical noticeable than the controls manipulating
elements within the page content as these tend to act as visual it.
barriers.

Use of images
What to do How this impacts users
Use a professional visual designer to create your icons. Do not use Use imagery that adds value and
clip art. Good images and icons reveal their meaning at a glance. meaning for users. Reduce potential for
confusion.
Minimise users learning to ignore images
and icons because they do not
understand their meaning.
Use a specific visual style for images and icons and use this Use of consistent imagery and icon style
consistently throughout your form. makes it easier for users to understand
their meaning in different contexts.
Naming convention for images should describe what the user can Help vision impaired users to understand
expect in the destination page. imagery is offered.
Provide alternate text for screen readers.

Readability
What to do How this impacts users
Ensure text is legible at all supported screen resolutions i.e. use a Do not prevent users from using your
standard font size that is equivalent of 10-11 point. form. Make it quicker to complete the
Avoid excessively small font sizes for blocks of text, legal notes or form.
footnotes. Minimise potential for errors because
users have not read important text.
Avoid using blocks or rows of text that are written in all capitals or all Make it quicker to scan text.
italics. Users find this far more difficult and slow to read (e.g. legal
notes).

Department of Innovation, Industry, Science and Research Page 12


Online Forms Usability Design Guidelines v 1.3
Usability guidelines for online application forms

Accessibility
What to do How this impacts users
The ability for all users to access and complete the form is an integral Ensure the form can be read and
part of achieving usability best practice. All Australian Government web completed by users with varying abilities.
sites are legally obligated to meet minimum accessibility standards of
Avoid adverse publicity.
the World Wide Web Consortium (W3C).
For further information about these requirements consult the AGIMO Web Minimise legal risk.
Publishing Guide, Accessibility and Equity page at
http://webpublishing.agimo.gov.au/Accessibility_and_Equity and the
Australian Human Rights and Equal Opportunity Commission World Wide
Web accessibility page at
http://www.humanrights.gov.au/disability_rights/webaccess/index.htm

Provide descriptive labels for all form buttons, fields and images to assist Ensure users understand what data is
readability with assistive software. required for each form field.
Always ‘tag’ a PDF form. Screen readers can read the form text
and the text plus all form fields in a
logical order from top to bottom, left to
right.
Create a logical tabbing order for form fields, buttons, images and text if This makes it easier for visually impaired
the form content has not been designed for an automatic movement order users to navigate the form with a screen
from top to bottom, left to right. reader.

Ensure form functionality is available to people using a keyboard. Provides access to those with reduced
mobility, and to those who do not or
cannot use a mouse to interact with the
form.
Avoid scripting visual effects such as blinking text. This increases readability issues for
users.

Appropriate use of colour


What to do How this impacts users
Ensure the text and background colour has sufficient contrast for Ensure text can be read by users with
adequate readability. various types of vision impairment.
Avoid large areas of complementary colours as this can cause eyestrain.
Avoid colour combinations that are frequently difficult to read by users
with colour blindness. (10% males have some form of colour blindness.)
Adhere to W3C guidelines for colour contrast:
http://www.w3.org/TR/WCAG10/

Department of Innovation, Industry, Science and Research Page 13


Online Forms Usability Design Guidelines v 1.3
Usability guidelines for online application forms

2.5 Interaction design


Error handling
What to do How this impacts users
Indicate to users which fields are mandatory displaying the symbol and Make it quicker and easier for users to
text immediately below the page title on each page that contains a scan the page and identify mandatory
mandatory field fields.
Streamline the workflow.
e.g. ‘*‘ indicates required information‘.
Ensure the symbol is large enough to stand out when scanning the page.

Use the same ‘*‘ symbol at the beginning of the field label of a
mandatory field.
Consider using a unique colour for this text to make it more apparent to
users when they scan the page.

Check data for errors when details are saved (e.g. as each page is Increase user confidence they are
completed or at any logical point in the workflow.) completing the form correctly.
Support data integrity.
Ensure accurate and useful content is
gathered.
After users choose to cancel or exit the application without saving, Users should be able to undo any action,
display a dialog box to confirm the action or allow users to return to the particularly ones where they will lose all
application form. For example: their data or require re-entry.

Are you sure you want to cancel your application and


permanently delete all information you have entered?

Yes, cancel my application No, go back to my application

Use a prominent visual style for error messages (e.g. bold text, red Streamline the workflow by making it
colour). quicker and easier for all users to identify
Display error messages relating to data entry errors under the page title and correct errors, including users with
on the same page where the error occurs. vision impairment.
Use an indicator icon such as an arrow ‘X’ to point to the field label and
change the field label text colour from black to red. However, do not rely
on colour alone to identify fields that require correction as these can be
difficult to notice for users with vision impairment.

Data entry error messages at the top of the page should be concise and Streamline the workflow by making it
comprise two separate parts. quicker and easier to identify and correct
1. A statement explaining an error occurred (including the number of errors.
errors if there are multiple)
2. A statement instructing users about what they need to do to correct the
error for each field.

Preferably provide a visual cue beside each field where an error has
occurred.

If there are multiple data entry errors on a page, list these in the error
message in the order they appear in the page from top to bottom.

Department of Innovation, Industry, Science and Research Page 14


Online Forms Usability Design Guidelines v 1.3
Usability guidelines for online application forms

3. Standards and other sources of information


Government forms designers may wish to consult these other sources for further information.

Accessibility
• Australian Government Departments are required to meet a minimum standard of accessibility guidelines World Wide
Web Consortium (W3C). See the AGIMO Web Publishing Guide for these guidelines.
http://webpublishing.agimo.gov.au/Accessibility
• W3C Accessibility Guidelines: http://www.w3.org/TR/WCAG10/

• Adobe’s 'Creating Accessible PDF Documents with Adobe Acrobat' guidelines:


http://www.adobe.com/enterprise/accessibility/pdfs/acro7_pg_ue.pdf

Government Best Practice Checklists


• Providing Forms Online
The Australian Government Information Management Office (AGIMO) has created this checklist to provide advice about
the development and delivery of online forms.
http://www.agimo.gov.au/__data/assets/file/0004/33907/BPC1.pdf

• User Friendly Forms Guide


The Australian National Audit Office (ANAO) has created this guide to provide key principles and practices for the
effective design and communication of Australian Government Forms.
http://www.anao.gov.au/uploads/documents/User_Friendly_Forms.pdf

Content
• Style Manual for Authors, Editors and Printers, 6th edition, Revised by Snooks & Co., John Wiley & Sons Australia
Ltd, 2002.
• AGIMO Web Publishing Guide http://webpublishing.agimo.gov.au/

Form performance
• Adobe’s 'Adobe LiveCycle Designer performance guidelines'
http://partners.adobe.com/public/developer/livecycle/performance/index.html

Interaction design
• Frohlich, D (1986) On the organization of form-filling behaviour, in Information Design Journal, Vol. 5, No. 1
• Barnett, R (2005) Forms for people: designing forms that people can use.

Visual design
• Gestalt Laws of visual perception
http://www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html
http://en.wikipedia.org/wiki/Gestalt_psychology

• Use of colour (Fast consulting web site)


http://www.fast-consulting.com/color/cp_toc.htm

Department of Innovation, Industry, Science and Research Page 15


Online Forms Usability Design Guidelines v 1.3