Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user...

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