|
Best Practice in Web Design
Introduction
Irrespective of
whether you are intending to use a flat "brochureware" website or an
interactive e-commerce site, the overall look and feel will play an
important role in its usability.
It is important that visitors to the
site can quickly and easily access the required information. The
design should present the content in an intuitive manner, making
effective use of colour, layout and site organisation.
There are also legal issues to consider
in the design of the website. You have to ensure that you comply
with the Disability Discrimination Act (DDA).
This guide provides advice on the
principles of good web design, taking into account the requirements
of the DDA.
Subjects covered in this guide
It is essential from the outset that
you clearly identify what the purpose of your site is. Typical
reasons why businesses develop websites include:
Remember that what you want the website
to accomplish and what your visitors require from the site may
differ. You may be concerned about the visual aspects of the site,
while your visitors probably care more about how quickly they can
find information.
Content and audience
Establish the type of content you will
need to support the objectives of the site and how this should be
presented. Look for examples on the Internet that will enable you to
present the content in the most appropriate way.
Ensure that you know the audience you
are trying to reach. Try and understand what they will want when
they come to your site, how you can initially attract them, what
will encourage them to return, and what type of computer and
connection speed they are likely to have.
From 1 January 2007 all companies in
the UK must clearly state the company registration number, place of
registration, registered office address and, if the company is being
wound up, that fact, on all of their websites. A common place to put
this information is in the "About us" or "Legal info" page of the
site - it does not have to appear on every page.
Planning techniques
It is a good idea to create a diagram
that shows the structure and logic behind the content, presentation
and navigation you propose to use.
A popular technique for mapping out a
website is known as wireframing. This allows you to create a
skeleton of the site that describes the basic elements you intend to
include. The wireframe is made up of labelled boxes that illustrate
the overall navigation and the blocks of content that each web page
will contain.
The wireframe can be drawn using
packages such as Word, PowerPoint or Illustrator. Wireframes are
very easy to change, so the initial design can be shown to customers
or friends who are representative of your intended audience. Their
comments can then be quickly incorporated to arrive at an agreed
design.
There are several technical issues to
consider when designing your website.
Browser issues
You will have to design web pages that
can be displayed by many different browsers. Common browsers include
Microsoft Internet Explorer, Mozilla Firefox, Netscape Navigator and
Opera.
You should test your web pages in as
many browsers as possible during the development process to ensure
that they will display properly. You should also aim to ensure that
your web pages work in previous versions of the browsers, as some of
your audience may not have updated their software.
Screen resolutions
The most common resolutions, expressed
in "pixels", are 640 x 480, 800 x 600 and 1024 x 768. If you opt to
design your website based upon the higher resolution, then you need
to be aware that some screens with lower resolutions may not display
all of the content. You cannot control the screen resolution of the
monitors used to view your website.
Download speeds
Not all Internet users have high speed
access, so connection speed should also influence your web page
design.
Too many images will slow down the
speed at which the web page loads. Generally, pages should load
within ten seconds. If your pages download slowly, your users will
probably move on to another site.
Try and keep file and image sizes to a
minimum - generally the total size of a web page should be no more
than 40-60 KB.
back
to top
The Disability Discrimination Act (DDA)
makes it illegal for a website provider to discriminate against a
disabled person by refusing to provide a service that is generally
available, providing a service of a lower standard, or failing to
comply with a duty to make reasonable adjustments.
Accessibility guidance
The World Wide Web Consortium (W3C) has
produced a number of accepted guidelines, which are divided into
three priorities:
-
priority 1 - websites must comply otherwise
some users will find it impossible to
access the site
-
priority 2 - websites should comply,
otherwise some users will find it difficult
to access the site
-
priority 3 - websites may comply, otherwise
some users will find it somewhat difficult
to access the site
Reasonable adjustment
The DDA requires a business to make
"reasonable adjustments." The website developer must:
-
change a practice, policy or procedure that makes it
impossible or unreasonably difficult for disabled people to
use the service
-
provide an auxiliary aid or service if it would enable (or
make it easier) for disabled people to use the service
Making websites accessible
There are many adjustments you can make
to your website to make it easier for disabled people to use. For
example, your web designer can attach a text description to every
image. This means that blind users, who rely on a browser that reads
out the contents of the web page, can hear an explanation of what
the image is for. You can
read about accessible design on the Web Accessibility Initiative
website.
Checking if your site is accessible
If you have not already uploaded your
code, you can
check your website's accessibility using free HTML validation
services on the Design Group website.
If your website is already uploaded,
you can check
the accessibility on the WebXACT website.
back
to top
When designing your website, plan a
theme and structure that will hold all the pages together. You
should convey an image of good basic operational functionality,
neatness, and a professional appearance.
Visual aspects
Create a common theme of colours,
fonts, graphics and page layouts. Remember that this can be achieved
without the need for spectacular graphics - simplicity and elegance
can be more effective.
Consistency
Plan to create a unified look for the
various sections and pages of your site, so that the users are aware
that they are moving around within a single site as they move from
page to page.
Create smooth transitions from one page
to another by having consistent elements on each page and repeating
colours and fonts, for example:
-
placing navigational elements in the same position on each
page
-
having a consistent background texture to each page
-
using fonts and colours consistently throughout the site
All of this will help to reinforce the
identity of the site.
White space
Don't be afraid to use white space or
blank areas in your web-page design. Good use of white space can
help define areas of your page and can be used to structure and
separate content.
A lack of white space can give the
impression that the page has too much content and can confuse the
user.
Branding
The brand and image of your business
should be reinforced by your website. Consistent use of your company
logo throughout the site will help in this, and should be viewed as
an element of your overall marketing strategy.
back
to top
The key to designing a successful
website is understanding the needs of your audience and reflecting
these in your design.
User interaction
Consider how the user may want to
interact with the web page, perhaps by selecting products or
services that you offer or moving around the site using hyperlinks.
Use linked text and short descriptions, and organise links into
related topic groups.
If the page contains large amounts of
text, keep paragraphs short to aid in online reading. Ensure that
the text is legible by providing enough contrast between the
background and foreground colours.
Ranking the information
Rank the information you want to
display in terms of how important it is. Position the most important
in the middle of the page, next important across the top, with the
least important or static information in the left margin.
Hierarchy of information
Don't make users navigate through too
many layers of the site to find the information they want.
Provide prominent navigation aids so
the user can quickly find the information they need. A standard
navigation bar that is in the same place on every page enables the
user to move quickly through the site.
Exploit hypertext
Use hypertext to provide links that
will enable the user to move easily around the site. They should
also be able to return easily to the higher sections of the site.
A hypertext table of contents allows
the user to pick the exact topic that they want to view.
Amount of content
Consider how much content should be
contained on a web page. Avoid putting too much information on a
page, as this may make it more difficult for the user to locate the
information they need. Use links as a method of dividing content
between pages.
back
to top
Designing for the web restricts your
font choices. If you specify a font that a user does not have, their
browser will substitute a default font, changing the look of the
page.
Choice of fonts
The web page will look clearer if you
choose fewer fonts and type sizes.
Decide on a font for each different
level of topic importance. For example you should have a different
font for page headings, section headings and body text. Effective
use of different fonts for different levels of importance will guide
the user through the content more efficiently.
Choose different size fonts of the same
type throughout the site. Consistency will help you to develop a
strong visual identity for your site.
Availability of fonts
The user's browser and operating system
determine how a font will be displayed, so you can't be absolutely
sure how your page will look. In addition, if the font is not
available, then the user's system will default to a standard font.
Remember to use commonly available
fonts and test your web pages on multiple platforms to see what
effect these have on the overall appearance.
Ensure the page is legible
The size and face of the type used on
the page determines the legibility of the text. Remember that it's
harder to read on screen than from a paper copy, so keep fonts big
enough to be comfortably read online.
To make things easier for the user you
can add more white space around the blocks of text and between
lines, both of which will help with clarity.
Make sure that you have enough contrast
between your text colour and the background colour. Dark backgrounds
frequently make the text difficult to read, so opt where possible
for darker text on a lighter background.
back
to top
Site navigation
Develop a simple and consistent
navigation scheme. Links should be presented clearly and the words
or images that the user clicks on must be clear, concise and
relevant to the information they are leading to.
Navigation buttons
Always ensure that the navigation
buttons are placed in the same place on all of the pages on the
site.
You should remember that every graphic
you add to your website for navigational purposes increases the
download time for the user. So keep your navigation buttons simple
and re-use the same ones throughout your site.
back
to top
Finding information
The key to the success of your website
will be largely based upon how easy it is for users to find the
information that they require. You should consider including a site
map and a search facility to help in the location of information.
Once a user is browsing the site, you
should use hypertext to provide contextual linking to related ideas
or content. Try to anticipate what information users are likely to
want next, but at the same time leave them free to make their own
navigational choices.
The "three click rule"
Bear in mind the "three click rule"
which means that users starting at your home page should be able to
get to the information they require in three mouse clicks. While
this is not always achievable, by taking it into account at the site
design stage you are more likely to get close to it.
back
to top
|
