Download Web Style Guide: Industry Best Practices

Web Style Guide: Industry Best Practices
Design should be simple and natural
Terminology should be expressed in the user’s language, not technical jargon, not
the necessarily the language of the creator(s) of the system. The language employed
should clarify the properties and navigation of the site (rather than make it a puzzle
the user must solve.
Not only should the language be clear and simple, but also understandable
mechanisms should be provided for navigating within and between pages. Providing
navigation tools and orientation information in pages will maximize accessibility and
usability.
Establish a visual hierarchy:
“The primary task of graphic design is to create a strong, consistent visual
hierarchy, where important elements are emphasized, and content is
organized logically and predictably.”
--Yale Style Guide
Make Web content more available to all users:
Web Content Accessibility Guidelines
o
o
o
o
o
o
o
o
o
o
o
o
o
o
1. Provide equivalent alternatives to auditory and visual
content.
2. Don't rely on color alone.
3. Use markup and style sheets and do so properly.
4. Clarify natural language usage
5. Create tables that transform gracefully.
6. Ensure that pages featuring new technologies
transform gracefully.
7. Ensure user control of time-sensitive content changes.
8. Ensure direct accessibility of embedded user interfaces.
9. Design for device-independence.
10. Use interim solutions.
11. Use W3C technologies and guidelines.
12. Provide context and orientation information.
13. Provide clear navigation mechanisms.
14. Ensure that documents are clear and simple.
(From W3C) http://www.w3.org/TR/WAI-WEBCONTENT/Guidelines
Maintain consistency from page to page in both terminology and navigation. This
eliminates much guess work for users.
“Repetition is not boring; it gives your site a consistent graphic identity that
reinforces a distinct sense of "place," and that makes your site more
memorable. A consistent approach to layout and navigation allows readers
to quickly adapt to your design, and to confidently predict the location of
information and navigation controls across the pages of your site.”
--from the Yale Web Style Guide
Provide feedback: This allows the user to be frequently informed of whether or not
they are on the right path. This design characteristic respects the time of the user.
Provide clearly marked exits. When a user arrives at a page mistakenly there
should be a quick and easy way to leave and go back or to the page one was
actually looking for.
Though there is a growing body of literature on how to make web design(s)
effective and optimally usable, much design wisdom is summarized in the following
list by Nielsen.
Ten Usability Heuristics
Visibility of system status
The system should always keep users informed about what is going on,
through appropriate feedback within reasonable time.
Match between system and the real world
The system should speak the users' language, with words, phrases and
concepts familiar to the user, rather than system-oriented terms. Follow realworld conventions, making information appear in a natural and logical order.
User control and freedom
Users often choose system functions by mistake and will need a clearly
marked "emergency exit" to leave the unwanted state without having to go
through an extended dialogue. Support undo and redo.
Consistency and standards
Users should not have to wonder whether different words, situations, or
actions mean the same thing. Follow platform conventions.
Error prevention
Even better than good error messages is a careful design which prevents a
problem from occurring in the first place.
Recognition rather than recall
Make objects, actions, and options visible. The user should not have to
remember information from one part of the dialogue to another. Instructions
for use of the system should be visible or easily retrievable whenever
appropriate.
Flexibility and efficiency of use
Accelerators -- unseen by the novice user -- may often speed up the
interaction for the expert user such that the system can cater to both
inexperienced and experienced users. Allow users to tailor frequent actions.
Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed.
Every extra unit of information in a dialogue competes with the relevant units
of information and diminishes their relative visibility.
Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes), precisely
indicate the problem, and constructively suggest a solution.
Help and documentation
Even though it is better if the system can be used without documentation, it may be
necessary to provide help and documentation. Any such information should be easy
to search, focused on the user's task, list concrete steps to be carried out, and not
be too large.
Other Practical Considerations
Readability
Text that must be read should have high contrast. Favor black text on white or pale
yellow backgrounds. Avoid gray backgrounds.
Use font sizes that are large enough to be readable on standard monitors.
This is even more important for numbers. Human languages are highly
redundant, enabling people to "heal" garbled messages. Numbers, however, unless
they follow a very strict protocol, have no redundancy, so people need the ability to
examine and comprehend every single character.
Pay particular attention to the needs of older people. Presbyopia, the condition of
hardened, less flexible lenses, coupled with reduced light transmission into the eye,
affects most people over age 45. Do not trust your young eyes to make size and
contrast decisions.
A note on images
The most efficient designs for general (mostly modem-based) Internet audiences
tend to use careful layouts of text and links with relatively small graphics. These
pages load into viewers quickly, even when accessed from 28.8 kbps modems over
SLIP or PPP lines, yet these pages still achieve a substantial graphic impact.
Web page graphics should not be more than 535 pixels wide or more than about 320
pixels high, or the graphic will be too wide to print on letter size or A4 paper. Even
when your readers have large display screens, the typical Netscape or Internet
Explorer window still defaults to a window width designed for smaller monitors.
Resources
Molich, R., and Nielsen, J. (1990a). Improving a human-computer dialogue : What
designers know about traditional interface design, Communication of the ACM.
(March 1990). http://www.acm.org/pubs/articles/journals/cacm/1990-33-3/p338molich/p338-molich.pdf
Nielsen, J. (1994). From his website, useit.com.
http://www.useit.com/papers/heuristic/heuristic_list.html
W3C: Web Content Accessibility Guidelines.
http://www.w3.org/TR/WAI-WEBCONTENT/Guidelines
Yale Web Style Guide
http://info.med.yale.edu/caim/manual/pages/graphic_design100.html
Tognazzini, Bruce. (2000). “Basic principles for interface design.” Ask Tog. Viewed
May 12, 2001. http://www.asktog.com/basics/firstPrinciples.html