|
Introduction Top
More and more of our local churches are developing their own web
sites. I thought it timely to include some helpful "hints"
for you to consider as you design your local church site. Make sure
your pages are accessible to all users including those with visual
impairments and/or other disabilities. These guidelines will make
finding information on your site easy and quick, ease the maintenance process,
and promote a consistent design from the main page.
You may not have time to read the entire document. Please read the Editorial guidelines and the section on Color usage.
There are many sites that abuse color and make it difficult to read the information on the pages. If informatin is your primary
goal, you can't afford to loose a visitor because it hurts your eyes to look at the page.
Planning Top
When planning the overall design and structure of your web pages,
consider your most likely users. Strive to increase the usability
of the information for your entire audience. Clearly identify the
goals and purpose of your pages. Understanding these items will
aid in determining the style and content of the project.
We use a design methodology known as Information Architecture (IA).
Web Monkey has an excellent
IA tutorial. You will find that the visual design is not the most important element of
building a web site. Please take the time to read the tutorial.
Consider
the message you are trying to convey with your website and design
your pages with that in mind. Our general church is over 100 years
old. We want to convey dignity and prestige without being "stuffy",
yet we want to be inviting to multiple audience age levels.
You don't want your site to look like 50 different
people contributed pages unique to each one of them with little
thought to an overall design. Strive for consistency and church
branding. You don't want a "thrown together" look. If possible, build and use templates.
Templates help to ensure consistency and they save time (web authors don't have to build pages from scratch).
Overall Site Guidelines Top
Some users may arrive at your site looking for specific information.
Others may be interested in simply browsing. Navigation of the site
is very important. Strive to balance the needs of an experienced
user against enticing packaging and explanatory text for the occasional
user. A consistent style of presentation on each page allows users
to locate navigation mechanisms easily. Predictability will increase
the likelihood that people will find the desired information. Make
sure all information is accurate. Test your pages! Obtain feedback
on the usability of the project. Develop procedures and processes
to keep pages up-to-date and verify that links continue to work.
Editorial Guidelines Top
Strive for as much consistency and clarity as possible. We recommend
the use of the following writing style guides:
The Elements of Style by William Strunk, Jr. E.B. White
Associated Press Style Guide and Libel Manual - available
from the Associated Press
Below are a few tips from the Human Factors International web site:
1. Write so people will understand and act quickly. Do not write
to show your profound grasp of complex concepts and terminology.
2. Use short sentences. Long sentences decrease reading speed and
comprehension.
3. Use words Consistently. If a synonym is used, the user must
first ask if the two words are the same and then mentally translate.
4. Use acronyms only where the user already knows them as a word.
Example: NASA FBI
5. Use specific and precise wording. Tell the user exactly what
to do. This will decrease interpretation time and errors.
Poor Example: Generate transaction input.
Better Example: Enter the Expense Description listed on the voucher.
6. Use short and simple words. Long and unusual words sound impressive,
but take a longer time to understand.
Poor Example: acquire
Better Example: get
Poor Example: evident
Better Example: clear
Poor Example: identical
Better Example: same
7. Omit needless words. Every word takes time to read.
Poor Example: Enter the appropriate information below
Better Example: Enter the following:
8. Write in the active voice. Passive voice sounds dignified, but
users understand active voice more quickly.
Poor Example: The part numbers should be entered.
Better Example: Enter the part numbers.
Page Structure, Layout, & Size Top
We recommend that you design your page to target a monitor resolution
of 800x600. Use standard and consistent headers and footers.
Present your information in small or moderate size segments with
links to subsequent segments. If the segments are too small, users
may become frustrated. Provide clues when scrolling is needed and
design a mechanism to easily navigate within the page.
Large graphics as well as a large number of graphics slow the loading
of a web page and may unnecessarily tax the network. It is advisable
to keep the size of the web page, the size of your graphics, and
the total number of graphics on a page as low as possible.
Avoid distracting features such as blinking text or rapidly changing
images. Blinking text or rapidly changing images draws attention
away from all other content on a page. Changing text or moving images
can be useful for creating a dramatic initial impression. If you
must use animation, it is best to have it run a maximum of 2 complete
cycles and then stop to allow users a chance to read and make navigational
choices.
People who read English have a strong habit. They scan text and
other material in the same way. Layout the page to optimize visual
access. Make the body of the screen flow from top left to the right
and down.
Left justify text, labels and data. Left justified elements are
easier to scan. Numbers are an exception. Never present textual
items in all capital letters. Using all capital letters slows reading
speed.
Organize information to avoid a cluttered look. Clutter should
never occur due to lack of grouping or poor justification. There
is a relationship between clutter and the time required to find
an item. Clutter costs in terms of scan time and intimidation to
new users. Clutter due to high density can be acceptable at times.
When designing forms, group fields by functions. Group using blank
lines, indentation, panels, and windows. Grouping helps users understand
and find fields easily. Avoid horizontal scrolling of entry fields.
The amount of text that appears in the field by default (without
scrolling) may be misleading.
Use consistent button labels. Use sufficiently large icons and
buttons. Be consistent with button size within a window, form, or
page.
Fitt's Law:
As the size of an icon or button increases, so does the speed
of traversing to and selecting that icon or button. As the distance
of the mouse movement decreases, speed is also increased, so keep
buttons and other targets large and mouse movement distances short.
Don't over do the use of bold and italic text. It can be confusing
and distracting to the user. Be careful when using italic text.
It is less readable on the screen.
Page links should not disturb the concept or structure of the text.
Be careful not to over link. Whenever possible, choose a linking
phrase that matches the title page in the destination document.
The text phrase used as a link should be understandable on its own.
The text of a link should make sense even if the link is not present.
Avoid the use of "Click Here".
Color Top
Use colors and highlighting sparingly. According to Signal Detection
theory, lots of different colors and highlighting make the screen
so noisy that you can't find anything.
Information should be conveyed by means other than just color.
Consider the needs of blind and color-blind users. Use color to
draw attention. Use bright colors for items you want the user to
notice now.
Background and text colors should enhance the presentation. Choose
a background that does not interfere with the text or other information
on the page. Do not use yellow on white. Do not use pure red or
blue on black. These combinations don't give enough contrast between
letters and background. You need 90% contrast between foreground
and background to read text clearly. Do not show pure red and blue
together. Red and blue focus improperly in opposite directions.
Extreme fuzziness or a 3-D illusion can occur when juxtaposed.
Coding Top
Do not hinder accessibility by misusing markup for a presentation
effect.Heading Level Codes (<H1>, <H2>, <H3>…)
are intended to distinguish logical structure levels in a document.
Do not use them to increase font size. Use the second level (<H2>)
as a subordinate or sub section to the first level. Use the third
level (<H3>) as a subordinate or sub section to the second
level. Use the size attribute within the FONT tag to increase font
size.
Choose fonts to enhance readability. Many type experts believe
that sans serif fonts are better for screen display, even though
serif fonts are easier to read on paper. The difference is due to
the resolution of computer screens (72-120 dots per inch) in contrast
to printers (300-2,540 dots per inch). Because on-screen dots are
so big, fine details like serifs are exaggerated or distorted. Type
designer Chuck Bigelow (co-designer of Lucida family of typefaces)
says "serifs should be small things - but on screen they become
big - no longer visual cues but noise - distracting chunks of interference".
"Arial" is a good default font face. It is one of the
most popular sans-serif fonts used on the web. "Georgia"
is an alternative face that looks as sharp and clean on screen as
other fonts look on paper. Do not mix more than 2 typefaces within
a single document. Make a habit of specifying the size attribute
within the font tag, Netscape Navigator and Microsoft IE use different
default sizes.
Provide a text equivalent for every non-text element. This includes:
images, graphical representations of text (including symbols), image
map regions, animated GIFs), applets and programmatic objects, ASCII
art, frames, scripts, images used as list bullets, spacers, graphical
buttons, sounds, stand-alone audio files, audio tracks of video,
and video.
Specify the expansion of each abbreviation or acronym in a document
where it first occurs. Use the "title" attribute of the
ABBR and ACRONYM elements. Providing the expansion in the main body
of the document also helps document usability.
Be careful when formatting tables. The content must make sense
when presented in a linear fashion. Identify row and column headers.
When tables are presented in a linear fashion, the cells are sequenced
by rows, not columns.
Avoid the use of frames. Frames reduce the usability of the page
by making it difficult to print or bookmark. If you must use frames,
title each frame to facilitate identification and navigation. Describe
the purpose of the frames and how they relate to each other.
Use "Under Construction" or "Work in Progress"
for incomplete pages. Do not leave a page "Under Construction"
for more than one month.
References Top
Internet Sites:
State of Ohio, Department of Administrative Services, Web Style
Guide(http://www.state.oh.us/das/styleguide)
State of Ohio, Department of Administrative Services, Internet
Advisory Committee, Best Practices for Website Development(http://www.state.oh.us/bestpr/)
Human Factors International, Wording, Color, and Layout(http://www.humanfactors.com/)
University of Wisconsin-Madison Campus Libraries Web Page Standards
and Guidelines(http://www.library.wisc.edu/help/tech/Web_standards.html)
AT&T Style Guide, Information Architecture(http://www.att.com/style)
The Library of Congress, World Wide Web Style Guide(http://lcweb.loc.gov/loc/webstyle)
U.S. Department of Justice, Information Regarding Section 508 of
the Rehabilitation Act(http://www.usdoj.gov/crt/508/info.html)
W3C, World Wide Web Consortium, Web Content Accessibility Guidelines
1.0(http://www.w3.org/TR/WAI-WEBCONTENT/)
The State University of New Jersey, Rutgers, Web Toolkit(http://toolkit.rutgers.edu/)
Computer Society, Style Guide Introduction(http://www.computer.org/author/style/intro.htm)
Information & Access Technology Services, Glossary of Terms(http://iatservices.missouri.edu/)
webmonkey, The Web Developer's Resource, Under Design - Site Building(http://hotwired.lycos.com/webmonkey/)
Embry-Riddle, Daytona Beach Campus, Web Style Policy and Guide(http://www.db.erau.edu/appm/)
Radford University, World Wide Web Style and Standards(http://www.runet.edu/RUStyle.html)
Colorado State University, Web Standards and Content Guidelines(http://www.colostate.edu/info/webgd.html)
The State of Texas, World Wide Web Design Standards and Coding
Guidelines(http://www.state.tx.us/Standards/srrpub11.htm)
IBM, developerWorks, Web architecture library, Is your site accessible?(http://www-4.ibm.com/software/developer/library/web-acc.html?dwzone=web)
City of San Jose, World Wide Web Page, Disability Access Design
Standards(http://www.ci.san-jose.ca.us/oaacc/disacces.html)
Other References:
Deloitte Consulting - Cincinnati Water Works Customer Care Improvement
Project
Hamilton County Web Site Review by Outside Web Manager/Master
City of Cincinnati - E-Government Network Design and Security Policy
City of Cincinnati's Web Style Guidelines & Standards
City of Cincinnati Web Page Standards
General Services' Top Priority
|
