Users visit websites for their
content. The design is there to allow people
access to the content. Content is number one.
When users visit a page they immediately scan
through the content and it is only when they
have finished with the content that they will
scan the navigation area for ideas of where
to go next.
Writing
for the Web
Users look at the text and headlines first.
Present the content in a manner that draws in
readers. There are three main guidelines for
writing for the Web.
· Be succinct:
Write only half of the text you would have done
if you were doing a print publication.
· Write for
scan ability: Short paragraphs, subheadings
and bulleted lists.
· Hypertext should be used to break up
long information into multiple pages.
Copy
Editing
Put all web pages through the spell checker
at a minimum. It is also recommended to proofread
the pages and high-end web organisations should
employ professional copy editors to go through
the text.
Scan
Ability
Users scan text and pick out keywords, sentences
and paragraphs of interest and skip the less
interesting sections.
· Articles should be structured with
two or three levels of headlines.
· Headings should tell the user what
the page or section is about.
· Use bulleted lists and similar design
elements to break the flow of uniform text blocks.
· To make important words catch the user’s
eye, use highlighting and emphasis. Highlighting
and background colours must look different from
link colours.
Plain
Language
Start each page with the conclusion.
Give the user the most important
information first. One idea per paragraph is
a good rule of thumb as users who scan often
only read the first sentence of each paragraph.
Limit the use of metaphors especially in headings.
Page
Chunking
Split information into multiple nodes, connected
by hypertext links. Text should be kept short
without taking away from the depth of the content.
The information should be split into coherent
chunks that each focus on a certain topic. Limit
the use of within-page links as users often
expect to get taken to a different page and
often hit the back button when they finish.
www.bbc.co.uk’s website
shows an article with links to secondary pages.
This gives a brief synopsis of the story and
the secondary pages can give more information
if required by the user.
Page
Titles in the Browser Window
Often used as the main reference to pages. They
are also used in navigations facilities such
as bookmark lists and history lists. Page titles
should only have between 2 and 6 words. Different
titles should be used for different pages. For
quick in HTML, every page has a title that is
specified in the header section of the page.
Page titles scanning it is best to optimise
titles by using the information-carrying words
at the front and not ‘A’, ‘An’
or ‘The’.
Writing
Headlines
The guidelines for writing headlines for the
Web are:
· The article should be clearly explained
to the user in terms that they can relate to.
· Write in plain language
· Avoid teasers that try to entice people
to click to find out what the article is about.
Users have been burned too often.
· Avoid ‘A’, ‘An’,
‘And’ or ‘The’ in email
subjects and page titles.
· The first word should be an important
information-carrying one. E.g. start with the
name of the company, person, or concept discussed
in an article.
· Do not start all page titles with the
same word.
Legibility
· Between text and the background use
colours with high contrast. Black text on a
white background (positive text) or white text
on a black background (negative text) for optimal
legibility.
· Use subtle backgrounds or plain colour
backgrounds
· Use fonts that are big enough for people
to read.
· Text should stand still and almost
always be left justified.
Online
Documentation.
Jakob Nielsen’s First Law of Computer
Manuals states “People don’t read
documentation voluntarily”.
· Make the documentation pages searchable
as users only turn to documentation when they
have specific problems.
· There should be an abundance of examples
· Instructions should be task-orientated
and show how to do things step-by-step.
· Provide a short conceptual model of
the system and include a diagram that explains
how the different parts work together.
· Use hypertext links to link any difficult
concepts or system-oriented terms to a glossary
· Be brief.
Multimedia
Constrain use of multimedia as it can result
in confusing the users and make it more difficult
for them to understand the information.
Response
Time
File format and size must be indicated in parentheses
after the link whenever a file is pointed to
that will take more than10 seconds to download
with the bandwidth available to most of your
users. 56Kbps need a warning for files larger
than 50 KB and for business users mark files
larger than 200 KB. Provide previews of all
multimedia objects on plain HTML pages.
Images
and Photographs
Minimise graphics and text rendered as images.
Instead take advantage of the hypertext features
of the Web. Add more images as users follow
links to more specific pages.
Image
Reduction.
Use a combination of cropping and scaling. To
get a thumbnail that is 10% of the original
image. Crop the image to 32% of the original
size and then scale the result to 32%. Final
image will be 0.32 x 0.32 = 0.1 of the original.
Animation
Animation is good for seven purposes:
· Showing continuity in transitions:
Changes between states will be much easier to
understand if the transitions are animated instead
of being instantaneous.
· Indicating dimensionality in transitions:
e.g. turning back to a previous page can be
shown by the opposite animation (sweeping from
left to the right).
· Illustrating Change over Time: e.g.
deforestation of the rain forest can be illustrated
by showing a map with an animation of the covered
area changing over time.
· Multiplexing the Display: e.g. client-side
image map with explanations that pop up as the
user moves the cursor over the various hypertext
anchors.
· Enriching Graphical Representations:
Some types of information are easier to visualise
with movement than with still pictures. E.g.
in icon design.
· Visualising Three-Dimensional Structures:
Animation can be used to emphasise the three-dimensional
nature of objects and make it easier for users
to visualise their spatial structure.
· Attracting Attention: Avoid continuous
animation.
Video
Minimise on the Web due to bandwidth constraints.
Currently video is good for:
· Promoting television shows, films or
other non-computer media.
· Giving users an impression of a speaker’s
personality
· Showing things that move.
Best to digitise a higher-quality version of
the video and make it available for download
than use streaming video.
Audio
Separate channel from that of display and can
provide a sense of place or mode. Speech is
also good for teaching people the pronunciation
of words. Background sounds must remain quiet
and non-intrusive and there always needs to
be a user preference setting to turn them off.
Enabling
Users with Disabilities to Use Multimedia Content
Captions on videos and transcripts of audio
presentations can help the hearing impaired.
For the visually impaired users the use of Descriptive
Video Service with a separate audio narrative
that runs between the pauses in the main audio
track can help.
Three-Dimensional
Graphics
Difficulties from using 3D on a computer are:
· We don’t get true 3D, as the
screen and mouse are both 2D devices.
· Difficult to control 3D space with
the interaction techniques available such as
dragging and scrolling.
· Users need to pay attention to the
navigation of the 3D view as well as the navigation
of the underlying model.
· Poor screen resolution. Remote objects
lose detail.
· Software required for 3D is crash-prone,
non-standard and extra download.
When
to use 3D
Use of 3D is appropriate when you need to visualise
physical objects that need to be understood
in their solid form. E.g. trying to understand
the shape of a molecule.
www.nyu.edu’s website about
3D molecular structures