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:
- Efficiency of use.
- Reliability in use.
- 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.
- 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).
- There is a better chance that users will understand what they’re looking for.
- There is a better chance they’ll understand the full range of what your site offers.
- There is a better chance of steering them to the parts of the site you want them to see.
- Users will feel smarter and more in control, which will bring them back
- Users will have more confidence in your organization.
- 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:
- Be succinct.
- Write for scannability:
- Do not use long blocks of text.
- Do use short paragraphs.
- Do use sub-headings.
- Do use bulleted-lists.
- Use inverted pyramid principle, as possible.
- One idea per paragraph, with topic sentences.
- Omit needless words.
- Minimize happy talk (such as “welcome to this page…”).
- Minimize instructions.
- Info that is only of interest to a minority of readers should be made available through a link.
- Use consistent capitalization and other style standards so that all usage is consistent.
- Should make sense even when the content is not right there under it.
- Should be clear and plain. Nothing cute.
- Should not be mere teasers. We should provide clear expectations.
- 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:
- Style: punctuation, etc.
- Presentation: fonts, sizes, colors, white space
- Syntax: no mixing of verb-based and noun-based. Use a single syntactical approach.
- 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.