Web Page Design Guidelines
1. Navigation
When web page users arrive at a new web page:
- They do not read - they scan
- They do not tend to scroll down the page
- They scan content in the main body of the page and tend to ignore the navigation area.
a) Context
When they arrive at a new page, many users need to make sense of:
- where they are
- how other information in that context relates to the page they are on
- how relevant the information, on this page, is to them
Meaningful headlines, table of contents, links, breadcrumbs and date stamping can help with this.
b) Table of Contents (left hand side of screen)
Once the user becomes familiar with the table of contents then they tend to use this as their main navigation around a set of pages.
c) Opening a new window
The Back button is the second-most used navigation feature. Users know if they get lost they can always go back to the page they started from. Opening a new window disables the Back button so try to avoid this unless the link goes to an external site.
d) Links
- The links should be relevant to the page subject matter
- The number of ideal links on a page is debatable. Too many can cause confusion; too few and the user may not get to the information they really need. Make sure the balance right for the page/subject
2. Page Design (Content)
Be succinct, write for scannability and use hypertext to split up long information into multiple pages.
a) Short sentences and short, one idea paragraphs.
It takes a longer time to read from the screen than from paper and people tend to scan the page and find what they are looking for or get frustrated and leave the page. Keep content concise, scannable and objective.
Be Succinct! Writing for the Web (useit.com website)
b) Regular headings and sub headings
Headings help break up your page into smaller more scannable chunks.
- Structure your page with two or three levels of headlines
- Do not use all capital letters in a title
c) Lists (bullet and ordered)
Displaying related items in a list also improves scannability:
- Put important information at top of lists
- Introduce each list (is a title enough?)
- Use bullets to list items of equal importance
- Don’t use ending punctuation in a list
d) Links to lower level pages.
- More detail on a subject can reside on a separate page dedicated to that subject
- Use hypertext to split up long information into multiple pages
e) Descriptive links
- Use a link that describes the destination the user rather than the web address (URL)
e.g. use Changing Your Address rather than
http://www.sheffield.ac.uk/ssid/record/pin.html - If you wish the user to print out the web page for future reference, you should use the Web address (URL) but:
- do not display the http://
- do write out sheffield full, not shef
f) Highlight Keywords
You can highlight keywords in your text by using:
- bold font
- italics
- hyperlink (should be done sparingly and only if necessary)
g) Check your spelling
CMS does not include a spell checker. To check your spelling, copy your published web page and paste it into MS Word.
h) Pictures
Will a picture add value to your page or are you wasting valuable space?
- Size: generally be 270 x 180 pixels
- Positioning: generally right hand top of the screen
- Link: to information related to picture
- Caption: use when appropriate.
i) Formatting Guidelines
- Times: use am or pm 9.30am 11.30pm 12 noon
- Dates: 31 May or 31st May
- Telephone Numbers: 0114 XXX XXXX
- International Telephone Numbers: +44 (0)114 XXX XXXX
3. Page Design (Structure)
a) Write in Inverted Pyramids
- tell the reader the conclusion
- follow by the most important supporting information
- end by giving the background.
This keeps the important information at the top of the screen, above the roll, where users can see it without having to scroll.
Inverted Pyramids in Cyberspace (useit.com web site)
b) Positioning Links
When positioning a link on a page try to place the link:
- In a box on the right hand of the screen ideally or
- In main body after the relevant paragraph or
- In the text body if really necessary
c) Page Design and Style
In CMS, the template you use will determine how you design your page.
i. Standard
This is the style used for most straightforward pages where you want headings, sub-headings, bulleted/numbered lists, links and pictures.
ii. Multi-Column
On the SSiD and SSD website this style are used as contents lists. Unless no other order dictates be alphabetical.
iii. Table
- You determine how many rows and columns you want.
- The table in the general area doesn’t allow links within table cells.
d) Use of Boxes
i. "See also" boxes (Links)
Use for links that:
- Relate to the subject on the page
- Have been mentioned in the body of the text
www.sheffield.ac.uk/ssid/exams/timetables
II. Download boxes
- Indicate the format and size of the file Eg (PDF 242KB)
- Users, generally, will not read PDF files online. So use PDF only for documents that users are likely to download and print .
iii. Right Hand boxes
a. Quick Links
Use to link to significant pages deeper in the site.
b. Grouping Links
Use to group similar links to a particular subject such as "Other Web Sites", "Document Examples", "About SSiD", etc.
c. Separating Links
Use to highlight separate aspects of information relating to the web page subject such as "Directions", "Homepage", "Contacts" on
d. Navigation
Use when you can use the table of contents for navigation but you want to keep users focused on the various sections of a particular subject. Make sure the subject name is the title of the right hand box.
4. Test your Web Pages for Usability
Usability includes things such as:
- how easy it is for people using the web site to get the information they want the first time they use the site
- how quickly they can do things the next time they visit the site whether it is the next day or several weeks later
- how many mistakes they make
- how positive their experience is