Diseño web. Las columnas.

Diseño web a 1 columna, diseño web a 2 columnas y diseño web a 3 columnas… ¿qué diferencia hay?.

A continuación vamos a analizar la arquitectura de una home hecha a 3 columnas. Este dipo de diseño web lleva mucho tiempo implantado y aún se siguen haciendo nuevos diseños de sitios con esta fórmula.

Vamos a ver los pros y los contra que tienen este tipo de webs:

Este diseño típico, consiste en una cabecera que cubre la parte superior de la web, una columna central flanqueada por dos columnas secundarias a ambos lados y un pie situado en la zona inferior de la web.

La columna central está pensada para alojar el contenido principal y las laterales para contenidos secundarios. Muchas veces estas columnas laterales se utilizan para albergar sub-menús.

PROS (teóricos) DE ESTE DISEÑO:

• La simetría de la página puede ayudar a dar un aspecto más agradable.
• Permite el doble contenido y el uso de las columnas laterales para promociones en toda la navegación horizontal.
• Centramos el contenido principal, dándole mayor importancia.

Pero estas afirmaciones difícilmente pueden ser absolutas, de echo cualquier experto en usabilidad os dirá que es un mal planteamiento, y en cuanto empezamos a investigar un poco, nos damos cuenta de que no es buena solución ni por usabilidad ni como diseño.

CONTRAS DE ESTE DISEÑO:

• La simetría generalmente es perjudicial para establecer una jerarquía, y la jerarquía es el elemento principal de cualquier navegación y buen uso de una web.
• La simetría diluye los puntos de interés. El usuario acaba por no saber a dónde mirar. Dando al traste con todos los estudios de comportamiento de usuarios (zonas calientes….)
• Requiere un aprendizaje del usuario, para conocer los elementos importantes, las barras de navegación secundarias, etc.. Y como ya sabemos ninguna web debe de tener un manual de uso, eso conlleva la pérdida de usuarios.
• Las barras laterales acaban siendo un contenedor de todo aquello que queremos mostrar, y el resultado final un caos de información.
• Al leer un navegador el contenido de la web, primero (por la estructura del html) tiene que leer toda la columna izquierda antes de empezar con la principal, es decir, los robots, tienen que leer toda la información lateral izquierda antes de empezar a leer el contenido que queremos indexar. Esto es perjudicial para el posicionamiento.

El uso de las 3 columnas, quizás se haya heredado de la prensa escrita, pero no hay que olvidar que no se lee de la misma manera un periódico que una web. Empezando por que la resolución es muy distinta. El texto impreso es mucho más legible que el digital. La visión de un periódico es vertical, mientras que la de una web es horizontal (las pantallas son horizontales).
Desgraciadamente por lo general los responsables de estos medios escritos no se dan cuenta de este detalle, e intentan llevar el mismo contenido impreso al mundo digital.

Buena prueba de ello lo tenemos en periódicos online como El País o El Mundo, que son (a mi modo de ver) los ejemplos más complicados de diseñar (por la cantidad de contenido). Podemos ver como han conservado las tres columnas pero dándole más importancia a la primera columna.

Otro ejemplo (como siempre a mi juicio) es el del periódico 20minutos, diseñado en 2 columnas, y en el que se consigue llevar al usuario de noticia en noticia, a través de una columna principal y dejando los contenidos secundarios, o incluso, repeticiones del contenido de la columna central, en la columna secundaria. Para mí, este ejemplo es mucho más usable que el de los dos anteriores periódicos online citados, más si cabe, porque está demostrado que al usuario si le gusta hacer scroll.

En los dos primeros periódicos online, podemos observar que la lectura es anárquica, tenemos que ir de arriba a abajo, los módulos son de distinta altura y eso nos hace perder la navegación lógica, y convertirla en una navegación por impulsos. Sin embargo en el ejemplo de 20minutos, podemos ver como la navegación es más fluída, vamos viendo un titular tras otro, navegando verticalmente y a la vez vamos viendo los contenidos secundarios que tenemos en la columna de la derecha.

Cada tipo de contenido tiene su arquitectura específica. Todo depende de lo que vayamos a mostrar, y todo diseño es susceptible de mejora.
Una web a 3 columnas con una caja central de mayor tamaño, puede serle «menos mala» a apple en su tienda online, (admiro mucho esa web aunque no me guste nada la composición de su store) y un caos para otras.

Las primeras versiones de la home de muchoviaje.com, estaban construidas con 2 y 3 columnas. Se trata de una web con muchísimo contenido, por lo que finalmente, la decisión fué usar 1 columna en la home y tratar de hacer módulos de igual altura, para ayudar al usuario a encontrar de un modo fluido todos los módulos que nos interesaba mostrar. Por supuesto, que el resultado fué mucho más óptimo que en las versiones anteriores. Si nos fijamos bien, la estructura es de 3 columnas, pero al colocar los módulos de igual altura y juntar en alguna ocasión dos módulos, hace que la apariencia sea de una única columna.

Otro ejemplo de que hay que adaptarse al contenido fué cuando tuve que diseñar la home de entradas de muchoviaje.com. Dejé un primer bloque a 1 columna para indexación en google, un segundo bloque a 2 columnas con los destacados en la parte más ancha y publicidad de autopromoción en la secundaria y un tercer bloque con 4 columnas para mostrar 4 categorías.

En conclusión, lo que aconsejo, es adecuar la arquitectura de la web al contenido que se vaya a mostrar, y por lo general no usar el sistema de 3 columnas tal y como está representado en la figura de más arriba.