4.1. Introducción a la usabilidad

Usabilidad es un atributo de calidad que mide lo fáciles de usar que son las interfaces Web.
Sea por la web o no, la usabilidad consiste en facilitar la navegación a los usuarios de nuestra página para que en definitiva consigan de manera clara lo que buscan.

Los principios básicos sobre los que se sustentan la usabilidad son:

• Sentido común: la palabra clave es fácil, así que no se deben crear interfaces sin sentido.
• Experiencia de uso: el usuario no parte de cero, así que es conveniente ofrecerle interfaces cuyo funcionamiento le resulte familiar.

1.2. Normas básicas

Estas son algunas de las normas esenciales para facilitar el uso:

Legibilidad

Facilitar la legibilidad de los textos: tipos y tamaños de letra. contraste texto/fondo, textos más cortos. Este es un ejemplo de diferencia entre legibilidad de distintas fuentes y variantes.

Organización

Se trata de lograr una adecuada organización de las páginas: un sitio web o una aplicación debe estar claramente estructurada.

Navegación ágil

Se trata de que la interfaz no resulte pesada, por lo tanto, se debe procurar un tamaño reducido de las imágenes y ficheros vinculados, etiquetas, texto alternativo… Más adelante se presentarán técnicas para optimizar interfaces.

Accesibilidad

Consiste en que la tecnología empleada no sea una barrera de entrada para nadie, ya que como se está mostrando en este capítulo, existen muchas trabas que se pueden evitar para usuarios con cualquier tipo de dificultad.

1.3. Estándares

Las interfaces y, en especial, en el caso de las interfaces Web deben cumplir con una serie de estándares y usos comunes. Puede que en algunos casos los usos comunes puedan cambiarse por el diseño, pero incluso en estos casos hay que mantener los usos.

• Texto negro sobre fondo blanco o con buen contraste entre ambos.
• Imágenes con texto alternativo.
• El usuario puede modificar el tamaño del texto en su navegador para leerlo mejor.
• Emplear encabezados y subencabezados para organizar el texto.

1.4. Usos comunes

Los usuarios vienen con unas costumbres adquiridas, algunas de ellas tan básicas como la forma en la que se lee el texto.

Izquierda a derecha

Acostumbramos a leer de izquierda a derecha y de arriba a abajo, al menos en occidente. Eso es algo que hay que tener muy en cuenta, no solo para leer y para alinear el texto a la izquierda o justificarlo, también para algo crucial : los elementos importantes o que deban de ser rápidamente localizados o aquellos que le queramos dar más importancia lo debemos colocar a la izquierda.

Nombres comunes

Entendemos mejor las cosas si las llamamos por su nombre común . por ejemplo para volver al inicio diremos inicio o home, pero no principio o cualquier otro nombre divagando sobre su nombre común.

Logotipos

El logotipo de la empresa en el sitio web siempre suele estar arriba a la izquierda. A veces se pone el logotipo en el centro pero nunca en la derecha de la pantalla.

Barras de navegación

El Navbar o la navegación se suele colocar en la parte superior de la web.

Búsquedas

El mecanismo de búsqueda debe facilitarse sobre todo en las páginas web con bastante información, el buscador tiende a figurar arriba a la derecha.

Ayuda

Siempre se debe ofrecer ayuda, pero tan importante como eso es que sea fácilmente localizable, y para ella es un sitio que es común: la ayuda aparece arriba a la derecha, como se suele hacer por ejemplo en los programas de escritorio.

1.5. Legibilidad y percepción

Fuentes y Serif

El serif es esa especie de adorno que remata las letras de las fuentes. En una pantalla se leen mejor los tipos de letra sans-serif que los serif.

Contraste

El contraste entre texto y fondo influye en la legibilidad, no solamente para personas con problemas de daltonismo.

Tamaño

Los tipos de letra demasiado pequeños se ven y leen mal y lo mismo ocurre con los demasiado grandes. También el texto en mayúsculas se lee peor que el texto en minúsculas.

Márgenes

El ancho de línea y los márgenes influyen en la legibilidad. La ubicación de elementos como título, imagen e introducción al texto es la clave para que los usuarios lean o no los aspectos importantes del texto.

Parpadeo y elementos dinámicos

Los elementos animados o parpadeantes distraen la atención del usuario. Existe un ejemplo muy conocido que sintetiza todo lo que no se debe hacer en una interfaz web.

1.6. Convenciones

Conviene seguir las convenciones en todos los aspectos como colores, iconos, etc...

Los colores

Los colores tienen un significado implícito en una interfaz:

• Verde: se utiliza para dar paso, ok y éxito.
• Amarillo/Naranja: se utiliza para peligro o para avisar.
• Rojo: se utiliza para indicar, error, prohibido, acceso denegado.

1.7. Rotulaciones y ayudas

Siempre es útil ofrecer ayudas a los usuarios para que puedan encontrar información y, en definitiva, utilizar rótulos que sirvan de guía. Además permiten al usuario conocer en qué lugar de la página se encuentra.

Rastro de migas de pan

O breadcrumbs, son las guías que se suelen incluir en las páginas entre el título y el contenido:

Inicio > Artículos > Usabilidad

Resultan de gran ayuda para situar al usuario en la página y también como mecanismo de navegación para volver al inicio o a algún punto intermedio.

Enlaces claros

Un enlace puede ser más claro si va acompañado de una imagen o icono relacionado. El icono se "lee" de forma mucho más ágil y más si se pone a la izquierda.También es importante la correcta rotulación de los enlaces, deben identificar claramente el destino. Nunca debes utilizar nada del tipo "pinche aquí".

Mapa de la web

Un elemento que ha caído en desuso pero que puede seguir siendo válido en páginas web con jerarquías grandes.

1.8. Las diez reglas de la usabilidad

El gurú de la usabilidad Jakob Nielsen resumió en 10 puntos las reglas a seguir, que vienen a ser los mandamientos de usabilidad que conviene tener siempre en cuenta.

1. Visibilidad del estado del sistema

El sistema o la interfaz de usuario siempre debe mantener informado al usuario de lo que está ocurriendo, mediante retroalimentación apropiada dentro de un tiempo razonable.

2. Relación entre el sistema y el mundo real

La interfaz debería hablar el lenguaje de los usuarios mediante palabras, frases y conceptos que sean familiares al usuario, más que con palabras o términos vinculados al sistema. Conviene seguir las convenciones del mundo real y hacer que la información aparezca en un orden natural y lógico.

3. Control y libertad del usuario

el usuario no es perfecto y hay ocasiones en que los usuarios elegirán las funciones del sistema por error y necesitarán una especie de salida de emergencia; esta debe estar claramente marcada para salir del estado no deseado al que accedieron, sin que por ello tengan que pasar por una serie de pasos. Las funciones de deshacer y rehacer deben estar presentes.

4. Consistencia y estándares

Hay que evitar la confusión y los usuarios no deberían cuestionarse si acciones, situaciones o palabras diferentes significan en realidad la misma cosa; para ello debes seguir las convenciones establecidas.

5. Prevención de errores

En lugar de preocuparse de diseñar cuidadosamente los mensajes de error, es preferible centrarse en un diseño más cuidadoso que precisamente evita que sucedan errores.

6. Reconocimiento antes que recuerdo

El usuario no tiene por qué recordar la información que se muestra en un proceso para seguir adelante. Por ese motivo se deben hacer visibles los objetos, acciones y opciones de las que dispone. Las instrucciones de uso del interfaz o sistema deben estar a la vista, o estar claramente disponibles cuando sea necesario.

7. Flexibilidad y eficiencia de uso

No todos los usuarios son iguales y, por ello, el sistema debe adaptarse a ellos; en algunos casos con la presencia de aceleradores para varios más hábiles o expertos, que son elementos que los usuarios más novatos no tienen ni quieren usar. En definitiva, se deben ofrecer facilidades y atajos.

8. Estética y diseño minimalista

Los mensajes o los diálogos que se muestran no deben contener información que sea irrelevante o poco útil. Hay que medir bien la información que se ofrece, ya que cada unidad extra de información en un diálogo,compite con las unidades de información relevante y hace disminuir su visibilidad relativa.

9. Ayudar a los usuarios a reconocer

El error es inevitable, pero a la hora de diagnosticar y recuperarse de errores los mensajes de error se deben mostrar al usuario en un lenguaje claro y simple, siempre indicando de forma precisa el problema y sugiriendo una solución al problema o error.

10. Ayuda y documentación

Lo ideal es que un sistema se use sin instrucciones ni ayuda, pero incluso en los casos en que la interfaz pueda ser usada sin documentación, puede ser necesario o simplemente requerido ofrecer ayuda y documentación. En ese caso, la información debería ser fácil de buscar, estar enfocada en las tareas del usuario, con una lista específica de pasos a desarrollar que no debe ser demasiado extensa.