Online Forms Usability Design Guideline v1.3

8/6/2019 Online Forms Usability Design Guideline v1.3

1/15

Online Forms

Usability Design Guidelines

Department of Innovation, Industry, Science and Research

Version No. 1.3


2/15

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 ofrepresentation, 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 andthe 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 consequentialdamages resulting from any defect or inaccuracy in this document, even if advised of the possibilityof such damages.

The warranty and remedies set forth above are exclusive and in lieu of all others, oral or written orimplied. No employee of The Hiser Group Pty Ltd is authorised to make any modification, extensionor addition to this warranty.

The guidelines in this document remain copyright of The Hiser Group Pty Ltd. However, theDepartment 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 publicationmust include attribution to The Hiser Group in a prominent position.

Many of the designations used by manufacturers, developers and sellers to distinguish theirproducts are claimed as trademarks. Where the designations appear in this publication, and TheHiser Group Pty Ltd was aware of the trademark claim, the designations have been printed in capitalletters.

Printed in Australia

Version No Date Authors

1.0 7 February 2006 Elisa BondJessica Enders

1.0 16 February 2006 Lucy Henderson DIISR

1.2 7 July 2006 DIISR

1.3 10 September 2007 DIISR


Online Forms Usability Design Guidelines v 1.3


3/15

Contents

Contents

1. About these guidelines............................................................... ................................... 42. Usability guidelines for online application forms........................................................ 5

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

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

2.3 Reading the form (written content & language)............................................... ......... 9Style of language .................................................. ................................................... 9Grouping of information ........................................................ ................................... 9Make it easy to complete the content............................................................ ........... 9

2.4 Viewing the form (layout & presentation) ............................................................... 11Page layout ......................................................... ................................................... 11Use of images ......................................................... ............................................... 12Readability .................................................... ......................................................... 12Accessibility ............................................................ ............................................... 13Appropriate use of colour ........................................................... ............................ 13

2.5 Interaction design............................... ............................................................... ..... 14Error handling ........................................................ ................................................ 14

3 Standards and other sources of information............................. ................................ 15Accessibility ............................................................ ............................................... 15Government Best Practice Checklists..................................................... ............... 15Content ........................................................ .......................................................... 15Form performance ............................................................ ..................................... 15

Interaction design................................ ............................................................ ....... 15

Visual design....................................... ........................................................... ........ 15



Page 3


4/15

About these guidelines



Page 4

1. About these guidelines

In January 2006, the Department of Innovation, Industry, Science and Research (DIISR) commissioned thedevelopment 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 assistsand 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 ofeach guideline upon the user experience. This is to help developers and designers understand how adopting theguidelines will affect their users' experience.

The intended audience of this document are the form owners and organisations involved in the development ofonline forms, particularly SmartForms, the dynamic and interactive electronic government forms. This document willassist clients with the design and development of online forms that are useable by their customers.

.


5/15

Usability guidelines for online application forms



Page 5

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 contextthroughout your web site.

If the form is likely to be very important to or frequently used by clients:

Consider providing short cuts from the home page or main menus ofyour web site to a page describing the form and its purpose.

Provide a URL that is simple, short & memorable

Supports a quick efficient workflow.

Increases traffic to your form.

Users may give up if they experiencedifficulties or delays finding your form.Some users may not even realise youoffer the form.

If your customers include people whose first language is not English,ensure there are links to language options which direct them to otherversions of the form, or to a translation service at an appropriate point in

the user page workflow (e.g. the home page of your site or the main pageof your form)

Provides equity of access to yourapplication form.

Increases the number of clients who

potentially may complete your form.

If your web site offers several similar forms, consider clarifying whichforms are appropriate for which users.

If these forms are positioned in another part of the website, provide textlinks at the end of the introduction to redirect these users.

Users sometimes navigate to the wrongpage (despite clear labels).

Minimise frustration and time wasted bycompleting the incorrect form.

Streamline the user workflow.

Create a good first impression


When possible avoid using embedded fonts in PDF files as they enlargethe size of the file. Fonts that are available in Adobe Reader and notembedded are:

- TimesRoman, TimesBold, TimesItalic, TimesBoldItalic

- Helvetica, HelveticaBold, HelveticaOblique, HelveticaBoldOblique

- Courier, CourierBold, CourierOblique, CourierBoldOblique

- Symbol, ZapfDingbats

Less time to download and render a form.

The page title of the first page must clearly state the purpose of the form.

Provide one or two sentences that briefly clarify the purpose of the formand who should use it. Keep this text to a minimum of two sentences so it

does not overwhelm users. Use brief sentences. If there are multiplesentences start each sentence on a new line.

Help orientate users by quicklyconfirming they have arrived in the pagethey expected.

Make it easier to quickly scan text. Usersfrequently avoid reading large blocks oftext.

Tell users about the number of steps or pages in the form and how longit will take to complete beforethey are required to start entering detailsinto the form.

The courtesy of informing users allowsthem to plan when they will complete theform.

Supports user preferred workflow andbehaviour.

Make it clear where to go to begin using the form. For example, providea prominent action button at the bottom right of the first page. If your formhas multiple pages, avoid making the user scroll and search for actionbuttons on the first page.

Make it easy for users to identify thenavigation of their next step.


6/15




Page 6

Encourage user trust


Regularly review spelling and grammar as part of your publishingprocess.

Regularly review links throughout the form to rectify any broken links.

Spelling and grammatical mistakes andbroken links all undermine userconfidence in your services and your web

site.

Users interpret this to mean you do notvalue their needs enough to make aneffort.

Only display up-to-date and accuratecontent.

Make sure the date the page was last updated is in the footer area of theform.

This is particularly important if the type of information or service youprovide needs to change over time.

Currency of information is very importantto some users. Users may loseconfidence in the accuracy of informationyou provide if the page content has notbeen recently reviewed.

If applicable, ensure privacy, terms and conditions, and securitypolicies are clearly displayed and users are directed to these at

appropriate times during the process.Make sure these policies are in everyday language, in a legible font styleand uncluttered layout that is easy to scan.

Give users the option to print these details to read later.

Promote user confidence and trust inyour services. Users value honesty and

transparency.

Encourage user interest and feedback


Use a direct, active tone that is polite and courteous.

For instructions address your customer in the second person (i.e. you).

Encourage users to develop a positiveattitude to your service and your web site.This makes them more willing to interactwith your agency and more likely tocomplete the form.

Inform users about important details beforethey start the form detail. Forexample users often want to know costs, delivery times or turnaroundtimes for email responses upfront.

Advise users about any information needed to complete the formparticularly if they are not likely to have at hand and will need to obtain itfrom elsewhere. (e.g. number for bank accounts, customer accounts,passport number).

Avoid users being frustrated or annoyedif they are unable to complete the formquickly because they are missing a vitalbit of information.

Create a flexible design which will support the needs of different usersWhat to do How this impacts users

Provide a link to allow users to correctly print any page within the formon A4 paper

Users generally scan text and do not liketo read large amounts of text online.

Some users prefer to get on with the formand read details at a later time (e.g.terms & conditions) This supports anefficient user workflow.

A single column layout for form content is preferable. This layout is easier for the user's eye toscan.


7/15




Page 7

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

Make it easy for users to understand the workflow and structure of the form


In the first page of the form, advise users about the number of steps orpages in total and how long it will take to complete the form beforeusers are required to enter details.

See Create a good first impression for other guidelines relevant to thefirst page in the application form.

Users can confidently decide whetherthey have sufficient time before theycommence.

Increases user trust

For multiple page forms, use a prominent visual style to indicate thenumber of steps or pages. The users current position within the formshould be obvious to them as they progress.

Provides clear cues to orientate users.

Help users feel in control of theirexperience. Users are more likely tocomplete longer forms if they have visualfeedback about their progress.

Allow users to see what is coming up.

Ensure the order of content in the form is designed as an efficientworkflow and is logical to the user to work through. This is in preferenceto ordering the content to suit form developers or those processing thesubmitted data.

Use numbering for any lists of questions.

Save users time and effort.

Make it easy for users to stay interestedand focussed on filling the form in.

Users are more likely to complete a formthat is logical and easy to follow.

Numbering questions can help usersorientate their position within the form. Itcan also help with analysis of dataafterwards.

Provide a confirmation page after the application form has beensubmitted:

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 taskswithin your web site.

Encourages confidence both in yourservices and the overall process.

Make it easy for users to identify next steps (links and buttons)


For multi page forms, present all the main navigation items as agroup of prominent action buttons in a row at the end of each page.

Use consistent positioning for buttons. Order buttons from leastfrequently used (on the left) to most frequently used (on the right).For example:

o The far right button should be the most preferred next stepe.g. Next .

o To the left of this provide other options e.g. Back.

o The button on the far left should be the least likely or mostdangerous option e.g. Cancel

Makes it quick and easy to identify thenavigation options and move onto thenext step.

Users only need to look at the onelocation to identify what they can do next.

Users from a culture that reads left toright, tend to favour the bottom right ofpage.

Consistent order and placement of mainaction buttons minimises error.

Provide text links and other buttons within the page content whereusers need and expect them.

Ensure text links are easy to identify and are distinguishable fromother page text. Ideally, adopt the web standard of blue underlined

links. However, the visual style of links should be consistent with therest of your web site.

Use buttons where an action or function of some kind is performed.

Users should be able to predict theinteraction of links and buttons.

Reduces the potential for user confusionand supports efficient workflow.

Users should not have to waste timehunting around the page and hoveringtheir mouse over text to identify where


8/15




Page 8

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

the links are.

Use labels for links and buttons that clearly identify the type of contentor activities users can expect in the destination page. For example, in asimple one page application, the main button label might be Send

details, for longer forms it might be Continue .

Where possible use link and button labels that identify the specific type ofcontent that will appear on the destination page e.g. Apply now to startthe process or Go to < title of next page>.

Ensure users can readily identify the point at which critical actions areabout to occur. For example, at the point where an application is about tobe sent to your agency. The button labelling should clarify these keyactions before the user clicks the button. Most pages might haveContinue, but when users get to the last page of data entry this mightbe replaced by Send application.

Avoid using Submit as some users feel this language is too technical,unfriendly or authoritative.

Help users identify their next step. Useclear button labelling to help users knowwhat to expect.

Gives users a sense of confidence andcertainty when navigating through yourform.

For more complex application forms, if you provide a visualrepresentation of the steps in the process, consider allowing users to clickany link so they can complete the steps in any order they like (iftechnically possible). This is particularly useful if your form requires usersto gather a lot of details to complete the form.

Gives users greater flexibility and supporta wide range of user behaviour.

Provide efficient navigation within the form


Provide navigational aids (eg. links, table of contents) for long formscontaining a lot of text and fields.

This provides an efficient method ofnavigation allowing users to go directly to

a particular place in the form rather thanhaving to read through it page by page.

Provide users with a quick, efficient workflow


Minimise the amount of data users are required to enter. Avoid askingfor details that slow the workflow if they are not directly related to themain compliance objective.

Many users are irritated by being sloweddown by questions or tasks that theyperceive as irrelevant to their interests.

Users should not have to read and complete, or choose to ignore

irrelevant details.If possible, do not present content that is irrelevant to the users' situation.Consider designing the workflow so that selections made by users ordetails they provide can modify subsequent information. Some potentialways of streamlining the workflow to only show relevant informationinclude:

Dynamically reveal or hide sections of content within the same page

Subsequent pages have sections of content revealed (or hidden)

Direct users to a variation of a page (particularly if a significantproportion of the user audience will need to provide a larger amountof different information)

Streamline the workflow by making it

easier to complete the form.Save users time and frustration.

Minimise cognitive effort by avoiding theneed for users to work out what isrelevant, and what to ignore.

If users learn to skip some parts of apage they may overlook a detail that it isrelevant, resulting in an error.

For multiple page forms, allow users to save data they have enteredand return to complete the form at any point in the process.

Avoid the frustration of users losing datathey have entered and the inconvenienceof having to re-enter the same data.


9/15




Page 9

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

Allow users to stay on task. Supportefficient workflow.

2.3 Reading the form (written content & language)Style of language


Ensure all text and labelling used throughout the form is as brief aspossible without losing clarity of meaning to your users.

Support simple minimalist design.

Make it quicker to read.

Reduces visual clutter and makes theform look less daunting.

Use plain everyday language and avoid computer or technical jargon,euphemisms, trendy words or clichs. For example, use send instead ofsubmit, and use required information instead of mandatory fields.

Define any jargon or technical terms that cannot be avoided.

Make it easier to learn how to use theapplication.

Encourage users to engage with yoursite.

Ensure language is inclusive and meets the requirements of thefollowing legislation:

Racial Discrimination Act 1975.

Sex Discrimination Act 1984.

Human Rights and Equal Opportunity Commission Act 1986.

Disability Discrimination Act 1992.

Encourage a welcoming positive userexperience.

Users are more likely to complete theform if they do not feel alienated by thelanguage.

Avoid using a passive voice or a tone that is too formal as some userswill perceive this as unfriendly and unapproachable.

Encourage users to develop a positiveattitude to your service and your web site.This makes them more willing to interactwith your agency and more likely to

complete the form.

Use positive language for messages and errors that do not 'blame' theuser. 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 theWeb Publishing Guide (previously the Commonwealth Style Guide)

Grouping of informationWhat to do How this impacts users

Each page should contain related data.

Use clear sub-headings to group related sets of content within eachpage. The sub-heading should summarise the type of content or activitiesthe user can expect to find.

Support users preference to scan webpages.

Help users quickly understand the type ofinformation on each page.

Improve user confidence by giving thema sense of control over their experience.


10/15




Page 10

Make it easy to complete the contentWhat to do How this impacts users

Design your pages so that instructions and descriptions are not needed.Users tend not to read instructions and go directly to the data entry fieldsand screen controls because these invite users to interact and havegreater visual prominence. Avoid unnecessary instructions that are self-

evident by the page design e.g. Complete all the details below and clickon the Continue button

Only provide concise instructions in context where your users need themto understand what they need to do. For example:

Provide general instructions about completing a page at thebeginning of the page content. Ideally these should only be the widthof the page content. If more than one line of text is required, useshort sentences and start each new sentence on a new line.

Provide instructions about a specific section of the page at thebeginning of that section, immediately after the sub-heading.

Display concise tips (within brackets) or examples in close proximityof the field they refer to, preferably in the same row as the field. Ifpossible, position tips before the data entry box so that blind users ofscreen reader software will hear the tip before they enter the data.

Use ALT tags that display definitions of terms used when usershover their mouse over them.

Make it easy to identify instructions forusers scanning the page.

Concise clear instructions make it quickerto complete the form and minimise user

error.

Use screen controls appropriately and consistently. For example use:

Drop-downs to select a single item from a list of related items

Radio buttons to select one item from mutually exclusive options

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 checkboxes)

o when users need to see details at the same time as the

content in the main windowo 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 arehundreds of choices to streamline the workflow.

Tabs to group information into different data views. Note: Avoid usingtabs as a navigation tool or in combination with navigation menusunless a thorough user-centred design process has been followed.

Make the interaction as intuitive aspossible by leveraging users existingknowledge of screen controls.

Reduce potential for user error.

Provide reasonable default text wherever possible. Allow users to easilychange these.

Make it quicker to complete the form.

Where appropriate, provide a range of options that users can select

(e.g. in a drop-down list, set of checkboxes, or pick list) rather thanrequire users to write details into a data entry box. For example, ifusers need to provide a date, your form could provide three drop-down menus to select the Day, Month, and Year.

Ensure there is a complete range of options that will anticipate themajority of users' choices.

Where appropriate, provide an other, not applicable or none of theabove selection to minimise error and confusion if none of theoptions are suitable. This applies to any type of presentation e.g.drop-down list, set of check boxes, and options in a pick list.

Make it quicker and easier to complete

the form.

Minimise user errors

Avoid confusion about the type of detailsusers need to provide or the best way toformat details.

Gather accurate, consistently formatteddata.

Do not make users remember any information from a previous page orrequire re-entry of data. Pre-populate fields with known information

wherever possible, either from details the user entered on a previouspage OR from any information you may already have in a database.

Reduce user cognitive load.

Support an efficient user workflow.


11/15




Page 11

Leave validating user input to the system. Do not expect the user to enterdata in a specific format (eg. telephone number with area code inparentheses). Instead use the system to translate the data entered bythe user into the chosen format for storage and display.

Reduces potential for data entry errorsand frustration at having to re-enter dataif original input is incorrect.

2.4 Viewing the form (layout & presentation)

Form layout


The order of the content within each page should support a workflowthat allows users to logically and efficiently complete the tasks.

Position the most important information at the left and top centre of apage

All fields should have field labels that appear beforethe related field whenreading left to right.

Users will find each page easier to scanand quicker to complete.

Ensure vision-impaired users have acomparable experience of completing theform.

Avoid users having to go back tocomplete sections of the page out oforder.

Help users notice important information.

Leftalign field labels, headings and text, and align other page elementsso that the page seems streamlined and uncluttered.

User a consistent page layout throughout the form.

Make the page quick and easier to scan.

Quality layout encourages userconfidence in the design of the form.

Group related items together.

Use sub-headings to visually group related fields and information on thepage.

Use larger white spacing to visually separate major sections of relatedinformation. Use narrower white spacing between rows within thosesections to make them look like they belong together.

Be rigorous in aligning items.

Allow users to quickly scan the page toidentify the type of content and activitiesavailable.

Give users a sense of control andconfidence about what to expect.

Ensure page titles and sub-headings stand out from standard page textby using a larger font size.

Reveal the hierarchy of page content.

Make it quicker to scan the page tounderstand what is required.

Give users confidence about what toexpect.

Consider using a unique, easily identifiable visual style for importanttext consistently throughout the form. Some examples:

Blue underlined text for links embedded within page content

Use red bold text for error messages

Minimise users overlooking important text

Use tables for columns of information or database information only ifthere are more than three rows of information.

Use a sub-heading for the title of the table. The title should clarify the typeof content or its purpose.

Use column headings that summarise the type of content in each columnbut are not too abbreviated for users to understand their meaning.Consider using a darker colour and reversed white text for columnheadings.

Display items in alphabetical order, or use an order that is most logical tousers.

Use pale grey background shading for alternate rows.

Make it easy to locate the correct rowand read across the columns.

Data entry fields or boxes where users can enter text: Must be large enough to allow users to see the information they have

entered.

Ensure data entry fields are easy to useand the content entered is easy to read.

Minimises error.


12/15




Page 12

Should reflect the anticipated length of the users input

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

Avoid visual noise and unnecessary page elements. Each visualelement should only be included if it adds meaning or conveys a piece ofinformation.

For example, avoid using boxes around groups of related items.

Exceptions where a box outline is appropriate:

Around a group of fields that relate to a specific action button, suchas multiple fields relating to a single search button.

Around a table

Avoid horizontal divider lines, bars, banners or wide graphicalelements within the page content as these tend to act as visualbarriers.

Support a simple, minimalist design.

Make the page content easy to scan and

understandThe layout and page design should beunobtrusive so users can focus on whatthey need to see, when they need to seeit.

The data and content on the page is themost important and should be morenoticeable than the controls manipulatingit.

Use of imagesWhat to do How this impacts users

Use a professional visual designer to create your icons. Do not useclip art. Good images and icons reveal their meaning at a glance.

Use imagery that adds value andmeaning for users. Reduce potential forconfusion.

Minimise users learning to ignore imagesand icons because they do notunderstand their meaning.

Use a specific visual style for images and icons and use thisconsistently throughout your form.

Use of consistent imagery and icon stylemakes it easier for users to understandtheir meaning in different contexts.

Naming convention for images should describe what the user can

expect in the destination page.Provide alternate text for screen readers.

Help vision impaired users to understand

imagery is offered.

Readability


Ensure text is legible at all supported screen resolutions i.e. use astandard font size that is equivalent of 10-11 point.

Avoid excessively small font sizes for blocks of text, legal notes orfootnotes.

Do not prevent users from using yourform. Make it quicker to complete theform.

Minimise potential for errors becauseusers have not read important text.

Avoid using blocks or rows of text that are written in all capitals or allitalics. Users find this far more difficult and slow to read (e.g. legalnotes).

Make it quicker to scan text.


13/15




Page 13

Accessibility


The ability for all users to access and complete the form is an integralpart of achieving usability best practice. All Australian Government websites are legally obligated to meet minimum accessibility standards ofthe World Wide Web Consortium (W3C).

For further information about these requirements consult the AGIMO WebPublishing Guide, Accessibility and Equity page athttp://webpublishing.agimo.gov.au/Accessibility_and_Equity and theAustralian Human Rights and Equal Opportunity Commission World WideWeb accessibility page athttp://www.humanrights.gov.au/disability_rights/webaccess/index.htm

Ensure the form can be read andcompleted by users with varying abilities.

Avoid adverse publicity.

Minimise legal risk.

Provide descriptive labels for all form buttons, fields and images to assistreadability with assistive software.

Ensure users understand what data isrequired for each form field.

Always tag a PDF form. Screen readers can read the form textand the text plus all form fields in alogical order from top to bottom, left toright.

Create a logical tabbing order for form fields, buttons, images and text ifthe form content has not been designed for an automatic movement orderfrom top to bottom, left to right.

This makes it easier for visually impairedusers to navigate the form with a screenreader.

Ensure form functionality is available to people using a keyboard. Provides access to those with reducedmobility, and to those who do not orcannot use a mouse to interact with theform.

Avoid scripting visual effects such as blinking text. This increases readability issues forusers.

Appropriate use of colourWhat to do How this impacts users

Ensure the text and background colour has sufficient contrast foradequate readability.

Avoid large areas of complementary colours as this can cause eyestrain.

Avoid colour combinations that are frequently difficult to read by userswith colour blindness. (10% males have some form of colour blindness.)

Adhere to W3C guidelines for colour contrast:http://www.w3.org/TR/WCAG10/

Ensure text can be read by users withvarious types of vision impairment.
http://webpublishing.agimo.gov.au/Accessibility_and_Equityhttp://www.humanrights.gov.au/disability_rights/webaccess/index.htmhttp://www.humanrights.gov.au/disability_rights/webaccess/index.htmhttp://www.w3.org/TR/WCAG10/http://www.w3.org/TR/WCAG10/http://www.w3.org/TR/WCAG10/http://www.humanrights.gov.au/disability_rights/webaccess/index.htmhttp://webpublishing.agimo.gov.au/Accessibility_and_Equity


14/15


2.5 Interaction design

Error handling


Indicate to users which fields are mandatory displaying the symbol andtext immediately below the page title on each page that contains amandatory field

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 amandatory field.

Consider using a unique colour for this text to make it more apparent tousers when they scan the page.

Make it quicker and easier for users toscan the page and identify mandatoryfields.

Streamline the workflow.

Check data for errors when details are saved (e.g. as each page is

completed or at any logical point in the workflow.)

Increase user confidence they are

completing the form correctly.Support data integrity.

Ensure accurate and useful content isgathered.

After users choose to cancel or exit the application without saving,display a dialog box to confirm the action or allow users to return to theapplication form. For example:

Are you sure you want to cancel your application andpermanently delete all information you have entered?

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

Users should be able to undo any action,particularly ones where they will lose alltheir data or require re-entry.

Use a prominent visual style for error messages (e.g. bold text, redcolour).

Display error messages relating to data entry errors under the page titleon the same page where the error occurs.

Use an indicator icon such as an arrow to point to the field label andchange the field label text colour from black to red. However, do not relyon colour alone to identify fields that require correction as these can bedifficult to notice for users with vision impairment.

Streamline the workflow by making itquicker and easier for all users to identifyand correct errors, including users withvision impairment.

Data entry error messages at the top of the page should be concise andcomprise two separate parts.

1. A statement explaining an error occurred (including the number oferrors if there are multiple)

2. A statement instructing users about what they need to do to correct theerror for each field.

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

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

Streamline the workflow by making it

quicker and easier to identify and correcterrors.



Page 14


15/15




Page 15

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 WideWeb 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/

Adobes '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 aboutthe 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 theeffective 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 AustraliaLtd, 2002.

AGIMO Web Publishing Guidehttp://webpublishing.agimo.gov.au/

Form performance Adobes '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.htmlhttp://en.wikipedia.org/wiki/Gestalt_psychology

Use of colour (Fast consulting web site)

http://www.fast-consulting.com/color/cp_toc.htm
http://webpublishing.agimo.gov.au/Accessibilityhttp://webpublishing.agimo.gov.au/Accessibilityhttp://www.w3.org/TR/WCAG10/http://www.w3.org/TR/WCAG10/http://www.adobe.com/enterprise/accessibility/pdfs/acro7_pg_ue.pdfhttp://www.adobe.com/enterprise/accessibility/pdfs/acro7_pg_ue.pdfhttp://www.agimo.gov.au/__data/assets/file/0004/33907/BPC1.pdfhttp://www.agimo.gov.au/__data/assets/file/0004/33907/BPC1.pdfhttp://www.anao.gov.au/uploads/documents/User_Friendly_Forms.pdfhttp://www.anao.gov.au/uploads/documents/User_Friendly_Forms.pdfhttp://webpublishing.agimo.gov.au/http://webpublishing.agimo.gov.au/http://partners.adobe.com/public/developer/livecycle/performance/index.htmlhttp://partners.adobe.com/public/developer/livecycle/performance/index.htmlhttp://www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.htmlhttp://en.wikipedia.org/wiki/Gestalt_psychologyhttp://www.fast-consulting.com/color/cp_toc.htmhttp://www.fast-consulting.com/color/cp_toc.htmhttp://www.fast-consulting.com/color/cp_toc.htmhttp://en.wikipedia.org/wiki/Gestalt_psychologyhttp://www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.htmlhttp://partners.adobe.com/public/developer/livecycle/performance/index.htmlhttp://webpublishing.agimo.gov.au/http://www.anao.gov.au/uploads/documents/User_Friendly_Forms.pdfhttp://www.agimo.gov.au/__data/assets/file/0004/33907/BPC1.pdfhttp://www.adobe.com/enterprise/accessibility/pdfs/acro7_pg_ue.pdfhttp://www.w3.org/TR/WCAG10/http://webpublishing.agimo.gov.au/Accessibility