This is my message from the Biola Digital Ministry Conference 2012.

First I discuss why usability matters (giving both the practical case and the biblical case, which is very interesting). Then I go into the nuts and bolts of how to make your website usable, focusing especially on how to create good information architecture (the key to usability).

And here are my slides for the message (which you can use to follow along on the message, or just click through all on their own):

Note: Building on Matt Heerema’s post on the importance of usability for good websites, I’m posting this document, which was originally created to outline the usability strategy my team and I developed at Desiring God. My aim was essentially to give a clinic on the most important aspects of usability and information architecture in about 8 pages. I believe I wrote this in 2009.

Though it applies these principles specifically to DG, the broader principles that are applicable to any website should remain clear. Hopefully seeing their specific application to the DG website will help reinforce and illustrate them.

It would be great if every ministry began to make usability and good information architecture a top priority — and therefore learned the principles to effectively implement these priorities. It would make an absolutely huge difference. 

For more on usability and how I see it as not only central to website effectiveness, but also grounded in the Christian command to love our neighbor, see my messages from the Biola Digital Ministry Conference How the Gospel Should Shape Your Web Strategy and Practical Usability.

History of the Site Development

At the very start, we identified that usability would be our governing principle in the site redesign. The goal of the site redesign was: “To redesign the Desiring God website in accord with sound principles of usability and design.”

So we researched in detail what made for good usability. This involved not only studying the best books on the subject, but also user testing on our current site to determine what worked and what didn’t, and user testing on some other sites.

It also involved detailed analysis of the best sites out there (almost all of which were secular). We analyzed in detail how sites like Amazon and others organized their content and created an optimal user experience.

Last of all, we researched the principles of sound classification and categorization. This is because the site not only required that we create a good macro organizational structure, but also required the effective grouping of 2,000 plus resources into several different types of categories, including resource type, topic, and more. We wanted to know the principles of how to effectively categorize things so that we weren’t just making decisions on the basis of what we thought would be right. We wanted to know what we were doing.

To synthesize all of this information, we created several documents: “Usability & Design Principles for Desiring God,” “Usability, Our Basic Philosophy of Web Design,” “DesiringGod.org Classification Principles,” “DesiringGod.org Category Schemes,” and “The Vision for Our Website.”

The Importance of Usability

Its Priority

As mentioned above, usability is the central principle of our site design and presentation. This means that:

1. We prioritize it above looks.
2. We prioritize it above cool functionality.

We want a good graphic look for the site, but when we have to make a call between what looks better and what is more usable, usability wins. Likewise, we don’t have a problem with cool functionality, but if it creates an interesting experience at the cost of making the site harder to use, we are not interested.

Tie to Mission

The centrality of usability to the site flows from our mission. Our mission is to spread. But a hard to use site creates friction, which thus reduces spreading. An easy-to-use site reduces friction, thus serving the cause of spreading.

Good Usability Makes Everything Seem Better

Good usability makes everything about a site more effective. “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” (Krug, 19).

The importance of usability will be discussed in more detail below, when we discuss the need to be content-centered behind being user-centered.

[Read more…]

This is an excellent post at Challies.com by my friend Matt Heerema.

Most websites are hard to use because the designers paid insufficient attention to information architecture. Information architecture has to do with how the site is structured and organized.

So, how do you fix this? By giving usability the priority it deserves and learning principles of sound information architecture.

You can do this by reading a book like Steve Krug’s Don’t Make Me Think — still the best book out there on web usability.

Or, if you are engaged in a web redesign or soon to start one, I would highly suggest contacting Matt and his company, Mere Agency, to see what they might be able to do for you.

You would find it to be well worth your time and investment. The impact of good usability is huge. When we first redesigned the Desiring God website on the basis of sound usability principles back in 2006, within four months page views increased 356%, audio listens increased 359%, and visits increased 99%.

Matt’s company understands and specializes in those same information architecture principles that we developed at Desiring God. In fact, before starting his current company, Matt came and worked with us at Desiring God and led subsequent redesigns of the site. If you work with Matt, you will be putting your website in great hands.

Here’s a great presentation on usability by Steve Krug, the foremost expert on the subject by far. 

The focus of this presentation is on the importance of user testing. Most of the time, user testing never happens; or, when it does, it is done in way more detail that it needs to be, with scientific analysis of the results and a long report, costing about $10,000.

However, you can be just as effective with user testing by just testing three users, watching how they use your site while they think out loud (that’s the key). With just three users you will identify far more problems than you have the resources to fix anyway. Identify the top three, address those, and you will have made a significant impact.

Last: don’t do user testing as an add-on at the end. You need to do it throughout the process. If you do three rounds throughout the development of your product (website or anything else–I think all products should be user tested, even building layouts), fixing the top three problems identified after each time, that would be huge.

If you want to save time, the best way to watch his lecture is actually to click through the slides at the bottom. And, for more detail on what makes for good usability on websites, see his excellent book:

(HT: Matt Heerema)

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:

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

Chief Principles for Making Your Site Usable

1. 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.
2. Use the smallest effective difference.[6]
3. Eliminate the unnecessary.
4. Group like with like.
5. Arrange for access.
6. Provide good orientation (that is, navigation).
7. Be consistent.
8. Follow Web conventions. Only break a convention if it can be shown to actually enhance usability (or at least not hinder it).
9. Put standard elements in the places people expect them.
10. Make the page layout reflect the relationships between things and be uncluttered.
11. Don’t try to be fancy.
12. Make obvious what is clickable.
13. Be concise.
14. 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.

1. The navigation should be designed to answer three questions:
   1. Where am I?
   2. Where have I been?
   3. Where can I go?
2. The navigation should show users their location at 2 levels:
   1. Relative to Web as a whole.
   2. Relative to the site’s structure.
3. 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

1. 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.
2. The search box will be on every page in the same spot.
3. Page names must always match what the user clicked.
4. 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).
5. Create intuitive pathways through site.
6. Provide a logical structure.
7. The number of times a user has to click is not as important as making each click a mindless, unambiguous choice.
8. 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.
9. There will be no splash screens.

Global Navigation

1. 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).
2. 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.
3. The organization name and logo should be in the upper-left corner of the screen on every page.
4. 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.
5. 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.
6. 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).
7. Contact info should be easy to find.
8. A feedback mechanism should be provided in About Us.
9. A link to the user’s shopping cart should be on every page (in the utilities.)
10. 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

1. 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.
2. In general, suggested and related resources should go on the side.
3. 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

1. Pull-down menus should not be used for navigation, because they conceal information, whereas the purpose of navigation is to reveal content.
2. 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.
3. 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.
4. People’s names should not be links to the person’s email. Such links should clearly be stated as email links.
5. Navigation pages should minimize scrolling (user is unable to see all options at once); content pages and home page may scroll.
6. Never make people scroll horizontally.
7. Similar navigation items should be grouped.
8. Don’t provide multiple navigation areas for the same type of links.
9. 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

1. Organizing schemes should be consistent. For example, topics should not be mixed with resource categories in the same grouping.
2. Categories should be mutually exclusive. Cross-listing should be kept to an absolute minimum.
3. Categories should be comprehensive–no gaps.
4. Categories should anticipate future content. If topical, for example, try to anticipate the topics not yet covered.
5. 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.
6. There should be no redundancy in the labels, sections, and categories.
7. There should be multiple ways of finding things (without creating redundant labels, sections, and categories).

Labels

1. Clear, intuitive labels will be used.
2. 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.”
3. 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.
4. 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

1. 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.
2. 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.
3. Buttons that are clickable should be obviously so.
4. It should be clear where each link will go, so users do not need to proceed by trial and error.
5. 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.
6. “Click here” should never be used.
7. If a link does anything other than go to another Web page, that needs to be made clear.
8. The name on the page that the person is taken to should always match the link they clicked.
9. For associative links within the content, only the most important information-carrying words should be turned into hyperlinks.
10. Don’t use a link that only says “More…” Have it say “More on X …”
11. Don’t use the word “links” to indicate links
12. If a link does anything other than go to another Web page, make sure this is made clear 

Outbound Links

1. 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.
2. For outbound links, our focus will be quality, not quantity. Too many links are confusing.
3. Outbound links will normally be opened in a new window, to show that the link is going to an external site.

Graphic Design

Style

1. The design should be professional and attractive.
2. There should be a unified look to all sections and pages so that it is clear that they are part of the same site.
3. 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.
4. 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

1. Every page needs to have the navigational elements listed above.
2. 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.
3. Critical page elements should be visible above the fold.
4. People should never have to scroll horizontally.
5. Pages should generally have clearly defined areas.
6. Noise and clutter should be minimized.
7. White space should be utilized.
8. 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.
9. A clear visual hierarchy should be present on each page.
10. The more important something is, the more prominent it should generally be. (There are exceptions to this.)
11. Visual nesting should be used to show what’s part of what.
12. Mouse travel distance between successive choices should be minimized.
13. Any time related products are listed, they should be listed with small thumbnails, if appropriate. (
14. 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

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

Technology

Coding

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

Speed

1. 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).
2. Video and audio should list the length and file size.
3. Images should be cropped, compressed, or a combo to prevent lengthening the download time.

URLs

1. 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.
2. URL’s should be understandable, and support URL-butchering.
3. Old URLS should point to new location when a page moves.
4. 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

1. Be succinct.
2. 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.
3. Use the inverted pyramid principle, as possible.
4. One idea per paragraph, with topic sentences.
5. Omit needless words.
6. Minimize happy talk (such as “welcome to this page…”).
7. Minimize instructions.
8. Info that is only of interest to a minority of readers should be made available through a link.
9. Use consistent capitalization and other style standards so that all usage is consistent.
10. Grammar, spelling, and punctuation should be near flawless.
11. 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

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

Promotion

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

Principles for Ongoing Improvement

1. Practice detailed stat tracking, reporting, and analysis.
2. Continue usability testing.
3. Evaluate user feedback.
4. 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:

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

Criteria of Usability

5 things determine a site’s usability:

1. Learnability
2. Rememberability
3. Efficiency of use
4. Reliability in use
5. User satisfaction

Criteria of excellence:

1. Useful
2. Usable
3. Correct
4. 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

1. 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:
2. 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?
3. To serve as entry point and recognizable starting place.
4. To identify the site and mission.
5. To reveal the site hierarchy (content and features) and how it’s all organized.
6. To feature news or resources that are relevant to current events or the current ministry focus (in other words, that are timely).
7. To highlight special promotions (but don’t overdo).
8. To give people tastes of the best things inside, through content promos and feature promos.
9. To do these things in a way that demonstrates that the site is timely and kept up to date.
10. To provide short-cuts to most frequently requested pieces of content.
11. To expose what users are looking for and what they are not looking for, but may be interested in.
12. 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.

The redesign of any ministry website presents the organization with an incredible opportunity. It is an opportunity to serve the body of Christ by providing abundant and easy-to-access content and an opportunity to provide a foundation for more effectively accomplishing the goals of the organization. The way to make the most of this opportunity is to make sure that the outcome of this redesign is an effective website that is built on the basis of sound principles.

The Importance of an Effective Website for Christian Ministries

Why Is an Effective Website Important?

An effective website lies at the foundation of organizational effectiveness. In a real sense—at the human level—the success of any ministry today depends in a large measure upon the success of its website. Successful organizational strategy can no longer be carried out apart from an effective website and an intentional web strategy.

The reason is that, in this day and age, the web has become the main way people interact with and experience many organizations. This is even more true for teaching-centered ministries, as the internet has become the primary way people obtain, use, and share the content that these organizations provide. The more effective a website is, the better the experience website visitors have with the organization, and the more motivated they will be to spread its message and content to others.

What Makes for an Effective Website?

When most people think of a “good” website, they think first—and perhaps exclusively—about its graphic look. If a site looks nice, it is considered a success. But web experts such as Jakob Nielson, Steve Krug, and others have shown that the graphic look of a site is not the most important factor.

This comports with experience. We have all been to sites that look nice but are nonetheless frustrating to use. Specific information that we can reasonably expect to be available on the site is difficult to find, or the navigation tools are confusing and therefore inefficient. Despite an attractive look, such sites provide a negative experience, making us disinclined ever to visit the site again.

An attractive look is certainly very important, and any ministry’s new site must look great in order to serve visitors and reflect well on the gospel. But no one visits a ministry site primarily for the aesthetic experience. Your visitors are focused, goal-oriented, and likely quite busy. They want to identify as quickly and easily as possible—and at whatever level of detail may concern them—what can be found at the site and how to find it. In other words, they are interested in what has been shown to be the single most fundamental component of an effective website: usability.

Websites exist to be used. Sites that are easy to use enable visitors to accomplish their goals more effectively and with less frustration. Ease of use creates a more pleasant experience for visitors, makes them more likely to return, reinforces the credibility of your brand, and makes it more likely your visitors will share your site with others.

Graphic design does not create ease of use. It builds upon ease of use. Absent good information architecture and an adherence to sound principles of usability, attractive graphic design is insufficient and ineffective.

How Does One Build an Effective Website?

An effective website, therefore, is created when good graphic design is joined to high usability. Most of us recognize good graphic design when we see it. But usability is not nearly so well understood.

In essence, usability comes from (1) good information architecture, and (2) adherence to sound principles of usability and layout. Information architecture has to do with the way the site is structured—what the main sections of the site are, what the sub-sections are, what categories are used to group the content, and so forth. The primary importance of good information architecture cannot be overstated. In allowing a visitor to find his way around the site easily, good information architecture keeps him from getting lost (one of the worst of all sensations on the web), keeps him oriented, and enables him to move easily and confidently from one place to another.

Good information architecture reveals your content so that it can be maximally accessed; more than that, it interprets your content. Particularly at the levels of Topic (e.g., Atonement) and Resource Type (e.g., sermon, article, poem, etc.), solid information architecture provides the visitor a grid for how to think about your content, thus enabling him to find, understand, and remember it better. Sites this easy to use are returned to frequently and talked about widely.

Good information architecture, however, is not achieved by organizing a site according to what “seems best to us.” Rather, there are established principles of classification and organization that assure effective architecture. Likewise, there are also general principles of usability and design that reveal and govern how to build the mechanics of a site correctly. These principles of usability and design are the second component to making a site usable. As a few examples: site navigation should always highlight the section the visitor is in so that he can tell at a glance where he is; every page on the site needs a title; only links should be underlined; and “click here” should never be used. Defining these principles (along with some 100 others like them) and following them in the creation of the site pages, is essential in creating an effective, usable website.

This is a document I wrote while at Desiring God to summarize our usability philosophy in about 15 principles.

Web design is about far more than the graphic look of a page. It pertains to how the site is organized, how the information is structured on a page, and how the user interacts with the site. Good design creates satisfied users; bad design means that your site will not be utilized to even half of its potential.

What follows are the core principles for designing an effective website.

1. Usability: Don’t Make Them Think

Sites that are hard to use, don’t get used much. Sites that are harder to use than they have to be, get used less than they should be. The Web is a mass medium. If your website is hard to use, you are failing to capitalize on the medium of the Web—not to mention making a bad impression and undermining user confidence in your organization.

Ease of use is our core principle, and therefore it is worth some elaboration.

What is 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, Web Design: The Complete Reference, 50).

As Steve Krug has so simply shown in his book Don’t Make Me Think: A Common Sense Approach to Web Usability, one simple sentence sums up the definition of usability: A usable website is one that doesn’t make people think. In other words, it doesn’t raise question marks in people’s minds about how to do this or that, how to get here are there, or how to respond to the information on the page. They see the page, and know what they need to do, and how to do it.

This principle is “the ultimate tie-breaker in deciding whether something works or doesn’t in a Web design” (Krug, Don’t Make Me Think, 11). It is the very definition of what a usable site is.

Krug fills out the meaning of this principle more fully:

It means that as far as is humanly possible, when I look at a Web page it should be self-evident. Obvious. Self-explanatory.

I should be able to ‘get it’—what it is and how to use it—without expending any effort thinking about it.

Just how self-evident are we talking about?

Well, self-evident enough, for instance, that your next door neighbor, who has no interest in the subject of your site and who barely knows how to use the Back button, could like at your site’s Home page and say, ‘Oh, it’s a _____.” (With any luck, she’ll say, ‘Oh, it’s a _____. Neat.” But that’s another subject.)

You could also take another angle on defining usability, which is complementary to “don’t make me think” but not nearly as memorable or basic. 5 things determine a site’s usability:

1. Learnability
2. Remberability
3. Efficiency of use.
4. Reliability in use.
5. User satisfaction.

But it is much easier to just remember one thing: Don’t make people think.

What are the benefits of usability?

If your site is not usable, it adds to people’s cognitive workload: “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” (Krug, 15). Add to people’s cognitive workload can have many ill effects, while lessening their cognitive workload can have many good effects.

1. Good usability makes everything seem better. “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” (Krug, 19).
2. There is a better chance that users will understand what they’re looking for.
3. There is a better chance they’ll understand the full range of what your site offers.
4. There is a better chance of steering them to the parts of the site you want them to see.
5. Users will feel smarter and more in control, which will bring them back
6. Users will have more confidence in your organization.
7. Good usability creates a good impression.

How do you know if a site is “usable”?

Not by talking about what you “like” or “don’t like.” Rather, you determine if it is usable by watching real people use your site, and seeing what creates obstacles (makes them think) and what works simply (doesn’t make them think). This is why user testing plays a key role in our Web design process.

But before the stage of user testing, you don’t have to shoot in the dark. There are several principles which are implied by the principle of usability—implied not only in terms of being logically correlated, but in terms of being shown to accord with usability in actual user research.

The remaining principles outlined below are just of this sort—they are all implied by the overarching principle of usability, and hence ultimately serve to flesh out more fully what usability means.

2. Use the smallest effective difference

When attention needs to be called to something or a distinction needs to be made between two different layers of information, it ought to be done with the smallest difference that effectively makes the distinction known. Otherwise, you are simply adding noise to the page.

For example, in a chart of baseball stats, thick, black gridlines simply distract from the information. They are one more thing to ignore. The gridlines should be soft and undistracting.

3. Eliminate the unnecessary

It is from this principle that the above principle of the smallest effective difference derives. Things that are unnecessary distract. In our homes, we call such things trash, and take them out to curb for the garbage truck every week. How do you determine if something is necessary? By considering your goal. If something advances the fulfillment of the goal for your site, or for a particular page on your site, it is relevant. Probably—as long as it doesn’t have side effects that are worth less than its benefits. If it does not advance the goal, it should be removed.

4. Group like with like

The basic principle for organizing anything is to group like things together. Crucial to good groupings is to define the basic similarity or quality that is serving as your organizing principle.

5. Arrange for access

Put simply, you put things where they will be used. On a checkout page, for example, this means you put the “You will have a chance to review your order before submitting it” sentence right next to the “continue” button on the payment screen, because it’s when deciding whether to click the button to go to the next step that that concern arises in the user’s mind.

Likewise, this principle means that you integrate content whenever possible. For example, on the page where people are able to sign up for an account, you wouldn’t want just have a link that says “benefits of registration,” requiring the person to click before they see any benefits. Rather, you would state the benefits right there. If you have more benefits than will fit, you state a few benefits right there, and have a link to the full list.

6. Provide good orientation

The most common user question is “where am I?” It is absolutely essential to orient your users. First, this is done by providing clear navigation that makes it obvious where they are—and how to get somewhere else. “Clear, well-thought-out navigation is one of the best opportunities a site has to create a good impression” (Krug, 60). Second, this is done by using good page titles—on every page.

7. Be consistent

Consistency means that if you do something a certain way in one spot, then it should be done the same way everywhere (unless there is a compelling reason otherwise—and the desire to “spice things up” and “make them interesting” doesn’t count).

This is illustrated very clearly in navigation. For example, as Krug points out, if a navigation label says “Lug Nuts” but takes you to a page called “Nuts,” you are making your user think—they have to ask the question of why the name of the page is different than what they clicked. Is it because they were taken to the wrong page? Or is it because “lug nuts” is considered a type of “nut?” Probably the later, but why make them as the question? The more different the name is, the worse you make it (for example, if the link was “Lug Nuts” and the page was “Spare Parts”). When I see sites do this sort of thing, it communicates two things: (1) They don’t care; (2) they are lazy.

8. Follow Web conventions

If you follow Web conventions (like global navigation goes across the top; local navigation goes underneath it or on the left; buttons are used when clicking initiates a task [like add to cart]; periods go at the end of sentences; etc.), then people will know how to use your site because they know how to use other sites.

If you don’t follow Web conventions, people will have to relearn your site. And it is hard to think of anything else that would make your users have to think more.

Many sites choose not to follow conventions because they want to be “unique.” If you want to be unique in this way, you need to weigh the cost—will it be worth what we lose by making our users think so hard? Usually, the sites make the wrong choice when they opt for the trendy over the conventional. Further, within the context of standard conventions, there is an infinite number of ways to be unique. Consider a book. Table of contents, page numbers, chapters, text that goes from left to right, and such are standard fare—conventions. But there are still plenty of ways to make your book stand out, without choosing to jettison page numbers or left to right text.

Be unique. Just don’t do it in the wrong way.

9. Don’t try to be fancy, and try not to use Flash

One trend that many sites give into is to use Flash. The typical thinking is that it looks neat and gives a multi-media feel to the site. But unless you are an entertainment site, where users come to be entertained, Flash will usually distract from the users’ goal, and therefore get in their way.

A related horror is that of splash pages—those nifty pages you encounter before the site’s home page which give you an animated intro to the site. These especially interfere with user goals. When you go to the Chipotle website to see the menu, for many people sitting through an animated scene of a talking burrito is just a frustrating delay in the pursuit of their goal. As someone has once said, the two most embarrassing words in Web design are: “Skip intro.”

10. Weave things in, don’t just start a new section

When a new idea comes up, the tendency is to want to create a “section” on the website for it. Sometimes that is warranted. But sometimes, after 10 such ideas, you end up with an incoherent site structure. Far better, when possible, to weave things in, integrating with existing content.

11. Make obvious what is clickable

The Web is pretty much about clicking. It’s how you get from one page to the next. Therefore, each page needs to make obvious what is clickable. You shouldn’t rely on users having to roll their mouse over something to see if it’s clickable (that makes them think).

It should also be clear where each link will go, so users do not need to proceed by trial and error.

12. Do not structure the site around the organizational hierarchy

Users don’t care about an organizations internal org chart. The site needs to be structured according to the content, and how users would think about the content.

13. Be concise

People don’t read Web pages, they scan them. Therefore write succinctly, and eliminate happy talk (the “welcome to this section of our site…” type of thing). Here are some basic guidelines for writing for the Web:

1. Be succinct.
2. 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.
3. Use inverted pyramid principle, as possible.
4. One idea per paragraph, with topic sentences.
5. Omit needless words.
6. Minimize happy talk (such as “welcome to this page…”).
7. Minimize instructions.
8. Info that is only of interest to a minority of readers should be made available through a link.
9. Use consistent capitalization and other style standards so that all usage is consistent.
10. 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.

14. Don’t use cute or clever names for labels and links

No clever or cute label names should be used—people do not click on such links because they don’t know where they go.

Good labels are also 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.

 15. Focus on content

Ultimately, the interest and engagement level created by a site is a function of it’s content. Usability keeps the site from being an obstacle to its own content, so that the content can shine. “Original, quality content is the most valuable commodity of the Web. Users look for useful content and consume it voraciously once they find it” (Powell, 13).

This is not an exhaustive list of the principles we seek to follow in designing for the Web. For a more complete list, see our document Usability and Design Principles for DesiringGod.org.

Categorizing essentially consists of grouping like items together (classification) and assigning good labels to those groups (labeling). If it is going to be effective, categorizing needs to be done according to sound principles. Alternatively, if something is not categorized well, it is probably not understood well and will likely not communicate well.

This document outlines the key principles for how to categorize. It provides the framework to follow when grouping our content by topic (see the Topic Listing document for a list of our current topics and The Nature of Our Topic Index for a summary of the purposes and policies for our topic index) or into various other category groupings (such as those defined in the document Desiring God Classification Schemes).

Why Categorizing Matters

Categorization matters for several reasons, especially on websites. First, good categorization reveals site content. For example, thousands of site pages become more manageable when “summarized” by 8 primary categories. Second, good categorization reveals the structure of the content. Categories provide a framework for understanding and aid exploration because similar things are grouped together. Hence, presenting people with a logical set of categories that reveals the contours of the content is actually a form of teaching—a way of informing people how to think about and interpret what they find and associate it with other content.

Third, good categorization enables ease of use. This is especially important given the nature of our website. Our website is, in essence, “The Works of John Piper”—comprehensive and ever-growing. Therefore good categorization matters, as do consistent titling conventions, grammar, and so forth. Through good categorization, our site can be the complete Works of John Piper, easily navigable. Fourth, good categorization expands people’s horizons by exposing them to terms and groupings they would not have thought to search for—and probably couldn’t search for well, if they tried.

The Principles of Good Classification

Classification needs to follow solid principles if it is going to make sense and be useful. The characteristics of good classification, or grouping, are as follows:

1. Follow a classification scheme. Identify the common trait that you are using as the basis of your grouping. This is the classification scheme, or organizing principle—that which “defines the shared characteristics of content items and influences the logical grouping of those items.”[1] Classifications without a clear, definite, and consistent organizing scheme are confusing and reveal lack of clarity and understanding. See the document Desiring God Classification Schemes for a list of our major classification schemes.
2. Do not mix classification schemes. Multiple schemes can be applied, but they cannot be mixed. For example, you would not want to use this category structure: CDs, MP3’s, and Christian living. The reason is that the first two items are product categories, while “Christian living” is a topic. You could subdivide CDs, however, by topic, or provide “Browse by Topic” or “Browse by Product Category” as two alternate means of browsing.
3. Make the categories mutually exclusive. Categories should be mutually exclusive as much as possible. Otherwise, classification looses much of its value.
4. Make the categories unambiguous. It needs to be clear what the categories pertain to, especially since ambiguity in effect works against mutual exclusivity.
5. Eliminate redundancy. There should be no redundancy in labels, sections, and categories. For example, we should not have both “effectual calling” and “irresistible grace” as subject categories. If both terms are common, then by the least common one put a “see [name of the other term].”
6. Keep cross-listing to a minimum. This means that each item should be in only one category. This follows from the principle of eliminating redundancy.
7. Use “related items” sections to show people the full network of connections among resources. When an item seems to “fit” in more than one category, list it according to its primary category and designate it as a related item in other categories. This enables the item to be found, without making the user have to mentally sort each new category they go to in order to “screen out” the redundant elements.
8. Make the categories comprehensive. There should be no gaps. The categories should be exhaustive, without being redundant.
9. Seek to keep lists between 5 and 9 items. Groups of similar choices should generally be limited to 5-9 items; people can’t keep more in their mind for evaluation. If tons of links are needed, cluster them in groups of 5-9 links if you can. Of course, this is not always possible.
10. Make the groupings intuitive. The customer should not have to work hard to figure them out. One way to accomplish this is through user testing. In user testing, the key is to observe how something works with them, not necessarily to incorporate all of their suggestions.
11. Make the groupings logical. For the groupings to be logical means that they reflect the actual structure of the content. Since one of the purposes of categorization is to reveal the structure of the content, this principle is very important. At times, it may seem in conflict with making things intuitive. But in general, that which is logical is what is intuitive, or what will be found to be most intuitive upon use.
12. Create the categories to anticipate future content. It should be possible to add additional content without breaking the category structure.

When categorizing by topic, there are two specific principles that apply on top of the above principles:

1. Our topics should be universal to our organization. For example, we should not have one set of categories for products (online store), and a different set for resources (online library).
2. Our topics should be historical. We should seek for the categories to be informed by traditional categories of theology and the Christian retailing industry.

The Principles of Good Labeling

Categories that are designed well need to be labeled well. Many of the principles of classification imply as their corollary certain principles of labeling. Good labels are:

1. Short.
2. Clear.
3. Intuitive.
4. Jargon-free.
5. Not cute or clever.
6. Consistent in style, punctuation, presentation (fonts, sizes, colors, white space), syntax (they do not mix of verb-based and noun-based terms, they agree in parts of speech, verb tense, and they have roughly the same number of words), and granularity (they are all roughly equal in their specificity). 

Classification Methods

The classification type depends upon whether you “group” your categories or just list them all without groupings. To group your categories underneath larger categories is called the encyclopedic method. To simply list them all without major groupings is the A-Z method.

Both have benefits and drawbacks, and the choice of a method depends on the purpose. The best example of an A-Z method is the phone book. This method works best for known-item-searching. If you know you need a plumber, for example, you just want to be able to flip to a section called “Plumbers.” You don’t want to have to go to a major category like “Household Services” to find plumbers grouped with electricians and carpet layers.

But for non-known item searching, the encyclopedic method can be useful, because it groups like categories together. For example, if I am interested in the field of theology, I may want to see all theological topics grouped together—rather than having to sort through a lengthy list that includes many other types of topics, in the hopes of being able to identify and remember all the ones that pertain specifically to theology.

Classification Structures

When following an encyclopedic format, there are two main types of classification structures: the generic relationship and the whole-part relationship.

In the generic relationship structure, the relationship between the super and subclasses is always “IS-A.” An example of such a structure is:

• Automobile Companies
  • Ford
  • Toyota
  • General Motors

This is an “IS-A” relationship—Ford, Toyota, and General Motors are all types of automobile companies. According to “The Truth About Taxonomies,” an article in the Information Managmeent Journal, other characteristics of this type of structure are:

1. Inclusiveness. The top class includes the subclasses. Everything beneath it is a type of it.
2. Inheritance. Everything true of the given class is also true of all the items in its subclass.
3. Transivity. All subclasses are members of every class above them.
4. Systematic rules for association and distinction. All entities in a class are like each other in a predictable way.
5. Mutual exclusivity. Each item can belong to only one class.

In a whole-part relationship, each item of the subclass is a component of the super class. An example would be:

• Airplane
  • Fuselage
  • Engine
  • Wings

In this instance, the fuselage, engine, and wings are all parts of an airplane. You have a whole-part relationship.

If you mix classification structures, you often have confusion. For example, you would not want to create this structure:

• Airplane
  • Fuselage
  • Engine
  • Wings
  • Northwest Airlines
  • 747
  • DC-10

As can be seen, the problem with such a structure is that it does not adhere to a consistent classification. It mixes “Is-A” and “Whole-Part.” And among the “IS-A” relationships, you actually have two different kinds—Northwest Airlines is a type of airline, whereas the 747 and DC-10 are both types of airplanes.

Other Resources

This document provides the foundation for the two other documents in this series, Desiring God Topic Categories and Desiring God Classification Schemes. Some helpful external resources on classification are the following:

• “The Truth About Taxonomies,” The Information Management Journal (March/April 2003), 44-53).
• ECPA Christian Product Categories, 2003.
• Establishing Alphabetic, Numeric, and Subject Filing Systems, ARMA International, 2005.
• Information Architecture for the World Wide Web, Louis Rosenfeld & Peter Morville.

See also the other DG documents pertaining to classification:

• Desiring God Classification Schemes
• Desiring God Topic Listing
• The Nature of Our Topic Index

[1] Information Architecture for the World Wide Web, 55.