We improve usability in 5 minutes

In this blog post I intend to share a few such tips to increase 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 notice that they are not.

1. Display button presses and button-like links.

My favorite advice. When a button style is set in CSS, or when an image is used to display an unusual button (either as a background or as an <img /> element), the button does not respond to a click in all or in some browsers (depends on the situation). Here is a simple trick you can let the site visitor know that he really clicked on something pressed:

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

With this code, the button is shifted 1 pixel to the right and 1 pixel down when it is pressed. Try it: it looks very convincing.
')
There are other, equally fast options: give the border the inset property, set the text-indent property to 1px, change the direction of the gradient background (which can be done quickly if you do not need to resort to a graphic editor, that is, if you’re somewhere else on the site use a ready inverted gradient), or a combination of several of them.

2. Smooth transitions (CSS3 transitions)

This advice will only work in webkits, but, as I said, this is only “icing on the cake”, so does it 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, on the other hand, they conceived to limit themselves to CSS anyway, it will serve as a noticeable increase in the convenience of webcam users.

Suppose that 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 webkits users, just add two -webkit-lines to the 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 ( -webkit-transition-duration ) tells the desired duration of this effect. It is important to place them in the usual CSS property, but not under the pseudo-class : hover , and there will be no smooth transition when the user removes the mouse from the element.

Translator's note. Lea Verou wrote these lines on April 10, 2009. Since then, a smooth change in CSS properties has, fortunately, been supported by many non-web browser browsers (starting with 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 the desired, you just need to write 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 the increase in the number of properties can be podzadolbat five times, Lea Verou composed the script -prefix-free , which I already reported on Habrahabr .

3. Provide buttons with special characters meaning their functions.

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



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

You can find many such 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 place of the icons in the drafts until there is time to draw the real icons.

4. Striped tables

This tip does not work in IE (except IE9 and newer - caniuse ) and in Firefox 3. The convenience of reading the tables (as well as some lists) can be improved by slightly changing the background color from row to row. Probably, you have seen this effect more than once, and usually it is achieved either by javascript or on the server when creating the table. However, it can also be quickly arranged on simple CSS3, if the performance in IE and old browsers doesn't concern you, or when there is no time for a fully 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 does not work in IE (except for IE9 and newer - quirksmode.org ) and in older versions of browsers. If one of the pages has a lot of content reachable by internal links (for example, in the FAQ), then the CSS3 pseudo-class “ target ” can be used to show the reader exactly where he followed the link:

 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 is given the id “foo”, then it will receive the background #FFFBCC after the reader switches to #foo.

That's all

Well, did it last longer than five minutes?