Why jQuery is one of the most used JavaScript libraries available on the web? Perhaps it has more features than other libraries or more flexibility. Perhaps its design is better conceived. Nothing like that: jQuery is a successful project simply because it has usability in mind. Usability is a too often neglected aspect of library development. jQuery fills this gap by providing a simple way to perform tasks that other libraries tend to make too complicated for the average user. That's the jQuery's secret.

Read more »

On the web, the success or failure of a web project depends on how much trust web users put on it. I recently launched a site survey where I asked to my readers to tell me more about their Internet connection. This was several days ago and actually nobody answered. That was a failure but why did this happen? Simply put, though search engines have shown a certain interest and trust to this blog, my readers still don't recognize it as a trusted site. I'm not talking about security and privacy, but about what really turns a casual visitor into a devoted user: trust.

Read more »

Errors happen. The HTTP error 500 happens when the server encountered an unexpected condition which prevented it from fulfilling the request (HTTP 1.1 specifications). In practical terms, if such condition is met, a user cannot complete the operation currently in progress and he's often stuck to such error page. When this error is distributed, a user cannot get back to the referring page because the entire site is not responding. This is the worst case scenario for a web site, especially when a payment or another commercial operation must be completed. So what should we do? Let's try to see this problem from a user's perspective.

Read more »

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.

Sometimes I check my Google Analytics stats to find out something about my visitors. Today I found out that some of my visitors use a dialup connection. More precisely, 74 visitors during the last month. I must apologize with these visitors if they found my site really heavy to load. The fact is that I'm lazy and easily distracted. I don't check my stats on a regular base, so I missed some important details. People who use a fast connection often forget how much a dialup connection is slow. I mean, really slow. Dialup connections are the last signs and relics of the World Wide Wait model of the '90s. Anyway, if accessibility and usability really matter, we can't overlook this datum. We should provide a way to access our site contents in a reasonable time span. If I think that my 74 visitors had to wait almost a minute to load my blog, there's only one thing that comes into my mind: I am a stupid!

Yes, stupid. Because I've burdened my blog with a lot of extra widgets that add a really little meaning to the overall context. Users, contents, context: in a word, usability. As developers, we must take a decision: developing a web site that takes into account all the needs of dialup users or, on the contrary, an oversized web site with a lot of widgets and micro applications. Of course there's no need to be drastic. If those widgets are really important to the site, we should provide a low-content version of our pages, for example removing all unnecessary widgets and graphics (and scripts too). By doing so, dialup users won't have to wait a month until a page finishes loading. And this is all good reputation that we actually get and if we plan a site accordingly, we deserve it.

Web icons should be used carefully due to the amount of cognitive load that they generate for users. In fact, an icon is something that users have to decode to properly understand their meaning and semantics. What happens when an icon is polysemic? For example, what does a star mean? Favorites, bookmarks, ratings, or what?

The point is: without a proper explicative text used together with icons, the overuse of web icons may be harmful for users. This is both an accessibility and usability issue. Either people with cognitive disabilities or normal users may encounter problems when dealing with icons. Decoding an icon is something that is often difficult, because you have to think and, as many of you know, one of the most famous usability mottos claims "Don't make me think" (Steve Krug). Further, people with memory impairments may also be affected by the use of icons.

In a nutshell, icons should be used for what they really are, that is, graphics, and not as a mean to convey extra meanings. If you want to use them properly, combine them with explicative text, because what is clear and evident for you may be confusing or obscure for others.

BBC News is one of the few sites that really cares about accessibility issues and problems encountered by people with disabilities during their surfing experience. Take a look at this guide on web browsers for example: this is also a good resource from the point of view of usability and user experience. Surely one of the most worthy sites on this field.