Download Website Design Guidelines - Department of Finance (WA)

Website Design Guidelines
Last updated August 2012
Table of contents
Introduction .............................................................................................................. 3
Website design ......................................................................................................... 3
2
1.
Accessibility ................................................................................................................ 3
2.
Common Website Elements (CWE)............................................................................ 3
3.
Information Architecture ............................................................................................. 4
4.
Navigation .................................................................................................................. 4
5.
Content....................................................................................................................... 5
6.
Hyperlinks .................................................................................................................. 5
7.
Appearance ................................................................................................................ 6
8.
Web-based translation applications ............................................................................ 7
9.
Further information ..................................................................................................... 8
Introduction
This document forms part of the Website Guidelines (the Guidelines) suite of
documents that have been developed to assist agencies to consider key web related
issues in the Western Australian Government context.
The Guidelines are underpinned by the Website Governance Framework (the
Framework), as set out under the Public Sector Commissioner’s Circular 2009-02
Website Governance Framework. The Framework identifies a consistent approach for
the WA public sector to better manage websites from conception to retirement.
The Guidelines focus on non-technical issues and assume the reader has some
familiarity with basic web terminology and design. They are intended to act as a
ready-reference guide summarising key aspects of website issues. Links to other
resources that provide more comprehensive information have been included
throughout.
1.
Website design
Government websites should aim to be inclusive to all users, bearing in mind the
wide range of customer circumstances, computer capability and technical
knowledge. Consideration of the key issues summarised in this document should
assist agencies to design websites that provide access to government information
and services in a more effective and efficient manner.
1.1
Accessibility
When designing WA Government websites it is a requirement to ensure that they
comply with the Western Australian Government Website Accessibility Policy.
Web accessibility is about ensuring that web content can be accessed by as many
people as possible, including persons with a disability, people living in remote
locations and people using alternative online technologies such as a mobile phone.
For more information see the Web Accessibility section.
1.2
Common Website Elements (CWE)
There are a number of key elements required on all Western Australian Government
websites. These are known as ‘Common Website Elements’ and are described in the
Website Standards: Common Website Elements document which forms part of the
Website Governance Framework (Framework).
3
Website Design needs to be based around the following elements described in the
CWE document which aims to:



1.3
Introduce a level of consistency throughout all WA Government websites on
the positioning and functionality of key website elements
Better promote and foster the WA Government identity, making it easier for
users to identify WA Government websites
Make it easier for users to navigate WA Government websites thereby
providing a more consistent user experience.
Information Architecture
Information Architecture (IA) involves structuring and organising information on
websites to assist users to find the information they want. IA is the basis of good
website design and can help to address the needs of both the business and its
users.
Effective IA can:



Enable users to find information and services and complete tasks easily
Support and communicate business objectives
Provide users with a consistent, predictable and satisfying experience1
Without appropriate IA, websites can become disorganised and very difficult to use
and manage. The website structure should be based on subject or category with
unambiguous labelling so users can quickly assess the information they seek.
The Australian Government Information Management Office (AGIMO) has created an
Information Architecture for Websites: Better Practice Checklist to help agencies consider
key issues for website information architecture.
1.4
Navigation
“Navigation is both the representation of the information architecture (the structure)
of a site, and the mechanism by which users move around the site.”2
The purpose of navigation is to:




help the user find what they are looking for
tell the user where they are on the website
tell the user what the website contains
tell the user how to use the website
1http://www.egov.vic.gov.au/victorian-government-resources/website-management-framework-wmf-
/government-website-standards-victoria/information-architecture-classification-standard.html
http://www.finance.gov.au/e-government/better-practice-and-collaboration/better-practicechecklists/website-navigation.html
2
4
Navigation needs to be clear, simple and consistent as people won’t use a website if
they can’t find their way around it. The Website Standards Common Website Elements
document includes a number of elements that require a level of consistency in the
positioning and functionality of website navigation.
AGIMO has created a Website Navigation: Better Practice Checklist that suggests a
number of navigation issues for consideration when designing websites to help make
them easier for users to navigate.
1.5
Content
Content is one of the most important parts of a website. A successful website
presents information required by users in a way that can be read and understood
quickly and easily.
Reading information on the Web is different to reading from printed materials. Users
tend to scan web pages rather than reading information word-for-word. They are also
likely to skip or ignore large sections of text that don’t seem relevant to what they are
looking for.3
When preparing content for a website it is therefore important to write in a style that
accommodates how the majority of users read. Usability improves when writing is
concise, easy to understand and is organised into clearly labelled sections.
The following links provide more information on how to write for the web:

Writing for the Web http://www.usability.gov/methods/design_site/writing4web.html

What Not to Web: Plain Language and Writing for the Web Made Easy http://www.howto.gov/training/classes/what-not-to-web

Writing for the web: guide http://www.communications.tas.gov.au/toolkit/publishing_print,_multimedia_and_web
/internet_and_electronic_communications/writing_for_the_web_guide
1.6
Hyperlinks
Use appropriate and consistent visual cues to display links. For example a change of
colour is most often used to differentiate between visited and unvisited links. Text
describing the link should be meaningful, and accurately reflect the destination of the
link.
When linking to external websites, make it clear to the users they are leaving the
agency’s website. The content should open in a new browser. Links to nongovernment organisation or content may be perceived as an endorsement of that
http://www.monash.edu.au/staff/web/content/writing.html
3
5
organisation. Assess the implications and ensure there is no implicit endorsement
or any commercial advantage given in providing the link. It is also important to make
clear that the content provided by the external organisation is not the responsibility of
the agency.
1.7
Appearance
Text and colours used for the website should be consistent across the entire
website. Select a font that is easy to read online. When using colours, ensure it will
accommodate people with a colour disability. The contrast of text against the
background must be sufficiently high to ensure it is legible on both screen and on
paper.
Limit the use of images4 as it can be distracting and may slow page download times.
Background images should be used sparingly as it can make it difficult to read the
foreground text.
When using images, provide meaningful ‘alt’ tags. If using video or animation5,
provide the text or audio equivalent to ensure the content is accessible by all.
Download information (subject matter description, file size, file format, etc.) should
also be provided to help users determine whether they wish to access the video.
Consider designing your website to be resolution-independent as nowadays a
website can be viewed on multiple web-enabled devices – such as smartphones,
tablets, desktops, etc.
Responsive web design6 is the concept of designing websites in a way that will fit the
device that it is being viewed from. Depending on which device is being used, it
could present a different layout of the website to suite the screen size.
However it is important to note that not all websites need to be designed this way.
Consider the requirements of your users and your website objectives to determine
the best approach. Responsive design is also not a replacement for mobile specific
websites. Mobile specific websites tend to provide simplified functionality and are
aimed at enabling a user to quickly achieve a goal, for example checking in for a
flight, making a payment, etc.
For more information on layout designs, refer to the Common Website Elements.
4
The ‘usability.gov’ site has some useful information on graphics, images and multimedia -
www.usability.gov/pdfs/chapter14.pdf
5
The use of animation can be an effective means for drawing attention to key aspects of a website.
However certain special effects such as spiralling, throbbing or flashing have been reported to cause
epileptic seizures and should be avoided.
6
For more information on Responsive Design refer to the ‘Further Reading’ section.
6
1.8
Web-based translation applications
WA Government agencies should not provide links to automated online translating
tools on their websites as inaccurate translation could pose a risk to clients’ rights,
health and safety.
Use of web-based translation applications are not encouraged, except for the
translation of simple, literal content that does not have any cultural, technical or
nuanced components. While the tools are easy to use and can provide the gist or
general understanding of the text, the translation cannot be relied on for accuracy.
WA Government agencies that require web content in different languages are
encouraged to engage translators who have suitable qualifications or credentials.
A qualified or credentialed translator has:



the skills to convey the appropriate style and register of the original document,
relate the nuances, and provide a high degree of accuracy
the ability to refer to specialist dictionaries and research subject material
an understanding of professional ethics.
The Western Australian Language Services Policy 20087aims to ensure that language is
not a barrier to services and programs for people who require assistance in English.
More information on the policy is available from the OMI website at
http://www.omi.wa.gov.au/omi_language.cfm.
7
Office of Multicultural Interest, Western Australian Language Services Policy 2008 -
http://www.omi.wa.gov.au/omi_language.cfm
7
Further reading:






The Australian Government Information Management Office (AGIMO) http://www.finance.gov.au/agimo/index.html
Public Sector Commission website – http://publicsector.wa.gov.au/
Victorian eGovernment Resource Centre - http://www.egov.vic.gov.au/
HowTo.gov - http://www.howto.gov/
Tasmanian Office of eGovernment - http://www.egovernment.tas.gov.au/
Introduction to responsive web design http://www.1stwebdesigner.com/design/introduction-responsive-web-design/

Responsive web design isn’t meant to replace mobile websites
http://marketingland.com/responsive-web-design-isnt-meant-to-replace-mobile-websites-7949

How to: effectively use responsive web design

http://www.business2community.com/online-marketing/how-to-effectively-useresponsive-web-design-0147333
Usability.gov, http://www.usability.gov/guidelines/index.html
1.9
Further information
Department of Finance
Email: [email protected]
8