No me hagas pensar, resumen del libro sobre usabilidad

No me hagas pensar es un libro dirigido a profesionales que están diseñando su página web y no pueden costearse un experto en usabilidad. Es algo así como un libro de “hágalo usted mismo” fácil de entender y no muy largo.

Muchas de las cosas que cuenta “No me hagas pensar” pueden ser obvias para un usuario de Internet experimentado, otras son menos evidentes, pero en conjunto forma un buen manual de errores a evitar a la hora de crear un sitio web intuitivo.

Sigue leyendo y te explico lo más importante de cada capítulo y algunos ejemplos y comentarios añadidos por mí.

Capítulo 1 – No me hagas pensar

El usuario debe ser capaz de entender a primera vista que es lo que tiene delante suyo. Una página web debe ser auto-evidente.

Para ello el usuario no debe formularse preguntas acerca de lo que está viendo o cómo debe interactuar con ello, simplemente debe entenderlo a simple vista.

Cosas que nos hacen pensar

En ocasiones cambiamos el nombre obvio de algo por un nombre más elaborado o que atienda a la jerga interna de la empresa o del sector. Esto es un error porque estamos haciendo que el usuario tarde un tiempo, aunque sea una fracción de segundo, en entender lo que le estamos presentando.

Algunas cosas no pueden ser auto-evidentes

Si una tarea por su propia naturaleza es demasiado compleja para ser auto-evidente, debe ser diseñada para que el usuario solo le tome un pequeño tiempo para entenderla.

¿Por qué es todo esto tan importante?

Es crucial conseguir que el usuario permanezca el tiempo suficiente en tu web para que le llegue tu mensaje. Cada vez que le hacemos pensar o le resulta difícil interactuar con el sitio, gasta el «presupuesto de paciencia» que le ha asignado a tu sitio de forma inconsciente.

A menudo sobrevaloramos el tiempo que gastan los usuarios en nuestro sitio y la cantidad de contenido que leen.

👉 Aplicaciones como Microsoft Clarity que ya he analizado en el blog te pueden dar una idea clara de cómo interactúan con tu sitio y el tiempo que permanecen en él.

Capítulo 2 – ¿Cómo usamos realmente la web?

Hay una gran diferencia entre cómo un diseñador web piensa que la gente usa sus páginas y cómo realmente se usan.

Los usuario no leen cuidadosamente la página siguiendo un orden. Realmente escanean de forma rápida cada página buscando un enlace que sea lo más parecido posible a lo que van buscando.

Esto depende de cada usuario y cada situación pero en términos generales es así.

Escanear

Escaneamos las páginas en vez de leerlas detenidamente debido a que:

• Entramos en una web con una misión concreta.
• Solo necesitamos una pequeña parte del contenido de la web.
• Estamos acostumbrados a hacerlo en periódicos, revistas, redes sociales…

Satisfacer es suficiente, lo óptimo no es necesario

Los usuarios no valoran las diferentes opciones que ofrece una web, simplemente hacen clic en la primera opción que les parece válida. Esto es debido a lo siguiente:

• En ocasiones tenemos prisa por completar la tarea.
• Podemos volver atrás si no encontramos lo que queremos.
• Sopesar varias opciones no nos garantiza mayor éxito.

No nos planteamos cómo funcionan las cosas, simplemente las usamos

La gente es capaz de utilizar cosas sin leer las instrucciones, sin saber como se llaman o como un diseñador ha pensado que es la mejor forma de utilizarlas. Simplemente las utilizan y si encuentran la forma de hacerlo las seguirán usando.

Capítulo 3 – Diseño pensado para poder ser escaneado

Utiliza convenciones

En el diseño web existen ciertas convenciones, es decir patrones de diseño que todos reconocemos ya que nos resultan familiares.

En algún momento alguien tuvo una buena idea de diseño que la gente acogió bien y con el tiempo otros sitios la fueron adoptando.

Algunos diseñadores puede que estén en desacuerdo con adoptar estas convenciones dado que pueden limitar su capacidad de creatividad.

Crea jerarquías visuales efectivas

El diseño de una página debe dejar claro:

• Que cosas son la más importantes. Tamaño más grande, dejando espacio en blanco en la parte superior etc.
• Que cosas son iguales entre sí en cuanto a jerarquía. Juntándolas en un mismo espacio, mismo tamaño.
• Que cosas son parte de otras cosas. Utilizando elementos de diseño para anidar contenidos.

Mantén el ruido de fondo bajo control

• Evita crear páginas donde todo quiere llamar la atención: anuncios con animaciones, sliders, anuncios de ofertas y todo tipo de exclamaciones deben ser mantenidos a raya.
• Utilizar diseños basados en un patrón de rejilla es útil para crear sensación de orden.
• Evita las páginas atiborradas de contenido.

Otros consejos básicos

• Divide las páginas en secciones claramente definidas. Esto permite a los usuario ignorar fácilmente las secciones que no son de su interés.
• Hacer obvio aquello que contenga un enlace. Poner todos los enlaces del mismo color y que este sea diferente de encabezados, párrafos etc.
• Formatea el texto para que sea fácilmente escaneable. Utiliza párrafos cortos, listas, resaltados en negrita, encabezados etc.

👉 En este post tienes una gran cantidad de consejos para dar un formato atractivo a tus posts.

Capítulo 4 – ¿Por qué a los usuarios les gustan las decisiones inconscientes?

Existe un debate acerca del número máximo de clics que debe hacer un usuario para llegar a donde quiere. Pero el autor del libro pone en mayor valor el cómo de difícil es la decisión a tomar para elegir cada clic que se hace.

Si el usuario tiene una certeza de que está siguiendo los enlaces correctos, entonces el número de clics que tenga que hacer no es tan importante.

Debes tener presente que si una de estas decisiones es difícil de tomar, debes informar al usuario con una indicación corta, oportuna e imposible de pasar desapercibida.

Esto es especialmente importante en formularios complejos y en buscadores avanzados.

Capítulo 5 – Omite palabras innecesarias

Omite cualquier texto que sea innecesario para conseguir lo siguiente:

• Reducir el ruido de fondo del sitio web
• Conseguir que el contenido principal sea más relevante
• Conseguir que los usuarios vean más contenido de un vistazo sin hacer scroll.

Evita los textos del tipo “Bienvenidos a nuestro sitio web… ”

Evita las instrucciones de uso. En su lugar intenta que el sitio sea auto-evidente.

Capítulo 6 – Diseñando la navegación

Los elementos de navegación como los menús juegan un papel esencial en la usabilidad de tu sitio web. No solo te permiten navegar en ellos para encontrar el contenido buscado, además son de ayuda con otras tareas:

• Informa de qué hay en ese sitio de un vistazo
• Permite usar ese sitio de forma intuitiva
• Un buen diseño de la navegación transmite confianza y orden acerca de las personas tras ese sitio.

Todos los elementos de navegación tienen ciertas convenciones que es aconsejable seguir:

• Nombre del sitio en la esquina superior izquierda
• Cuadro de búsqueda y utilidades (acceso a mi cuenta, carro de compra, selección de idioma) en la esquina superior derecha.
• El menú de navegación debe indicar en qué sección estamos (resaltando ese elemento).
• Nombre de página que anide correctamente el contenido de esta.
• Navegación local (dentro de la sección actual) claramente identificable.

De la lista anterior los tres primeros elementos deben ser persistentes. Deben ser accesibles desde todas las páginas del sitio con unas pocas excepciones (final del proceso de compra).

Otros elementos de navegación también siguen ciertas convenciones:

• Las migas de pan o “breadcrumbs” deben ir separadas por un símbolo y resaltar el último elemento.
• La navegación con pestañas debe resaltar la pestaña actual de las demás.

Si la navegación está bien diseñada debe permitir saber en todo momento:

• Saber el nombre del sitio
• En qué página estamos
• Cuales son las secciones principales
• Que puedo ver en la sección actual
• Donde estoy dentro de la jerarquía del sitio
• Como hacer una búsqueda

Capítulo 7 – La teoría del Big Bang del diseño web

El diseño web se asemeja a la teoría del Big Bang en que los primeros segundos son cruciales para entender todo lo demás.

Cuando un usuario llega a tu web a través de la página de inicio debe poder resolver estas preguntas:

• ¿Qué es esto?
• ¿Qué puedo hacer aquí?
• ¿Qué tienen aquí?
• ¿Por qué debería estar aquí y no en otro sitio?

Si los usuarios no tienen claro en que lugar están desde un principio estarás fallando estrepitosamente.

Aunque los usuarios no lleguen a tu sitio a través de la página de inicio, es muy posible que accedan a ella para saber de qué es lo que ofreces.

Elementos que son importantes para orientar a los usuarios:

• Un espacio prominente en la parte superior de la home page es un lugar excepcional para explicar qué es tu sitio, qué solución o producto ofrece y qué le hace diferente.
• Si el sitio es un poco más complicado de entender de lo normal quizás necesite una sección de primeros pasos o ayuda.

Una buena home page debe entonces contener:

• Objetivo del sitio y su misión
• Una clara jerarquía del sitio (menú navegación)
• Elementos del diseño que atraigan hacia las partes importantes de la web y otras partes menos relevantes
• Mostrar los contenidos más recientes publicados ayuda a mejorar la confianza del sitio

Además la home debe reforzar que:

• El usuario puede encontrar aquello que está buscando.
• La web ofrece algo adicional a lo que el usuario está buscando.
• Es evidente por donde empezar su tarea, ya sea una búsqueda, navegación, compra, iniciar sesión etc.
• Establecer credibilidad y confianza.

En otras ocasiones puede ser importante añadir:

• Promociones sujetas a un espacio de tiempo como ofertas de temporada
• Registro o login prominente.

Capítulo 8 – ¿Cómo evitar debates absurdos sobre usabilidad?

Las agencias de diseño web suelen tener en sus equipos diferentes perfiles: Diseñador gráfico, desarrollador, experto en marketing y gestor de proyecto, entre otros.

Cada uno puede tener una idea diferente sobre qué es lo que al usuario medio le gusta. Debido a que cada uno tiene unos gustos diferentes.

En vez de plantear un debate sobre: ¿este elemento le gusta al usuario medio?. El debate debería orientarse hacia: ¿este elemento, diseñado de esta manera, con estos elementos en concreto, en esta página en concreto, en este contexto, funciona con nuestro usuario medio?. Y la forma de responder a esto es llevando a cabo tests de usabilidad.

Capítulo 9 – Tests de usabilidad

Este es uno de los capítulos más largos y complejos del libro. Tanto es así, que el autor tiene un libro exclusivamente para hablar de este tema:

👉 Haz fácil lo imposible. El libro habla sobre como hacer tests de usabilidad sin tener que contratar a un profesional.

Algunos conceptos en cuanto a los tests de usabilidad:

• Si quieres un gran sitio necesitas hacerlos. (Especialmente interesante para Ecommerce o servicios complejos)
• Hacer un test a una sola persona es 100% mejor que ningún test.
• Testear a un solo usuario en una fase temprana del desarrollo es mejor que a muchos al final.
• El objetivo de los test es detectar los principales problemas de usabilidad, no todos.
• Por cada usuario que haga el test se deben extraer los tres principales problemas encontrados.
• Crea tareas específicas a realizar (Crear una cuenta nueva, recuperar una contraseña, buscar una categoría concreta).

Capítulo 10 – Usabilidad para diseño móvil

Algunos aspectos acerca de la usabilidad de sitios web en dispositivos móviles:

• Los principios de usabilidad siguen siendo los mismos.
• Los usuarios de móvil leen todavía menos texto.
• Algunos elementos deben ser eliminados (por ejemplo de la home page) lo que no significa que no puedan ser accedidos.
• Diseñar para una navegación móvil (menor velocidad, menos espacio) no debe ser hecho a costa de la usabilidad.
• Tendencias como el diseño plano (flat design), o diseños minimalistas pueden repercutir en la usabilidad.
• La ausencia de cursor en el móvil, y por consiguiente de efectos tipo hover (algo cambia cuando pasamos el cursor por encima), también afecta la usabilidad.

Capítulo 11 – Usabilidad como cortesía

Más allá de como organizar la información, dar pistas sobre el funcionamiento del sitio y crear una experiencia de navegación agradable, existen ciertos aspectos a tener en cuenta que también van a alterar la imagen que genera un sitio web:

• Ocultar información de utilidad (número de teléfono, gastos de envío, costes ocultos).
• Pedir información que no es del todo necesaria (formularios con demasiados campos).
• Atención al cliente lenta, mal organizada, mal atendida etc.

Otros, sin embargo, van a mejorarla:

• Saber qué buscan los usuarios y ponerlo en una posición visible y que sea fácil de usar.
• Ofrecer información de interés que puede suponer un problema. Por ejemplo, información sobre los tiempos de entrega de un pedido en Ecommerce.
• Crear una buena página de preguntas frecuentes

Capítulo 12 – Accesibilidad

Una parte importante de la población sufre de algún impedimento para poder visualizar correctamente una página web.

Aunque la tendencia es a mejorar cada vez más la accesibilidad de los sitios web, puede que diseñadores o desarrolladores traten de ignorarlo con la intención de ahorrar trabajo y no dificultar más el desarrollo.

Por otra parte, existen condiciones específicas que nos afectan a todos, como mirar una pantalla en un día con mucha luz cuando estamos en la calle. Esto hace imposible leer ciertas webs que no cuidan las recomendaciones en cuanto a contraste entre colores de fondo y texto.

Aspectos para mejorar la accesibilidad:

• Utilizar el campo “alt” de las imágenes.
• Utilizar las etiquetas <H1><H2> etc. correctamente y que sean fácil de distinguir entre ellas
• Rellenar la etiqueta <label> de los formularios.
• Utilizar un contraste alto entre texto y fondo.
• Utilizar un tema de WordPress que sea accesible.

Conclusión

Este libro se ha ido actualizando con el tiempo y recopila una serie de consejos de usabilidad imprescindibles. Se ha convertido en un libro básico para cualquier profesional del diseño web y otros perfiles que intervienen en la creación de sitios web.

👉 No me hagas pensar.