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:
- We prioritize it above looks.
- 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.
The Impact of Usability
Has the importance we’ve placed upon usability – and the way we’ve implemented our usability principles – had the impact we expected? Has it “made everything seem better” on our site, as Krug suggests?
User response, user testing, and site statistics have confirmed that we succeeded in our goal of making the site usable. Indeed, our expectations have been far exceeded. The DG site is now known for combining high usability with excellent content. The extent of the response has also confirmed our hypothesis that usability is the most important guiding principle for the site design.
User Response
We have received literally hundreds of unsolicited emails from users remarking on how easy to use the site is. What is remarkable about this is that we aren’t putting any suggestions out to them that would trigger the idea in their heads to think of the site in these terms. All on their own, they write to us and tell us how usable it is. This is indication that they are reflecting their genuine experience, rather than echoing back something we’ve said to them about the site.
User Testing
In addition to all of the email feedback, after releasing the new site I traveled the country and did user testing on the new site at Piper speaking events. This gave me the opportunity to see real people using the new site and confirm first-hand what is working well for them and what needed to be improved yet more. Out of this testing we created a list of the top 8 items to improve even more on the new site.
Site Statistics
Site statistics also indicate the importance of usability in having improved the effectiveness of the site. After launching the new redesign at the end of August 2006, within the first four months visits increased by 99%, audio listens increased by 352%, and page views increased by 359%.
Side Note: Usability Does Not Mean Users Can Always Point out What Makes the Site “Work”
It is worth pointing out that a user cannot always point to what makes the site usable to them. The analogy to good lighting in a store is helpful here. When you walk into Home Depot, you don’t necessarily say to yourself, “Wow, they have good lighting in here.” Nonetheless, the good lighting makes everything seem better. It has an effect, even if you are not conscious of why that is.
So also with usability. Good usability makes everything seem better, even if the user can’t point to usability as the reason (although they have in our case) and even if they can’t point out what makes the site so usable.
Because of this, user surveys and user recommendations are not always the best way to determine if a certain design or feature or form of organization is best. We will come back to this when we discuss how being user-centered requires being content-centered.
What We Mean By Usability
Definition
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.)
Components
Usability principles pertain to many components of a site:
- Information architecture – the macro organization of the site.
- Navigation – the presentation of the information architecture to enable browsing.
- Labels should be clear and consistent.
- Categories should follow a consistent scheme (for example, not mixing topics with resource categories in the same scheme), mutually exclusive, comprehensive, and anticipatory of future content.
- Site ID and tagline. Every site needs an ID and tagline so that users immediately know what the site is.
- Page names: Every page must have a name at the top, and the name must match what the user clicked to get there
- Related resources and products.
- Links: It should be obvious what is clickable. All unclicked links same color. Nothing that is not a link should be that color. All clicked links different color. Never use “click here.”
- Page layout.
- Writing style. Writing for the web is different than writing for print.
The Most Critical Component of Usability: IA and Navigation
Of all the above components, IA and navigation are most central to usability. They are also the most fragile and easiest to screw up.
The Relationship Between IA and Navigation
IA and navigation are very interrelated. IA is pertains to how the site is organized – at the macro level, section-specific level, and level of content groupings such as topics. Navigation is the presentation of the IA to the user. Theoretically speaking, a site could have good IA but bad navigation. The primary need of the navigation, therefore, is to set forth the IA clearly. Otherwise, good IA will not benefit the user.
Why IA and Navigation Are Central
There are several reasons that good IA and navigation are central.
First, the navigation (flowing from good IA) provides orientation to the user. This is critical because the biggest question a user has on a site is “Where am I?” The user needs to know where they are in the context of the whole site and how to get easily and quickly from one place to another. Well organized IA that is presented through effective navigation provides this.
Second, good IA and navigation are central because they reveal the site content and the structure of the content. As such, they provide a framework for understanding. In other words, they inform people how to think about and interpret the site content. This is one of the most important factors, yet is often overlooked. What this means is that we see the IA and navigation as a form of teaching.
IA and Navigation Are Ways of Teaching
This is worth spending some time on: On our site, it is not just the content that teaches, but also how the content is presented that teaches. We have before us on this site not simply an issue, therefore, of how to make the site most usable. In addition to that – and equally important – is the fact that the user will only profit most fully from the content when they understand its context and framework.
Therefore We Need to Be Content-Centered in order to be User-Centered
This requires that we be content centered as well as user centered. In fact, as Edward Tufte argues very well, being user centered requires being content centered first. If you are not content centered, you cannot present the content appropriately to the user – that is, in a way that reflects the natural contours and reality of the content that exist before the user even gets there. And if this is not presented, the content itself will not be understood correctly, which would undermine the entire intent of being user-centered. User-centered design requires not simply that everything be easy to use and find, but that the content is presented in a way that aids the correct understanding of the content.
The way this boils down is this: Our site is content driven, and user informed. It is not user-driven, but it doesn’t ignore the user either. Likewise, while content is the driver of the presentation, we aim to present the content in a way that is faithful to its contours while maximizing the usability of the presentation. Indeed, we believe that these two aims are actually one. The way to maximize usability is to first be driven by what the content requires, and to do so in the context of a wider awareness of user needs and behaviors.
What this means is this: In the way we present our content, we are saying something. We are teaching people how to think about our content through the way we present it.
This is why, for example, the concept of “resource categories” matters in the Resource Library navigation. Some people might say, “it doesn’t matter if something is an article or sermon. Just put it all together.” Now, my testing on the site indicates that the distinctions of resource categories are a fundamental part of what makes the site usable. It provides a somewhat objective set of distinctions within the content that breaks things down for people into more manageable categories. And for those who prefer a different method of accessing the content, we have the browsing indexes that allow people to browse the content with all the resource categories mixed in. So we provide multiple ways of accessing the content and do not place a judgment on whether a user prefers this way or that.
However, the fact that the resource categories are there, and are the primary form of organization in the resource library navigation, communicates something. It says that the type of content something is matters. It is important to do this because sermons are indeed different from articles which are different from books and so forth. Each form of content is interpreted differently – you do not interpret a sermon the same way you interpret an article or a biography. This difference matters.
The Organization of the Site is at Root a Theological Matter
What we see through all of this is that the way we organize the content on the site is at root a theological issue. The reason that being content centered matters so much, and the reason that it is so crucial that we teach in the way we present our content and not just through the content itself, is that our content aims to communicate eternal, spiritual realities. As such, it falls into a trajectory that is larger than itself. It falls into the 6,000 year pattern of redemptive history overall, and within the 2,000 year pattern of historical theology and systematic theology since Christ. The content itself reflects that context and is a part of it, and therefore the presentation must also.
We’ve discussed the implications this has for things like the resource categories. Another example is the topic index. When creating the topics, our aim was first of all to rely on sound principles of how to categorize, rather than our (uninformed) native intuition. Using sound principles, in turn, implied that we acknowledge the wider theological framework of Piper’s works. As a result, we sought to create topics that aligned with the standard topics of systematic, biblical, and practical theology. We could not do this exactly, but it provided the larger governing framework for how we created the topics and which topics we created.
Another factor of the wider context are the topics used by Christian bookstores in the CBA industry. In many ways the categorization supplied by CBA to bookstores is pretty good. Tapping into that also meant tapping into a framework already somewhat familiar to some people, which is advantageous. As a result, in creating the topic categories for the resources, being content-centered meant thinking of the wider place of Piper’s writings in the Christian corpus in general, which meant thinking in terms of the standard topics of systematic theology and the CBA industry as much as possible.
The Importance of Demonstrating the Full Scope of Our Content
There are several other implications of the fact that we are content-centered and helping people understand our content theologically through the IA and navigation.
First, and perhaps most significantly, we’ve already covered how this affects the way people interpret individual items.
Second, it makes it critical that we present the navigation in a way that reveals the full scope of our content. Revealing content is the purpose of navigation anyway. For us, we also want to manifest the full scope of our content – all the resource categories and other ways of browsing – because seeing all the types of content helps you understand each specific piece better. In knowing that Piper has poems, for example, it says something about him that affects how you interpret the sermons.
To take another example, when you get to the sermons our purpose is not simply to enable the user to find what he already knows he is looking for. We want him to account related sermons that he didn’t even know that he was looking for. We don’t want the user to be limited simply to what is already in his or her mind (“I want a sermon on prayer”), but want to expose them to thoughts and topics and concepts that would have never occurred to them.
Additionally, we want it to be easy for people to know the contours of our content. That is, we want it to be easy for them to know how to identify where they can find an easy, objective list of every sermon that Piper has preached.
The topic view, for example, does a good job of giving people a window into the sermons on the basis of issues that may be relevant to them or of theological significance. But the topic index does not give any indication of size. A topic could have one sermon or fifty in it. You don’t know that by just seeing the topic index, and clicking into every topic would be cumbersome.
But the “sermons by date” view gives an objective presentation of every sermon in a relatively simple interface. Dates are objective. You can immediately see that there are about 30 years of sermons. You know that each year has about 52 weeks in it, so allowing for some time off, there is about the same number of sermons in each year. You get the full picture of what Piper has preached right there. This is a picture – an angle on the content – that we want to give the user. It says something about the content.
If you click into a year, you can easily see the types of things that Piper has preached by just scrolling through the chronological sequence of sermons. It is easy to get a grasp of 40 sermons at once simply by scrolling down through a year.
Through this arrangement you also are exposed to many different topics and even series, simply by seeing the sermons chronologically.
What we want to say about the sermons (one of the things) is this: there are 30 years worth of sermons here. In our opinion, the “by date” arrangement provides the best way to get the big picture of what Piper has done. It is not the only way, and you can easily click over to one of the tabs for a different view. But we want to show this to you first, because we want to make sure you are aware of this method and because we want you to interpret the rest of the organizing schemes – by Scripture, by topic, etc. – in light of this. The other schemes will be more effective for you if you know that the ultimate organizing principle for the sermons is by date.
The Importance of Showing People Related Content
This has been touched on a bit. It is also important that the navigation and IA aid the exploration of related content and content the user would not have initially thought to look for, but which they will end up finding relevant.
How to Create (and Preserve) Effective IA and Navigation
Creating effective navigation comes down to really just a few things.
First, you need to understand the principles of classification and usability. That was the first thing we researched when we redesigned the site and we systematized our principles into the documents mentioned in the introduction, and have hit on some of the main factors in this document as well.
Second, you need to use those principles to organize the site into a coherent structure and the content into coherent categories.
Third, you need to present that IA structure through global and local navigation.
Global navigation is the major site sections. On our site, that is best presented across the top. The global navigation is the same on every page, and gives the user the big picture orientation of the whole site.
Local navigation is the navigation for the specific section that the user is in. The purpose of the local navigation is to present the structure of that section and reveal its content. It is like a table of contents for that section. The local navigation should be the same on every page of its section, with the specific page that the user is on highlighted (providing greater orientation).
The global navigation provides the macro organization of the site to the user, and the local navigation provides the organization for the specific section that they are in. Together, these two forms of navigation are the fundamental, bottom-line way to give the user the big picture of the site and keep them oriented. They also are what makes it easy to go from one section to another.
The local navigation can go on the left side or the right side. The specific side doesn’t matter. Some sites put the local navigation at the top, just beneath the global navigation. On some sites, this works fine. On our site, it does not. It doesn’t work on our site because we have more to present in the local navigation than would fit across the top. And we do want to present all of that because it is fundamental to our purpose of revealing the scope and structure of our content.
Another type of navigation is the utility navigation, which goes in the upper right and is smaller. It presents the tools and pages that aid in the use of the site, but which are not part of the reason people come to the site.
For principles of effective navigation, see pages 2-4 of “Usability and Design Principles of Desiring God.org.”
Boiling this All Down
All of this can be boiled down to a few simple implications to guide any graphic or user interface update on the site:
- Always preserve the global navigation and side local navigation.
- The IA categories and groupings are for the most part very set. This is especially true of the Resource Library and the ways of browsing the resource categories. There may be room for some changes in the Events section and maybe About Us at some point. The page layout on many of the Resource Library is sometimes in need of much improvement. But if people identify changes to the IA that could improve things, that is a discussion we want to have together.
- The navigation should always be fully presented, like now.
- The other core usability principles like every page should have a title, every link should be obviously clickable, and so forth should be maintained.
- Beyond this, pretty much the sky is the limit.