¿Cómo hacer una auditoría de Usabilidad/Experiencia? (En solo 53 pasos)

Hoy tenemos la suerte de contar con una publicación fantástica de Bruno Rodríguez, profesor de Analítica web y Experiencia de usuario en Quondos y SEO Manager en Thundermetric. Estudió un Master en Cultura y Comunicación digital en La universidad de Sydney y en su haber tiene más de 5 años de experiencia en Agencias, cliente, consultoría. Ah, también un bitácoras y su blog sobre cultura y sociedad digital. Aquí tenéis el artículo:

En primer lugar, y antes de empezar, es necesario aclarar una cosa: Usabilidad y experiencia de usuario no son lo mismo, sino que la usabilidad está contenida dentro de la experiencia de usuario.

La usabilidad se refiere a que un producto o servicio, en este caso una web, sea sencilla de usar y no nos exija rebanarnos la cabeza para comprar, contratar un producto o navegar por ella. La experiencia de usuario incluye el conjunto de todas las interacciones del usuario con ese producto o servicio, que incluye la usabilidad pero también aspectos como el diseño, la utilidad del propio producto o servicio, y todos los aspectos que le rodean: la satisfacción del usuario al utilizarlo, el servicio de atención al cliente e incluso la relación del usuario con la marca.

Es por ello que una auditoría de usabilidad es más sencilla: acota nuestra dimensión de actuación a que la página sea sencilla de utilizar, mientras que hacer una auditoría de Experiencia de Usuario nos haría enfangarnos con aspectos que van desde la concepción del producto al servicio post venta, pasando por el feedback real de los usuarios.

Para esta guía pondré, en función de mi experiencia propia, cómo hacer una auditoría de Usabilidad que, además, incluya aquellos elementos de Experiencia de Usuario para que el análisis sea lo más relevante posible. Sin embargo no entraré en una auditoría completa de UX para evitar complicaciones innecesarias y un nivel de detalle que, para una pequeña mediana empresa en Internet puede no tener sentido.

General

1. Tiempo de carga: ¿Es lo más bajo posible? a) Las imágenes no se redimensionan: Si se muestra a 200×200, no redimensionas por HTML una foto de 800×800. b) Las imágenes están optimizadas: Utilizando software como Smush it o Shrink’ O Matic. c) Está activado el gzip: La compresión gzip de tu servidor está activada.
2. La fuente es legible y en contraste con el fondo: Para puntos extra consulta con daltónicos.
3. La página tiene favicon alineado con el branding: Y así sabes cuál es tu web entre las 2000 pestañas que tienes abiertas.
4. Optimizada para móvil y tablet: Navegable no siempre quiere decir responsive. Cada caso es único.
5. Desde diferentes SO: Android, Windows, IOS… ¿va bien en todos?
6. Desde diferentes navegadores: IE, Firefox, Chrome y Safari. Si tienes dudas prueba con herramientas como browserstack.

Home y páginas

1. La función de la web y su propuesta de valor queda clara sin tener que esperar, hacer clic o scroll: Vamos, que sabes a la primera de qué va la cosa.
2. Los pasos para conseguir un objetivo quedan claros al usuario: El usuario sabe cómo comprar o convertir sin mucho esfuerzo.
3. Si la página tiene mucha información, tiene opción de búsqueda: Amazon es mucha información. El blog que abandonaste con 3 post es poca. Para todos los puntos intermedios utiliza el sentido común.
4. Las secciones del menú tienen nombres que permitan saber qué contienen: Las categorías y estructura de información tienen nombres lógicos, autoexplicativos.
5. Hay anuncios que puedan confundirse con contenido y viceversa: Porque intentar timar a tus usuarios se considera mala UX.
6. El diseño gráfico crea una buena primera impresión: Muy subjetivo siempre, en general significa que la página no te hace vomitar o que utiliza recursos que están claramente desfasados y empeoran la experiencia de usuario. Si no es crítico no te metas, lo que para ti es terrible para otro es excelente.
7. El sitio tiene contenido irrelevante para el usuario: Toda la información tiene un sentido y una utilidad. Si no la tiene, ¿por qué está ahí?
8. Los pasos para completar una conversión ha sido reducido al mínimo: Porque cada paso de más en el embudo de conversión es dinero que dejas de ganar.
9. Las secciones o funciones más importantes, relevantes o usadas de la web están destacadas frente al resto de opciones: Ya sea por color, por tamaño o por su orden al disponer los elementos.
10. Existe una forma sencilla de volver a la home de la web desde cualquier punto de la página: Generalmente el logo de la web en la esquina superior izquierda. Ojo, si hay otro botón home en el menú, cuenta como un item duplicado.
11. En las páginas internas vemos claramente dónde estamos: Generalmente mediante un texto grande que nos dice dónde estamos.
12. En las páginas internas vemos las migas de pan que nos dicen en qué parte de la estructura está ese contenido: Para puntos extra tienen microdatos schema.org para que aparezcan como información adicional en los resultados de búsqueda.
13. No hay enlaces repetidos en la estructura de menú, y si los hay, es por un buen motivo: No tienes una subcategoría en 3 categorías distintas. No tienes el menú duplicado en el footer, salvo que tengas una buena razón para ello.
14. En las páginas de proceso de captación no hay puntos de fuga innecesarios: Porque cuando un usuario está a un click de comprarte, realmente no quieres que vaya a tu blog.
15. Los slider permiten pasar en ambos sentidos y saber en cuál estamos: Para puntos extra, no pongas sliders.
16. Las imágenes tienen texto alternativo (etiqueta alt) que detalla qué muestran: Por SEO y por motivos de usabilidad para personas con problemas de visión.
17. Desde la página no se enlaza a páginas que den error 404: Porque simplemente sería estúpido, ¿no?

Formularios

1. El formulario no tiene campos innecesarios o irrelevantes: Si no necesitas pedirlo, no lo pidas.
2. Es posible diferenciar los campos obligatorios de los no obligatorios: Un asterisco suele ser suficiente.
3. Si se envía el formulario con un campo incorrecto:a) Los campos que han sido rellenados siguen rellenados: Porque el usuario odia rellenar todo dos veces, con razón.b) Se dicen qué campos no han sido rellenados correctamente: Porque el usuario odia tener que buscar en qué estúpido punto se ha equivocado con razón.
4. Los campos se validan en tiempo real: Para que el usuario pueda ver que se ha equivocado sin tener que mandar el formulario.
5. No se pide el mismo dato dos veces: Porque, de nuevo, sería estúpido.
6. Si el formulario está dividido en pasos, se indica en cuál se está y cuánto queda para finalizarlo: Así sabemos si tardamos 5 o 50 minutos.
7. Los campos de texto están adaptados al tamaño de la respuesta: Porque no ocupa lo mismo mi dirección que mi teléfono.
8. Pides los datos en un orden lógico y agrupados por tipo (si procede): Apellidos tras nombre. No mezclas los datos de pago con los personales, por ejemplo.
9. Si un dato no queda claro, se ofrece ayuda sobre cómo rellenar el campo o por qué se pide dicho dato: Si me pides mi DNI, mejor que me digas por qué lo necesitas. Si me pides mi índice de masa corporal, mejor que me expliques cómo obtenerlo. Y ya de paso, también por qué me lo pides.
10. Al enviar un formulario de forma satisfactoria, aparece un mensaje de confirmación: Para saber si ha sido enviado correctamente o no.

Búsqueda

1. La página posiciona bien para su nombre de marca: lógico.
2. La página posiciona bien para sus principales productos/servicios/categorías más su nombre de marca: para los usuarios que prefieren Google a nuestro buscador (¿tú les culparías?)
3. La página posiciona bien para sus principales productos/servicios/categorías o las principales palabras de su industria: Lo ideal es que el usuario pueda llegar a la web buscando sus productos, servicios o palabras clave más destacadas.
4. Los resultados tienen un copy descriptivo que invite al clic: Porque aumentas el CTR y puede ser la primera interacción con tu usuario.
5. Los resultados tienen un copy que funcione como un anuncio independiente: Si tu objetivo es que te llamen, das tu teléfono. Si tienes envío gratuito, lo dices.
6. Los resultados tienen información adicional como microformatos: de rating, de migas de pan, de fotografías, de precio… de nuevo schema.org para más info.
7. Los resultados incluyen información local o de la página de Google+ de la empresa: porque cuanta más información tenga el usuario, mejor.

Redes Sociales

1. Todas las redes sociales de la empresa están vinculadas desde su página: ¿A dónde si no?
2. Todas las redes sociales de la empresa enlazan a la página de la empresa: ¿A dónde si no?
3. Las imágenes, colores y recursos utilizados en las redes sociales son coherentes con la página principal y la identidad de la empresa: Cada página refuerza la identidad de la marca.
4. Los textos descriptivos de las redes sociales son los mismos en todas. Si no, hay un buen motivo para ello: Cada página refuerza el tono de la marca.

Mailing

1. La línea gráfica de mails y web es coherente: El mail es el gran olvidado y tu canal con mayor conversión. No lo dejes olvidado.
2. El tono de mails y web es coherente: Si te habla una misma marca, que no parezca que te hablan dos.
3. Tanto si es posible responder directamente al mail como si no, se avisa de ello: Nadie quiere hablar con una máquina que no le escucha. Salvo quizás Wall-E.
4. Si no se puede responder directamente al mail, se da un mail de contacto: Nos gusta tener a alguien a quien cantarle las 40, o al revés.
5. Existe una opción visible y clara para darse de baja de los newsletter: Porque si no te vas a SPAM y es peor.

Para terminar esta guía, es importante decir que esta sería una auditoría muy básica de usabilidad de una página web, y aunque nos da algunas pistas sobre la experiencia de usuario y áreas mejorables de la misma, solo debe verse como una pequeña contribución al total.

A la hora de realizar una auditoría de usablidad es importante saber en qué puntos debemos centrarnos y poner una especial atención a aspectos como la jerarquía de información, la conversión, poniendo especial atención en las llamadas a la acción y aquellos puntos críticos parael usuario y, por último, contar con una persona con conocimientos o experiencia en este área.

Aunque se intentan desglosar las tareas de forma que sean lo más neutrales posible, siempre existirá un factor personal en si la web es atractiva o no, y es muy importante saber en qué pocas ocasiones mencionarlo, cuándo no debemos meternos ahí o cuando debemos sugerir una mayor investigación en ese punto y cómo hacerlo. ¿Hasta qué punto el no posicionar en Google es un problema de usabilidad en lugar de SEO? ¿Cuándo una diferencia de copy en SM está justificada y cuándo no? Por desgracia estas preguntas no solo requieren un sentido común excepcionalmente desarrollado, sino también algo de experiencia, o al menos el contacto de alguien experimentado dispuesto a guiarnos en nuestros primeros pasos.

Una versión de este documento se entregó como complemento del capítulo 4 de la guía “Introducción a la Usabilidad y a la Experiencia de Usuario de Quondos”. ¿Quieres saber cómo es el resto y ver si te pica el gusanillo por la usabilidad y la experiencia de usuario?

¡Apúntate ya!