Usabilidad y Experiencia de Usuario

La usabilidad es la disciplina que estudia las mejores pautas de diseño web de cara a una correcta, sencilla, intuitiva, cómoda y exitosa navegación por parte de los usuarios.

A partir de la definición de algunos de los expertos en esta materia, podemos forjarnos una idea de dónde debemos hacer hincapié a la hora de diseñar y estructura nuestro sitio web:

“Usabilidad es un atributo de calidad que mide lo fáciles de usar que son las interfaces web.” Nielsen (2003),
“Encontrar lo que necesitan, entender lo que encuentran y actuar apropiadamente dentro del tiempo y esfuerzo que ellos consideran adecuado para esa tarea.” Redfish (2000).

Así, si para Nielsen la sencillez es la clave para alcanzar la calidad, para Redfish un aspecto muy importante es que los usuarios encuentren lo que necesitan, y una vez encontrado, lo entiendan.

Vamos a ver los ejes sobre los que se cimientan ambas definiciones:

• Estándares web. Fundamentalmente los recogidos en W3C, consorcio internacional para desarrollar estándares web. Por ejemplo:

– Imágenes con texto alternativo.
– Posibilidad por parte del usuario de modificar el tamaño del texto en su navegador para poder leerlo mejor.
– Organizar los textos de la web, de tal manera que existan encabezados, sub-encabezados, etc.
– Los enlaces en color azul y subrayados, los enlaces ya visitados, en morado.
– Buen contraste entre el color de texto y el color de fondo.

• Usos comunes: Se trata de trabajar en los elementos de la web considerando los usos comunes del usuario en Internet. Debemos considerar algunos detalles como los siguientes:

– Tendemos a seguir el orden de lectura, por tanto, de izquierda a derecha y de arriba a abajo.
– Es bastante difícil recordar una lista de más de 7 elementos.
– Nuestra mente sitúa el logotipo en la parte superior izquierda.
– Sin embargo, tanto el buscador interno como la “ayuda”, la ubicamos en la parte superior derecha.
• Legibilidad y percepción en una pantalla: hay aspectos físicos que también pueden condicionar el diseño de la web y la elección de fuentes, tipografías, colores, etc.

– Debemos poner mucho cuidado a los colores de fondo y de fuente que seleccionamos, ya que corremos el riesgo de dificultar en exceso la legibilidad.
– También afecta la legibilidad, el ancho de línea y los márgenes.
– En la misma línea, debemos ser cuidadosos al situar los títulos, subtítulos, imágenes e introducción a los textos, es un punto clave si queremos que el usuario llegue a nuestro contenido.
– Los elementos parpadeantes o animados, distraen en demasía la atención del usuario, por lo tanto, debemos evitarlos.

• Ayudas a la navegación: todas las facilidades son pocas, ofrecer varias alternativas al usuario, para que encuentre lo que busca, será beneficioso para ambos, para él porque lo encuentra y para nosotros porque le ayudamos a encontrarlo, le ofrecemos utilidad y porque creamos buena percepción de nuestra marca. Algunas facilidades:

– BreadCrumbs o Migas de Pan, un rastro visual permanente, que le indique al usuario el itinerario que está siguiendo en su búsqueda o navegación.
– Enlaces claros, evitando los “pinche aquí” tan poco descriptivos e intuitivos.
– Mapa Web que detalle la arquitectura o esqueleto de la página y permita al usuario aclarar las posibles dudas al navegar por la web.

Estas son, entre otras, características o pautas imprescindibles que facilitarán a nuestros usuarios la navegación por la web, pero antes de seguir, no podemos dejar en el tintero varias disciplinas afines a la usabilidad y que van estrechamente ligadas: la Accesibilidad Web y la Arquitectura de la Información.

La accesibilidad web trata de implementar medidas y acciones que posibiliten al mayor número posible de personas acceder a un sitio. En este sentido, cabe destacar alguna de estas pautas:

– Evitar marcos o frames
– Utilizar siempre etiquetas ALT, por si la imagen no se carga o para el acceso a la web de usuarios invidentes.
– Organización de páginas, con encabezados, listas, etc. Importante separar diseño y contenido mediante CSS.

La arquitectura de la información abarca el diseño de la estructura óptima que permita la navegación y facilite gestionar eficazmente la información. En este concepto debe existir una idea general en torno a la que gire la organización del sitio, etiquetando las categorías existentes y favoreciendo en todo momento, la navegación global por el sitio.

Resumiendo, tenemos 3 atributos claves para hacer que nuestro sitio sea usable, accesible y estructurado:

• Sencillez
• Claridad
• Organización

¿Y cómo evalúo la usabilidad de mi sitio?

Existen distintos métodos pero vamos a comentar los más extendidos o usuales, que son 3: el test heurístico, el test de usuario y el card sorting.

• Test Heurístico: se trata de un análisis realizado por expertos que a través de unas indicadores previamente definidos, se evalúa mediante un sistema de puntos, si se cumple o no dicho elemento. Se puede ir completando una hoja de Excel con los indicadores y la consecución de puntos obtenidos por cada pauta.
Ejemplo: consideramos como indicador “Imágenes Etiquetadas”, si las imágenes están correctamente etiquetadas con ALT, obtendrá 2 puntos, en caso de que las imágenes no tengan la etiqueta ALT, obtendrá 0 puntos.
Con este y otros indicadores, al final se pueden obtener conclusiones muy concisas para elaborar una lista de mejoras.

• Test de Usuario: este test pretende obtener de una muestra de usuarios reales, pautas de comportamiento y problemas que puedan surgir como consecuencia de la navegación por nuestro site. En primer lugar se establece o plantea un escenario, incluyendo unas acciones concretas a llevar a cabo. A continuación el grupo de 4-5 usuarios (como mínimo) navega por la web conforme lo estipulado. La observación de sus conductas, reacciones y formas de interactuar con el sitio, son la clave de este método.

• Card Sorting: se trata de una práctica muy útil para acercarnos a la percepción de posibles usuarios potenciales de nuestro sitio. Consiste en repartir un paquete de tarjetas de posibles categorías del sitio, entre una muestra de usuarios, y las colocarán en función de la organización que crean más afín.
Así podemos mejorar la organización de contenidos y ser muy conscientes de la visión del usuario.

Y para finalizar, una breve recopilación de herramientas útiles para testear la usabilidad, accesibilidad y arquitectura web, que las disfrutéis:

• Validador W3C : validador oficial de W3C.
• HTML Validator de Firefox : addon de Firefox que valida HTML.
• Juicy Studio: addon de Firefox para medir el contraste de colores en el sitio.
• Total Validator: validador online.
• Web Developer: addon de Firefox con interesantes funciones de desarrollo.
• Firebug: addon de Firefox que permite manejar, editar y visualizar elementos CSS, HTML, Java Script, etc.
• Net Renderer: addon de Firefox para renderizar la página actual.