This is a document I initially created while at Desiring God bringing together all of the core principles for making websites usable. In that sense, this is the most comprehensive collection of principles I’ve done. I’ve since updated it a bit to make it more broadly applicable to ministries (and other organizations) in general.

This collection is based on research that I did, and in order to work as quickly as possible and because this was (initially) for use just among my team, I didn’t always include citations to sentences that are quotations (I have since tried to add them — though I may have missed a few spots). So don’t see these principles or their expression as unique to me; this is a collection of my research notes. What is unique is how they are organized, brought together, and which ones were selected.

Last of all, note that a few of these principles may be time-bound (such as principles on screen size) and should thus be smartly adapted to the current context. Other principles are timeless.

The guiding principle for effective websites is, after excellent content, usability—that is, making the content easily accessible to the users. Usability is a higher priority than everything else, including looks.

This document outlines the usability principles that we recommend for governing your site presentation. These principles are starting points and guidelines. The point is not that you should never deviate from them, but that if you do, you need to do so purposefully. We recommend that no proposed deviations should be undertaken except for those that can be shown to improve usability and design, or which are necessitated due to technology or prioritization when one principle requires the trade-off of another principle.

As a result of these usability standards, users will always know where they are, will be able to get from one place to another quickly, and will be able to find what they are looking for (and many related things they weren’t originally looking for, but are glad to know about).

Global Principles

The Value of Content

“Original, quality content is the most valuable commodity of the Web. Users look for useful content and consume it voraciously once they find it” (Thomas Powell).[1]

The Value Of Usability

“Making pages self-evident is like having good lighting in a store: It just makes everything seem better. Using a site that doesn’t make us think about unimportant things feels effortless, whereas puzzling over things that don’t matter to us tends to sap our energy and enthusiasm—and time” (Steve Krug).[2]

“When we’re using the Web every question mark adds to our cognitive workload, distracting our attention from the task at hand. The distractions may be slight but they add up, and sometimes it doesn’t take much to throw us” (Steve Krug).[3]

If users get it, there’s a better chance they’ll:

Find what they’re looking for.
Understand the full range of what your site offers.
See the parts of the site you want them to see.
Feel smarter and more in control, which will bring them back

Chief Principles for Making Your Site Usable

The chief principle: Don’t make people think. This is the summary principle of all usability. People should not have to work to figure out how to use your site.[4] This means:
1. Design for the user. Navigation, layout, and architecture should conform to how users actually browse, not simply how we want the site to appear.
2. Seek to eliminate question marks. The site should embody simplicity and be organized in a way that reduces the need to figure things out. Organization should be clear and intuitive. Navigation should be self-evident, and when it can’t be self-evident, it should be self-explanatory. “When you’re creating a site, your job is to get rid of the question marks.”[5]
3. Minimize the number of clicks, but don’t sacrifice logical organization. Clear organization is a higher priority than lessening the number of clicks.
Use the smallest effective difference.[6]
Eliminate the unnecessary.
Group like with like.
Arrange for access.
Provide good orientation (that is, navigation).
Be consistent.
Follow Web conventions. Only break a convention if it can be shown to actually enhance usability (or at least not hinder it).
Put standard elements in the places people expect them.
Make the page layout reflect the relationships between things and be uncluttered.
Don’t try to be fancy.
Make obvious what is clickable.
Be concise.
Focus on content.

Information Architecture

Navigation

“Clear, well-thought-out navigation is one of the best opportunities a site has to create a good impression” (Steve Krug).[7]

“It’s the structure of a site that determines its success. A well-organized site will lead users effortlessly toward their goals” (June Cohen).[8]

“A good visual hierarchy saves us work by preprocessing the page for us, organizing and prioritizing its contents in a way that we can grasp almost instantly” (Krug).[9]

Navigation Purposes

Usability expert Jakob Nielsen summarizes the purposes of navigation helpfully in his book Designing Web Usability.

The navigation should be designed to answer three questions:
1. Where am I?
2. Where have I been?
3. Where can I go?
The navigation should show users their location at 2 levels:
1. Relative to Web as a whole.
2. Relative to the site’s structure.
In other words, the navigation should:
1. Help users find what they’re looking for.
2. Tell users where they are.
3. Tell user’s what’s on the site (reveal content).
4. Show users we know what we’re doing.

But perhaps most importantly, the purpose of navigation is to reveal content. This is why drop-downs and “more” labels should have no place in the navigation, for they conceal content rather than reveal content.

General Principles

Every page needs to have these navigational elements:
1. Site ID. The organization name and logo should be in the upper-left corner of the screen on every page. A brief tagline describing what the site is about should accompany the logo. A good site ID answers the question: What site is this?
2. Page name. Answers: What page am I on?
3. Global navigation. Answers: What are the major sections of this site?
4. Local navigation. Answers: What are my options at this level?
5. Utility navigation. Answers: Where are the administrative areas that help me use the site (like account, cart, help, etc.)?
6. “You are here” indicator. Answers: Where am I in the scheme of things?
7. Search. Answers: How can I search?
8. Breadcrumbs. Provides another helpful and very useful perspective on where they are.
The search box will be on every page in the same spot.
Page names must always match what the user clicked.
Similar navigation items should be grouped, and categories that are of a different sort should not be mixed in (for example, product categories and topics should not be mixed).
Create intuitive pathways through site.
Provide a logical structure.
The number of times a user has to click is not as important as making each click a mindless, unambiguous choice.
Each page should have one primary purpose to which we are seeking to direct the user. It may be useful to document these purposes on a version of the site map.
There will be no splash screens.

Global Navigation

Global navigation should be provided by means of a bar across the top of the page. The categories should be constant throughout each page of the site (with the exception that the home page will not have a “home” button).
A link that says “home” should be part of the global navigation on every page (except the home page). We can’t simply rely on people to know that clicking the logo takes them home.
The organization name and logo should be in the upper-left corner of the screen on every page.
A tagline should accompany the logo. Note that a tagline is not a motto. “We bring good things to life” is good as a motto, but would not be good as a tagline because it doesn’t tell you what to expect. Conversely, at Desiring God the tagline is “God-centered resources from the ministry of John Piper.” That is a clear, helpful tagline because it tells you what the site is and what you will find there.
Each page should have a name/title.
1. The name should go in the upper left of the content portion of page.
2. The exceptions are sermons and articles and other content pages, where it may go in the top middle of the content section.
3. The name should appear to be framing the content that is unique to the page.
4. The name should match what the user clicked.
5. The name for each page should always be in the same spot—with sermons and articles as the possible exception to this (if the name goes in the middle), but even then every sermon and article should have the name in the same spot as every other sermon and article.
A “you are here” mechanism should exist on each page, showing the user’s current location in relation to rest of site. It should show the hierarchical relationship of their page to the rest of the site, not just the path they took to get there. This is done by having the main section where the user is highlighted in the global navigation, and the sub-section where they are highlighted in the local navigation (on the left). Breadcrumbs are also helpful for this (though they should never take the place of the indicators in the global and local navigation).
Contact info should be easy to find.
A feedback mechanism should be provided in About Us.
A link to the user’s shopping cart should be on every page (in the utilities.)
Search appearance principles:
1. Search box should be on every page.
2. The interface should be simple. Should be just a box, with button that says search. Hence, don’t need to also label it “search.” The button does that.
3. No cute names—not quick search, search the site, search-o-rama, or any such things.
4. Don’t have a “search the Web” option.

Local Navigation

Local navigation should go on the side (left or right) and provide the options specific to the level of the site at which the user is found. Page-specific navigation elements can also be presented here, such as related resource links, as long as they are kept visually distinct from the actual structural navigation.
In general, suggested and related resources should go on the side.
One exception is that related resources in topic indexes often need to go beneath, rather than on the right, because there are often so many. The related resources should be listed underneath the category in which they found, so that the category name effectively becomes a sub-category within the category that the user is currently in. Only the resources in these categories that are related to the primary category should be listed. Related products should also be listed, but clearly designated as related products.

Navigation Mechanics

Pull-down menus should not be used for navigation, because they conceal information, whereas the purpose of navigation is to reveal content.
New windows should not open for new pages. This disables the back button, the normal way users return to the site. However, the exceptions to this are audio/video (which opens in a pop-up), off-site links (so that users will know they are leaving our site), and possibly the privacy policy.
Audio and video can be displayed in a pop-up rather than within the browser page (though this is less and less common now). This is generally the only time pop-ups should be used.
People’s names should not be links to the person’s email. Such links should clearly be stated as email links.
Navigation pages should minimize scrolling (user is unable to see all options at once); content pages and home page may scroll.
Never make people scroll horizontally.
Similar navigation items should be grouped.
Don’t provide multiple navigation areas for the same type of links.
Navigation should be consistent. The labels should be the same everywhere, and the page you go to should have the same name as the link you clicked.

Categorization

Organizing schemes should be consistent. For example, topics should not be mixed with resource categories in the same grouping.
Categories should be mutually exclusive. Cross-listing should be kept to an absolute minimum.
Categories should be comprehensive–no gaps.
Categories should anticipate future content. If topical, for example, try to anticipate the topics not yet covered.
Groups of similar choices should be limited to 5-9 items when possible; people can’t keep more in their mind for evaluation. If tons of links needed, cluster them in groups of 5-9 links.
There should be no redundancy in the labels, sections, and categories.
There should be multiple ways of finding things (without creating redundant labels, sections, and categories).

Labels

Clear, intuitive labels will be used.
No clever or cute label names should be used. For example, the “search” should just be called “search,” rather than “quick find” or “search-o-rama.”
Labels must be consistent in these aspects:
1. Style: punctuation, etc.
2. Presentation: fonts, sizes, colors, white space
3. Syntax: no mixing of verb-based and noun-based. Use a single syntactical approach.
4. Granularity: all roughly equal in their specificity.
Section names should be:[10]
1. Short
2. Consistent. Agree in number of words, part of speech, verb tense, capitalization, language, etc.
3. Clear
4. Jargon-free

Links

Our goal is that people immediately know whether something is a link and, as a corollary, never think that something is a link when it is not. Hence, everything that is clickable should be obviously clickable, without requiring the user to scroll their mouse over it to make sure. To this end, we have these policies on links:
1. Color. All links will be indicated by color, and this color will be exclusive to links. The color is up to the designer. The color will be consistently used: Every link will be the same color, and any text that is not a link will not be this color. Links in the navigation (global and local) are an exception–they are not colored because the existence of the link is clear by virtue of being in a navigation bar.
2. Underlining. Links will also be indicated by underlining, and underlining will be exclusive to links. Underlining will be used consistently: All links will be underlined, and only links are underlined. Links in the navigation (global and local) are an exception: they do not need to be underlined because the existence of the link is clear by its inclusion in the navigation. Text that cannot be clicked should never be underlined.
3. Visited links. All links should switch to the same color once clicked upon, so that the user will know where they have been and where they have not.
4. Headlines. Headlines will not be underlined because this is not standard, but research indicates that we cannot rely merely on color and the fact that something is a headline to communicate to the reader that it is clickable. Hence, all headlines that are clickable need to have an arrow after them, to indicate that they are links.
5. Rationale. Our reasons for this policy stem from our primary goal, usability. We realize that this will force us to sacrifice some visual appeal, but since usability is a higher goal, this is a trade-off that we are willing to make.
The color that is chosen for links should preserve a high contrast with the background, so that viewers can easily see and read the link.
Buttons that are clickable should be obviously so.
It should be clear where each link will go, so users do not need to proceed by trial and error.
The amount of text used in the link should be kept to a minimum. When possible, link simply a short phrase rather than an entire sentence. For associative links within the content, only the most important information-carrying words should be turned into hyperlinks.
“Click here” should never be used.
If a link does anything other than go to another Web page, that needs to be made clear.
The name on the page that the person is taken to should always match the link they clicked.
For associative links within the content, only the most important information-carrying words should be turned into hyperlinks.
Don’t use a link that only says “More…” Have it say “More on X …”
Don’t use the word “links” to indicate links
If a link does anything other than go to another Web page, make sure this is made clear

Outbound Links

We will have outbound links, as a way of adding value to the site and the user’s experience. The value users derive from the external site will rubs off on the original site, and the links thereby turn into content and become a reason by themselves for users to like the site and use it. The presence of outbound links to credible sites may also increase the search engine rank of the site.
For outbound links, our focus will be quality, not quantity. Too many links are confusing.
Outbound links will normally be opened in a new window, to show that the link is going to an external site.

Graphic Design

Style

The design should be professional and attractive.
There should be a unified look to all sections and pages so that it is clear that they are part of the same site.
We will not overuse icons. They will only be used if they will aid in understanding and do not clutter the page. They will be kept small.
Web conventions should be followed, and broken only if it can be shown to actually enhance usability (or at least not hinder it).

Page Layout

Every page needs to have the navigational elements listed above.
The general structure is: Left: Nav bar. Center: Content. Right if content page: Tools and related. Right if entry or category page: Highlights. Top if entry page: Feature.
Critical page elements should be visible above the fold.
People should never have to scroll horizontally.
Pages should generally have clearly defined areas.
Noise and clutter should be minimized.
White space should be utilized.
When possible, the appearance of things should portray the structural and logical relationship between things. Things that are related logically should also be related visually.
A clear visual hierarchy should be present on each page.
The more important something is, the more prominent it should generally be. (There are exceptions to this.)
Visual nesting should be used to show what’s part of what.
Mouse travel distance between successive choices should be minimized.
Any time related products are listed, they should be listed with small thumbnails, if appropriate. (
The home page should be uncluttered and arranged in a way that pre-processes the information for the user through the page layout, nesting, and other visual elements.

Text

To avoid the ransom-note look, no more than 2-3 fonts per page should be used.
There should be a high contrast between text and background.
Text should be big enough to be legible.
There should be no moving text.
Sans-serif typeface should generally be used, since some systems don’t render serif text very well.
Words in all large capital letters should be avoided. Words in all small-caps are acceptable.
Line lengths in documents should not exceed 52 characters.

Technology

Coding

The pages should be designed for cross-platform and cross-browser usage.
There should be a separation of meaning and presentation. HTML is used to encode meaning, and style sheets for presentation.
Linked (as opposed to embedded) style sheets will generally be used to make changes easy.
For users who have very old browsers that do not support style sheets, the pages should degrade gracefully.
Frames will never be used.
Tables will not be used, except when we really want a real table on the screen.
Images of words should generally not be used, since images can’t be searched. Menus may be an exception.

Speed

Download speed should be fast. Shoot for a general maximum of two seconds. Any medium that will take more than 20 seconds to download should have a progress bar (example: audio).
Video and audio should list the length and file size.
Images should be cropped, compressed, or a combo to prevent lengthening the download time.

URLs

The same page should always be referred to with the same URL in every link to it, so that the visited-non-visited color scheme is not thrown off.
URL’s should be understandable, and support URL-butchering.
Old URLS should point to new location when a page moves.
Permanent URLs should be used for pages where the content may change frequently but the older content remains relevant, so that the older content may still be accessed.

Content

Writing

Be succinct.
Write for scannability:
1. Do not use long blocks of text.
2. Do use short paragraphs.
3. Do use sub-headings.
4. Do use bulleted-lists.
Use the inverted pyramid principle, as possible.
One idea per paragraph, with topic sentences.
Omit needless words.
Minimize happy talk (such as “welcome to this page…”).
Minimize instructions.
Info that is only of interest to a minority of readers should be made available through a link.
Use consistent capitalization and other style standards so that all usage is consistent.
Grammar, spelling, and punctuation should be near flawless.
Headlines:
1. Should make sense even when the content is not right there under it.
2. Should be clear and plain. Nothing cute.
3. Should not be mere teasers. We should provide clear expectations.
4. Should make the first word be info-carrying.

Freshness

Fresh content should be posted each day in a prominent spot on the home page.
Timely, and interesting features should exist within the site.
Outdated information should be removed immediately.

Promotion

Support grassroots and online marketing.
Integrate with offline communication.
Practice consistent email communication via e-subs and e-newsletters.
Support off-line promotional efforts.

Principles for Ongoing Improvement

Practice detailed stat tracking, reporting, and analysis.
Continue usability testing.
Evaluate user feedback.
Gauge user interest.

More Detail on Usability

How People Use the Web

Most glance at each new page, scan, and click on first link that catches interest or resembles what they are looking for.

3 facts:

People don’t read, but scan.
People don’t make optimal choices, but rather the first reasonable option.
People don’t figure out how things work, but muddle through.

Criteria of Usability

5 things determine a site’s usability:

Learnability
Rememberability
Efficiency of use
Reliability in use
User satisfaction

Criteria of excellence:

Useful
Usable
Correct
Pleasing

Definition of usability: “Usability is the extent to which a site can be used by a specified group of users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use” (Powell, 50).

Home Page Purposes

Objective of the home page is to convey the big picture of the site while highlighting the most interesting, relevant, and timely stuff to the user. This objective breaks down into the following goals:
To the big-picture questions for the user:
1. The location question: Where am I?
2. The identity question: Who are these people?
3. The purpose question: Why should I be here?
4. The content question: What do they have here?
5. The action question: What can I do here?
6. The start questions:
  1. Where do I browse?
  2. Where do I search?
  3. Where is their best stuff?
To serve as entry point and recognizable starting place.
To identify the site and mission.
To reveal the site hierarchy (content and features) and how it’s all organized.
To feature news or resources that are relevant to current events or the current ministry focus (in other words, that are timely).
To highlight special promotions (but don’t overdo).
To give people tastes of the best things inside, through content promos and feature promos.
To do these things in a way that demonstrates that the site is timely and kept up to date.
To provide short-cuts to most frequently requested pieces of content.
To expose what users are looking for and what they are not looking for, but may be interested in.
To establish credibility and trust.

Helpful Resources on Usability

Steve Krug, Don’t Make Me Think: A Common Sense Guide to Web Usability

June Cohen, The Unusually Useful Web Book

Jakob Nielsen, Designing Web Usability

Louis Rosenfeld & Peter Morville, Information Architecture for the World Wide Web: Designing Large-Scale Websites

Jakob Nielsen & Marie Tahir, Homepage Usability: 50 Websites Deconstructed

Andrew Clark, Submit Now: Designing Persuasive Websites

Jakob Nielsen, E-Commerce User Experience

Notes

[1] Thomas Powell, Web Design: The Complete Reference, 13.

[2] Steve Krug, Don’t Make Me Think: A Common Sense Guide to Web Usability, 19.

[3] Krug, 15.

[4] I am indebted to Steve Krug for pointing out this principle and fleshing it out so helpfully in his excellent book Don’t Make Me Think: A Common Sense Approach to Web Usability.

[5] Krug, 13.

[6] This principle is from Edward Tufte, one of the premiere experts in information design and data visualization.

[7] Krug, 60.

[8] June Cohen, The Unusually Useful Web Book, 97.

[9] Krug, 33.

[10] These four characteristics are fleshed out well by June Cohen in The Unusually Useful Web Book, pp. 122-123.