Usability is the key for a successful web site. Building a web site that is hard to use is one of the major causes of problems for companies that invest their money on a web project. The golden rule of usability is Don't make me think,
as Steve Krug says in his famous books on that subject. CSS can actually enhance the overall usability of a web site by providing an intuitive and fool-proof user interface. In this post I'm going to outline some of the most important areas where CSS can be actually used from an usability perspective.
Navigation
Navigation is the first key area for a web site. Navigation systems should be self-evident and self-explanatory. Each item should have a proper label that identifies its function without any possible doubt. Further, each item should be easily identified as active by the user, unless its function is to mark the current section. For that purpose, many web sites still use the a element even for marking the current section. This approach has several drawbacks. First, it may confound the user, because all browsers will provide a pointing cursor on that item. Second, even if the default behavior of browser has been changed by using the cursor property, the item is still active and a user could accidentally click on it or activate it via the keyboard.
A solution to this problem is to use another element, such as strong. By doing so, it's easier to stylize the current section with CSS. For example:
<ul id="navigation"> <li><strong>Home</strong></li> <li><a href="#">Products</a></li> <!--more items--> </ul>
Another key aspect of navigation systems is the so-called breadcrumbs section. From an usability point of view, this section is crucial to help a user to keep track of his/her position within your web site. Unfortunately, may web sites still use a non-semantical approach for marking up this section. A good solution is to use nested unordered lists that mimic the directory structure of your web site. For example:
<ul id="breadcrumbs">
<li><a href="#">Home</a>
<ul>
<li><a href="#">Products</a>
<ul>
<li>Product</li>
</ul>
</li>
</ul>
</li>
</ul>
You could add the following CSS:
#breadcrumbs {
margin: 0;
padding: 0;
list-style: none;
}
#breadcrumbs ul,
#breadcrumbs li {
display: inline;
margin: 0;
padding: 0;
list-style: none;
}
#breadcrumbs a {
padding-right: 20px;
background: url(img/separator.gif) no-repeat 100% 0;
margin-right: 0.5em;
}
Item separators should be added via CSS, not embedded in the markup.
Text
CSS provides several mechanisms to enhance the visual presentation of text. If you want to convey the user's attention on a particular fragment of text, you can:
- increase the font size
- change the font color
- change the background color
- add a background image
Example:
.evident {
background: #ffffc0 url(img/note.png) no-repeat 0 0;
color: #c00;
font: bold 1.6em "Arial Black", Arial, sans-serif;
padding-left: 50px;
}
Another interesting feature is the ability of changing the default text indentation of a block of text. For example, we might want to change the indentation of the first paragraph after the main heading of our page, like so:
h1 + p {text-indent: 1em;}
Finally, the length of lines is really important if we want to provide a comfortable reading to our users. CSS can change the dimensions of a block of text by setting its width property to a certain value:
p {width: 40em;}
Further, CSS can also affect the spacing between words and letters thanks to the word-spacing and letter-spacing properties, respectively.
Forms
The key here is simplicity. A text field should look like a text field and a button should look like a button. In other words, a user should not stop and think: "What should I do now? Can I click here?" (Don't make me think, remember?). So keep everything simple and easily recognizable. Experimental forms are an amazing field for testing your CSS skills, I know that (I've been there myself), but the point here is to make life easier for the user, not to get him/her confused.