Professional Documents
Culture Documents
Contents
1. About these guidelines .................................................................................................. 4
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.
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.
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.
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.
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
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.
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.
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.)
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.
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.
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.
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.
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).
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.
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.
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.
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/
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