Improve usability by styling the label element.

 label { cursor: pointer; }

Styling the label element is a subtle usability improvement. It is so subtle that writing about this gives the feeling that I'm writing about something that is so obvious is not worth writing about it.

Consider the following example:

HTML form

In order to fill a form with data, a normal flow goes like this:

  1. The user sees the input element.
  2. Then seeks the information related to that input field that indicates the kind of data needs to be entered: "Enter your e-mail address:".
  3. Then targets the cursor to the input field.
  4. Then get the focus of the input element.
  5. Starts adding data.

Even though this is something that is strictly linked to the web application design, these are some reasons that often annoy me as user when frontend developers don't take them into consideration while designing web applications.

Why you should add style to your label.

Obviousness #1: Facilitates users to get the focus on input fields.

Allows users to enter data easily and faster.

For most of the available input types, users don't have to move their mouse pointer over a web page to reach certain field. Notice that I'm talking about centimeters and tenths of seconds.

If the label is not noticeable in some way, in a left-to-right scenario, a right handed user have to go with the mouse pointer all over the caption area, moving their pointer to the right side and moving their right hand away from the keyboard.

Obviousness #2: Avoid the crosshair effect.

In case of small input fields like radio buttons or check boxes, users don't have to go and point to these elements.

Since these are small boxes in comparison with other input elements sometimes its not easy to reach them.

This not only applies to users using a desktop computer, but also users using touchscreen devices.

Obviousness #3: You can't use it if you don't notice it.

By not showing up the pointer there is no way to know all these steps can be avoided.

If the cursor doesn't change its shape, there's no way to notice the shortcut method.

Even thought this is the most obvious, is the one that inspired me to write the article.


No se ha cargado ningún comentario.