1. Dr. Andrew P. Ciganek WebsiteNightmares

2. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common –Learn “good” design by looking at “bad” design Powerful implications –If first impression negative, will drive people away Supplements user interface design guidelines –Complies with international laws (e.g., ADA, etc.)

3. Overarching Concerns System requirements –Functional: process the system has to perform or information it needs to contain –Non-functional: behavioral properties that the system must have, such as performance and usability Know your audience (user, task analysis) –What you like may not be what your audience likes People (end-users) who interact with system interface Tasks end-users must perform to do their work

4. ContentEase-of-UseNavigationInput http://www.1amp.com/ Home Page Identity Crisis

5. ContentEase-of-UseNavigationInput Home Page Identity Crisis http://www.hl2.com/

6. Home Page Identity Crisis Goal: Let visitors see system’s purpose in quick scan of page How to achieve –Organization name placed prominently –Brief summary of purpose or objective –Picture showing product or service ContentEase-of-UseNavigationInput

7. ContentEase-of-UseNavigationInput http://www.earthwatch.org Home Page Identity Crisis

8. ContentEase-of-UseNavigationInput http://www.ftd.com Home Page Identity Crisis

9. ContentEase-of-UseNavigationInput http://dealers2.chryslercorp.com/dealer_locator/ Too Much Text

10. ContentEase-of-UseNavigationInput http://www.chrysler.com/ Too Much Text

11. Users don’t read - they scan –Use the clearest and simplest language appropriate for a site's content WAI 2.0 Guideline 3.1: Readable How to avoid –Reduce long passages –Use headings, short phrases, bullet-points ContentEase-of-UseNavigationInput

12. ContentEase-of-UseNavigationInput http://www.overheardinnewyork.com/ Aesthetics

13. ContentEase-of-UseNavigationInput http://www.overheardinnewyork.com/ Aesthetics

14. How to improve –Ensure foreground and background color combinations provide sufficient contrast WAI 2.0 Guideline 1.4: Distinguishable –Use dark text, light background (similar to paper) Other way around, difficult to read –Avoid subtle color differences Make colors differ in saturation as well as hue Should look different in grey scale ContentEase-of-UseNavigationInput

15. ContentEase-of-UseNavigationInput http://www.realestate.com/ Navigation

16. ContentEase-of-UseNavigationInput http://www.realestate.com/ Navigation

17. Lost in Space Lost in space: current page not indicated How to avoid –Information about the user's location within a set of Web pages is available WAI 2.0 Guideline 2.4: Navigable –Identify page on navigation bar and in title page ContentEase-of-UseNavigationInput

18. ContentEase-of-UseNavigationInput http://www.nwa.com/deals/ Redundant Requests

19. ContentEase-of-UseNavigationInput http://www.continental.com/ Redundant Requests

20. How to avoid –Propagate data to wherever it is needed –Retain data on return to page –Provide a single universal login ContentEase-of-UseNavigationInput

21. ContentEase-of-UseNavigationInput http://www.house.gov/writerep/ Requiring Unneeded Data

22. ContentEase-of-UseNavigationInput http://www.lifetimetv.com/about/write.html Requiring Unneeded Data

23. How to avoid –Ask for the minimum possible If you can proceed without it, it isn’t required –Do not require data some users won’t have –Deduce all you can from the data you do have –If the system can figure it out, don’t ask ContentEase-of-UseNavigationInput

24. ContentEase-of-UseNavigationInput http://www.brown.edu/ What’s Wrong With This Site?

25. ContentEase-of-UseNavigationInput http://www.saltinstitute.org/ What’s Wrong With This Site?

26. ContentEase-of-UseNavigationInput What’s Wrong With This Site? http://mcis.jsu.edu

27. Summary Now you can –Evaluate systems more critically –Recognize Website nightmares –Avoid making the same mistakes