1
Web User Interface Design Requires special graphic design skills Basic knowledge of design principles is invaluable for any developer Three options for projects: –Include an experienced web graphic designer as part of the development team –Train a traditional developer in graphic design –Buy a web site template off the shelf

3
Page Layout Guidelines (loosely collected from Vidgen et al., 2002) Use one alignment – the mix of centered text and left justified text is messy Centered text requires more advanced graphic design expertise to pull it off Tables are an essential layout device. The layout of the right side of the figure is controlled with a table whose borders have been turned off Dont get too close to the edges of the browser window Avoid major headings in all capitals - they are hard to read Dont italicize words in capitals Create a focal point; if all of the text is in the same font size then it is hard to see what is important

4
Page Layout Guidelines Dont mix too many fonts – two should be enough Keep the traditional blue underline for links Dont underline text unless it is a clickable link Dont use complicated background images Dont use animations. Animated images can be amusing first time but they tire quickly and then become intensely annoying. If you must have an animation, set it to run once and then turn off Dont require the user to have a plug-in

5
Page Layout Guidelines Keep multi-media file sizes to a minimum. Dont use photos unless they add value Think about providing thumbnails to speed up page loading time Open links in the current window rather than a new one Dont create images that look like buttons as this will confuse navigation Dont compromise readability for visual impact black on white is still the best Dont make the user scroll sideways. To be absolutely safe design for a 600 pixel width

6
Page Layout Guidelines Scrolling vertically is acceptable A clean serif face is most readable for large amounts of text, such as Times Roman. Sans serif fonts create a pleasing image for headings and diagrams Think about providing printer-friendly versions of web pages! Reading text from the screen is significantly more tiring and less efficient than reading from a paper version. Check the site regularly for dead links

7
Navigation Schemes Navigation and content are inseparable; the navigation scheme schould reflect the style and aims of the site. Hierarchical structure: –Narrow and deep: slow, saves screen space –Broad and shallow: fast, but needs space Rules of thumb: –every piece of information should be accessible within three clicks. –Navigation should account for less than 20% of the potential content space. Deep linking is allowed, such that users can access a detailed page directly.

8
Navigation Schemes Key aim of navigation is to enable users to know: –Where am I? –Where have I been? –Where can I go? useful devices –display a location on each page, such as unikid>kb>parent2parent –Use a site structure map –Provide a good site search facility It is essential that the site be consistent