User Interface Design Guidelines

For Web Site Design (but adaptable to any interface)

by Mable Kinzie, Feng Wang, & Edward Pan
A variety of people/resources have influenced our thinking on these, and they are noted
in the references that follow.
Contents

Tag line describes value of site to user; distinguishes organization from

competitors.
Each page indicates site ID, logo, page name, major sections, options at
current level.
Home page spells out "big picture: what it is, what it contains, who its for,
what users can do, why users should be there, and advantages of the site.
Limit home page length (preferably to above the fold).
Sponsoring institution is indicated, its philosophy described, and credibility
established. The funding agency is identified.
Samples provided before users must register.
Each page is self-explanatory.
All information presented is important. Importance is evident to user.
Pages are designed to be scanned rather than read. Limit text whenever
possible.
Plain language is used throughout.
Meaningful content is provided within three seconds of page download.
Entire page loads within six seconds-"six second rule."
Policy for treatment of user's personal information is specified.
FAQs are provided for common problems.
Contact information (e.g., email, phone) is provided for user support.
Different types of media are used to enhance the value of the information
provided.
Changes to the Web site are announced.

Interface Design

Site should be designed for common browsers (e.g., Explorer, Safari, Firefox),
users typical connection speed, commonly used screen resolutions (1024x768
most common, though this may vary for the target user group), popular
operating systems (e.g., Windows XP, Vista, Mac OS X), and plug-ins (e.g.,
Flash player, video players).
Organize information at each level of the Website in a clear and logical
structure.
Unique and consistent look and feel are evident throughout.
Page download time is minimized through use of modest graphical elements.

Pages considered visually noisy or cluttered should be avoided.

Visual hierarchy matches content hierarchy.
Use limited number of fonts that are commonly installed.
ALL CAPS and all italics are used sparingly; underlined text is reserved to
denote links.
For long pages, headings and other interface elements should not create the
illusion of having reached the top or bottom of the page (for example: when
the user is actually looking at the middle).
Every clickable image should be either readily understood by users or clearly
and closely labeled with text, and also accompanied by alternative text (i.e.,
text anchors).
Pages need to be developed to be as printer-friendly as possible.
Provide descriptive labels and titles, including those to describe non-text (e.g.
graphical) elements.
Inform users of large file sizes and video clip durations, which lead to long
download times.
Place important/common items at the top of lists, in rank order.
Buttons should look like buttons, and links should look like links (and things
that are not buttons or links should not look like them).

Navigation

Home page is available from all pages and provides "short-cuts" to frequently
needed features.
Users can 'backward chain," to retrace their steps via breadcrumb trail.
Every page is "bookmark-able."
A site search engine is accessible from every page to help users locate desired
information.
A custom error page should be consistent with the overall style of the
Website, helping users identify the nature of the problem and locate desired
information.
A text-only site map should be provided and linked to every page.
Basic text links to major sections of the Website should be included in every
page.
Users can get to desired information and functions with a minimum number of
clicks, easily understanding what options to select.
Flexible navigation options are provided (more than one path through the
woods).
Navigational controls and search functions are standardized across the site,
conforming to established convention (label, location, organization, operation,
destination).
Structure of site, and current location, are easy to ascertain from appearance of
navigational controls.
Tabs need to be placed at the top of a page in the format of real-life tabs;
secondary and tertiary navigation menus need to be placed together with the
primary navigation menus.

Functions

The entire Website should be consistent with the standards of the W3C Web
Accessibility Initiative, whenever possible.
Adequate contrast provided between foreground and background. Color
differences alone are insufficient to denote differences in information, for
those with color-impaired vision and for black-only printing.
Avoid placing important text information within images; individuals using
assistive technologies or have difficulties processing visual images may be
unable to read this information.
A form is provided to collect user feedback while controlling how feedback is
formatted and sent.
Embed appropriate keyword meta-tags to improve the ranking of a Website by
major search engines.
All links should work (no broken links); all videos and other media should
work (on all supported systems).
References

Cooper, A., & Reimann, R. (2003). About Face 2.0: The Essentials of Interaction
Design. Indianapolis, IN: Wiley
Gagne, R. (1985). The conditions of learning and theory of instruction. 4th ed. New
York: Holt, Rinehart and Winston.
Gillespie, J. Web page design for designers. http://www.wpdfd.com/wpdhome.htm
Krug, S. (2000). Don't Make Me Think: A Common Sense Approach to Web Usability.
Indianapolis, IN: New Riders
Lynch, P. & Horton, S. Yale style manual. 1997. http://info.med.yale.edu/caim/manual
Nielsen, J. (2000). Designing Web Usability: The Practice of Simplicity. Indianapolis,
IN: New Riders.
Norman, D. (1988.) The psychology of everyday things. New York: Basic Books.
Thomason, L. (2004). Web Site Usability Checklist. Retrieved at June 3, 2007 from
http://www.netmechanic.com/news/vol7/design_no4.htm
United States Department of Health and Human Services (2006). Research-based
Web design & usability guidelines. Washington, D.C.: U.S. Government Printing
Office.
Weinman, L. (1997). Designing web graphics.2. 2nd Ed. Indianapolis (IN): New Riders;
1997.
The following current and former UVa graduate students also contributed significant
thinking to this list: Julie Adams, Paul Cheney, Marti Julian, Mike Matera, Kathy
Neeson, Kenneth Warren, and Steve Whitaker. Many thanks to each.