Web usability is a crucial consideration for any site: your competition is, after all, only a quick Google search away, making it easy for frustrated users to head elsewhere. A usable site keeps users on your site, and not your competitors. Moreover, making your site usable and self-evident improves the user experience, increasing trust in your site and business—making users more likely to buy from you.
Make the Purpose of Your Site Clear
Visitors to your site should be able to determine at a glance what your site does: what it offers, what they can do, and why they should be on your site instead of someone else’s. A few strategies for doing this:
- Have a clear tagline. For example: “Outpost.com: The place to buy computer stuff online.”
- Big text. This is frequently dismissed as being “too Web 2.0,” but the fact is that it works: clearly explaining the purpose of your site one or two sentences is well worth the screen real estate, and it’s guaranteed to catch users’ attention. (Bear in mind that what you think is a clear explanation and what your users think is a clear explanation is likely different.)
- If your service requires a more detailed information, consider including a site tour in the manner of Toggl or Tumblr. This may be either in addition to or instead of the previous strategies.
Links and Buttons Must Be Obviously Clickable
The primary goal of web usability is to minimize the number of questions your users have to ask themselves as they navigate your site; by the same token, users shouldn’t have to devote even a millisecond of thought to whether an item is clickable or not. It’s not enough to rely on users hovering over items to see if their cursor changes; all links and buttons should be clearly clickable. In the case of links, the best practice is to make them a different color, bold, or underlined—and using two of these will ensure usability for the broadest range of users (ie, taking into account colorblind users or users with poor vision). Avoid ‘mystery meat navigation’—navigation that makes it inordinately difficult for users to even determine what elements are links and what aren’t—at all costs.
Similarly, buttons should follow conventions and have both hover and active states; for a more lifelike user experience, use subtle shadowing, gradients or texturing on buttons to imitate physical objects.
Make Text Readable
Use a readable font. This doesn’t just mean “not Webdings;” it’s usually best practice to use fonts designed specifically for the inconsistencies and unpredictability of font rendering on the web. PCs or browsers without Cleartype enabled will make many other fonts difficult to read. Serif fonts, generally more readable in print, are actually less readable than sans-serif fonts because of the web’s coarse resolution. Set a reasonable size for body copy, too: 12px is a minimum; 14px is a best-practice guideline, and it’s not uncommon to see paragraph text up to 16px. Finally, use high-contrast text: grey on black text will give users with vision impairments, low-quality monitors, bad lighting, or tiny screens a headache.
Following these guidelines may conflict with your brand identity—it will likely be impossible to read yellow paragraph text set in Garamond at 10px on a white background, for example—but it’s worth considering that if elements of your brand guidelines make for a poor user experience, they will harm your brand.
Text is Part of the User Interface
If you’re developing a web application or e-commerce site, you’ve likely had to think about the user interface, which includes buttons, icons, and other elements that affect the user experience. One element that is often overlooked is text, which is just as much a part of the user experience as icons or navigation: body copy should be concise and clearly explain itself, but the text of buttons and alerts is particularly important—users shouldn’t have to think about which button they need to press, just as they shouldn’t have to wonder which navigation item will help them accomplish their objective. Even modifying a well-known convention slightly—changing “Search” to “Quick Search,” as detailed by Steven Krug in his well-known book, Don’t Make Me Think—can throw your users.
Establish a Clear Information Hierarchy
Good design establishes a consistent visual language, which helps your users identify the relative importance and function of content at a glance. Use a grid, a logical layout, and intuitive navigation patterns to establish a clear information hierarchy within individual pages, helping users arrive at their objective as quickly as possible. A few tips:
- The more important an element is, the more prominent on the page it should be—whether this means larger, bolder, bigger, surrounded by more whitespace, nearer to the top of the page, or a combination of the above is up to your designer and your brand guidelines, but it should be clear to your users.
- If elements are related logically, they should also be related visually: this might involve grouping them together, using a similar visual style, or somehow separating them from the rest of the page.
- Sections should be clear: elements should be visually ‘nested’ to show which elements of the page are the children of others.
Logical Information Architecture
Information architecture describes how your entire site is organized: where information is placed, where pages go, how users access them—establishing a coherent, weighted order of importance for the entire site. Make sure the path to the user’s destination is clear. Take advantage of navigation conventions—this might mean dropdown menus or secondary navigation, but caution against experimentation for the sake of making your website ‘unique,’ as your users will suffer. Information architecture also means making sure your site isn’t a sprawling mess: if you have menus more than 3 levels deep and you’re not Amazon, you’re likely doing something wrong.