Human Computer Interaction: World Wide Web Rebecca W. Boren, Ph.D. Introduction to Human Factors & Ergonomics Engineering IEE 437/547 November 2, 2011

Most people visit a web site to solve one or more of these four problems: They want/need information. They want/need to make a purchase/ donation. They want/need to be entertained. They want/need to be part of a community.

Designing the Home Page The Home page should provide an overview. Readers need you to set up a mental model of the site. Every page should have a link to your home page. Don’t have a link to the Home page on your Home page.

Consider the Following First Impression / Big Picture Text and Links Graphics, Video, Audio Navigation Content

Other Design Considerations “Branding” means every page on the site should look and work like every other page. The most important material should be at the top of the page, either at the center or the left.top of the page Fonts should be easy to read. Certain color combinations work better than others. Avoid distractions such as flashing graphics, scrolling text, or too much clutter.

Characteristics of Web readers Skip & scan (use minimal text) Prefer to print out longer documents to read from paper. Prefer narrow columns of text, like newspaper.

Structure of a web page Blocks of about 100 words or less fit on a single screen. Reader can print out a single screen. Works well for skipping and scanning.

Hypertext Allows the users to skip and scan Users may get lost Since the context may be complex, users may miss important information. May be difficult to get a hard copy of the information required.

Put important information Above the fold. Across the top or down the left side. Where it is obvious.

Sometimes it is appropriate to scroll. Some people have slow connections and going from link to link can be arduous. Can manage a long page by putting targets on it: linking a page to another part of the same page.

"Of users' first three eye-fixations on a page, only 22% were on graphics; 78% were on text. In general, users were first drawn to headlines, article summaries, and captions." Jakob Nielsen's Alertbox, May 12, Graphics vs. Text

Using Graphics Large graphics increase download time which frustrate readers. They are especially disappointed when the graphic turns out to be a company logo, decoration, or devoid of information. Small graphics are okay if they are helpful.

Be sure to include Last updated Sponsoring organization Contact person A site map if the website is large “PDF” label if the file opens as a PDF file.

Things to avoid A splash page (you only have seconds to hook the viewer) Use of flash (animated graphics) Linkrot (dead links) Underlined words that aren’t links.

Let’s go to the W W W and look at some real-life examples of good and bad design.

Examples of Poor Design* Jesus Forgives World Glaucoma Association Graphic Arts Exchange * Courtesy of Vincent Flanders, Web Pages That Suck.

Examples of Poor Navigation* Mystery Meat Navigation Maison martin margiela * Courtesy of Vincent Flanders, Web Pages That Suck.

Let’s look at some examples from our class website.