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. Timeline menus: Navigation is presented according to a sequence of events, on a timeline. E.g. Object or map navigation: Links on or pointing to objects, maps etc. function as navigation. E.g. 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. Graphics as buttons e.g. Graphic image maps e.g. News orientated home pages  try to generate repeat visits through new news items every day/ week / month. E.g. Path-based home pages -> more specific info is deeper down, users are steered there by links. E.g.

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 …