![Page 1: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/1.jpg)
Dr. Andrew P. Ciganek
WebsiteWebsiteNightmaresNightmares
![Page 2: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/2.jpg)
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.)
![Page 3: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/3.jpg)
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
![Page 4: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/4.jpg)
Content Ease-of-Use Navigation Input
http://www.1amp.com/
Home Page Identity Crisis
![Page 5: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/5.jpg)
Content Ease-of-Use Navigation Input
Home Page Identity Crisis
http://www.hl2.com/
![Page 6: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/6.jpg)
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
Content Ease-of-Use Navigation Input
![Page 7: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/7.jpg)
Content Ease-of-Use Navigation Input
http://www.earthwatch.org
Home Page Identity Crisis
![Page 8: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/8.jpg)
Content Ease-of-Use Navigation Input
http://www.ftd.com
Home Page Identity Crisis
![Page 9: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/9.jpg)
Content Ease-of-Use Navigation Input
http://dealers2.chryslercorp.com/dealer_locator/
Too Much Text
![Page 10: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/10.jpg)
Content Ease-of-Use Navigation Input
http://www.chrysler.com/
Too Much Text
![Page 11: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/11.jpg)
Too Much Text
• 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
Content Ease-of-Use Navigation Input
![Page 12: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/12.jpg)
Content Ease-of-Use Navigation Input
http://www.overheardinnewyork.com/
Aesthetics
![Page 13: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/13.jpg)
Content Ease-of-Use Navigation Input
http://www.overheardinnewyork.com/
Aesthetics
![Page 14: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/14.jpg)
Aesthetics
• 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
Content Ease-of-Use Navigation Input
![Page 15: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/15.jpg)
Content Ease-of-Use Navigation Input
http://www.realestate.com/
Navigation
![Page 16: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/16.jpg)
Content Ease-of-Use Navigation Input
http://www.realestate.com/
Navigation
![Page 17: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/17.jpg)
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
Content Ease-of-Use Navigation Input
![Page 18: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/18.jpg)
Content Ease-of-Use Navigation Input
http://www.nwa.com/deals/
Redundant Requests
![Page 19: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/19.jpg)
Content Ease-of-Use Navigation Input
http://www.continental.com/
Redundant Requests
![Page 20: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/20.jpg)
Redundant Requests
• How to avoid– Propagate data to wherever it is needed
– Retain data on return to page
– Provide a single universal login
Content Ease-of-Use Navigation Input
![Page 21: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/21.jpg)
Content Ease-of-Use Navigation Input
http://www.house.gov/writerep/
Requiring Unneeded Data
![Page 22: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/22.jpg)
Content Ease-of-Use Navigation Input
http://www.lifetimetv.com/about/write.html
Requiring Unneeded Data
![Page 23: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/23.jpg)
Requiring Unneeded Data
• 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
Content Ease-of-Use Navigation Input
![Page 24: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/24.jpg)
Content Ease-of-Use Navigation Input
http://www.brown.edu/
What’s Wrong With This Site?
![Page 25: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/25.jpg)
Content Ease-of-Use Navigation Input
http://www.saltinstitute.org/
What’s Wrong With This Site?
![Page 26: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/26.jpg)
Content Ease-of-Use Navigation Input
What’s Wrong With This Site?
http://mcis.jsu.edu
![Page 27: Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common](https://reader035.vdocuments.mx/reader035/viewer/2022070410/56649ed55503460f94be594c/html5/thumbnails/27.jpg)
Summary
• Now you can– Evaluate systems more critically
– Recognize Website nightmares
– Avoid making the same mistakes