Es frecuente recibir una petición formulada así: «queremos un sitio más bonito». Es una petición legítima y casi siempre esconde otra pregunta: el sitio actual no consigue lo que debería. Las personas llegan y se marchan, o llegan y no entienden qué hacer.

Hacerlo más bonito solo resuelve una parte del problema. La estética determina la primera impresión, pero no decide si alguien sigue leyendo, confía, entiende qué puede obtener y finalmente escribe. Eso lo decide la experiencia: el modo en que la página guía a quien la está mirando.

Estética y experiencia no son lo mismo

La estética es lo que se ve en una imagen fija: colores, tipografía, imágenes y espacios. La experiencia es lo que ocurre a lo largo del tiempo mientras alguien se desplaza, lee, se detiene, vuelve atrás, abre una página o cambia de opinión.

Un sitio puede ser impecable en una captura y fallar por completo durante el uso. Sucede cuando todas las secciones tienen el mismo peso visual, los textos tienen la misma longitud o hay seis botones en una pantalla y ninguno es más importante que los demás. Nada orienta a quien mira y la reacción natural es cerrar.

Una experiencia eficaz no pide al usuario que elija qué mirar primero. El diseño lo decide y comunica la elección sin necesidad de explicarla.

Jerarquía: alguien debe decidir qué se lee primero

La jerarquía es la parte menos vistosa del trabajo y la que produce el mayor efecto. Significa establecer, para cada pantalla, qué debe leerse primero, qué viene después y qué puede no leerse.

En la práctica son pocas reglas aplicadas con disciplina:

  • una única acción principal por pantalla, visible sin tener que buscarla;
  • diferencias de tamaño claras, porque un título un 15 % mayor que el texto no crea jerarquía;
  • contraste utilizado como herramienta, no solo como requisito de accesibilidad;
  • espacio alrededor de lo importante, la forma más sencilla de darle peso a un elemento.

Cuando la jerarquía funciona, una persona puede recorrer la página durante diez segundos y explicar de qué trata. Merece la pena hacer esta prueba con cualquier página de inicio.

Legibilidad y ritmo

La legibilidad sigue reglas conocidas: líneas de entre sesenta y setenta y cinco caracteres, interlineado generoso, contraste suficiente y párrafos breves. Son límites técnicos que pueden comprobarse.

El ritmo está menos codificado y distingue una página agradable de una agotadora. Es la alternancia entre bloques densos y abiertos, texto e imagen, secciones que exigen atención y secciones que la devuelven. Una página con quince secciones idénticas cansa aunque cada una esté bien diseñada, como un texto compuesto solo por frases de igual longitud.

El ritmo se diseña pensando en la secuencia, no en pantallas aisladas. Por eso tiene poco sentido aprobar una página mirándola por fragmentos.

El contenido va antes que el layout

Un layout creado con texto de prueba aguanta hasta que llega el contenido real. El título que ocupaba dos líneas pasa a cuatro, la descripción prevista para treinta palabras necesita noventa y el contenido termina recortado para entrar en el diseño.

El orden correcto es el contrario. Primero se decide qué hay que decir y en qué secuencia, y después se crea la forma que lo sostiene. Un sitio es, ante todo, una sucesión de argumentos, y su orden es una decisión del negocio, no solo del diseñador.

Cuándo el movimiento es realmente útil

El movimiento sirve cuando comunica algo que, sin él, necesitaría una explicación.

Movimiento que orienta

Un elemento que aparece desde abajo durante el desplazamiento señala que empieza una nueva sección. Una transición entre páginas indica que se ha producido un cambio y que el sitio entendió la intención. Un menú que se abre de forma coherente muestra de dónde procede y adónde volverá. En todos los casos, la animación responde a una pregunta implícita: ¿qué acaba de ocurrir?

Microinteracciones

Son respuestas inmediatas a los gestos: un botón que reacciona al pulsarlo, un campo que confirma haber recibido el dato o una tarjeta que se eleva apenas al pasar el puntero. Duran menos de dos décimas de segundo y muestran que el sistema ha registrado la acción.

Un detalle que suele olvidarse: en el teléfono no existe el hover. La información que solo aparece al pasar el ratón no se comunica a nadie en el móvil.

Más animación no significa una experiencia mejor

El movimiento tiene un coste, y lo paga quien intenta hacer algo.

Una animación de entrada en cada párrafo convierte la lectura en una sucesión de esperas. Manipular el scroll quita el control de un gesto conocido. Un paralaje intenso dificulta mantener el punto de lectura. Para las personas con trastornos vestibulares no es solo molesto: puede provocar reacciones físicas. El sistema operativo permite solicitar movimiento reducido y un sitio bien hecho respeta esa preferencia.

Nuestra regla práctica es sencilla: uno o dos momentos de movimiento reconocibles por página; el resto es respuesta funcional. Si una animación no puede contestar «¿qué comunica?», solo comunica que alguien sabía hacerla.

El rendimiento forma parte de la experiencia

Una página que tarda cinco segundos en aparecer no tiene un problema técnico independiente para después. Tiene un problema de experiencia y es el primero que encuentra el usuario.

Importa especialmente en movilidad, donde la conexión varía y la atención es breve. Las imágenes sin optimizar, el exceso de fuentes, los scripts de terceros que bloquean el renderizado y los elementos que se desplazan durante la carga son errores de diseño igual que una mala jerarquía. El contenido principal debería poder leerse de inmediato, sin esperar a JavaScript.

Hay un efecto secundario útil: un sitio rápido puede permitirse mayor calidad visual porque no ha gastado su presupuesto en cosas que no se ven.

El móvil no es una versión reducida

Reducir la tipografía y apilar las columnas no es diseñar para el teléfono. En una pantalla estrecha cambian las prioridades: la secuencia de los argumentos importa más que la composición, las zonas táctiles necesitan tamaño real, los menús largos son obstáculos y lo que estaba en paralelo en escritorio necesita un orden de lectura que tenga sentido por sí solo.

Diseñar para móvil significa volver a decidir qué va primero, no comprimir lo decidido para un monitor de veintisiete pulgadas.

Qué significa diseñar una experiencia en la práctica

Significa usar diseño y tecnología para guiar la percepción y el comportamiento: hacer entender en pocos segundos de qué se trata, conducir hacia la información necesaria, mostrar con claridad el siguiente paso y eliminar lo que no contribuye.

Cuando funciona, el resultado no se nota. Nadie sale de un sitio bien diseñado pensando «qué animación tan bonita». Sale sabiendo qué hace esa empresa y, si era el momento adecuado, habiendo contactado.

La estética sigue siendo importante. Es la primera frase de la conversación y una mala primera frase puede cerrarla. Pero es la primera, no toda la conversación.

ProfundizaSitios web