Úsalo: Usabilidad y Accesibilidad para el diseño web. Usabilidad para todos

La definición más clara, simple y eficaz del concepto de usabilidad es la de Nielsen (2003):

Usabilidad es un atributo de calidad que mide lo fáciles de usar que son las interfaces web.

Otra definición clarificadora es la de Redish (2000), para quien es preciso diseñar sitios web para que los usuarios sean capaces de:

Encontrar lo que necesitan, entender lo que encuentran y actuar apropiadamente… dentro del tiempo y esfuerzo que ellos consideran adecuado para esa tarea.

Así, un factor decisivo para determinar la calidad de una web lo constituye el éxito o fracaso del usuario durante su exploración del sitio, su experiencia de uso, en la que influye decisivamente la Usabilidad.

La clave de un sitio usable es que quien navega por él consiga entender su estructura y realizar con satisfacción aquello que pretendía realizar.

Ante los millones de sitios web existentes en Internet, dificultar la cómoda navegación en alguno de ellos significa invitar al usuario a abandonarlo y dirigirse a otro sitio en unos segundos (Nielsen, 2000).

Los criterios que determinan el grado de usabilidad de un sitio web se basan sobre todo en el sentido común. Son normas básicas de diseño para que una página web pueda ser utilizada adecuadamente, tales como:

• Hacer que los textos sean legibles (tipos y tamaño de letra, contraste texto/fondo, textos más cortos…)
• Adecuada ogranización de las páginas (Arquitectura de la Información)
• Descarga rápida de las páginas (poco peso de las imágenes y ficheros vinculados, buen etiquetado…).
• Que la tecnología empleada no sea una barrera de entrada para nadie (Accesibilidad)
• Etc.

De forma general, podremos tratar de dividir los principios relacionados con la usabilidad en cuatro áreas:

Respeto a los estándares de la web
Especialmente a los más o menos oficiales, como los emanados del W3C:

• Los enlaces de color azul, subrayados, y los ya visitados de color morado
• 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.
• Etc

Ergonomía cognitiva y usos comunes en Internet:

• Acostumbramos a leer de izquierda a derecha y de arriba abajo
• Entendemos mejor las cosas si se las llama por su nombre más común
• El logotipo suele estar arriba a la izquierda
• La navegación se suele basar en colocar los ítems en un rail izquierdo, fichas superiores o categorías centrales
• El buscador tiende a figurar arriba y a la derecha
• La ayuda aparece arriba a la derecha
• Es difícil recordar una lista de items de más de 7 elementos
• etc.

Aspectos físicos de la legibilidad y percepción en una pantalla:

• En una pantalla se leen mejor los tipos de letra sans-serif que los serif
• El contraste entre texto y fondo influye en la legibilidad (negro sobre blanco, amarillo sobre negro…)
• Los tipos de letra demasiado pequeños se ven y leen mal
• 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 clave para que los usuarios lean o no los aspectos importantes del texto
• Los elementos animados o parpadeantes distraen la atención del usuario
• etc.

Rotulación y ayudas a la navegación:

Son necesarias determinadas ayudas a la navegación, que permitan ubicar al usuario dentro de la estructura de contenidos del web e identificar visualmente la permanencia o no dentro de la misma interfaz de trabajo:

• Rastro de migas de pan (P.e. Inicio > Artículos > Usabilidad )
• Correcta rotulación de los enlaces (deben identificar claramente el destino. Nunca usar “pinche aquí”)
• Mapa de la web
• Etc.

En definitiva, la usabilidad se basa en no molestar ni hacer pensar en exceso al navegante (Krug, 2001) —hasta el más torpe debe ser capaz de navegar correctamente en la web— y en hacerle fácil y grata la experiencia en el sitio web.

No obstante, pese a lo obvio de estas pautas, son aún muy pocos los sitios web que realmente respetan la mayoría de ellas y facilitan la utilización del sitio. Así lo pudimos comprobar haciendo sendos análisis a los principales periódicos digitales españoles y a sitios web para personas mayores.

En cualquier caso, suelen bastar sólo unas pequeñas mejoras en la usabilidad de diseño para lograr un importante incremento en el grado de éxito de un sitio web.

Disciplinas afines a la Usabilidad

La Usabilidad es una de las disciplinas fundamentales que entran a formar parte de la rueda de la Experiencia de Usuario.

Todas esas disciplinas interactuan entre sí, y se solapan en muchos casos. Tanto que es dificil delimitar el ámbito exacto que cubre cada una.

Dependiendo del autor consultado, y del ámbito del conocimiento en el que éste trabaje, tenderá a considerar a una disciplina como parte de otra, como contenida en ésta o bien como disciplinas con muy poca relación entre sí.

De hecho, ahora veremos como algunas de las mencionadas áreas propias de la Usabilidad suelen ser consideradas también como propias de algunas de estas disciplinas.

Consideramos que una forma adecuada de representar esta idea la aporta gráficamente F. Tosete (2005), para quien las disciplinas vinculadas a la Experiencia de Usuario son:

• Usabilidad
• Accesibilidad
• Diseño de información y diseño gráfico
• Buscabilidad (Findabiliby)
• Arquitectura de la Información
• Diseño de Interacción

[Ampliar imagen]

Veamos algunas ideas sobre las disciplinas que, junto a la Usabilidad, completan la Rueda de la Experiencia de Usuario.

Accesibilidad

Accesibilidad Web es la posibilidad de que el mayor número posible de personas pueda entrar a una web y usarla, indiferentemente de las limitaciones propias del individuo o de las derivadas del contexto de uso. (Definición adaptada de Hassan y Martín)

La Accesibilidad suele vincularse erróneamente únicamente con discapacidad. Las personas con discapacidad son más sensibles a la falta de Accesibilidad, pero una web accesible permitirá una mejor interacción con todo el mundo.

Un resumen de las principales pautas de accesibilidad podría concretarse en un decálogo, a modo de guía breve para el diseño de sitios web accesibles:

1. Imágenes y animaciones. Use el atributo alt para describir la función de cada elemento visual.
2. Mapas de imagen. Use el elemento map de tipo cliente y texto para las zonas activas.
3. Multimedia. Proporcione subtítulos y transcripción del sonido, y descripción del vídeo.
4. Enlaces hipertextuales. Use texto que tenga sentido leído fuera de contexto. Por ejemplo, evite “pincha aquí”.
5. Organización de las páginas. Use encabezados, listas y estructura consistente. Use CSS para la maquetación donde sea posible.
6. Gráficas y esquemas. Resuma o use el atributo longdesc.
7. Scripts, applets y plug-ins. Ofrezca contenido alternativo si las funciones nuevas no son accesibles.
8. Marcos (Frames). Use el elemento noframes y títulos con sentido.
9. Tablas. Disponga que puedan leerse línea a línea. Resuma.
10. Revise su trabajo. Verifique. Use las herramientas, lista de comprobación y pautas de www.w3.org/TR/WCAG.

Diseño de información y diseño gráfico

La información suele entrar por los ojos. La forma en que se presenta a los ojos del usuario influye en la experiencia de uso.

El diseño gráfico es la vía por la que la información se plasma en formas y colores.

Un diseño estético es el que que resulta agradable para los sentidos, la imaginación, o el entendimiento (Y. Hassan).

Un diseño estéticamente agradable aumenta la sensación de facilidad de uso, lo que hace más agradable el uso, y ello, finalmente, puede mejorar no sólo la usabilidad percibida, sino también la efectiva.

Aunque no influya directamente en la interacción, la estética es el factor que más percibe el usuario.

La simplicidad del diseño también es una noción estética.

La simetría y la armonía en las formas adecuadamente combinadas son la clave para que un diseño se perciba como bello. La escuela de la Gestalt estudia cuestiones como la proximidad y la semejanza, en función de las cuales podemos percibir como un todo áreas y contenidos próximos y parecidos (Manchón, 2002) .

Un error de algunos diseñadores consiste en centrarse únicamente en la estética, creando páginas bellas pero difíciles de acceder o utilizar, buscando sólo el lucimiento personal, en lugar de utilizar la estética como una herramienta más para mejorar la experiencia de usuario.

Buscabilidad (Findabiliby)

a. La cualidad de ser localizable o navegable
b. El grado en el que un objeto particular es fácil de descubrir o localizar
c. El grado en el que un sistema o entorno apoya la navegación y recuperación
(Morville, 2005)

De poco sirve una web que los usuarios no puedan encontrar. Todo lo demás falla si una web no está visible, fácilmente localizable mediante los buscadores.

Evidentemente, la buscabilidad de un sitio está intimamente ligada con el resto de componentes. Si el sitio está bien hecho será más fácil de encontrar.

Una buena buscabilidad requiere:

• Definición.
• Distinción.
• Diferencia.

Ello se consigue utilizando adecuadamente las palabras, como etiquetas, como palabras clave.

Algunos de los aspectos que mejoran la buscabilidad de un sitio son:

• Utilizar texto en lugar de imágenes para representar los conceptos clave
• Emplear un texto en el título (etiqueta ‘title’) descriptivo pero no muy largo. En las primeras palabras debe describirse el sitio
• Ofrecer un buen lema. Descriptivo, más largo que el título. Que cuente lo que el usuario encontrará en la web
• Brindar contenido interesante, que atraiga enlaces externos, a ser posible de sitios que sean visibles en la red.
• Utilizar encabezados (h1, h2…) para estructurar documentos y elegir bien los descriptores a emplear en ellos, pues los buscadores les dan más importancia a las palabras que ahí aparecen.
• Cuidar la rotulación de los enlaces. Que tengan claro significado semántico. Ese texto es muy importante para la navegación y para ser registrados por los buscadores (véase el efecto Google bombing)
• Centrarse en los productos (contenidos) más importantes en lugar de mostrarlos todos a primer nivel

Arquitectura de la Información

1.- La combinación de organización, etiquetado y esquemas de navegación dentro de un sistema de navegación.
2.- El diseño estructural de un espacio de información que facilite la finalización de tareas y el acceso intuitivo a los contenidos.
3.- El arte y la ciencia de estructurar y clasificar los sitios web y las Intranets para ayudar a las personas a encontrar y gestionar la información. (Rosenfeld y Morville, 2000)

Una vez encontrado un sitio web y entrado en él es preciso localizar exactamente lo que se busca. La forma en la que estén organizados los contenidos y la estructura de navegación será fundamental para que se logre el éxito o no.

Así, estructura y organización son las cuestiones clave.

Por tanto, son funciones de la Arquitectura de la Información (Instone, 2004):

• Idea general de organización del sitio
• Sistema organizacional de productos
• Etiquetado para las categorías de producto
• Navegación global

Diseño de Interacción

Diseño de interacción es la creación de interfaces que realizan un diálogo (interacción) entre la persona y un sistema interactivo, un producto inteligente.

Es la parte del diseño orientada a los procesos más que a su presentación.

Cuando se realizan operaciones en la web tales como comprar un billete de avión, realizar una transacción económica, etc. es el diseño de interacción el que ha de velar para que todo el proceso se realice de forma adecuada, sin fallos, y que el usuario sea capaz, en todo momento, de saber exáctamente que está haciendo y cómo puede hacer lo que desea.

Evaluación de la Usabilidad

Hay diferentes maneras de estudiar y medir la usabilidad. Buena parte de ellas son complementarias entre sí.

Las dos principales técnicas son el estudio heurístico y el test de usuarios.

El test heurístico lo realiza un grupo de expertos, siguiendo un cuestionario de evaluación con una lista de pautas o criterios (heurísticos) que verificar (Nielsen, 1994).

El test de usuarios registra los problemas que encuentran los usuarios cuando tratan de realizar las acciones concretas propuestas por el evaluador, así como los tiempos empleados en cada una de ellas (Krug, 2001, p. 139).

Aunque se puede hacer de forma más sofisticada, para realizar un test de usuarios aceptable puede bastar con 4 ó 5 usuarios y tomar notas en una libreta.

Ambos test se deben hacer en las primeras fases de desarrollo. Es preferible hacer primero el test heurístico, para detectar fallos graves, y tras el primer rediseño hacer el test de usuarios, para encontrar fallos más difíciles de detectar.

También hay otros métodos de evaluación, y técnicas relacionadas con la mejora de la usabilidad o de alguno de sus aspectos específicos.

La técnica de Card Sorting (ordenación de tarjetas), resulta útil para planificar o mejorar la organización de contenidos de un sitio. Consiste en entregar a los usuarios un paquete de tarjetas con las posibles categorías del sitio, para que ellos las ordenen y organicen en los grupos que consideren más afines entre sí.

Así, a partir de varios usuarios que realicen este ejercicio se puede extraer un patrón que tener en cuenta para ordenar las categorías del sitio.

La evaluación de Accesibilidad se realiza de forma manual y mediante herramientas automáticas, si bien las automáticas sólo son capaces de revisar ciertos aspectos. El objetivo es determinar el grado de cumplimiento de las pautas de Accesibilidad.

Hay tres grados de cumplimiento:

• A. Si se cumplen las pautas de accesibilidad de nivel 1. Los sitios web TIENEN que cumplir estas pautas
• AA. Si se cumplen de las pautas de accesibilidad de nivel 2. Los sitios web DEBEN cumplir estas pautas.
• AAA. Si se cumplen las pautas de accesibilidad de nivel 3. Los sitios web PUEDEN cumplir estas pautas

Por supuesto, hay otras técnicas y métodos, aunque no todos relacionados directamente con la usabilidad.

Bibliografía y sitios recomendados:

• Estética, usabilidad y emoción. Eduardo Manchón. Ainda.info
• Evalúa la accesibilidad de tu sitio web. Torres Burriel, D.
• Validación automática. Una buena ayuda. García Gómez, J. C. Úsalo.
• Test de usuarios, cómo llevarlos a cabo. Eduardo Manchón. Alzado. org
• Tipos de evaluación de sitios web. Eduardo Manchón. Alzado. org
• An Information Architecture Perspective on Personalization. Instone (2004)
• Test de usuarios. Eduardo Manchón. Ainda.info
• Pautas de Accesibilidad al Contenido en la Web 1.0. W3C.
• Rueda de la Experiencia de Usuario: Disciplinas implicadas en el diseño de sitios web. F. Tosete. Imaginas.net
• Factores de Diseño Web orientado a la Satisfacción de Uso. Yusef Hassan Montero. IX Jornadas SIDAR.
• Qué es la Arquitectura de la Información. Yusef Hassan y Francisco J. Martín. Nosolousabilidad.com.
• Card Sorting: Técnica de categorización de contenidos. Yusef Hassan y Francisco J. Martín. Nosolousabilidad.com.
• La Experiencia de Usuario. Yusef Hassan y Francisco J. Martín. Nosolousabilidad.com.
• Guía de Evaluación Heurística de Sitios Web. Yusef Hassan y Francisco J. Martín. Nosolousabilidad.com.
• Introducción a la Usabilidad. Yusef Hassan. Nosolousabilidad.com.
• Método de test con usuarios Yusef Hassan y Francisco J. Martín. Nosolousabilidad.com.
• SIDAR. Seminario Iberioamericano sobre Discapacidad y Acceso a la Red
• Usability 101: Introduction to Usability. Jakob Nielsen. Alertbox
• How to conduct a heuristic evaluation. Nielsen, Jakob (1994).
• Sumario de Técnicas para la Evaluación y Testing de la Usabilidad
• Krug, Steve (2001). No me hagas pensar: una aproximación a la usabilidad en la Web. Madrid: Prentice-Hall, 2001.
• Morville (2005). Ambient findability. Peter Morville - Sebastopol [etc.] : O’Reilly, 2005.
• Nielsen, Jakob (2000). Usabilidad:Diseño de sitios web. Madrid: Prentice Hall, 2000.
• Redish, Janice; Dumas, J. (1999). A Practical Guide to Usability Testing. Intellect, 1999.
• Rosenfeld, Louis; Morville, Peter (2000). Arquitectura de la información para la World Wide Web. Cambridge (etc.): OʼReillly, 2000.
• García Gómez, J.C. (2004). Usabilidad de las páginas de inicio de los diarios digitales españoles. . SCIRE: representación y organización del conocimiento. Vol. 10 Nº 2. Zaragoza, 2004. P. 123-136 (PDF - Prueba de imprenta)