En este blog escribire sobre muchas cosas relacionadas con Internet y Tecnología y una de ellas que es muy importante actualmente es la usabilidad.Jakob Nielsen define en su libro Prioritizing Web Usability:

Usabilidad es el atributo de calidad relacionado a cuan facil de usar es una cosa. Se refiere a cuan rapido una persona puede aprender a usar algo.

Trabajando para la web la usabilidad es esencial por que si el usuario no puede usar nuestra interface simplemente se ira de nuestro sitio.
En esta entrada del blog, hablare sobre los labels (etiquetas), esos pequeños pedazos de html que ayuda a reducir la cantidad de kilometros diarios echos con el raton cada dia.

Como dice Garret, estoy obsesionado con la usabilidad y la eficiencia, y totalmente convencido de que “Si necesita instrucciones, no funciona de primera”. Y los formularios sin el label tag no son vistos o no estan en sentido común de los desarrolladores. Desafortunadamente, incluso grandes sites como Amazon.com todavia no usan este simple y poderoso tag.
Y lo refuerza con:

Los Labels no solo incrementan la accesibilidad, pero también hacen el area clicable de los radio buttons y los checkboxes mucho mas grandes incrementando directamente la usabilidad. (Para leer mas sobre esto, chequear la Ley de Fitt’s.)

También, los lectores de pantalla para ciegos associan el label con su respectivo input tag, que por supuesto es algo muy bueno.

Definición de Labels
Relaciona una etiqueta a un control. Si haces clic en el texto dentro del elemento label este debería accionar el control.

Podemos ver este ejemplo en Google.co.uk:
Search:

the web

pages from the UKAsi seria sin labels:
Search:
the web

pages from the UKEn este ultimo ejemplo necesitamos hacer clic en el radio button para seleccionarlo. Usando labels haremos que el usuario gane tiempo y pueda hacer clic directamente en el texto relacionado para realizar su selección.Explicación HTML <form name=”input” action=”">
<input type=”radio” name=”sex” id=”male” />
<label for=”male”>Male</label>
<br />
<input type=”radio” name=”sex” id=”female” />
<label for=”female”>Female</label>
</form>

Read the rest of this entry »