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.