Designing for the WWW De

Montfort University, 2001

1
Designing for the World-Wide Web
Designing for the WWW De
Montfort University, 2001
2
Problems with Hypermedia
Navigating the hypertext web
Easy to lose sense of current position
Difficult to return home or Exit
Solution: provide map?
Multiple entry points to a linked page leads to loss of
contextual information
Complex structure may mean crucial information is by-
passed by user
Leads to uncertainty, loss of confidence
Printing hard copy is non-trivial
Printing is linear, hypertext is not

Designing for the WWW De
Montfort University, 2001
3
Web Site Design
Essentially the same process as when designing any
interactive application, be it a...
web-site
stand-alone application
multimedia presentation
Same basic process as described in lecture on design
process
user-centered design process and focuses on
users
tasks
environment
Designing for the WWW De
Montfort University, 2001
4
Principles, processes and guidelines
Principles: general rules in the form of dos and donts
Process: guidance on a sequence of activities,products
resulting from these and methods for conducting these
Guidelines: collection of specific pieces of design guidance
on topics, such as use of graphics

Good design is not a mechanistic process, the designer needs
to apply this general guidance to a specific context and add
individual creative flair
Designing for the WWW De
Montfort University, 2001
5
Decide on criteria for success
Make sure the reasons for building a web-site are clear
Get organisational agreement about what success means
Examples of criteria for success
number of hits per day
number of repeat visits
number of new people signing up to an organisation or service
quantity of products sold
feedback from customers
getting good press reviews
making customer communication easier
If you arent clear about what constitutes a successful
design, then you wont know when you achieved this.

Designing for the WWW De
Montfort University, 2001
6
Decide who you want to impress
Be clear about
which groups of people you are designing a site for
what assumptions you will make about their level of
knowledge and their expectations
what you think the target audience wants to get from
visiting your site

Designing for the WWW De
Montfort University, 2001
7
Example: fanzine site dealing with
Liverpool football club
target audience - people who are already football fans,
primarily of LFC
assumptions: audience probably know a lot about football
and probably follow the matches played in the league week
by week, expect high quality interactive magazine
audience wants up-to-date news, analysis, gossip, match
reports with photos
audience not primarily looking for basic facts about LFC,
Liverpool or football in general
Clearly other people may visit the site (e.g tourists visiting
Liverpool), but they are not who the site is aimed at
primarily

Designing for the WWW De
Montfort University, 2001
8
Design the site structure around the
information
Identify natural structure of the information
people looking for information make inspired guesses about
which link to follow based on what they see at the interface
grouping information in a logical or natural way increases the
likelihood that users will guess their way correctly to where
information will be found
Allow for growth:
plan for growth and the addition of new material so that this can fit
into the existing structure,
otherwise there is a danger that the site structure will need to be
changed to accommodate new information

Designing for the WWW De
Montfort University, 2001
9
Design the site structure around the
information
User tasks:
define what tasks users will use a site for, what information they
will need in order to complete the task and what sequence
activities will be carried out in.

Navigation:
based on information structure and knowledge of the order in
which activities are likely to be carried out, an appropriate means
of linking the items of information together can be devised, often a
combination of a hierarchical structure and a linear structure

Designing for the WWW De
Montfort University, 2001
10
Design the site structure around the
information
Prioritise Information:
put the most popular and important information towards the top of
the site or page
Establish User Interest: Dont give the user too much
information too early on.
Users may less inclined to read through large amounts of
information in the hope of finding something of interest further on
Graphics should support the information design and
communicate the structure of the rest of the site
otherwise they are merely decoration and add to the download time
for users.

Designing for the WWW De
Montfort University, 2001
11
Make it easy to see what's there and
how to get it
Make the site structure explicit
Provide an overview page
Tell the users where they are
Provide a 'home' and give constant access to it
Identify and give access to landmarks
Make link names explicit
Make access as direct as possible
Designing for the WWW De
Montfort University, 2001
12
Don't expect WWW pages to be just
like paper publications
Exploit the medium
paper pages can be viewed simultaneously, written on, given to
friends etc. Dont seek to replicate the structure on a paper
document in its on-line version. Look at integrating pages
Add value:
good example are links to more like this, customers also bought
these books, reviewers comments against an on-line book
catalogue
Reading from the screen is hard
break up the text into sections with subheadings.
Pay attention to text/background contrast to avoid legibility
problems.
Enable print versions of long documents to be downloaded as 1
document, even these are split into different documents at the site
for on-screen reading.

Designing for the WWW De
Montfort University, 2001
13
Use graphics with care
Hire a professional graphics designer
Make sure the designer understands the medium
Carry graphic style throughout the whole medium
Graphics can still be boring
Less can be more
Match graphics to usage scenarios, not just link speed
If in doubt, leave graphics out
Test graphics on different browsers
Designing for the WWW De
Montfort University, 2001
14
Keep users interested
Always have something new
keep site updated with new content to ensure that users return for
more. This need not be the central content, but a feature of interest
to the target audience, such as Latest news, Fact of the Day
Provide genuine content
useful and unique content ensures the site will be visited regularly
Integrate the site with other media
the WWW is not an isolated medium, but integrated with
newspapers and television as advertising media, email notifications
of updates
Get users involved
site is more likely to be bookmarked if it engages the user is some
other activity, competitions, on-line surveys and experiments,
quizs, discussion groups

Designing for the WWW De
Montfort University, 2001
15
Web design guidelines
In addition to applying general guidelines other guidelines
for evaluating websites have been compiled
These have been grouped into three categories
Navigation
Access
Information Design

Designing for the WWW De
Montfort University, 2001
16
Navigation
The biggest problem!
Avoid orphan pages Are there any? Where do they go?
Avoid long pages. Reduce scrolling
Provide navigation support.
Is there a site map? Are the menus useful?
Avoid deep menus broad is better
Avoid non-standard link colours
Provide consistent look & feel
Designing for the WWW De
Montfort University, 2001
17
Access
Avoid complex URLs
Is the URL difficult to remember? Are mistakes likely?
Avoid long download times
Does the site have too many graphics?
Can the user choose to see a graphic?

Designing for the WWW De
Montfort University, 2001
18
Information Design
Good graphical design is important. Do not have lots of text or
graphics
Do not use bold or Caps for long pieces of text
Place the navigation elements in a consistent location on each page
Use black text on white for optimum readability
Do not overuse colour
Keep it simple
Be consistent
Designing for the WWW De
Montfort University, 2001
19
References
User Centred Website Development D Mc Cracken & R J
Wolfe. Prentice Hall 2003

Mary Jones: Worldwide Web Design in Interface
Technology - the Leading Edge, eds. Noyes & Cook,
Research Studies Press, 1999, ISBN 0 86380 233 8