Usabilidad web: Ama y conoce a tu prójimo

A continuación veremos cómo estructurar un proyecto de usabilidad para aplicarlo a un desarrollo web, comprobaremos cómo el concepto de usabilidad es fundamental dentro de la construcción de Internet y aprenderemos los factores relacionados a tener en cuenta

Usabilidad web: Ama y conoce a tu prójimo

22 febrero 2007

Paso 1

Introducción

Como comentamos en la primera entrega, vamos a ver un hipotético proyecto web desde sus inicios para comprobar cómo la usabilidad, la arquitectura de información y el diseño centrado en el usuario (conceptos íntimamente relacionados) están profundamente presentes desde su gestación hasta el lanzamiento del mismo.

Cuando hablamos de usabilidad y de experiencia de navegación, estamos hablando de una gran variedad de factores, como son el contexto de uso e interfaz, la técnica, el diseño gráfico y la estética, la facilidad para encontrar la información buscada y la organización del contenido, y todos determinarán en mayor o menor media la experiencia que tenga el usuario. Intentaremos desglosar su aplicación y aprender a pensar en cada uno de esos factores. Así que abrid vuestro navegador y ¡preparaos para surfear!

Paso 2

La piedra angular del diseño

Empecemos: Pongamos por caso que tenemos que hacer un proyecto acerca del diseño de una revista de informática en lengua castellana. Su contenido será de la actualidad más relevante con análisis de productos y muchos prácticos y tutoriales. Descontando el hecho comercial o no, lo importante es que centremos los pensamientos de nuestro desarrollo en una idea base: el usuario. ¿No es así en una revista de papel?

Pensemos por un segundo en el ejemplar que has comprado. También es usable. El tamaño del logo y su posición, para que lo puedas diferenciar claramente entre la pila de revistas del kiosco, el papel y su textura agradable, la codificación en colores para que puedas navegar rápidamente entre sus secciones, el tipo y tamaño de la tipografía, su interlineado y la disposición de los blancos para que la página «respire» y no sea dificultoso leer, etc.

Esto, que resulta de lo más obvio y natural, es lo que vamos a aplicar a nuestro proyecto web. Con sus propias características, eso sí, porque no lo adquirimos en papel, sino en un monitor. Para empezar, ya no es tan necesario que el logo sea enorme para verlo desde lejos, sino más bien que pequeño para optimizarlo en la mayoría de las resoluciones de pantallas.

Paso 3

Acota la zona de influencia

Si nos vamos a centrar en el usuario, lo primero y mejor será conocerlo más en detalle ¿verdad? Por ahora les vamos a ofrecer una página en castellano y, muy importante, escrita desde España (con las implicaciones culturales que eso conlleva: forma de puntuar, expresiones y giros propios). Luego, nuestro primer mercado es claramente el residente en España.

Aunque presumiblemente su universo potencial pueda ser mucho mayor, pues podemos incluir a todos los hispanohablantes del resto del mundo, debemos entender que no todos estos segmentos de usuarios tendrán el mismo peso. Este acotamiento de los usuarios que suponemos van a visitar nuestra web no hay que confundirlo con el nivel de accesibilidad de nuestra página, que tiene que ser la mayor posible como vimos en la anterior entrega.

Todos podemos intuir que el diseño de interacción está siguiendo un desarrollo de base más o menos internacional, pero lógicamente habrá particularidades según el lugar y lenguaje del destinatario… Si estuviéramos en Marruecos, ¿sacaríamos la página en árabe? ¿No elegiríamos el francés, al ser por un lado más internacional y por otro más acorde al perfil de nuestros usuarios informáticos?
Con este ejemplo extremo quiero dejar constancia de las diferencias, a veces sutiles y a veces enormes, que puede implicar un diseño local orientado o no al mundo entero. Y vemos cómo ya empiezan a surgir temas que hemos tratado anteriormente (la accesibilidad y la codificación de caracteres, o la usabilidad y la lógica de lectura para diferentes partes del mundo). Pues lo mismo tenemos que tener presente para nuestra página.

Paso 4

Estudia a los usuarios

Bien, la siguiente pregunta es: ¿Cómo es este usuario? En Internet podemos encontrar numerosas fuentes de información, geográficamente perfiladas, de las que sacar una idea más o menos precisa de su edad, sexo, estudios, frecuencia de acceso y localización, tiempo de conexión, antigüedad en el conocimiento de Internet y cómo es éste hoy en día, navegador y sistema operativo preferente…

Puesto que a nosotros nos interesará especialmente España, podemos presumir que un tercio tiene conexión a la Web, la mayoría lo hace desde su hogar, uno de los servicios más usados es la navegación por Internet, la mayoría son varones aunque la cifra por uso según sexos se está igualando rápidamente, el rango de edad más común es de 25 a 35 años y de clase media o alta. Cuantos más datos dispongamos mejor.

Es posible que en algunos casos, como en rediseños de páginas web, tengamos datos más concretos sobre sus usuarios; pero, si no es así, éste es un buen camino para centrar quiénes y cómo se comportan y qué experiencia poseen nuestros posibles visitantes.

Paso 5

Aprende de sus frustraciones

Mediante estos estudios podemos obtener información un poco más concreta, acerca del uso específico de la Red y de las frustraciones asociadas a dicho uso, que es lo más nos interesará para poder remediarlas. Los usuarios usan Internet de tres maneras principalmente: como canal de comunicación, para buscar información y como sitio de compra.

Nuestro diseño de revista especializada estará claramente enfocado en el segundo de estos usos, por lo que tendremos que poner el acento en cómo refinar este uso para hacérselo más agradable al internauta que nos visite. Vemos que a los españoles en concreto, dentro de este uso de búsqueda de información, las cuestiones que más les preocupan son los procesos de registro y la complejidad para acceder a contenidos de valor o los excesivos tiempos de descarga de las páginas.

Paso 6

Cuestión de comportamiento

Pasemos ahora a entender cómo es el comportamiento de los usuarios cuando navegan. Usaremos este conocimiento posteriormente para aplicarlo en nuestro diseño de los contenidos y la arquitectura de información que planteemos. Aunque ahora daremos unos apuntes, se puede profundizar hasta detalles muy concretos.

Lo más remarcable es dejar constancia de que la mayoría tenemos conocimientos parciales sobre los procesos de interacción, y según Internet va llegando a toda la población, la media de conocimientos técnicos será cada vez menor. Si acotamos la edad principal de nuestros navegantes entre 25 y 30 años, podemos ver que su experiencia media con Internet es de unos seis años, con lo que podemos presuponer que su conocimiento será alto, y podremos hacer nuestra interacción con niveles de intuición medios y metáforas más complejas, interpretando que su uso será fácil. No será necesario que expliquemos al detalle cada elemento de la página, pues muchos se pueden dar por supuesto. La usabilidad es aprendizaje, con lo cual la experiencia es un grado fundamental.

De manera general, los usuarios no leen en las páginas web palabra por palabra sino que ojean los contenidos. Están centrados en sus objetivos, confían en los buscadores, muestran una baja tolerancia a las dificultades y no quieren dedicar tiempo a aprender a moverse por la página: han de entender su funcionamiento y estructura de la información después de ojearla superficialmente.

Por tanto, nuestra página de la revista tiene que ser sencilla (con una navegación estable y otra variable daríamos opción a varios perfiles), rápida (creada con un buen marcado XHTML y hojas de estilo, mejor que con desarrollos Flash más vanguardistas) y con prioridad al contenido (una tipografía fácil de leer y suficientemente grande y con un buen interlineado). Cuanta más información incluya, más depurado será nuestro diseño.

Paso 7

Pon caras a tus roles

Con todos estos datos vamos a pasar al siguiente paso: la creación de personajes o roles y la creación de escenarios. Dicho personaje correspondería a un estereotipo ideal de usuario de nuestra página; aunque no sea un calco exacto de la persona real, deberíamos dotarle de vida.

Pongamos un ejemplo: Carlos es un informático de 29 años, soltero, con pareja estable pero sin planes de matrimonio a corto plazo. Su nivel económico es medio-alto y trabaja en desarrollos de Internet desde hace más de cinco años. Es muy impaciente y siempre tiene abiertas varias pestañas de su navegador favorito, Firefox. Pasa las noches navegando y chateando con amigos. Usa Internet cada día para multitud de cosas, y siempre busca información en la Red antes de ir de compras, incluso si ésta la realiza vía on-line.

Probablemente muchos de nuestros usuarios tengan un nivel parecido a Carlos, por lo que su «representación virtual» nos servirá para testear continuamente nuestro desarrollo. Igual que Carlos, podemos crear a Javier, Marta y Diana, de perfiles similares pero con ciertas particularidades. Son personas reales que podemos sacar de nuestro entorno (siempre y cuando se adecuen a lo que pretendemos). También podemos crear a Pedro, Roberto y María, personas que tenemos casi seguro que no entrarían en nuestro sitio.

Paso 8

Los distintos escenarios

Ahora pongamos a Carlos en una situación concreta: Acaba de cenar y se pone el portátil en las rodillas para navegar un rato por los feeds que más le interesan mientras ve la película del lunes. Está pensando en cambiar de impresora desde hace dos semanas, pero es indeciso y continúa buscando comparativas en Internet para hacer la mejor elección posible.

Los datos anteriores cobran vida en estos ejemplos. Nosotros nos ponemos en la piel de Carlos y vemos claramente cómo las páginas tienen que ser rápidas, eficaces, plagadas de información útil y muy visuales, pues a la vez está viendo un programa de televisión.

Deberíamos tener un buen buscador y una buena herramienta de comparación de precios sin salir de la página principal. Posiblemente en este punto estaría bien usar tecnologías de última hornada como AJAX, para que no sea necesario recargar toda la página cada vez que el usuario pulse sobre algún elemento.

¿Vemos cómo el proceso, técnica y uso se van aclarando por sí solos? Cojamos un ejemplo de una aplicación real parecida: GoogleMaps. Este geolocalizador utiliza tecnología de vanguardia para hacer rápida, eficaz y visual la búsqueda de mapas, rutas o incluso negocios en Internet. A nuestra escala, es a lo que debemos aspirar, pues es sencilla de usar y responde perfectamente a las necesidades de sus usuarios. Los objetivos de diseño quedan completamente cumplidos.

Paso 9

Arquitectura de nuestra información

¿Cómo podríamos organizar nuestro contenido? Vamos a tener básicamente noticias de actualidad e información sobre productos. Tendríamos por tanto dos grandes bloques de tipos de artículo, que podrían compartir los temas e incluso interrelacionarse, y mostrarse conjuntamente. Esto nos da una matriz, que puede ser la solución.

Carlos podría navegar por la información de los productos que más le interesan viendo en detalle todas sus características, de un vistazo ver novedades y lanzamientos de productos relacionados, y hacer comparativas en cuestión de segundos. Otro usuario, Diana por ejemplo, quizás no precise tanta profundidad de detalle y agradezca una foto grande que se carga al instante. Nuestro ejemplo es limitado, pero la complejidad de la estructuración de la información puede ir a más.

Otra propuesta interesante es la categorización cruzada que ofrece, por ejemplo, Gmail (sí, lo reconozco, me encanta Google, aunque termine dominando el mundo) por la eliminación de carpetas con contenido único e intransferible de unas a otras. Para el que quiera profundizar, le comentaré que los conceptos más en boga hoy en día, dada la creciente complejidad de los contenidos, están ligados a la taxonomía, la folksonomía o las tags (etiquetas) múltiples; pero su explicación se sale del objetivo de este práctico.

Paso 10

Navegación y prototipos

El paso final es la creación de prototipos de estructura y navegación. No tienen por qué ser muy acabados (pueden estar en papel o un HTML muy sencillo), pues nos servirán para testear rápidamente los elementos que vamos a ir subiendo a la página. Supongamos que después de algunos tanteos hemos llegado a la conclusión de que la mejor manera de organizarlo todo es teniendo en la parte superior bien visible tres pestañas: Actualidad, Análisis de productos y Comparativas, y una navegación por temas en la parte izquierda.

Dentro de la parte central de la página creamos dos bloques para mostrar tanto la actualidad del tema en concreto como los productos más destacados por orden de aparición, relacionados. Las imágenes son grandes y muestran mucho detalle. En este punto, Carlos puede que se sintiera muy satisfecho; pero podríamos ir depurando nuestro prototipo enseñándoselo a amigos y conocidos susceptibles de frecuentar la página.

Paso 11

Aplica principios generales

Por último, los retoques. Aunque no hay principios universales dentro del terreno de la usabilidad, ya que depende, como hemos ido viendo, de los objetivos que cada uno se marca y quiera sobre todo el usuario conseguir, sí podemos aplicar algunas pautas de diseño generales que se vayan formulando e imponiendo (ninguna eterna, ¡ojo!).

Es necesario en este sentido hablar de las archiconocidas reglas de míster Nielsen acerca del diseño para Internet basadas en sus estudios cuantitativos de webs particulares. Muchas de dichas reglas puede que no sean aplicables a nuestro sitio, pero su conocimiento será muy útil a la hora de planificar la navegación final y la interfaz de nuestra página. Dichas reglas comprenden múltiples aspectos como: el diseño multiplataforma, el diseño de la navegación, la optimización de enlaces y escritura, el diseño de las direcciones internas o la estructura de carpetas.

Paso 12

Acude a patrones de diseño

Otra manera de desarrollar nuestra web es recurriendo a los patrones de diseño. Son patrones de elementos comunes a muchos sitios de similar objetivo, testeados y comprobados que funcionan correctamente. Nos ahorraremos mucho tiempo y nos aseguramos de que su usabilidad es muy alta.

No hay que repensar en cada elemento desde cero su utilidad y diseño. Los patrones suelen estar estructurados siguiendo un esquema como éste: nombre, contexto de uso, problema, solución, ejemplo. Muchas empresas de vanguardia utilizan desde hace mucho tiempo patrones de diseño para aumentar su productividad y no recaer en los mismos errores una y otra vez, ahorrándose muchas horas en desarrollo y codificación.

Paso 13

Enlaces de utilidad

Perfil de los usuarios de Internet en España:

www.egi.es/?sec=estudios

www.aimc.es/03internet/macro2004.pdf

Arquitectura de información:

http://atomiq.org/archives/information_architecture/ (inglés)

http://es.wikipedia.org/wiki/Arquitectura_de_la_informaci%C3%B3n

Pautas de diseño y usabilidad:

www.useit.com/homepageusability/ (en inglés)

www.useit.com/jakob/webusability/ (en inglés)

www.nngroup.com/reports/ (en inglés)

Patrones de diseño:

www.bitacoras.sidar.org/g4

www.welie.com/patterns/index.html/ (en inglés)

Actualidad y blogs sobre usabilidad (en español):

http://usalo.es

http://accesibilidad.blogspot.com

www.alzado.org

www.biguel.com/

www.cadius.org

www.bitacoras.sidar.org/g4

www.webstudio.cl/blog

http://intuitech.blogalia.com

www.moebius.lodigital.com.ar

www.nethodical.com

Estándares internacionales de usabilidad:

www.usabilitynet.org/tools/r_international.htm#18529/ (en inglés)