Dr. Andrew P. Ciganek WebsiteNightmares

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

ContentEase-of-UseNavigationInput Home Page Identity Crisis

ContentEase-of-UseNavigationInput Home Page Identity Crisis

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

ContentEase-of-UseNavigationInput Home Page Identity Crisis

ContentEase-of-UseNavigationInput Home Page Identity Crisis

ContentEase-of-UseNavigationInput Too Much Text

ContentEase-of-UseNavigationInput 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 ContentEase-of-UseNavigationInput

ContentEase-of-UseNavigationInput Aesthetics

ContentEase-of-UseNavigationInput 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 ContentEase-of-UseNavigationInput

ContentEase-of-UseNavigationInput Navigation

ContentEase-of-UseNavigationInput 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 ContentEase-of-UseNavigationInput

ContentEase-of-UseNavigationInput Redundant Requests

ContentEase-of-UseNavigationInput Redundant Requests

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

ContentEase-of-UseNavigationInput Requiring Unneeded Data

ContentEase-of-UseNavigationInput 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 ContentEase-of-UseNavigationInput

ContentEase-of-UseNavigationInput What’s Wrong With This Site?

ContentEase-of-UseNavigationInput What’s Wrong With This Site?

ContentEase-of-UseNavigationInput What’s Wrong With This Site?

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