System design information library
Database Driven Website Design & Training, UK
 
Tel - +44 (0) 1785 213 088
Tel Foxford Services UK Database Driven Website Design and Training UK. Stafford Staffordshire, Shropshire Cheshire Birmingham Manchester
Email Foxford Services UK Database Driven Website Design and Training UK. Stafford Staffordshire, Shropshire Cheshire Birmingham Manchester
  Home    About Us    News    B2B Explained …    Clients    Contact Us    Training    Library    Design   
Search  
1 - Designing Usability 2 - Page Design 3 - Content Design 4 - Site Design 5 - Intranet Design 6 - Web Accessibility 7 - Global Audience
3 -Content design

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.

Web Content Design

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.

Web Content Design

www.nyu.edu’s website about 3D molecular structures

Home —  About Us —  News —  B2B Explained … —  Clients —  Contact Us —  Training —  Library —  Design —  Find Us  — Privacy —  Top of Page

All rights reserved. © 2003-2008 Foxford Services Limited, Stafford, UK
Database Driven Websites & Training Courses. Building Systems and Sites that work for you.
Serving UK West Midlands, Staffordshire, Shropshire, Cheshire, Derbyshire. Based in Stafford UK.
Foxford Services is a registered member of the UK Web Designers Association (UKWDA). Click here to go to the UKWDA home page. (Image:UKWDA Logo)