Web Page Design Focus on Usability

2 Sources (Jacob Neilsen) (Vincent Flanders) J. Johnson (2000) GUI Bloopers W. O. Galitz (2002) The Essential Guide to User Interface Design P. Greenspun (1999) Philip and Alex’s Guide to Web Publishing

3 WHY users visit a web site (1) They want information - NOW. They want to purchase something- NOW. They want software, downloads, patches, and they want it NOW. Do you see a pattern? Every extra button click, gratuitous animation, poor navigational design, etc. delays the user.

4 WHY users visit a web site (2) Possible web site exceptions Entertainment sites (movies, games) Non-profit sites However for most websites the user does not wish to be entertained, rather they want something right away. Remember, a competing web site is just one click away.

5 A Good Web Site is One That Makes it easy for users to find what they are looking for. Loads quickly. Is easy to navigate. Is informative.

6 Guideline disclaimer They are not fixed rules, rather they are rules of thumb, to use when starting with nothing. Numerous exceptions exist which depend upon the user, task, and environment. These guidelines are not etched in stone, they have differed in the past and will change in the future.

7 Web Site Usability Guidelines A richer user interface is always harder to learn. People who are visiting your site don’t want to have to learn. More cutting edge technology in a web site generally decreases its usability. Don’t break the browser’s navigational buttons. Users should be able to go forward and backwards at any time during their session. Philip and Alex’s Guide to Web Publishing (1999, Morgan Kaufmann)

8 Common Web Usability Problems Slow downloads because of large images, many images, unnecessary animation, etc... Distracting and gratuitous animation that runs continuously in the background Designs that require users to scroll down or across the page to see important content. Web sites that format text in fixed-width or proportional-width blocks rather than letting the width of the user’s browser determine the width of the text.

9 Design Guidelines from Tufte Web pages should contain information, not navigation or administration icons. The information should become the interface. Give users broad, flat overviews of the information (table of contents), rather than forcing them through sequential screens of choices. Organize your data according to expected user interest, rather than internal structure of your organization. Why use icons for navigation when words are clearer and take up less screen space? Visual Explanations: Images and Quantities, Evidence and Narrative (1997, Graphics Press)

10 Three Click Rule The "Three Click Rule" states that all relevant parts of a website should be accessible within three mouse-clicks of the home-page. Do not use an entry tunnel to your website. Do not dictate the navigational path to your user.

11 USA Government Regulations Federal Government Web sites are required to follow the Section 508 Federal (Web) Accessibility Standards. device independence text alternatives to graphics and graphic links user controlled content display

12 Testing accessibility requirements Automated tool

13 GUI vs. Web Page Design In GUI design the layout of the screen will look exactly as specified (WYSIWYG). However no such guarantee exists for web pages.

14 HTML Validator

15 Colour Selection When foreground and background colours are close to the same hue, they may provide insufficient contrast on monochrome displays and for people with certain types of color deficits. Maximum of four colours on the screen at any one time, and in most cases two or three.

16 Colour Blindness (approx. 5% of males)

17 Dealing with colour blindness

18 Font Sizes Use at least a 10-point font to achieve the best possible reading performance. Fonts smaller than 10-point elicited slower performance from users. For people over 65, it may be better to use at least 12 or 14 point.

19 Page Length Use short pages (1-2 screens in length) for home pages and all navigation pages pages that need to be quickly browsed and/or read online pages with very long graphics Use long pages (more than 2 screens) to match the structure of a paper counterpart make pages more convenient to download/print

20 Example - IBM home page 800 pixels 600 pixels

21 Content is the Interface Example

22 Reasons to avoid using Flash Flash encourages gratuitous animation Flash breaks web fundamentals The "Back" button does not work Link colours don't work showing which links you’ve seen Flash reduces accessibility for users with disabilities (ex. “make text bigger/smaller” button does not work) Flash integrates poorly with search

23 Text for Web Pages Minimize the use of words that call attention to the Web. Examples: “This Web site” “Click here” “Follow this link” How to test? Print out a page, read it and see if it makes sense.

24 Graphics on Web Sites (1 of 3) Use graphics as a supplement to textual content, not as a substitute. Convey information that can’t be effectively accomplished using text (photographs, video, diagrams) Enhance navigation presenting a site overview identifying site pages identifying content areas

25 Graphics on Web Sites (2 of 3) Minimize the number of images. More images  slower page download Minimize the size of images restrict single images to 5K restrict page images to 20K provide thumbnail size images Produce images in the most appropriate format GIF JPEG

26 Graphics on Web Sites (3 of 3) GIFs are limited to 256 colors, and exist in either a dithered or non-dithered format. Dithered: colour-mixing process a computer goes through when it encounters a colour not in its palette. Palette colours are mixed to approximate the appearance of the desired colour  the resulting colour may be grainy or unacceptable Non-dithered: closest palette colours are chosen  may also produced poor results

27 Web Palette / Browser-safe colors