1. Mistakes in Web Design

2. Top 10 Mistakes in Web Design 10. Long download times 9. Outdated info 8. Link colors & consistency 7. Lack of navigation support 6. Long pages 5. Orphan pages 4. Complex URLs 3. Animations 2. Gratuitous use of bleeding edge technology 1. Frames

3. 10. Overly Long Download Times 10 second rule –amount of wait time before users lose interest traditional human factors studies back this up 15 seconds may be acceptable on web –people are getting trained to endure –but only for a few key pages

4. 9. Outdated Information Most people rather create content than do maintenance Cheap way of enhancing content –still relevant link to new pages –otherwise remove them Outdated content also leads to a lack of trust (important for e-commerce)

5. 8. Non-standard Link Colors Links to –pages that havent been seen are blue –previously seen pages are purple/red Don't mess with these colors –one of the few standard navigational aides –consistency is important for learning dont underline other objects with blue/red! –this is a Web Design Pattern (talk more about this later)

6. Dont make things that look like buttons unless they act like buttons (or opposite) Side Note: Consistency Bad!

7. 7. Lack of Navigation Support Users dont know much about your site –they always have difficulty finding information –give a strong sense of structure and place Communicate site structure –provide a site map so users know where they are & where they can go –provide a good search feature the best navigation support will never be enough People now expect these –site logo in upper left linked to home page –outline structure showing where you are currently at

8. 6. Long Scrolling Pages Many users do not scroll beyond visible section when page comes up All critical content & navigation should be on the top part of the page Leaf nodes can be longer –people who have that interest will be reading it –still good to be brief Becoming less of an issue –top items will STILL dominate –should be careful not to go past 3 screens max.

9. 5. Orphan Pages All pages should have a clear indication of what web site they belong to –users may not come in through your home page Every page should have –a link up to your home page –some indication of where they fit within the structure of your information space

10. 3. Constantly Running Animations Dont have elements that move incessantly –moving images have an overpowering effect on the human peripheral vision no animations, scrolling text, marquees Users tune them out –so nothing important there! Give your user some peace and quiet to actually read the text!

11. 2. Gratuitous use of Bleeding Edge Technology Dont try to attract people using it –youll get the nerd crowd, but mainstream users care about content and service If their system crashes –they will never come back E.g., use VRML if your info maps to 3d –architectural design or surgery planning Caveat: appropriate if selling those products

12. 1. Using Frames Lose predictability of user actions –what information appears where when you click? cant bookmark the current page & return to it –fixed in Explorer 5 URLs stop working cant share with others (lose social filtering) –emailing links still doesnt work...

13. Frames (cont.) Search engines have problems w/ frames –what part of frames do you include in indexes? Early surveys found most users preferred frame-less sites –recent surveys back this up ~70-90%

14. References Nielsens top 10 list (required reading) –http://www.useit.com/alertbox/9605.htmlhttp://www.useit.com/alertbox/9605.html Web pages that suck –http://www.webpagesthatsuck.com/http://www.webpagesthatsuck.com/ Net tips for designers –http://www.dsiegel.com/tips/http://www.dsiegel.com/tips/ User Interface Engineering –http:///www.uie.comhttp:///www.uie.com

15. Other Hints for Web Usability Page titles Text size and color Better thumbnails Assumptions Writing for the web Feedback Image tags

16. Page Titles Pages should have in header Important for navigation –bookmark lists, history lists, search engines Enough info to stand on its own –often taken out of context (search engines) Long titles slow users down (trade-off) –optimize for quick scanning with keywords first My Company - Home page vs. Welcome to My... Different pages -> different titles

17. Text Size and Color Dont use blue/red colored text Dont use red combined with blue –hard on the eyes Designers often think the default font is wrong –acceptable to change a small amount of text –not recommended to change all text on a page the user set that size for a reason! –reading comfort for that person on their monitor

18. Better Thumbnails Thumbnails –represent images that are too big to be downloaded w/o user command Smaller –scaling or cropping dont work well

19. Relevance-Enhanced Image Reduction First crop and then scale –e.g., to get a thumbnail that is 10% of original crop by 32% then scale by 32%.32 *.32 =.1 of the original Balance between detail & context

20. Dont Make Assumptions Browser –people use many different browsers Netscape, Explorer, Lynx, etc. Window size –not everyone uses the default window size

21. Writing for the Web Be succinct –25% slower to read from a computer screen –write 50% less (people dont scroll) Write for scannability –people scan -- they dont read –structure with 2 or 3 levels of headlines use meaningful headings and emphasis

22. Writing for the Web (cont.) Use hypertext to split-up information –split info into chunks of coherent topics –user inverse pyramid style (conclusions first)

23. Animation Higher click-thru rates, but Annoyed users Could be useful in conveying information

24. Frames

25. FRAME –not so bad, but –make sure large frame changes are obvious as a result of clicks in small (TOC) frame

26. Links Users had trouble with short links –If you click on Disneyland, will you get a map of the park? Ticket Information, etc? Longer links clearly set expectations –How to Read the Pricing and Rating Listings –Pricing (How to Read Pricing & Rating Listings) Links embedded in paragraphs are bad –hard to find information –cant skim - must now read

27. Good Links

28. References Nielsens top 10 list –http://www.useit.com/alertbox/9605.htmlhttp://www.useit.com/alertbox/9605.html Web pages that suck –http://www.webpagesthatsuck.com/http://www.webpagesthatsuck.com/ Net tips for designers –http://www.dsiegel.com/tips/http://www.dsiegel.com/tips/ User Interface Engineering –http:///www.uie.comhttp:///www.uie.com

29. Summary Make sure to –use page tags –watch assumptions users text size, browser type, & window size –make better thumbnails & use image tags –write for the web –give better feedback about links