Diseñar una web que funcione: estructura, jerarquía y ritmo

Después de años dentro del mundo del diseño, todavía me hago la misma pregunta: ¿qué hace exactamente que una página web tenga un diseño funcional?

No es que sea una web potente o no. He visto webs impecables que no sirven demasiado y webs discretas que resuelven el trabajo de la gente cada día sin que nadie repare en ello. Para mí, la diferencia no está en el acabado visual. Está en si la página entiende por qué hay alguien delante. De eso hablamos, al final, cuando hablamos de usabilidad web: no de una capa que se aplica al final, sino de si una persona puede hacer lo que ha venido a hacer.

Yo no trabajo una web como un lugar donde colocar información. La trabajo como un recorrido de decisiones. Y hay tres cosas que determinan si ese recorrido puede hacerse o no: que la página permita hacer algo, que se entienda sin esfuerzo y que se lea con cierto ritmo. Funcional, intuitiva y con ritmo.

Antes, sin embargo, hay una decisión que condiciona las tres y que a menudo se toma demasiado deprisa: la estructura.

Antes del diseño

¿Qué objetivo tiene el cliente? ¿Cuántas páginas hacen falta? ¿Cuál depende de cuál y qué debe poder encontrar alguien que llega sin saber nada? ¿Qué secciones debe tener y en qué orden deberían aparecer? Son algunos ejemplos de las preguntas que nos hacemos después de investigar y de entender el contexto de la marca.

Esta parte no la hago sola, y vale la pena decirlo porque creo que es una de las razones por las que después funciona. El mapa lo trabajamos en equipo: participa quien lleva la estrategia, quien se ocupa del SEO y el GEO, quien escribirá los contenidos y quien tendrá que desarrollar la web. Esta coordinación continúa durante todo el proyecto, especialmente en la relación entre diseño y desarrollo.

Yo aporto la mirada de diseño, que normalmente se concreta en una sola pregunta:

Esto que sobre el papel parece ordenado, ¿se entenderá dentro de una pantalla?

El mapa web no es un trámite previo. Es lo que determina si más adelante se podrá diseñar bien. Una estructura en la que todo cuelga del mismo nivel obliga a cada página a explicarse sola, porque no hay un contexto que la acompañe. Y una estructura con demasiados niveles obliga a navegar mucho para llegar a cualquier parte.

Que una empresa tenga tres divisiones no significa que quien busca un producto piense en tres divisiones: quizá piensa en el problema que quiere resolver, en el sector en el que trabaja o en el material. La estructura de una página web, y la del sitio entero, deberían partir de ahí.

De la misma decisión depende después la navegación web: los menús, los recorridos y el hecho de saber en todo momento dónde estamos. Un menú no es una lista de secciones; es la promesa visible de cómo está ordenado todo lo que hay debajo. Cuando esa promesa no coincide con la estructura real, la persona se pierde aunque el diseño sea impecable.

Cada página debería responder a una pregunta concreta que alguien se hace de verdad. Si no hay pregunta, probablemente esa página sea una sección de otra. También debemos tener en cuenta que, desde cualquier punto, debería ser posible llegar a lo que se busca en pocos pasos y sabiendo en todo momento dónde estamos.

Funcional: cada página debería saber qué permite hacer

La mayoría de las webs no existen para que alguien las contemple. Llegamos con alguna intención: comparar dos productos, entender si una empresa hace lo que necesitamos, encontrar un teléfono o comprobar una medida. Cuando una página no sabe qué acción facilita, acaba acumulando contenido según un criterio interno —el de quien más ha insistido— en lugar de hacerlo según un criterio de uso.

Por eso, la primera pregunta que me hago ante cualquier pantalla no es qué debe aparecer, sino qué debe poder hacer aquí una persona. E inmediatamente después: cuántas cosas le estamos pidiendo a la vez.

Esta segunda pregunta es la que más a menudo se pasa por alto. Decidir consume atención, y la atención no es ilimitada. Cuando una página presenta seis llamadas a la acción con el mismo peso, no gana ninguna: gana la duda.

Para mí, reducir opciones no es ocultar información. Es ordenarla en el tiempo.

Hay un criterio que aplico siempre: debería poder decir cuál es la acción principal de una página, cuál es la secundaria y qué hago con el resto. Si la respuesta es que todo tiene la misma importancia, todavía no tengo una página: tengo una lista de contenidos.

Intuitiva: entender sin tener que pensar

Cuando observo cómo se utiliza una web, veo que, antes de leerla, la gente la escanea. Es un comportamiento ampliamente estudiado en usabilidad web: Nielsen Norman Group lleva años documentando que los usuarios tienden a escanear el contenido antes de leerlo con detenimiento. En pocos segundos deciden si han llegado al lugar correcto, a menudo antes de haber leído una frase entera.

El tamaño, el contraste, la posición y el espacio comunican importancia por sí solos. Por eso trato la jerarquía visual como una cuestión de comunicación, no de estética. Cuando lo que destaca visualmente coincide con lo que la persona necesita primero, la página se entiende sola. Cuando no coincide, el lector debe hacer un esfuerzo adicional para averiguar qué es importante, y paga ese esfuerzo con una atención que ya no dedicará al contenido.

Hay una versión muy habitual de este desajuste: destacar lo que nosotros queremos destacar en lugar de aquello que resuelve la duda de quien está mirando. Es una jerarquía decorativa. Funciona en una presentación y deja de funcionar el día que alguien intenta utilizar la página de verdad.

Después están los patrones. Dónde se espera encontrar la navegación, qué parece clicable, cómo se comporta un enlace o qué significa un icono. Un diseño web intuitivo no es el que inventa nuevas formas de interactuar: es el que utiliza las que la persona ya conoce para que pueda dedicar su atención al contenido y no a la interfaz. Se puede innovar en la interacción —a veces merece mucho la pena—, pero tiene un coste real en la experiencia de usuario y debería aportar un beneficio concreto.

El filtro que utilizo es sencillo. Al llegar a cualquier pantalla, la persona debería saber tres cosas sin tener que preguntarlas:

• Dónde está.
• Qué puede hacer.
• Qué ocurrirá si lo hace.

Ritmo visual: la parte que no se nota hasta que falta

Esta es la parte de la que menos se habla y la que más procede de mi vertiente gráfica.

Leer una página es una experiencia que sucede en el tiempo, como escuchar algo. Y hay una regla que sirve para ambas: si todo suena igual de fuerte, dejamos de distinguir. Una página en la que cada sección tiene la misma densidad, la misma altura y el mismo peso visual se lee como una lista. No hay nada mal hecho y, aun así, se abandona a mitad de la lectura.

Cuando hablo de ritmo visual me refiero a la alternancia entre bloques que concentran información y bloques que respiran. El espacio en blanco no es espacio sobrante: es lo que hace legible lo que tiene al lado. Procede del diseño editorial y en pantalla funciona exactamente igual. Un bloque denso precedido de aire se asimila; el mismo bloque pegado a otro bloque denso se salta.

También existe una cadencia propia del scroll. Una página no se ve de una sola vez, sino que se va descubriendo, y para mí cada sección debería dar una razón para seguir bajando. Cuando tres secciones seguidas hacen la misma promesa con una decoración diferente, la persona lo nota aunque no sepa expresarlo, y se marcha.

Y después está el punto de inflexión: el momento en que la página deja de explicar y empieza a pedir. Su posición no es arbitraria. Depende de si ya hemos ofrecido suficiente información para que la petición tenga sentido.

Por lo que he ido observando, pedir demasiado pronto es uno de los motivos más frecuentes por los que un formulario bien diseñado no se completa. El formulario está bien. El lugar donde lo hemos puesto, no.

Todas estas decisiones siguen siendo las mismas aunque cambien las herramientas. La IA me ayuda cada vez más a explorar, probar y producir alternativas dentro del proceso de diseño, pero eso no modifica el criterio con el que las valoro. Es una idea que ya desarrollé al hablar de cómo integrar la IA en el diseño UX/UI sin perder el criterio ni la visión de usuario.

Inteligencia artificial y diseño web: qué está cambiando

No podía escribir sobre cómo diseño una web sin hablar de la IA, porque está cambiando una parte importante del trabajo. No tanto los principios con los que decido si una página funciona, sino la velocidad con la que puedo producir posibles respuestas.

Ahora es muy fácil generar una estructura, varias versiones de una misma pantalla, alternativas de jerarquía o una primera propuesta de contenidos. Yo lo aprovecho. El problema aparece cuando esa facilidad para producir se confunde con haber explorado mejor el problema.

Diez propuestas generadas en un minuto pueden tener colores, composiciones y recursos diferentes y, al mismo tiempo, estar tomando exactamente las mismas decisiones. Explorar no es acumular alternativas. Es entender qué decisiones podemos tomar de otra manera y por qué nos convendría hacerlo.

Esto se nota especialmente en la estructura. Puedo pedir a una IA que proponga un mapa web y obtener una respuesta ordenada en segundos. Pero, si no conoce suficientemente bien el proyecto, a los usuarios y la información real, rellenará los huecos con patrones plausibles. Las propias herramientas de diseño con IA están evolucionando precisamente para trabajar con más contexto real —componentes, sistemas y reglas— y evitar resultados demasiado genéricos.

Ocurre lo mismo con la función de una página. La IA puede proponer secciones, botones, argumentos y recorridos, pero eso no significa que sepa qué decisión debería tener más peso. Puede ofrecerme cinco CTA razonables; el trabajo de decidir cuál es el principal, cuál debe esperar y cuál no debería existir sigue dependiendo de entender qué necesita la persona en ese momento.

También puede reproducir patrones de interacción conocidos y construir una jerarquía visual aparentemente clara. Pero una interfaz no es intuitiva porque siga una convención o porque el resultado parezca familiar. Lo es cuando esa convención encaja con el contexto, el contenido y las expectativas concretas de quien debe utilizarla.

Y con el ritmo ocurre algo parecido. Generar composiciones atractivas es cada vez más fácil, pero eso no garantiza que una página tenga una cadencia que ayude a entenderla. Una sucesión de secciones visualmente impecables puede seguir siendo monótona si todas cumplen la misma función, tienen el mismo peso o piden exactamente lo mismo.

Por eso intento utilizar la IA para abrir posibilidades, no para dar las decisiones por resueltas. Me sirve para probar, comparar, enriquecer, cuestionar una primera idea o llegar antes a una representación que pueda revisar. Pero lo que sigue interesándome es lo mismo de antes: si la estructura responde a una manera real de buscar, si cada página sabe qué permite hacer, si la jerarquía ayuda a entender y si el ritmo acompaña el recorrido.

La IA también está cambiando lo que sucede antes de que una persona llegue a una web: cómo busca, compara y descubre empresas. Esta otra parte del problema la trabajamos desde la visibilidad en respuestas de IA y el GEO. Aquí, sin embargo, me interesa lo que ocurre cuando entramos en el terreno del diseño: cómo decidimos mejor cuando generar opciones resulta cada vez más fácil.

La usabilidad web no es una capa que se añade al final

Por separado, cada una de estas cosas se queda corta.

Una página con buen ritmo pero sin una función clara es agradable y no sirve para nada. Una página funcional sin ritmo se abandona antes de llegar al punto en que debería ocurrir algo. Y una página muy intuitiva puede conducir con una claridad ejemplar hacia ninguna parte. Las tres, además, dependen de un mapa que tenga sentido.

Por eso no las trato como fases y por eso no entiendo la usabilidad web como una revisión que se hace al final, cuando todo está ya diseñado. La usabilidad es el resultado de decisiones que se han tomado mucho antes: dónde va cada página, qué permite hacer, qué destaca y cómo se lee. Cuando se revisa al final, lo que puede arreglarse son los detalles; lo que se decidió mal en el origen ya no se toca.

Cuando reviso un diseño, me hago las tres preguntas sobre la misma decisión: qué permite hacer, cómo se entiende y cómo se lee. Si una decisión mejora una de las tres y empeora las otras dos, normalmente no es una buena decisión.

Lo que he ido entendiendo

El diseño que funciona casi nunca llama la atención sobre sí mismo. Al principio me costaba aceptarlo: le dedicas horas y el mejor resultado posible es que nadie diga nada.

Con el tiempo he ido cambiando lo que considero una buena señal. Ya no es que una página parezca impresionante en una pantalla grande. Es que alguien la utilice sin darse cuenta de que ha habido decisiones de diseño de por medio, llegue adonde quería llegar y no recuerde el camino.

Cuando eso ocurre, normalmente es porque las cuatro cosas estaban en su sitio: el mapa, la función, el orden y el ritmo.