Improving usability in 5 minutes

In this blog post, I intend to share some of these tips for increasing the usability of the site, each of which is very easy to implement. Not all of them are cross-browser, but still they are “icing on the cake”: the reader will not even notice that they are not there.

1. Display button clicks and button-like links

My favorite tip. When a button style is specified in CSS, or when a graphic is used to display an unusual button (either as a background or as an element ), the button does not respond to clicking in all or some browsers (depending on the situation). Here's a simple trick you can let the visitor know that he really clicked on something clicked:

.mybutton:active {
   position: relative;
   top: 1px;
   left: 1px;
}

With this code, the button moves 1 pixel to the right and 1 pixel down when it is pressed. Try it: it looks very convincing.

There are other, equally quick options: give the border an inset property, set the text-indent property to 1px, change the direction of the gradient background (which can be done quickly if you don’t have to resort to a graphics editor, that is, if somewhere else on the site ready-made inverted gradient is used), or a combination of several of them.

2. Smooth transitions (CSS3 transitions)

This tip will work only in webkits, but, as I said, this is just “icing on the cake”, so does it really matter? Of course, if a smooth transition is important for your design, it is better to write a script or use a ready-made library. If in any case you intended to restrict yourself to CSS, then it will serve as a noticeable increase in the convenience of users of webkits.

Suppose the links on your page are usually blue, but turn red when you hover over them. To make the transition from blue to red smooth for webkit users, it’s enough to add just two -webkit-lines to CSS :

a {
   color:blue;
   -webkit-transition-property: color;
   -webkit-transition-duration: 1s;
}
a:hover {
   color:red;
}

The first line ( -webkit-transition-property ) tells the browser which CSS property to smoothly change, and the second line ( -webkit-transition-duration ) tells you the desired duration of this effect. It is important to place them in the usual CSS property, but not under the : hover pseudo- class , otherwise there will be no smooth transition when the user removes the mouse from the element.

Note by the translator. Lea Verou wrote these lines on April 10, 2009. Since then, a smooth change in CSS properties has, fortunately, started to be supported by many non-Web browsers (starting from  versions of Firefox 4, Opera 10.5, Opera Mobile 10, Internet Explorer 10), so this tip has become much more cross-platform. In order to achieve your desired goal, all you have to do is write down the CSS properties with all the necessary prefixes:

a {
   color:blue;
   -webkit-transition-property: color;
      -moz-transition-property: color;
        -o-transition-property: color;
       -ms-transition-property: color;
           transition-property: color;
   -webkit-transition-duration: 1s;
      -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
       -ms-transition-duration: 1s;
           transition-duration: 1s;
}
a:hover {
   color:red;
}

Realizing that an increase in the number of properties by five could make a difference, Lea Verou wrote the script -prefix-free , which I already reported on Habrahabr .

3. Equip the buttons with special characters indicating their functions

We all know that most browsers do not like fonts consisting of only special characters. However, there are special characters that are part of most Unicode fonts and can be used without problems. Say, compare the following two examples:



For a number of such characters there are keywords (named HTML entities) , and others will have to be called by their Unicode numbers (like ꯍ ) - they will have to be tested harder, since not all of them are quite common in fonts.

You can find many of these special characters and their Unicode hexadecimal numbers at http://www.copypastecharacter.com/ and http://www.alanwood.net/unicode/dingbats.html .

Of course, if you have time, please use the graphic icons on the buttons. But when there is no time, then special characters seem to me a handy alternative. Sometimes I also put them in the place of the icons in the drafts until I have the time to draw real icons.

4. Striped tables

This tip will not work in IE (except IE9 and newer - caniuse ) and in Firefox 3. The convenience of reading tables (as well as some lists) can be improved by slightly changing the background color from row to row. You have probably seen this effect more than once, and it is usually achieved either by javascript or on the server when creating the table. However, it can also be quickly arranged on simple CSS3, if you don’t care about working in IE and older browsers, or when there is no time for a completely cross-browser solution:

table.stats tr {
   background: white;
}
table.stats tr:nth-child(odd) {
   background: #f4f4f4;
}

5. Highlight the target element of the internal link

This tip will not work in IE (except IE9 and newer - quirksmode.org ) and in older versions of browsers. If there is a lot of content on one of the pages that can be accessed via internal links (for example, in the FAQ), then you can use the CSS3 pseudo-class “ : target ” to show the reader exactly where he clicked:

h3:target {
   background: #FFFBCC;
}

The h3 element will acquire the #FFFBCC background only when the reader lands on it by reference. For example, if the element id is set to “foo”, then it will get the #FFFBCC background after the reader goes to #foo.

That's all

Well, did it last longer than five minutes?