10 crímenes de usabilidad web a evitar

En este post propongo una traducción libre de un interesante artículo recogido en el blog  Line 25 Web Design Blog. Es una selección de los 10 crímenes más habituales de usabilidad web y accesibilidad, con la solución para evitarlo.

Crimen nº1: tener etiquetas de formulario no asociadas a los campos del formulario

Es fundamental etiquetar las etiquetas de los diferentes campos del formulario, valga la redundancia, usando el atributo “for” permitiendo así al usuario hacer clic en la etiqueta y centrar automáticamente su atención en el campo tipo input al que esta asociado. Esto es fundamental para las casillas de verificación o los campos de tipo botón radio, ya que aumentamos sensiblemente la zona clicable, normalmente reducida (pensad en los dedos de los usuarios cuando completan formularios en el smartphone).

Crimen n°2: tener un logo no vinculado con la homepage del website

Tener el logo del site vinculado con la homepage del website es algo ya tan habitual que los usuarios se han aconstumbrado ha hacer clic sobre el logo para volver a la homepage. Se ha convertido en un convencionalismo, al igual que tener el logo en la parte superior izquierda del site.

De todas formas, el tener el logo vinculado a la homepage no exime de tener un enlace de “inicio”, “pagina principal” en el propio menú, ya que algún usuario puede que busque dicho enlace ahí.

Crimen n°3: no tener un color diferente en los enlaces ya visitados

Es importante ofrecer al usuario un indicador visual que le permita saber que enlaces ha clicado ya en el website. El método más sencillo es el dar un color diferente que permita identificarlo rápidamente. Aconsejo poner en práctica esta opción en los enlaces de texto del website.

Crimen n°4: no indicar el campo activo del formulario

Se puede utilizar el selector “:focus” en muchos elementos de una página, pero realmente tiene sentido con los campos de tipo input o de texto, para indicar que el campo esta activo. Para ello hay que añadir un poco de código CSS para los elementos inputs o de texto para obtener bordes subrayados o resaltados o cambiar el color de fondo, para identificar en un simple vistazo el campo que se encuentre completando en ese momento.

Crimen n°5: tener imágenes sin el atributo alt

En algún otro post he hablado sobre este tema. Es indispensable y obligatorio el tener todas las imágenes del website con su atributo alt correctamente completado, ya que ayuda al usuario a saber que imagen es, en el caso de que se este navegando desde un lector de pantalla o simplemente la conexión es lenta. Si la imagen es puramente decorativa o un icono o un background, es conveniente poner un alt vacío (alt= »»), si no, aprovecha para introducir palabras clave que ayuden al posicionamiento orgánico de la imagen.

Crimen n°6: utilizar una imagen de fondo sin especificar el color del background

Es bastante habitual tener texto superpuesto a imágenes de fondo. No hay que olvidar que el usuario puede desactivar la carga de imágenes. En este caso hay que verificar que el texto permanece visible y que existe suficiente contraste de color entre el texto y el color de fondo. Por ello, es aconsejable el poner un color de fondo similar al de la imagen, para que el texto sea visible si las imágenes son desactivadas.

Crimen n°7: utilizar grandes bloques de texto aburrido

Si se va a mostrar mucho texto, hay que intentar no aburrir al usuario con textos muy largos. Es aconsejable el dar ritmo a los textos, rompiendo los bloques con titulares e imágenes, facilitando la navegación por la página.

Crimen n°8: subrayar un texto sin enlace

Todo el mundo sabe que si un texto esta subrayado es normalmente un enlace. Por lo tanto, no es conveniente subrayar textos que no enlacen con nada. Si queremos destacar una parte del texto, es preferible apoyarse en elementos strong y em.

Crimen n°9: tener un enlace «haga clic aquí»

Tener un enlace del tipo «haga clic aqui» no es solo un crimen para el SEO del site, si no que además obliga al usuario a leer todo el párrafo o texto adjunto para poder entender a donde lleva dicho enlace. Tampoco hay que olvidar que cuanto más largo es un enlace más fácil a clicar es para el usuario. Por ello, es conveniente priorizar los enlaces explicativos que informen sobre la página objetivo.

En este punto podríamos recordar la ley de Fitts, que dice básicamente que el tiempo para completar un movimiento rápido de un punto A a un punto B depende de la distancia y el tamaño del punto B. En ergonomía web se puede aplicar y se aplica al “call to action”: cuanto más grande es el botón menos esfuerzo tendrá que hacer el usuario para cliquearlo.

Crimen n°10: utilizar texto justificado

El texto justificado puede plantear problemas de lectura a ciertas personas. Puede quedar mal en textos cortos o cuando la longitud de la línea es importante. Para mejorar la accesibilidad al website, evitar en la medida de lo posible los textos justificados.

Respecto a este último crimen, reconozco que no estoy del todo de acuerdo. Todos mis post del blog están justificados, además es algo que me obsesiona, porque me da la sensación de mayor orden. Personalmente, lo que se denomina “texto en bandera” en imprenta, es decir, textos sin justificar, genera párrafos recortados, poco estéticos y que pueden llegar a incomodar al lector.

En mi opinión, el justificar los textos facilita normalmente la lectura ya que la gente está más acostumbrada a leer textos justificados (libros, periódicos, etc.). Yo creo que este crimen es más estético que ergonómico, ya que un texto no queda visualmente muy bien si las palabras están muy espaciadas.

Fuente

Related posts:

Consejos básicos de usabilidad web Usabilidad vs Experiencia de Usuario Usabilidad en e-commerce (1ªparte) Usabilidad en e-commerce (2ªparte) 50 consejos para mejorar la usabilidad de tu website