Usabilidad web: Piensa en todos y hazlo bien

La usabilidad ha pasado a ser una idea más dentro de la jerga habitual de Internet, similar a navegabilidad o amigabilidad. Tanta bilidad no deja de acuñar un término profundamente ambiguo, con muchas implicaciones. Para averiguar cuáles son, comenzamos esta serie

Redacción

Usabilidad web: Piensa en todos y hazlo bien

7 febrero 2007

Paso 1

Introducción al término

El anglicismo «usabilidad» ha pasado a formar parte del vocabulario habitual de cualquier internauta. Sin que sepamos muchas veces a qué hacemos referencia, todos utilizamos la expresión «esta página no es muy usable» al encontrarnos una web cuyo funcionamiento lógico no comprendemos muy bien o choca directamente con nuestro lado más intuitivo.

Ese concepto no demasiado concreto es lo que se denomina habitualmente usabilidad. Y esa palabra se ha convertido en un dolor de cabeza para más de un diseñador web, atrapado entre la estética y la utilidad. Pero es un punto más en todo proyecto web que se precie, y sirve además para darle un barniz de respetabilidad de cara a los clientes. Entonces, ¿qué es realmente la usabilidad? Vamos a intentar averiguarlo.

Una misma matriz

Es el momento de plantearnos un diseño web accesible y, además, usable. Ambos términos están íntimamente relacionados. Podemos imaginarnos esta relación de manera práctica como una matriz accesibilidad/usabilidad. Por un lado, la accesibilidad debería ser la máxima posible independientemente del dispositivo, el idioma o las limitaciones de nuestros usuarios; por otro, estaría la usabilidad, entendida en un primer acercamiento como la mejor manera para nuestros usuarios de acceder fácilmente a nuestros contenidos, es decir, la manera más optima en función de los objetivos y necesidades de los mismos y los de la página en sí. Dicha matriz sería el punto de partida de todo desarrollo web.

Paso 2

El concepto es el concepto

La «usabilidad», del inglés usability, se podría traducir por «capacidad de uso» y hace referencia al nivel de adaptación que el diseño y la organización de una web tienen con respecto a los usuarios. Cuantos mayores sean la facilidad, la intuitividad y la adaptación de una página web a la mayoría de los usuarios, mayor será su usabilidad. El término no es exclusivo del diseño web, puesto que la usabilidad también es parte fundamental del diseño industrial y, dentro de la denominada ergonomía, es en el ámbito informático donde se ha popularizado más. Otro ejemplo: aunque los coches puedan ser muy diferentes de mecánica, todos se conducen igual, con el volante.

Hoy en día no se concibe un programa cuya usabilidad no haya sido testada ni un sitio web que no siga las reglas de usabilidad del gurú Jakob Nielsen, pero vayamos más allá de este lugar común para adentrarnos en el verdadero significado del concepto.

El objetivo de un sitio «usable» (perdón por el anglicismo) es que sea fácilmente utilizado por todos los visitantes. Esa facilidad de uso se refiere tanto a los aspectos técnicos como a los códigos de utilización del contenido, por lo que la usabilidad es un concepto transversal que condiciona al resto de aspectos de una web, desde el diseño hasta la organización de contenidos, pasando por la correcta utilización de las etiquetas HTML.

El citado Nielsen (que estuvo el año pasado en Gijón en el primer encuentro de Fundamentos Web) definió la usabilidad como «un atributo de calidad que mide lo fáciles de usar que son las interfaces web»; pero…, ¿qué es fácil o difícil de usar? ¿De qué dependerá todo esto?

Paso 3

Dos ideas clave

En sí misma, la usabilidad no tiene que ver con el lenguaje utilizado en la programación de una página web, ni en el número de menús o imágenes que tenga, aunque regula la utilización de todos ellos. De hecho, ni siquiera es un conjunto de normas inmutables a las cuales hacer referencia siempre. Las normas de usabilidad difieren ligeramente de autor a autor, de una web a otra, y evolucionan con el tiempo.
Por ejemplo, los nuevos lenguajes de programación web, como Flash, han hecho evolucionar las normas de usabilidad planteadas hace años, hasta crear normas propias para los sitios desarrollados en este lenguaje. Algo tan normal como incluir un enlace a la página principal de una web en el logo, por poner otro ejemplo, se ha convertido en un estándar de usabilidad sin necesidad de ser obvio, sino a fuerza de repetirlo en millones de sitios web y volverse una costumbre. Dicho esto, dos serían las ideas clave a tener en cuenta:

Facilidad de aprendizaje: o la facilidad con la que nuevos usuarios desarrollan una interacción efectiva con la página web. Los conceptos relacionados serían la predicibilidad, la sintetización o la familiaridad. Cuanto más fácil sea su aprendizaje mejor producto tendremos.

Flexibilidad: relativa a la variedad de posibilidades con las que el usuario y el sistema pueden intercambiar información. También abarca la posibilidad de un diálogo fluido o las diversas vías para realizar la tarea que tenga el usuario. A mayor número de vías de relación, obviamente mayor facilidad de uso.

Paso 4

Siempre hacernos preguntas

Hay que tener en cuenta cuáles son los objetivos de nuestros usuarios, para ponerlos en el centro del diseño y de cualquier interacción que deban emprender.

En todo momento, pues, deberíamos plantearnos preguntas como: ¿Quiénes son los usuarios, cuáles sus conocimientos, y qué pueden aprender? ¿Qué quieren o necesitan hacer los usuarios? ¿Cuál es la formación general de los usuarios? ¿Cuál es el contexto en el que el usuario está trabajando? ¿Qué aspectos debe automatizar nuestra web? ¿Pueden los usuarios realizar fácilmente sus tareas previstas? ¿En el tiempo que ellos esperan? ¿Cuánta preparación necesitan los usuarios? ¿Cuáles serán los errores más comunes que cometerán los usuarios cuando interactúan con la web? ¿Cómo podemos solucionarlos o minimizarlos?

Paso 5

Aplicándonos el cuento

Una buena forma de contestarnos a éstas y otras preguntas que pudieran surgir es planteando roles y usuarios tipo. En definitiva, contándonos historias. Las normas concretas de usabilidad, aun pudiendo aplicarse unos principios teóricos generales, dependerán y diferirán enor- memente de un proyecto a otro y de un usuario a otro. Incluso la utilización de un mismo sitio cambiará enormemente de una persona a otra.

Luego, uno de los mejores consejos es plantearse historias de quién y cómo se relacionará con nuestro proyecto, en qué contexto y de qué forma. O cómo contestaría a cada una de las preguntas planteadas en el paso anterior. Aun siendo una aproximación muy básica (pues después podremos aplicar estudios de usabilidad e interacción del usuario o estratificar por sectores o realizar complejas estadísticas de uso), es de gran utilidad.

La usabilidad será siempre una cuestión de acercamientos y nunca una verdad absoluta aplicable universalmente, siendo en buena parte subjetiva. Por eso, nuestro punto de vista, como desarrolladores web, tiene que estar allí: en los sujetos.

Paso 6

Roles: Pedro y Andrés

Pensemos ahora en dos usuarios diferentes: Pedro, que es informático y tiene 27 años, y Andrés, que está jubilado y con ciertos problemas de visión (aparte de otros achaques de la edad).
¿Su uso y experiencia de una misma web será igual? Probablemente y casi seguramente no. Independientemente de todo lo demás (es decir, las técnicas y las codificaciones), lo más importante será el pensar cómo estas personas van a interactuar con el sitio. Si esto lo unimos a cuáles son los objetivos de nuestra web, de todo ello dependerá tanto la organización de la información, como el diseño de la interacción… y su usabilidad.

Pedro, con su habitual maestría con los ordenadores desde que tenía 16 años, se familiarizará rápidamente con menús y enlaces, esperará encontrar ciertas cosas en ciertos lugares y sabrá, como comentábamos antes, que en el logo (que espera que esté en la esquina superior izquierda) podrá encontrar un enlace que le redireccionará siempre a la página principal del sitio. Su uso de atajos de teclado será sorprendente y tendrá todo tipo de accesorios «molones» para su navegador, que por supuesto es Firefox.

Andrés, por el contrario, apenas ha usado un ordenador en su vida, y se ha conectado a Internet por primera vez el último año desde un telecentro municipal. Aún no manejará con soltura el ratón y se acercará más de la cuenta a la pantalla porque su vista no es tan perfecta como antaño, aunque pondrá mucha voluntad y sus nietos le animarán a ello, pese a que su ordenador es un poco antiguo (heredado de su hijo cuando cambió a un portátil) y no terminará de hacerse a Internet Explorer.

Son dos casos extremos podríamos decir. Pero pueden centrarnos mucho la forma de pensar en todo momento sobre la dirección y decisión correcta a tomar en cada momento mientras estamos desarrollando y codificando.

Nuestro proyecto puede ser tanto una web para universitarios informáticos sobre salidas profesionales como una web para ofrecer alternativas de ocio a la tercera edad. ¿Cuál de las dos personas deberíamos tener presente en cada proyecto? Bueno el ejemplo es un poco exagerado (por desgracia… ¡o por suerte!, no siempre es algo tan evidente o sencillo), pero nos ayuda a entender bien nuestra idea. En definitiva, se trata de crear un sitio web pensando en y para quién lo va a visitar.

Paso 7

Aspectos afectados

Como hemos visto, la usabilidad hace referencia a todos los aspectos de un sitio web. Para hacernos una idea, haremos un repaso por las posibles facetas que pueden verse afectadas, puntos generales e ideas más o menos aplicables a todos los sitios:

El comportamiento del usuario en la web, diferenciando entre el tipo de web que queramos crear (intranet, blog, web corporativa, homepage…) y los distintos tipos de usuario que podemos encontrar (desde avanzado a novato). Todos ellos deben navegar satisfactoriamente desde el primer acceso.

La búsqueda de la información dentro de las páginas, referida a los puntos de atención del usuario y a los scrolls que tiene que realizar para encontrar la información relevante. El logotipo suele aparecer arriba a la izquierda, mientras que el buscador y la ayuda suelen estar arriba a la derecha.

La navegación y los enlaces a través de la propia web, haciendo hincapié en el diseño de los vínculos de acuerdo a los estándares, como el conocido ejemplo del enlace a la página principal en el logo. La navegación debe permanecer dentro del sitio, de manera que el usuario pueda moverse libremente por las páginas. Se tiene que ofrecer también la posibilidad de localizar continuamente la página dentro de la lógica del sitio (lo que Nielsen denomina «migas de pan»). El mapa del sitio web debe ser pertinente y coherente, además de útil.

La utilización del navegador por parte del usuario y de la propia web. En este sentido es interesante el correcto funcionamiento del botón de «Volver» (que debe devolver a la página anterior, algo complicado cuando se navega con frames, por ejemplo) y permitir al internauta que pueda modificar el tamaño de la letra desde el propio navegador. La utilización de los pop-ups y la apertura de los enlaces en nuevas ventanas molestan y generan problemas con los componentes bloqueantes del propio navegador.

El equilibrio entre el diseño impactante o «molón» y la simplicidad, poniendo especial cuidado en la personalización de la interfaz, la correcta utilización de los elementos multimedia y la adecuación a las convenciones de uso creadas desde el comienzo de Internet, como los colores de los enlaces (azul el enlace activo y morado el ya visitado), o la utilización de textos alternativos para las fotografías. Los estándares del W3C son un buen punto de partida al que ceñir el diseño de un sitio web. Conviene recordar que las tipografías con serifa, como la Times, se leen peor que las que carecen de ella, como la Arial o la Verdana, y que los cuerpos de letra pequeños se ven mal y se leen peor.

La organización del contenido con la intención de que sea buscado y encontrado. En este punto, se debe hacer referencia a la utilización de cadenas de búsqueda en los buscadores internos y a la optimización de las páginas de resultados. En cuanto a los resultados en motores de búsqueda externos, es imprescindible la correcta visibilidad y un buen posicionamiento en los mismos.
La optimización del contenido de acuerdo a las pautas de lectura de los internautas, teniendo muy en cuenta las diferencias que existen entre la lectura de un contenido on-line y off-line. El texto se lee normalmente de izquierda a derecha y de arriba abajo, al menos en los países occidentales. Más de dos scrolls suponen demasiada cantidad de texto para ser leído cómodamente.

Además, las líneas largas se leen peor que las cortas y una excesiva cantidad de texto por párrafo, sin elementos que lo rompan, como negritas o ladillos, supone un esfuerzo de atención para el lector. Hay que tener en cuenta que papel y pantalla son medios distintos y que la web tiene una forma de redacción y organización del contenido propia, con importancia especial en la forma de titular (los títulos, con corrección y sentido en sí mismos) y en utilizar los gráficos de manera apropiada.

La accesibilidad y la utilidad del contenido para usuarios internacionales o de diferentes idiomas. Las palabras comunes, las frases sencillas y la estructura lógica de la ideas dentro del párrafo ayudan a los usuarios cuya lengua nativa no es la misma que la nuestra. Si el sitio es multilingüe, tendrá además consideraciones especiales, como el equilibrio del contenido (una misma palabra o frase puede ocupar diferente espacio y salirse de «la caja») o la adecuación de los contenidos a las peculiaridades de cada idioma o cultura. Formatos como la fecha y hora o colores como los de un semáforo varían de un país a otro.

La gestión del tratamiento y la recolección de datos personales de los usuarios. Estos datos han de ser pertinentes y justificados (por ejemplo, para participar en un concurso o promoción) y los mínimos imprescindibles (nombre, dirección, e-mail, edad, sexo, profesión y poco más).

La solución de los posibles errores de navegación. Los errores han de ser los mínimos, pero si se produce uno, debe permitir al usuario la resolución inmediata y satisfactoria del mismo.

Finalmente, la mejora de la credibilidad y la confianza por parte de los visitantes. En webs corporativas, el contacto y la información acerca de la empresa han de ser relevantes. En los blogs, el usuario debe identificarse y mantener un ritmo regular de actualización de los contenidos.

Paso 8

Enlaces de interés general

http://es.wikipedia.org/wiki/Usabilidad/: Definición de usabilidad (en español).

http://dcu.jbarahona.com/icuevas/pags/indexcla.html/: Diseño centrado en el usuario (en español).

www.useit.com/: Página personal de Jakob Nielsen (en inglés).

http://usercentricdesign.blogspot.com/: Información sobre usabilidad (blog en español).

http://usability.typepad.com/confusability/: Información sobre usabilidad (blog en inglés).

http://griho.udl.es/aipo/index.jsp/: Asociación de Interacción Persona-Ordenador (AIPO) (en español).

www.cadius.org/: Comunidad hispanohablante de profesionales dedicados a la usabilidad (en español).

www.ainda.info/: Principal consultoría sobre usabilidad (en español).

http://openusability.org/: Foro para la usabilidad en entornos open source (en inglés).