1 / 27

Dr. Andrew P. Ciganek

Website Nightmares. Dr. Andrew P. Ciganek. 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

etan
Download Presentation

Dr. Andrew P. Ciganek

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Website Nightmares Dr. Andrew P. Ciganek

  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. Home Page Identity Crisis Content Ease-of-Use Navigation Input http://www.1amp.com/

  5. Home Page Identity Crisis Content Ease-of-Use Navigation Input http://www.hl2.com/

  6. Home Page Identity Crisis Content Ease-of-Use Navigation Input • 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

  7. Home Page Identity Crisis Content Ease-of-Use Navigation Input http://www.earthwatch.org

  8. Home Page Identity Crisis Content Ease-of-Use Navigation Input http://www.ftd.com

  9. Too Much Text Content Ease-of-Use Navigation Input http://dealers2.chryslercorp.com/dealer_locator/

  10. Too Much Text Content Ease-of-Use Navigation Input http://www.chrysler.com/

  11. Too Much Text Content Ease-of-Use Navigation Input • 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

  12. Aesthetics Content Ease-of-Use Navigation Input http://www.overheardinnewyork.com/

  13. Aesthetics Content Ease-of-Use Navigation Input http://www.overheardinnewyork.com/

  14. Aesthetics Content Ease-of-Use Navigation Input • 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

  15. Navigation Content Ease-of-Use Navigation Input http://www.realestate.com/

  16. Navigation Content Ease-of-Use Navigation Input http://www.realestate.com/

  17. Lost in Space Content Ease-of-Use Navigation Input • 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

  18. Redundant Requests Content Ease-of-Use Navigation Input http://www.nwa.com/deals/

  19. Redundant Requests Content Ease-of-Use Navigation Input http://www.continental.com/

  20. Redundant Requests Content Ease-of-Use Navigation Input • How to avoid • Propagate data to wherever it is needed • Retain data on return to page • Provide a single universal login

  21. Requiring Unneeded Data Content Ease-of-Use Navigation Input http://www.house.gov/writerep/

  22. Requiring Unneeded Data Content Ease-of-Use Navigation Input http://www.lifetimetv.com/about/write.html

  23. Requiring Unneeded Data Content Ease-of-Use Navigation Input • 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

  24. What’s Wrong With This Site? Content Ease-of-Use Navigation Input http://www.brown.edu/

  25. What’s Wrong With This Site? Content Ease-of-Use Navigation Input http://www.saltinstitute.org/

  26. What’s Wrong With This Site? Content Ease-of-Use Navigation Input http://mcis.jsu.edu

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

More Related