Web design criteria
University of Stellenbosch
What is on a web page?



Navigational elements
Text
Graphics
Navigation
The goal of navigation is above all functional not aesthetic.
The finest attributes of a navigational system are



clarity
ease of use
consistency
Navigation : tips
Give users an overview of the structure of a website
Provide a sitemap.
Provide a table of contents with short descriptions.
Help users make a mental model of the website
By giving buttons logical names which give an indication of
the organisation of information.
Keep users orientated
Use breadcrumb navigation
Each page must have a title.
Use different colours for different sections of large websites.
Navigation : more tips
Navigational buttons should be at the same location on screen
throughout a website.
Do not overload a page with navigational buttons.
Some sources say not more than 7 on a page, but this cannot
always be done.
Don’t forget:
A webpage is a hypertext displayed in a browser which has
back and forward buttons.
These buttons are a bonus and do not replace good navigation.
Different kinds of navigation 1
Back to Home page:
Menu on home page, on all other pages only home page
button/logo, no forward or back buttons.
All the navigation buttons are present on all the pages.
Drop down menus or shoot out menus:
Menu with drop down or shoot out menu in left or top
navigation bar. Always available.
Different kinds of navigation 2
Tab menus:
Instead of using rounded buttons or word links as buttons,
the metaphor of tabs is used. E.g. http://amazon.com
Timeline menus:
Navigation is presented according to a sequence of events,
on a timeline.
E.g. http://www.metmuseum.org/toah/splash.htm
Object or map navigation:
Links on or pointing to objects, maps etc. function as navigation.
E.g. http://www.bbc.co.uk/science/humanbody/body/
factfiles/organs_anatomy.shtml
Home pages
The file name of the homepage must be one of the
following, otherwise the server will not recognise it as
the start page of a website:
Index.htm
Index.html
Default.htm
Default.html
It does not matter, whether the name is in capital letters or not.
Be consistent (again) when you name your pages:
Use either .htm or .html
Functions of Home pages
Pages that offer menus or tables of contents through
 Text-based links e.g. http://www.sun.ac.za
 Graphics as buttons e.g. http://www.sun.ac.za/forlang
 Graphic image maps e.g. http://www.digitalhistory.uh.edu/
News orientated home pages  try to generate repeat
visits through new news items every day/ week / month.
E.g. http://www.sun.ac.za
Path-based home pages -> more specific info is deeper down,
users are steered there by links.
E.g. http://www.britishcouncil.org
Design of home pages
Find optimum between (attractive) graphics and fast loading
text-based home page. All graphics take more time to download
than text.
Decide if you are going to use text links as buttons or graphics
as buttons.
Connect design of home page and rest of website.
Have good reason if they are not identical.
Design of site pages
 Internal pages should be identical.
 Have a general page grid or design.
 If website is large, create submenu
pages, as home page could be too
small to display all links.
This would be creating websites
within a website.
 Have a sitemap link on the home page.
 Include revision and/or creation date.
 Possibly include link for users to comment or to webmaster.
(Graphic from: Yale Webstyle guide)
Consistency
Decide on a general layout plan for all inner pages
Decide on a style/metaphor/atmosphere for the website
“Repetition is not boring.” (Web Style Guide)
Consistent approach “breeds familiarity” = satisfied users.
Consistency includes layout, typography, navigation,
design elements (like colours, shapes, drawing and
photographic style)
Layout Design 1
Top banner or logo and top navigation should not take up
more than 20% of screen
Buttons / navigational elements that are of a similar kind,
should be kept visually together
Use form, outline and colour to group elements
Sketch basic layout on paper, then electronic format
Without a basic design grid your pages will look patchy
Layout Design 2
Use tables for placing elements on page
Use CSS – even better
Remember: different browsers could render layout
differently. Test your website in several browsers with
several screen resolutions.
Margins and white space:
Creates contrast between navigational elements and text
Layout Design 3
Bear in mind that the user has control over the way in which
pages display in their browser.
This makes the display of your carefully designed page
sometimes unpredictable.
Fontface, font size, screen resolution, screen size,
the display of images (or not) are all elements which can be
controlled by the user’s browser preferences. Caveat emptor!
Example of Layout
Page headers and footers
Use page header for identifying site
Use footer to date webpage and identify ownership
These elements should be standardised
How much text and graphics?
Find a balance between text and graphics.
Will depend on intended user of website.
Too much text, without typographical contrast:
hard to read
Too many graphical elements:
user will be disappointed in lack of useful information
Contrast on a page
Solid text is deadly. Contrast is essential.
(From: Yale Webstyle guide)
Animations
Animations slow down the page and makes the user dizzy!
Do not use them …