The Smashing Book – Usability Principles for Modern Websites

• By The Smashing Editorial
• October 5th, 2011
• Psychology, Usability
• 2 Comments

← Typography: Rules and Common Mistakes (4/4)TOCThe Ultimate Guide to Fantastic Color Usage →

Designing a usable website is an ambitious goal for any designer. To accomplish this, every step we take as experience designers should bring our websites closer to meeting our users’ expectations. It’s a slow process. We now build and test designs incrementally until we reach this unified goal. This contrasts with the way websites and Web applications have been designed in the past.

Traditionally, usability experts have interviewed users after a website was designed, built and launched to help the website’s owners align their interfaces with the users’ expectations. It bears repeating that after the website has launched is an extremely bad time to learn about interface errors. Fixing faulty interactions at this stage is possibly twice as expensive. Therefore it’s important to get working knowledge of usability under your belt and to design in stages, testing early and testing often.

We don’t know a single Web designer who wouldn’t want an outsider’s opinion of their website. Bonus points if you find a designer willing to give you feedback. Keep in mind, though, that a designer’s opinion isn’t your users’ opinion. To identify with our users, we must focus on much more than the outward appearance of our websites, as difficult as that is to do.

To complicate matters, modern websites quickly become huge multi-faceted structures. Competing websites often offer similar functionality, but one will win out because it provides a superior user experience. This is where the Web is headed, a sort of evolution of website design.

Creating a great user experience takes a little bit of skill, a little bit of luck and a lot of detailed work. Those details are what your users will notice again and again; and they’re easy to overlook: the field of user experience encompasses many related disciplines: visual design, information architecture and usability analysis, to name a few. In this chapter, we’ll touch on each of these related topics and provide examples and practical advice you can use to build a website from scratch or re-tool an existing design.

How Do Users Think?

Basically, users’ habits on the Web aren’t that different from customers’ habits in a store. Visitors glance at each new page, scan some of the text and then click on the first link that catches their interest or vaguely resembles the thing that they’re looking for. In fact, there are large parts of the page that they don’t even look at.

Most users search for something interesting (or useful) and clickable; as soon as a promising candidate is found, users click. If the new page doesn’t meet their expectations, the “Back” button is clicked and the search process continues.

• Users appreciate quality and credibility. If they see high-quality content, they are usually willing to tolerate advertisements and a poor design. This is why websites with mediocre designs but high-quality content gain a lot of traffic over the years. Content is more important than the design that supports it.
• Users don’t read; they scan. When they analyze a Web page, users search for some fixed points or anchors that can guide them through the content on the rest of the page.
• Web users are impatient and insist on instant gratification. A very simple principle: if a website doesn’t meet users’ expectations, then the designer has failed to perform his or her job properly, and the company will lose money. The higher the cognitive load needed by users to process the website and the less intuitive the navigation, the more likely users will leave the website in search of alternatives.
• Users don’t always make the best choices. They don’t look for the quickest way to find the information they want. Nor do they scan Web pages in a linear fashion, going sequentially from one section to another. Instead, users choose whatever “satisfices” (satisfy + suffice). They choose the first reasonable option that presents itself. As soon as they find a link that might possibly lead to their goal, users will very likely click on it immediately. Optimizing is hard, and it takes a long time. Satisficing is more efficient.
• Users follow their intuition. In most cases, users muddle through on their own rather than read the information a designer has provided. According to Steve Krug¹, the basic reason for this is that users don’t care. “If we find something that works, we stick to it. It doesn’t matter to us if we understand how things work, as long as we can use them. If your audience is going to act like you’re designing billboards, then design great billboards”.
• Users want to have control. Users want to be able to control their browser and rely on consistently presented data throughout the website. For example, they don’t want new windows popping up unexpectedly, and they want to be able to use the “Back” button to return to a website they had just visited.

Use a Clean and Consistent Visual Design

Visual design tells a user how to interact with the website. If the interface is well constructed, users will spend less time learning how to use the website and more time actually using it.

Unfortunately, we often let our creative side take control of the design process and, as a result, end up with an interface that is too innovative for the user to understand at first glance. There’s nothing wrong with being creative, but when conventions are sacrificed for new approaches to common problems, users are forced to relearn to use things that they’re already familiar with.

When approaching the visual design of a website, understanding some common conventions can go a long way towards creating a website that looks great and requires no brain power to use.

Certain elements belong in certain places

When reading a newspaper, people are accustomed to finding the paper’s name at the top, a date somewhere nearby, followed quickly by headlines. Books may have some variation in their style, material and design, but a few things about them are always predictable, such as title, author and descriptive summary.

Newspapers have conventions that people intuitively understand, such as a title and date at the top, featured headlines and author names appearing beside their stories. Like newspapers, websites have their own conventions that people understand without explanation.

Similarly, people have certain expectations when they visit a website, expectations that, if not met, could result in them having trouble understanding how it works. Therefore, it’s important that websites are designed so that users can predict how things will work and where certain elements will be.

Examples of common website conventions:

• A website’s header, linked to the home page, is usually displayed in the top-left of a website. If a user wants to return to the home page, this is how they expect to do that, no matter what website they are visiting.
• Taglines or secondary headlines are usually located in close proximity to, and below, a website’s header. The tagline quickly explains what the website is about.
• The website’s search box is usually found in the top-right or top-center of a website.
• Different kinds of websites may have common practices of their own. For example, when visiting a blog that offers subscriptions through RSS, a user will almost certainly first check the top-right of the page for subscription options.

Search is simple

Search was not always as easy as it is now. All sorts of search parameters had to be tweaked to get satisfactory results. Since then, innovators such as Amazon and Google have set a new standard for search: type something in, click a button and let the website figure out what you want. Searching is no longer an arduous process that changes from website to website. More often than not, it can be carried out using a simple input field and a button that says “Search”.

There are times when straying from this basic design is reasonable, but the search function should usually at least work without the user needing additional information. For example, if adding a drop-down menu to allow users to restrict their queries brings a benefit, by all means add a drop-down menu, but the search function should still work without the drop-down menu being used.

People use this search format on Google millions of times a day. It’s safe to say that users understand how this interface works without putting any thought into it.

And this is where the design of the search box becomes important. The box must be clearly visible, quickly recognizable and easy to use. One may think that the search box doesn’t need a design; after all, it’s just two simple elements: an input field and submit button. How much harm could a poor design do? Well, a number of things can go wrong; for instance, the text displayed in the input field may be hard to read, or the input field may be too short or too long. Some designers even prefer a minimalist solution and don’t provide a submit button at all: the “Return” key has to be used instead. Well, that’s not the most usable solution out there.

A search box should be a box. Your visitors don’t read the page; they scan it. The most common design for the search function is a box, with the input field being a relatively wide box. Users tend to scan for this pattern on a Web page, so as good practice, try to avoid any other kind of design, such as linked text or a button without a text field.

Also, a search box should be simple. According to usability studies, it is more user-friendly to have no advanced search options displayed by default. Advanced search, as the name indicates, is advanced, and some users get confused trying to use it. One study shows that most users don’t know how to use advanced search or Boolean search query syntax².

There are many places to put the search box, but only a couple of right ones. The most convenient spot for users would be the top center or top right of every page on your website, where users could easily find it using the common F-shaped scanning pattern. However, some blogs tend to place the search box at the bottom of the (left or right) sidebar. That’s probably not a good idea but is likely done because of advertising considerations.

Links should look like links

Users should never have to guess if something is clickable or not. Traditionally, color and underlining have been used together to convey that a piece of text functions as a link. Used together, this combination continues to be the most recognizable form of linking in text.

Some things worth keeping in mind when creating links:

• Clickable items should stick out from everything else. Color alone doesn’t always do a link justice, because a website usually has colored elements that aren’t links. This is why the combination of color and underlining is a safe indication that something is clickable.
• Don’t make non-links appear clickable by using the color and underlining combination. This can confuse the user as to what is clickable.
• Try to use the same style for all links in a certain area and from page to page. Don’t use different colors for links, and don’t underline some links and not others.
• Links should have different states. When styling links, pay attention to their hover, active and visited states. This way, users will know when they’re hovering over a link, when they’ve pressed it and when they’ve visited that page before.

Use drop-down menus only when necessary

Drop-down menus aren’t bad and absolutely have their place on the Web, but they are often misused, too. In general, drop-downs are used to allow users to select an attribute from a list of possible values.

Because drop-down menus often take up so little space, they have become the preferred means of navigation for some designers. While this new direction is catching on, drop-downs have their disadvantages:

• Links in the drop-down menu have low visibility: unless the menu is expanded, the user will be able to see only one of their options.
• When a drop-down menu has too many options, the user has to scroll to see everything. Traditional lists may work better in this case.
• Drop-downs are not the first thing users intuitively look for as a way to navigate. Testing how effective they are on your website compared to normal navigation menus is probably best before choosing them.

However, drop-down menus do not have to be small. According to Jacob Nielsen’s study on drop-down menus, so-called “mega” drop-down navigation menus work well³. Apparently, big two-dimensional drop-down panels that group navigation options relieve users from having to scroll and can accurately present the user’s choices through effective use of typography, icons and tooltips.

Drop-down menus can organize content into small uncluttered elements but, if not done correctly, can be just as bad as a messy layout. Good practice is to avoid using drop-downs for menus that have more than two navigation levels. If the sub-menus are revealed on hover, the user will lose focus of them whenever the mouse pointer moves away from them. If the sub-menus are revealed upon being clicked, too many buttons will have to be pressed and the menu won’t work nicely.

The website shown below (Brita.de) makes this mistake. The menus are very difficult to use because if you even slightly lose focus of the menu with the mouse pointer, you have to start from the top. Notice the tooltip, which also gets in the way of the navigation. In fact, it is a good idea to remove tooltips from drop-down navigation altogether to make sub-menu items scannable and readable.

The drop-down menu on Brita.de is hardly usable. It contains multiple levels of navigation, requires horizontal scrolling and displays tooltips that make it impossible to scan the other navigation options. Not very user-friendly.

A nice, clean and well-organized mega drop-down menu on EA.com. Notice the visual indicators next to the “Games” and “Media” list items, making it clear to visitors that further navigation options are available in the drop-down menus.

Avoiding many drop-down levels may be too much of a restriction for the type of navigation you are trying to create. One solution, though, might improve the usability of the hover function and multi-level navigation. With most menus, the drop-down list disappears immediately once the user moves the mouse pointer away from the menu. The solution is to delay its disappearance. Or, add a click function that requires users to click outside the drop-down menu area to close it, similar to how a Lightbox functions.

Porsche has a large mega drop-down menu. The navigation is user-friendly because the menus have a wide focus range.

Consider the menu on Porsche’s website below. It has multiple levels, but the menu has a wide focus range, so you have to move your pointer a certain distance away from the menu to close it. It is a good design solution.

Make sign-up forms as simple as possible

Designing effective Web forms isn’t easy, and for one simple reason: nobody likes to fill in forms, neither offline nor online. Unless your product or service is some revolutionary ideas that will impress visitors at first glance, throwing up any sign-up form onto your website is simply not enough. Coming to sound design decisions that make completion of the form easy, intuitive and painless for your users is important.

Hints often appear below the input field (57%) or to the right of the field (26%).

According to the results of our “Sign-Up Form Design Survey⁴”, the registration link is most often titled “Sign up” (40%) and placed in the upper-right corner. Sign-up forms often have a simple layout to avoid distracting users; they are usually one page and attract visitors by explaining the benefits of registration.

Titles of input fields are highlighted bold (62%), and input field labels are usually right-aligned.

Titles of input fields are highlighted bold (62%), and input field labels (when placed on the left hand side of the input fields) are usually right-aligned. The form’s design is usually kept as simple as possible: designers tend to use few mandatory fields (three to five) and few optional fields (two or fewer). Vertically arranged fields are clearly preferred to horizontally arranged fields. No predominant trends in the alignment of labels (i.e. to the right, to the left or above input fields) could be identified.

Sign-up forms usually do not contain any distractions and let the user focus on task at hand. They usually have no hover, active or focus effects. Hints often appear below the input field (57%) or to the right of the field (26%).

Email confirmation is usually not used (82%), but password confirmation is common (72%). Also notable, the “Cancel” button is almost never used, the “Submit” button is left-aligned (56%) or centered (26%), while Captchas are used on every other form. Lastly, thank-you messages are often used to motivate users to continue exploring the services of the website.

Consider adding “back to top” links

Unfortunately, this friendly service – letting users jump to the top of the page – is offered rarely. Most designers don’t include it, and there is a reason for that: “back to top” links are not always useful. For example, they may be unnecessary for websites that have rather short pages or articles. Clicking on a “top” link on a page whose entire content is visible would produce no effect and would be rather irritating. The variety of screen resolutions these days makes the “top” link sometimes unusable and unnecessary.

However, websites with long pages can offer visitors this nifty feature, which saves time and avoids the need for vertical scrolling with the mouse.

One major problem with “top” links is that they affect the browser’s navigation buttons and “pollute” the browsing history. Because “top” links are anchors like any other links, clicking on the browser’s “Back” button will take users to the foot of the page that they are currently viewing, not to the previous page. In addition, accessibility experts claim that “Back to top” links are vague in concept, are not implemented consistently across websites and may disrupt the use of speech-based user agents.

“Back to top” links are often used in FAQs, help sections and site maps, where they help divide chapters or paragraphs and provide users with a quick way to jump to the beginning of the page, where the main navigation appears.

Avoid splash pages if possible

A splash screen is the front page of a website that doesn’t provide any actual content but rather offers visitors some kind of intimation of, or background information about, the website. Designers use splash pages in their portfolios as eye candy to impress potential clients. Companies tend to make use of them to draw the attention of visitors to their latest products. And users can’t stand them because they usually take a long time to load and provide almost no navigation options, except to “Enter the site”.

Depending on the designer’s creativity, splash pages can have attractive visual elements. Some have interactive Flash movies that start playing automatically (a usability nightmare for users with multiple tabs opened). They usually have a very simple structure, mostly just an image with few lines of text and links. A splash page doesn’t always follow the design of the rest of the website.

Although most websites don’t have them, splash pages remain popular because they are sometimes necessary, for instance, to display disclaimers, important messages (approaching deadline, critical updates, etc.), website requirements (Flash, Java, QuickTime, etc.) or hints for browsing (typical on Flash websites). Splash pages are also used to let users select their preferred viewing mode (standard or full-screen), speed (low or high bandwidth) and language (although language options can and should be integrated in the main layout). Bottom line: users don’t like splash pages, and “creative” splash pages get on their nerves.

A typical splash page, with a welcome message and language selection links.

Links should open in the same window

Initially, the decision of whether to open links in a new window might seem to depend on the individual website and the preference of visitors.Visitors to websites with a lot of external links may be more tolerant of links opening in a new window, not wanting to have to do it manually. Visitors to websites with less external links may want to be able to pick which pages to open in a new window to browse through afterward. However, this is not always true.

Users should always be able to choose whether a link opens in the current tab or in a new tab or window.

From a usability standpoint, forcing links to open in a new window violates one of the fundamental principles of user interface design: users should always be in control of the interface. Users want consistency in their interfaces and need to know that their interactions won’t be disrupted. Any deviation from this principle makes the website more design-oriented and less user-oriented . As Shneiderman notes, experienced users have a strong desire to know that they are in charge of the system and that the system will respond to their actions.

The main problem with forcing links to open in a new window is that the decision overrides the user’s decision to control the behavior of their browser. Let’s consider two situations in which a user doesn’t know up front if a website will open links in a new window or in the same window:

1. The user wants to open links in a new window, but the website opens them in the same window.
2. The user wants to open links in the same window, but the website opens them in a new window.

In the first situation, the user can choose to open a link in a new window using the context menu or a shortcut. Here, the user is the initiator of action because she or he decides how the linked page will be displayed. The website’s behavior meets the user’s expectations, resulting in a good experience.

In the second situation, the user clicks on a link only to find that it suddenly opens in a new window. Here, the user is the recipient of action and has to respond to how the new page opens (which could very well by closing it right away). The website’s behavior doesn’t meet the user’s expectations, resulting in a bad experience.

Users are annoyed when a website does something that they have not told it to do. If opening a page in a new window would be more convenient, let users do it themselves; don’t insult their intelligence by making decisions for them. Don’t force new windows upon users unless you have a very good reason to do it.

Usability checkpoints that you should be aware of

1. Don’t change the user’s window size. This argument is similar to the one against pop-ups. Some browsers, such as Internet Explorer, save their dimensions for further sessions. As Ben Bodien states, “It’s just plain inconsiderate to assume that you know better than the user how their software environment should be configured”.
2. Don’t make font sizes too small. Long passages are harder to read in a small font size. Don’t make links, buttons, forms, search boxes or other elements too small either. Also, make sure any content blocks have between 50 and 85 characters per line, and provide sufficient white space around your text.
3. Write clear link text. Links should describe the destination they lead to. Avoid ambiguous descriptions.
4. Remove dead links. Too many of them are out there. Why would you point visitors to a dead end?
5. Proofread. Read everything. Even if you’ve already read it, read it again. Get someone else to read it, too. You’ll always pick up on something that has to change. See if you can reduce the text by keeping it specific. Break up large blocks into shorter paragraphs. Add clear headings throughout, and use lists so that users can scan easily.
6. Don’t forget about dynamic text, too, such as alert boxes. Check that important terms aren’t widowed or orphaned in your paragraphs and that punctuation marks are used correctly, particularly apostrophes, quotation marks, hyphens and dashes.
7. Check functionality. Test everything thoroughly. If you have a contact form, test it to see what comes through. Get others to test your website, and not just family and friends but the website’s target audience. Sit back and watch how they use the website. It’s amazing what you’ll pick up on when others use your website differently than how you assume they’d use it. Common things to check for are contact forms, search functions, shopping baskets and log-in areas.
8. Keep the Web form as simple as possible. Use the right form elements for the right tasks (radio buttons, check boxes, input areas, text areas), provide enough space (with enough padding) for comfortable typing, remove unnecessary fields and provide descriptive labels for each input field (adding help information and hints as needed). Also, do not force users to use restrictive input formats (for example, the system should be able to understand when users type their phone number with or without brackets, hyphens and spaces). Also, provide informative and helpful error messages.
9. Degrade gracefully. Your website should work with JavaScript turned off. Users often have JavaScript turned off for security reasons, so be prepared for this. Test your forms to make sure they still perform server-side validation checks, and test any cool AJAX stuff you have going on.
10. Don’t forget about defensive design. The most commonly overlooked defensive design element is the 404 page. If a user requests a page that doesn’t exist, your 404 page will be displayed. Get your users back on track by providing a useful 404 page that directs them to the home page or suggests other pages they may be interested in. Also check your forms for validation. Try submitting unusual information in the form fields (a lot of characters, letters in number fields, etc.), and make sure if any errors occur, the user is provided with enough feedback to be able to fix it.
11. Don’t forget about the print style sheet. If users want to print a page from your website, chances are they want only the main content and not the navigation or extra design elements. That’s why creating a print-specific style sheet is a good idea. Also, certain CSS elements, such as floated text blocks, not always come out well when printed.
12. Strive for optimal performance. You’ll want to configure your website for optimal performance. You should do this on an ongoing basis after launch, but you can take a few simple steps before launch, too. Reducing HTTP requests, using CSS sprites wherever possible, optimizing images for the Web, compressing JavaScript and CSS files and so on can all help load your pages more quickly and use less server resources.
13. Make it easy to contact you. Perhaps you just don’t want to be contacted, but if visitors want to get in touch with you and can’t find any contact information, you will lose their interest and trust. This is disastrous for online stores and a missed opportunity for every website

Convey Your Website’s Organization

In The Elements of User Experience, Jesse James Garrett introduces the concept of the website skeleton. In simple terms, the skeleton helps determine what form a website’s functionality will take. Here is some context: Garrett’s posits that the realm of user experience on the Web can be approached from two different perspectives: either as a software interface (as in the case of Web applications) or as a hypertext system (which would be the “content” part of content management systems).

A website, though, is rarely defined entirely by its content or entirely by its functionality. Whatever the case, we must always convey organization.

Designing interfaces that are easy to use and unambiguous is the realm of interface design. If our website is more content-driven, then we have to help users get to this content. This is known as navigation design. In both cases, we want to help users make sense of the information available to them on our website, using information design. To reiterate: interface design helps users do things, navigation design helps users go places and information design helps our website communicate. All of these areas should be addressed before considering a website’s visual design.

Use signposts to build context

Employing distinct colors, headers and buttons for each section of your website can help orient visitors. These are known as signposts. Website signposts function like the “You are here” label on information kiosks at malls and amusement parks. This is why making links open in a new window degrades the user experience: the visitor loses context. Users who know where they are on your website have a better chance of developing a sense of purpose and asking themselves “What can I do here?“ This is the goal of information design: empowering users to make choices with the information available to them.

Consider a business such as a daycare, whose website must appeal to a diverse audience. One section of the website could use atypical typography, whimsical copy, cartoon characters and bright colors to appeal to children, while another section of the website could use a refined typeface, direct copy, abstract images and a muted color scheme to appeal to adults. This way, the website appeals to a wide audience but targets unique messages to distinct segments using signposts.

Establish good navigation

Navigation is arguably the most important part of your website, aside from the content. Luckily for us, we can capitalize on a number of conventions to connect our design decisions to our navigation. In most cases, users simply try to answer the question “Where can I go?” But the answer isn’t always as straightforward as they would like. In general, users of any content-heavy website expect up to three types of navigation on any given page.

Global navigation: Where can I go in the overall website?

Global navigation generally comes in the form of tabular navigation, in addition to containing a convenient link to the website’s home page. Global navigation should contain “controlled” words and phrases (such as common section names, industry-standard terms or layman’s terms) and reinforce the website’s structure. Because global navigation, if well positioned, will be the first place users go, its design is extremely important.

Local navigation: Where can I go within this section?

Many users like to explore content related to what they are viewing, and local navigation fits the bill. If your website is well organized, users will know what they will find when they arrive at a section, and local navigation is their gateway to this content.

Because local navigation is a common reason for users to stay on a website, many websites now have a sort of hybrid navigation. For example, after performing a search on Amazon, users can jump right into browsing by that category using the local navigation, which appears precisely where they would expect it to appear.

Contextual navigation: Where can I go on this page?

Contextual navigation is an under-used but valuable form of navigation. After users descend into the depths of your website and have found the content they were searching for, where else can they go? Contextual navigation keeps users on the same page but allows them to move around using digestible chunks.

When creating contextual navigation, put the menu (which is usually a table of contents or list of article’s categories) at the top of the content and include “Back to top” links throughout the page’s sections. When executed correctly, contextual navigation turns pages on your website into resources, encouraging users to come back often for its information. Think about how useful any page on Wikipedia can be. More importantly, contextual navigation provides a unique (and often overlooked) opportunity to cross-sell, promote and inform the user while helping to build the website’s brand.

Supplemental navigation

After exploring a page of your website, many users will jump ship and visit another website or close their browser. A good idea, then, is to put supplemental navigation immediately after your content. Supplemental navigation frequently includes related content and invites your readers to stick around and learn what else your website offers.

A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that discloses the user’s location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

After reading an article on tutorial9.net, readers are presented with a list of related articles on the website. This is an example of contextual navigation.

You can usually find breadcrumbs in websites that have a lot of content organized hierarchically. You also see them in Web applications that have more than one step, where they function like a progress bar. In their simplest form, breadcrumbs are horizontally arranged text links separated by the “greater than” symbol (>); the symbol indicates the level of that page relative to the page links beside it.

Consequently, it is a good idea to use breadcrumb navigation if your site is large and has hierarchically arranged pages. E-commerce websites are a perfect example: a large variety of products grouped into logical categories. You shouldn’t use breadcrumbs for single-level websites that have no logical hierarchy or grouping. A great way to determine if a website would benefit from breadcrumb navigation is to construct a site map or diagram representing the website’s navigation architecture, and then analyze whether breadcrumbs would improve the user’s ability to navigate within and between categories.

Breadcrumbs in Apple’s store appear underneath the main navigation. This is an example of the supplemental navigation.

Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace primary navigation menus. It’s a convenience, a secondary scheme that reminds users where they are and gives them an alternative way to navigate your website.

By offering a breadcrumb trail for all pages on a large multi-level website, you enable users to return to higher-level categories in fewer clicks than they would need using the browser’s “Back” button or the primary navigation. And because they are usually laid out horizontally and plainly styled, breadcrumb trails don’t take up a lot of space on the page.

Breadcrumb trails can be a great way to entice first-time visitors to peruse a website upon viewing the landing page. If users arrive on a particular page through a Google search, seeing a breadcrumb trail may tempt them to click to higher-level pages to view related topics of interests. This, in turn, reduces the overall bounce rate of the website.

Important Usability Rules and Principles

7±2 Principle

Because the human brain is limited in its capacity to process information, it deals with complexity by dividing information into chunks and units. According to George A. Miller’s studies, humans can retain only about five to nine things in their short-term memory at one time. This is often used as an argument for limiting the number of items in a navigation menu to seven. But the debate about the “Seven, Plus or Minus Two⁵” myth is heated. So it’s not clear how the 7±2 principle can or should be applied to the Web.

2-Second Rule

This is a loose principle that a user shouldn’t have to wait more than two seconds for certain types of system responses, such as application switching and application launching. The choice of two seconds is somewhat arbitrary but a reasonable order of magnitude. A more reliable principle is, the less users have to wait, the better will be their experience.

3-Click Rule

According to this rule, users stop using a website if they aren’t able to find the information they are looking for or access the website’s feature within three mouse clicks. The rule highlights the importance of clear navigation, a logical structure and an easy-to-follow website hierarchy. In most situations, the number of clicks is irrelevant, though; what is important is that visitors always know where they are, where they were and where they can go next. Even ten clicks is okay if users still feel they have a complete understanding of how the system works.

80/20 Rule (Pareto Principle)

The Pareto principle (also known as the Law of the Vital Few and the principle of factor sparsity) states that 80% of the effects come from 20% of the causes. This is a basic rule of thumb in business (“80% of your sales come from 20% of your clients”) but can also be applied to design and usability. For instance, dramatic improvements can be achieved by identifying the 20% of users, customers, activities, products or processes that account for 80% of your profit and then maximizing the attention you pay to them.

Eight Golden Rules of Interface Design

From his interface design studies, Ben Shneiderman has proposed a collection of principles that were derived heuristically from experience and that apply to most interactive systems. These principles are relevant to all user interfaces and, as such, also apply to Web design.

1. Strive for consistency.
2. Allow frequent users to use shortcuts.
3. Offer informative feedback.
4. Design dialogs to yield closure.
5. Offer simple error handling.
6. Permit easy reversal of actions.
7. Impart a sense of control. Support an internal locus of control.
8. Reduce short-term memory load.

Fitts’ Law

Identified by Paul Fitts in 1954, Fitts’ Law is a model of human movement that predicts the time required to rapidly move to a target area, as a function of the distance to the target and the size of the target. The law claims that there is a speed-accuracy trade off associated with pointing, whereby targets that are smaller and/or further away require more time to acquire. The law is usually invoked when dealing with the mouse movements that visitors have to make to get from point A to point B. The principle encourages content to be positioned in areas that maximize their accessibility and improve click rates.

Inverted Pyramid

The inverted pyramid is a writing style that puts a summary at the very top of the article. It is essentially a “waterfall effect”, well-known in journalism, whereby writers give their readers an instant picture of the topic they’re reporting about. The article begins with the conclusion, followed by key points and then minor details, such as background information. Because Web users want instant gratification, the inverted pyramid style⁶ significantly improves the user experience.

Give Users a 50,000-Foot View of Your Application

When exploring your website for the first time, some users may feel overwhelmed. Getting a holistic understanding of what your website is trying to convey can be difficult unless you present your information effectively. A number of ways to organize content exist, and we should consider them all carefully. Before we do that, let’s consider some careers related to this task.

Professional architects create structures that perform a specific function. If an architect is commissioned to build an auditorium, she may begin by researching acoustics. How should the performance hall be designed to optimize the listening experience? The architect is hired to give the intended function a defined form.

Now, consider the librarian’s task: to organize a huge body of information. A library is simply somewhere where books are stored. But imagine trying to find a particular book in an disorganized library. A library without an organization scheme would be hard pressed to keep its doors open.

Now, let’s return to websites. Organizing any website that has a lot of content or that needs maximum functionality requires knowledge of both of these disciplines, but adapted to websites: we call this information architecture. Information architecture is the organization of a website’s content in a way that best communicates what the website offers visitors. Let’s look at some ways you can convey your website’s goals.

Mental models and metaphor

Likewise, users go to your website to get things done. They appreciate the visual design and clever imagery, but after their initial visit, they simply want to use your website as part of their normal routine.

Amazon calls the repository of items you intend to purchase your “shopping cart”, when in fact it’s just a list of items in the company’s database. Why does Amazon do this? Because a shopping cart is a convenient metaphor for the complicated technical things that go on to make your list of items persist as you continue browsing the website. Of course, if you’re shopping on Amazon.co.uk, it is referred to as a “shopping basket.

Therefore, consider using metaphors to present your service. Metaphors are a wonderfully easy way to communicate your product or service and require little explanation, because good ones closely align your product or service with information (or mental models) already inside your users’ heads.

Organize your website’s content

People have a mental “road map” of how things function in their day-to-day lives. For example, on any given morning, a person knows that they have to wake to the alarm clock, eat some cereal, read the news, shower, dress and then drive to work. All of these processes are a part of their morning routine and are how they get things done.

If your website contains a significant amount of content, you will need to find a sensible way to organize it. A good place to start is with categorization, separating your content into semantically coherent groups. The ideal solution requires the least amount of overhead and is most useful to your users. To create a sensible categorization schema, develop a taxonomy based words and phrases that your audience would expect.

Ikea makes great use of navigation. Across the top, IKEA aficionados can quickly get to the latest and greatest furniture by clicking “New.” And if you’re looking for a particular item, IKEA offers a well-organized site map.

Another way to organize your content (and improve your website’s search results) is to make use of meta data, or data about your data. Meta data sounds complicated until you realize you’ve dealt with it for quite a while. For example, meta data about a blog article includes things like author, date of publication, view count and number of comments. This kind of data allows users to search and sort your website’s content, which in turn gives them actionable lists of content, driving them closer to their goals.

Offer a site map

If your website contains a lot of content, a site map is a good way to orient users. A site map is a page or section that displays a reasonably comprehensive subset of the pages available on your website. Consider displaying this structure in your footer or making its availability known by providing links to it.

Getting started guides

Offering a “Getting Started” guide is one of the most straightforward ways to inform users about your website. Unfortunately, it is also one of the bits of content on your website that is least likely to be read. Most users simply ignore large blocks of text that describe how a service works. It’s just not how people use the Web.

As such, a number of best practices have emerged to aid in helping to show users how a website works, practices that don’t rely on large blocks of text. Here are a couple of ways to offer a getting-started guide with little to no text.

Blank slates

Blank slates provide a visual way to orient your users. The idea is simple: show an image of how your website would look with data in it. By seeing an example of how a website or application looks with data, users get an idea of how to interact with it.

Product tours and inline help

Consider documenting your product throughout the interface. The current fashion for large multi-columned layouts makes it easier than ever to embed this kind of documentation on a website. If a user has a question about a particular feature, they can see the answer without ever leaving the page.

Build Trust

Trust is easily one of the most important things your website must establish with its users. Trust is a simple principle that’s difficult to articulate yet extremely important. Much research aligns positive user experiences with a feeling of trust in the website itself.

Work to build trust: think of all of the things in your life that you trust, and then ask yourself, “Why do I trust them”? Think of credibility, transparency and generosity; respect your users and show your appreciation of their trust and engagement.

Motigo allows users to quickly and easily see how their dashboard would look once they’ve added content.

Don’t allow users to ruin their own experience

Fortunately, this advice is usually followed on modern websites. While it applies mainly to Web applications, it is also good food for thought for content-driven websites. Always expect users to test your application’s limits. If users can delete content, give them an “Undo” function.

If users can close the browser while writing a message, don’t throw away their data without asking. If users can close the browser in the middle of saving a document, don’t delete the data. In all cases, anticipate that the user will deviate from the way that you intend for them to use your service, and don’t make the consequences undesirable.

Don’t require too much and deliver too little

In their effort to design the latest and greatest interaction, many designers lose sight of one of their principal charges as experience designers: don’t break anything. Some designers know better than that, but modern Web designs certainly aren’t without their hiccups. So let it be made clear: any functionality that is a part of the user’s browser shouldn’t be divorced from the user’s experience of your website.

The most fundamental elements often break first. Don’t kill the user’s “Back” button. Don’t restrict the user’s ability to bookmark pages of your website. And don’t unnecessarily modify the user’s visited and unvisited link colors. Many beginner and intermediate users rely heavily on these features to navigate the Web. The functionality of their browser is essential to their experience.

When an item from your Netflix queue is deleted, the service gives you the option to undo your action.

On a larger scale, a more pervasive distrust is brooding between interactive designers and their users. Many interactions should be cross-browser tested and must gracefully degrade in the absence of browser features that users can disable. It should go without saying, but a usable Web is, by definition, an accessible Web.

MailChimp shows a demo video on its home page to ensure that users get started quickly.

Finally, let users know if they are using a browser that your website does not support. Don’t leave them guessing. Only when you tell them will they know they can enlist to fight in the browser war.

Test Early, Test Often

The so-called TETO principle should be applied to every Web design project because usability tests often provide crucial insights into significant problems and issues with layout.

Test not too late, not too little and not for the wrong reasons. As for testing for the right reasons, understanding that most design decisions are local is important; you can’t categorically answer whether one layout is better than another because you need to analyze each one from a very specific point of view (taking into account requirements, stakeholders, budget, etc.).

Some important points to keep in mind:

• According to Steve Krug, testing one user is 100% better than testing none, and testing one user early in the project is better than testing fifty near the end. According to Boehm’s First Law, errors are most frequent during the requirements and design stages and become more expensive the later they are removed.
• Testing is an iterative process, meaning that you design something, test it, fix it and then test it again. You may find problems that were overlooked during the first round because users were preoccupied with other problems.
• Usability tests always produce useful results. They point either to problems with functionality and interactivity or to major design flaws, which in both cases are useful insights for your project.
• According to Weinberg’s Law, a developer is unsuited to test his or her own code. This holds true for designers as well. After you’ve worked on a website for a few weeks, you can’t see it with fresh eyes anymore. You know how it was built and therefore know exactly how it works; you have the background knowledge that independent testers and visitors of your website wouldn’t have.

Bottom line: if you want a great website, you’ve got to test.

Final Thoughts

The biggest challenge we face when we set out to improve the user experience is which consideration to tackle first! It can be frustrating but also a good position to be in. There are just so many angles you can take to make your website more enjoyable.

Make the effort, and you’ll end up with a product that your users will love almost as much as you do. We hope the majority of the points discussed here apply to your project. To summarize:

While creativity is good, letting our creative side take over the design process is not. Do not design an interface that is so innovative and different that an ordinary Web user wouldn’t easily recognize how to use it.

Build predictable websites. Design what the user expects. Do not try to build the next big Web feature unless it’s absolutely a better (and more intuitive) way to complete an old task.

Users browse the Web quickly. They don’t stop to look at the tiny details that we as designers spend hours laboring over. They’ll appreciate your work much more if you make it easy to get from one place to another and help them identify what they need. Remember, many users simply want to use your website as part of their normal routine.

Before focusing on visual design, spend some time planning how your users will do things on your website (interface design), how they will navigate the website (navigation design), and how the website will communicate with them (information design).

Always tell users where they are on your website using signposts. Users who can tell where they are on a website have a better chance of developing a sense of purpose.

Make use of the conventions of navigation. A user who doesn’t understand where they can go will have a very difficult time navigating your website. When planning the navigation, don’t stop at the first level: work on the global, local and contextual navigation of every page.

Just as navigation requires planning, content organization shouldn’t be overlooked either. Help users find what they are looking for by keeping content organized in semantically coherent groups.

Always anticipate that a user may not use your website the way you intend. Predict how they might misuse the website, and don’t let the consequences of misuse be undesirable (for example, deleting a document without showing an “Undo” option).

—

1. Don’t Make Me Think: A Common Sense Approach to Web Usability – New Riders
2. Useit.com: Search: Visible and Simple
3. Useit.com: Mega Drop-Down Navigation Menus Work Well
4. Smashing Magazine: Web Form Design Patterns: Sign-Up Forms (Vitaly Friedman)
5. Dr.Dobb’s: The Myth of “Seven, Plus or Minus 2″ (James Kalbach)
6. Useit.com: Inverted Pyramids in Cyberspace

← Typography: Rules and Common Mistakes (4/4)TOCThe Ultimate Guide to Fantastic Color Usage →