El usuario no ha venido a ver tu página
Esta es una de las cosas más importantes que se pueden olvidar al diseñar una página web.
La empresa mira su sitio como un todo. Ve el logotipo, el encabezado, las imágenes, la oferta, los argumentos de venta, los botones, las referencias, el formulario, el menú y toda la información que se ha preparado cuidadosamente.
El usuario ve algo completamente distinto.
Al ver la página, normalmente no se pregunta: «Qué interesante, ¿cómo ha diseñado la empresa su estructura de información?». Tampoco analiza conscientemente todo el diseño.
Tiene un objetivo concreto.
Quiere encontrar el precio. Comprobar si la empresa ofrece un servicio concreto. Averiguar si se puede confiar en el proveedor. Encontrar un número de teléfono. Comparar soluciones. Comprobar si el producto encajará con sus necesidades.
Y precisamente por eso el usuario no ve la página como la ve su creador.
Su atención es selectiva. Busca información que pueda ayudarle a alcanzar su objetivo, y a menudo omite el resto de elementos. Los estudios de usabilidad llevan años mostrando que los usuarios pueden ignorar elementos que están literalmente en pantalla si no encajan con su objetivo actual o parecen contenido publicitario.
Esto lleva a una conclusión muy importante: No basta con colocar la información en la página. También hay que diseñar las condiciones para que el usuario la perciba, la entienda y la considere relevante.
¿Por qué hacemos clic en algo?
El clic es el final de un breve proceso de decisión.
Primero el usuario debe notar el elemento, luego entender qué puede ocurrir al usarlo, evaluar si merece la pena realizar la acción y considerar que el coste de esa acción es aceptable.
Así que podemos simplificar el proceso: atención → interpretación → evaluación → decisión → acción
Eso no significa que cada usuario ejecute conscientemente cinco pasos consecutivos. Muchas decisiones son muy rápidas y automáticas. Precisamente por eso el diseño de interfaces está tan estrechamente relacionado con la psicología de la percepción y la toma de decisiones.
El botón «Comprar ahora» puede ser perfectamente visible, pero si el usuario no sabe exactamente qué está comprando, no hará clic.
El botón «Enviar» puede funcionar técnicamente sin problemas, pero si el usuario no sabe qué sucederá al enviar el formulario, puede detenerse.
El enlace «Más información» puede ser estético, pero si no queda claro qué va a saber el usuario, su valor es mucho menor.
Por eso un buen UX no consiste en obligar al usuario a hacer clic.
Consiste en diseñar adecuadamente el camino desde la necesidad hasta la acción.
La atención es un recurso limitado
A menudo los diseñadores actúan como si el usuario dispusiera de un presupuesto de atención ilimitado...
- Cada elemento parece importante.
- El encabezado es importante.
- La oferta es importante.
- Los certificados son importantes.
- Las opiniones de los clientes son importantes.
- La imagen es importante.
- El caso de estudio es importante.
- El boletín es importante.
- La promoción es importante.
- El contacto es importante.
El problema es que, si todo debe ser lo más importante, el usuario no recibe información sobre qué es lo más importante ahora.
La atención selectiva es un mecanismo natural para limitar la cantidad de estímulos. El usuario se concentra en una parte de la información relacionada con su tarea actual y puede ignorar el resto. En estudios de usabilidad se han observado situaciones en las que los usuarios no percibían elementos importantes de la interfaz precisamente porque su atención estaba centrada en otra cosa.
Por eso una página puede estar llena de información y, al mismo tiempo, dar la impresión de que no hay nada en ella.
No porque el usuario no preste atención.
Sino porque su atención es selectiva.
«Pero si este botón es enorme»
Este es uno de los argumentos de diseño más frecuentes.
«Pero si el CTA es grande».
«Está en un color llamativo».
«Lo hemos colocado arriba del todo».
«Es imposible no verlo».
Pero que «sea imposible no verlo» desde la perspectiva del diseñador no significa «el usuario lo considerará importante».
Se puede aumentar la exposición visual de un elemento, pero no se puede obligar al usuario a considerarlo importante.
Si el usuario busca el precio y la página destaca sobre todo un enorme eslogan de marketing, puede pasar con la vista por encima del CTA, porque su atención está dirigida a resolver un problema concreto.
Si busca información técnica, puede ignorar la imagen.
Si quiere contactar con la empresa, puede saltarse la extensa descripción de la historia de la compañía.
Si quiere comprar un producto, puede omitir la mitad del texto e ir directamente a buscar el precio, las variantes y las condiciones de entrega.
La visibilidad no es lo mismo que la relevancia.
¿Por qué ignoramos las cosas que parecen publicidad?
Internet ha enseñado a los usuarios ciertos patrones.
Si algo parece un banner, está en un lugar típico de publicidad, está demasiado animado o tiene un estilo promocional característico, el usuario puede reducir automáticamente la atención que dedica a ese elemento.
A este fenómeno se le llama banner blindness, es decir, ceguera a los banners.
Lo importante es que no afecta solo a la publicidad.
Un elemento puede contener información realmente valiosa, pero si visualmente parece un anuncio, el usuario puede tratarlo como tal y pasarlo por alto.
Los estudios de eyetracking de Nielsen Norman Group confirmaron este mecanismo en distintas formas de interfaz. Los usuarios aprendieron a ignorar áreas y elementos que recuerdan a la publicidad, incluso cuando en un caso concreto contenían contenido útil.
Es una lección importante para el marketing.
Más color, una fuente más grande y un mayor destaque no siempre significan más atención.
A veces precisamente por una exposición excesiva el elemento empieza a parecer algo que debe omitirse.
El usuario no lee la página. Normalmente la escanea
Una página web muy rara vez se lee de principio a fin como un libro.
Primero, el usuario escanea:
- Busca encabezados.
- Información destacada.
- Precios.
- Nombres de productos.
- Botones.
- Elementos de navegación.
- Palabras relacionadas con su problema.
Solo cuando algo responde a su necesidad, puede dedicarle más atención.
Esto significa que diseñar contenidos no debería consistir solo en escribir un buen texto. También hay que crear una jerarquía de la información.
Si todos los fragmentos de texto tienen un tamaño similar, un peso visual parecido y un ritmo similar, el usuario debe hacer por sí mismo el trabajo de determinar qué es importante.
Cuanto más trabajo tenga que hacer, mayor será el riesgo de que abandone.
Por eso una buena interfaz responde a la pregunta del usuario: «¿En qué debo fijarme en este momento?»
No mediante la instrucción «mira aquí», sino mediante la estructura adecuada de la información.
La primera impresión actúa más rápido de lo que piensas
Antes de que el usuario lea los detalles de la oferta, evalúa la página como un todo:
- ¿Parece profesional?
- ¿Parece actual?
- ¿Parece la página de una empresa en la que se puede confiar?
- ¿Se entiende a qué se dedica la empresa?
- ¿Parece segura?
- ¿Se puede ver dónde hacer clic?
Eso significa que la capa visual de la página no es solo decoración.
Es parte del mensaje.
Un diseño moderno puede comunicar competencia tecnológica. Una tipografía ordenada puede sugerir precisión. Buenas fotos pueden reforzar la credibilidad. Una marca coherente puede aumentar el reconocimiento.
Pero también funciona al revés.
Información desactualizada, tipografía aleatoria, botones incoherentes, fotos de stock que no encajan con el sector o errores de lenguaje pueden socavar la credibilidad antes de que el usuario conozca la oferta real.
Por eso UX y branding no deberían tratarse como dos áreas completamente separadas.
El usuario no los separa en «diseño» y «marketing».
Los percibe como una sola señal: «¿Puedo confiar en esta empresa?»
La confianza influye en la disposición a actuar
Hacer clic no tiene por qué significar comprar.
Puede significar ir a la oferta, abrir un formulario, descargar un documento, iniciar la configuración de un producto o pasar a la siguiente etapa.
En cada caso, el usuario asume cierto riesgo:
- ¿Después de hacer clic seré llevado al lugar que espero?
- ¿Perderé datos?
- ¿El formulario será largo?
- ¿Alguien empezará a llamarme?
- ¿El precio estará oculto?
- ¿La compra comenzará después de hacer clic?
- ¿La página no me redirigirá a algún lugar desconocido?
Precisamente por eso el microcopy tiene importancia.
«Enviar» dice poco.
«Solicita un presupuesto gratuito» dice mucho más.
«Comprueba la disponibilidad» tiene un significado distinto de «Comprar».
«Empieza una prueba gratuita» reduce preocupaciones distintas a «Crear una cuenta».
Un buen texto de acción reduce la incertidumbre.
¿Por qué la simplicidad a menudo aumenta la probabilidad de actuar?
El usuario no quiere tomar decisiones innecesarias.
Si tiene que elegir entre tres opciones, puede hacerlo rápidamente.
Si tiene que elegir una entre once, tendrá que dedicar más atención a compararlas.
Si además cada opción tiene condiciones, limitaciones y consecuencias distintas, aumenta el coste cognitivo de todo el proceso.
Por eso simplificar la interfaz no significa solo «menos elementos».
También significa menos decisiones innecesarias.
En el diseño de comportamientos a menudo se cita el modelo de BJ Fogg, según el cual el comportamiento aparece cuando al mismo tiempo están presentes la motivación, la capacidad de realizar la acción y el estímulo adecuado. En la práctica, esto significa entre otras cosas que incluso un mensaje muy atractivo no basta si la acción en sí es demasiado difícil.
Si el usuario quiere comprar un producto, pero tiene que:
- crear una cuenta,
- confirmar el correo electrónico,
- introducir una docena de datos,
- elegir un servicio adicional,
- leer varios mensajes,
- pasar por tres pantallas,
- y solo entonces ver el precio,
el problema puede no ser la falta de motivación.
El problema puede ser el coste demasiado alto de realizar la acción.
Hacer clic no siempre significa éxito
Es una distinción muy importante.
Podemos tener una tasa de clics excelente y al mismo tiempo un mal resultado de negocio.
El usuario hace clic en un anuncio, pero regresa enseguida.
Hace clic en el botón «Ver oferta», pero no encuentra lo que busca.
Abre el formulario, pero no quiere dar su número de teléfono.
Va al carrito, pero no confía en el método de pago.
Por lo tanto, hacer clic es solo una de las etapas del recorrido.
Por eso no se debe optimizar la página únicamente en función del número de clics.
Las mejores preguntas son:
- ¿El usuario realizó la acción que necesitaba?
- ¿Llegó al lugar correcto?
- ¿Entendió la oferta?
- ¿Avanzó?
- ¿Logró su objetivo y al mismo tiempo cumplió el objetivo de negocio de la página?
Esto es especialmente importante en el caso de los CTA diseñados únicamente para aumentar el CTR. Se puede crear un botón que atraiga muchísima atención, pero si la promesa contenida en el CTA no corresponde a lo que el usuario recibe tras hacer clic, el aumento a corto plazo de los clics puede empeorar la experiencia y la confianza.
¿Por qué el usuario a veces hace scroll, aunque la información más importante esté arriba?
«Todo debe estar above the fold» es uno de los mitos simplificados del diseño web.
Los usuarios hacen scroll.
Por lo tanto, el problema no es colocar la información más abajo en la página. El problema es no dar una razón para ir allí.
Si la primera parte de la página comunica claramente:
- qué es el producto,
- para quién está destinado,
- qué problema resuelve,
- qué puede hacer el usuario después,
entonces las secciones siguientes pueden desarrollar la historia de forma natural.
El usuario puede querer ver las funciones, las pruebas de credibilidad, ejemplos de implementaciones, respuestas a preguntas o detalles técnicos.
Sin embargo, si la primera parte de la página es poco clara, hacer scroll no resuelve el problema.
El usuario no sabe si vale la pena seguir buscando.
Los estudios sobre la atención y el scroll muestran que los usuarios prestan más atención a la información situada en el área visible inicialmente, pero eso no significa que todo el contenido valioso deba encontrarse antes del primer desplazamiento. Lo clave es crear una jerarquía adecuada y motivar a seguir explorando el contenido.
¿Por qué a veces ignoramos algo que acaba de cambiar?
Es otro mecanismo interesante.
El diseñador sabe que acaba de aparecer una ventana.
Sabe que ha cambiado el color del botón.
Sabe que en la pantalla ha aparecido un mensaje.
Sabe que el formulario se ha actualizado.
El usuario puede no darse cuenta.
Este fenómeno está relacionado, entre otras cosas, con change blindness, es decir, la ceguera al cambio. Si el cambio ocurre fuera del área de atención actual del usuario o no se comunica de manera adecuada, puede pasar desapercibido.
Esto es especialmente importante en las aplicaciones.
Si después de realizar una operación aparece un pequeño mensaje en la esquina de la pantalla, es posible que el usuario no lo vea.
Si cambia el estado de un formulario, pero el cambio es sutil, el usuario puede pensar que no ha pasado nada.
Si el sistema ha realizado una operación importante, pero la retroalimentación es demasiado débil, el usuario puede hacer clic de nuevo.
Como consecuencia, aparecen errores, duplicados de operaciones y frustración.
La interfaz debe comunicar el cambio donde el usuario lo espera y de una manera lo suficientemente clara como para no obligarle a buscarlo por su cuenta.
El usuario no debería tener que “aprender” la página
Una buena interfaz aprovecha las convenciones existentes:
- El logotipo suele llevar a la página de inicio.
- El menú se ve como un menú.
- Un enlace se ve como un enlace.
- Un botón se ve como un elemento interactivo.
- El carrito recuerda a un carrito.
- El campo de búsqueda se ve como un campo de búsqueda.
No es casualidad.
El usuario llega con una experiencia adquirida en otras páginas y en otras aplicaciones. Si la interfaz se comporta según sus expectativas, el usuario puede aprovechar ese conocimiento.
Si el diseñador intenta ser “original” a toda costa, puede obligar al usuario a aprender una nueva forma de uso.
Y cada cosa adicional que hay que aprender aumenta el esfuerzo cognitivo.
La originalidad tiene sentido cuando apoya la experiencia.
No cuando dificulta las tareas básicas.
¿Qué es lo que realmente provoca el clic?
No existe un único elemento universal “mágico” que haga que todos los usuarios hagan clic.
El clic es el resultado de una combinación de factores.
Relevancia
El usuario debe tener un motivo para interesarse por el elemento.
“Mira nuestras soluciones” puede ser correcto, pero poco concreto.
“Descubre la solución para tiendas online” está más relacionado con una necesidad concreta.
Claridad
El usuario debe saber qué ocurrirá después de hacer clic.
Cuanta mayor sea la incertidumbre, mayor será la barrera.
Visibilidad
El elemento debe poder encontrarse, pero eso no significa que tenga que gritar con color y animación.
Contexto
El mismo botón puede funcionar muy bien en un lugar y mal en otro.
“Contáctanos” al final de la página puede ser el siguiente paso natural.
Ese mismo botón sin ningún contexto en la primera pantalla puede ser prematuro.
Confianza
El usuario debe tener un nivel suficiente de certeza de que el clic no traerá una consecuencia no deseada.
Coste de la acción
Cuanto más esfuerzo requiera el siguiente paso, mayor importancia tendrá la motivación y el valor ofrecido al usuario.
Momento
Incluso un buen CTA puede aparecer demasiado pronto.
Si el usuario acaba de enterarse de qué es el producto, un “Compra ahora” inmediato puede ser menos eficaz que “Mira cómo funciona”.
El mayor error: diseñar para uno mismo
Este es uno de los problemas más frecuentes en los proyectos digitales.
- El equipo conoce el producto.
- Conoce todas las funciones.
- Conoce los atajos mentales.
- Sabe dónde está determinada información.
- Sabe por qué la empresa eligió una solución concreta.
- Sabe qué significa cada término.
El usuario no lo sabe.
Por eso la persona que diseña la página puede considerar que un elemento es obvio, mientras que el usuario ni siquiera lo nota.
Precisamente por eso las pruebas de usabilidad son tan importantes.
No basta con preguntar al equipo: “¿Aquí se entiende qué hay que pulsar?”.
El equipo conoce la respuesta.
Es mejor observar a una persona que no conoce el proyecto y comprobar qué hace realmente.
En UX existe una regla simple, pero muy valiosa: el comportamiento del usuario es más valioso que sus declaraciones sobre lo que haría o querría hacer.
¿Cómo diseñar en función del comportamiento real del usuario?
1. Empieza por el objetivo del usuario
No por la página.
No por el menú.
No por el manual de marca.
Primero responde a la pregunta: ¿para qué ha venido el usuario?
Una interfaz distinta será necesaria para quien quiera comprar un producto, otra para quien busque documentación, y otra para el cliente que solo quiere encontrar el número de teléfono.
2. Define de forma inequívoca la acción principal
No todas las páginas tienen que tener cinco CTA equivalentes.
Piensa qué acción es la más importante en esa etapa.
3. Diseña jerarquía, no decoración
El tamaño, el contraste, el espacio, la tipografía, la posición y el orden de los elementos deben comunicar significado.
4. No intentes destacar todo
Si todo es rojo, nada es rojo.
Si todo está en negrita, nada tiene un peso especial.
Si cada elemento está animado, el usuario no sabe en qué centrarse.
5. Reduce la incertidumbre
Informa al usuario de lo que ocurrirá después de hacer clic.
Si la acción lleva a un formulario, se puede comunicar claramente.
Si inicia un proceso gratuito, también conviene decirlo.
6. Prueba en lugar de adivinar
Pide a una persona que no conozca el proyecto que realice una tarea concreta.
No preguntes solo: “¿Te gusta la página?”.
Observa:
- dónde mira,
- qué busca,
- en qué hace clic,
- qué ignora,
- dónde se detiene,
- qué interpreta de forma distinta a como lo habían previsto los diseñadores.
7. Mide el comportamiento
Analytics, grabaciones de sesión, embudos, experimentos A/B y datos de errores pueden decir más que la opinión de unas pocas personas del equipo.
Pero también aquí hace falta contexto. Los datos muestran qué ocurrió. Las investigaciones cualitativas ayudan a entender por qué.
Indicaciones y contraindicaciones: ¿cuándo tiene mayor importancia la psicología UX?
La psicología digital es especialmente útil allí donde el usuario debe tomar una decisión:
- tienda online,
- formulario de contacto,
- landing page,
- aplicación SaaS,
- sistema B2B,
- proceso de registro,
- onboarding,
- aplicación móvil,
- sistema de pagos,
- configurador de producto,
- servicio que requiere buscar una información concreta.
Conviene analizar especialmente el comportamiento de los usuarios cuando la página tiene mucho tráfico pero pocas conversiones, los usuarios abandonan los formularios, no utilizan funciones importantes o preguntan regularmente por información que teóricamente ya está en la página.
¿Cuándo no hay que exagerar?
La psicología UX no es un conjunto de trucos para manipular al usuario.
No debe servir para:
- ocultar información importante,
- dificultar la renuncia,
- diseñar CTA engañosos,
- forzar consentimientos,
- ocultar costes,
- de crear una falsa sensación de urgencia,
- de diseñar dark patterns.
Si el usuario hace clic porque ha sido inducido a error, eso no es un buen UX.
Es solo una trampa bien optimizada.
Un buen diseño ayuda al usuario a realizar una acción que entiende y que está alineada con su intención.
La psicología digital no consiste en manipular a la gente
Es una distinción importante.
Se puede utilizar el conocimiento sobre el comportamiento humano para diseñar un formulario más simple.
Se puede utilizar para que el usuario encuentre la información más rápido.
Se puede mejorar la jerarquía de la página para que no tenga que buscar el elemento más importante.
Se puede limitar el número de decisiones innecesarias.
Se pueden diseñar mejores mensajes de error.
Se puede hacer que el usuario sepa qué ocurrirá después de hacer clic.
Todo eso es uso de la psicología en el diseño.
La manipulación comienza cuando el diseño utiliza las limitaciones del usuario en su contra.
El límite también es importante desde el punto de vista comercial.
La empresa puede aumentar el número de clics mediante un CTA agresivo, pero si el usuario, después de varias experiencias así, empieza a percibir la marca como insistente o poco fiable, la conversión a corto plazo puede lograrse a costa de una pérdida de confianza a largo plazo.
La pregunta más importante no es «¿Hará clic el usuario?»
La mejor pregunta es: «¿Por qué habría de hacer clic precisamente aquí, precisamente ahora?»
Si la respuesta es: «Porque el botón es grande», entonces tenemos un problema.
Si la respuesta es: «Porque el usuario acaba de recibir la información que necesitaba, comprende el siguiente beneficio, sabe qué ocurrirá después de hacer clic y el coste de realizar la acción le parece aceptable», entonces empezamos a hablar de diseño de experiencia.
Hacer clic no es un movimiento aleatorio del cursor.
Es el resultado de cómo el usuario interpreta la información, cómo evalúa la situación y qué valor ve en realizar el siguiente paso.
Por eso el buen UX no lucha por la atención del usuario.
Un buen UX ayuda al usuario a dirigir su atención hacia donde realmente la necesita.
Y si la página puede hacerlo sin gritar, sin manipulación y sin cinco botones parpadeantes de «COMPRA AHORA», entonces es cuando empieza a funcionar de verdad bien.
Glosario de términos
UX (User Experience) - el conjunto de experiencias del usuario relacionadas con el uso de un producto, servicio o sistema.
UI (User Interface) - la capa de interfaz con la que el usuario se comunica directamente.
CTA (Call to Action) - un elemento que anima al usuario a realizar una acción concreta, por ejemplo una compra, un contacto o iniciar un proceso.
Atención selectiva - mecanismo de dirigir la atención limitada hacia ciertos estímulos mientras se omiten otros.
Banner blindness - tendencia de los usuarios a ignorar elementos que se parecen a anuncios o que están colocados en lugares asociados con la publicidad.
Change blindness - fenómeno que consiste en no percibir cambios que ocurren fuera del área actual de atención.
Mikrocopy - mensajes breves que apoyan al usuario en la interfaz, por ejemplo textos de botones, formularios, errores e instrucciones.
Jerarquía de la información - forma de ordenar los elementos según su importancia y el orden en que el usuario debería percibirlos.
Dark patterns - patrones de diseño que utilizan el comportamiento y las limitaciones del usuario de una manera que lo empuja a acciones contrarias a su intención original o le dificulta tomar una decisión consciente.
Fricción / rozamiento - esfuerzo cognitivo u operativo necesario para realizar una acción.
Para terminar
Una página web no es una presentación de la empresa.
Es un entorno en el que una persona toma decisiones.
Por eso el diseño debería empezar no con la pregunta: «¿Qué queremos mostrar?»
sino con la pregunta: «¿Qué intenta hacer aquí el usuario y qué necesita para hacerlo sin esfuerzo innecesario?»
Solo desde esta perspectiva se puede diseñar de forma sensata la estructura, los contenidos, los CTA, la navegación, los formularios, los mensajes, la marca y todo el recorrido del usuario.
Porque el usuario no hará clic porque la empresa considere que debería hacerlo.
Hará clic cuando vea el sentido de esa acción, comprenda sus consecuencias y considere que vale la pena dar el siguiente paso.
