Embed Size (px)
Citation preview
Dr. Andrew P. Ciganek
WebsiteWebsiteNightmaresNightmares
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.)
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
Content Ease-of-Use Navigation Input
http://www.1amp.com/
Home Page Identity Crisis
Content Ease-of-Use Navigation Input
Home Page Identity Crisis
http://www.hl2.com/
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
Content Ease-of-Use Navigation Input
http://www.earthwatch.org
Home Page Identity Crisis
Content Ease-of-Use Navigation Input
http://www.ftd.com
Home Page Identity Crisis
Content Ease-of-Use Navigation Input
http://dealers2.chryslercorp.com/dealer_locator/
Too Much Text
Content Ease-of-Use Navigation Input
http://www.chrysler.com/
Too Much Text
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
Content Ease-of-Use Navigation Input
http://www.overheardinnewyork.com/
Aesthetics
Content Ease-of-Use Navigation Input
http://www.overheardinnewyork.com/
Aesthetics
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
Content Ease-of-Use Navigation Input
http://www.realestate.com/
Navigation
Content Ease-of-Use Navigation Input
http://www.realestate.com/
Navigation
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
Content Ease-of-Use Navigation Input
http://www.nwa.com/deals/
Redundant Requests
Content Ease-of-Use Navigation Input
http://www.continental.com/
Redundant Requests
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
Content Ease-of-Use Navigation Input
http://www.house.gov/writerep/
Requiring Unneeded Data
Content Ease-of-Use Navigation Input
http://www.lifetimetv.com/about/write.html
Requiring Unneeded Data
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
Content Ease-of-Use Navigation Input
http://www.brown.edu/
What’s Wrong With This Site?
Content Ease-of-Use Navigation Input
http://www.saltinstitute.org/
What’s Wrong With This Site?
Content Ease-of-Use Navigation Input
What’s Wrong With This Site?
http://mcis.jsu.edu
Summary
• Now you can– Evaluate systems more critically
– Recognize Website nightmares
– Avoid making the same mistakes
