El principio de la proximidad en el diseño web

Como se ha mencionado en otros artículos, el tiempo que emplea un usuario de la web en determinar si el contenido de la página en la que se encuentra es lo que busca es muy corto, no pasando más allá de unos pocos segundos. Esto hace imprescindible que todo buen diseño haga que el usuario encuentre con facilidad y con solo unos pocos golpes de vista aquello que ofrecemos.

Este principio de diseño web, si bien puede ser empleado para lograr efectos sobre la estética de la página, tiene como principal cometido facilitar el acceso a los contenidos por parte de los usuarios.

Para ello es necesario que los diferentes contenidos se encuentren ordenados y que aquellos elementos relacionados entre sí se encuentren próximos, de forma tal que el usuario tenga no más de tres o cuatro grupos de objetos.

Estos grupos deben estar relacionados por similitud, concepto que desarrollaremos a continuación.

Similitud de elementos en Diseño Web

Tan importante es que los elementos similares se encuentren próximos como que los elementos diferentes se encuentren alejados. El correcto balance de estos dos aspectos son los que contribuyen en la mejor visibilidad de los contenidos.

Además de colaborar en el ordenamiento de los contenidos de forma de simplificar la visualización de los mismos, la proximidad puede ser empleada como forma de decorar la página, ya que la distribución de los elementos puede generar unidades visuales. Utilizando los atributos de los diferentes objetos (textos, imágenes o videos) se puede hacer que contribuyan en el embellecimiento de la página.

Cabe destacar que este principio de diseño web solo es aplicable en aquellas páginas que presentan más de cinco o seis elementos, ya que en caso de que los contenidos no superen estas cantidades (por ejemplo en páginas de presentación), la formación de grupos puede resultar imposible, y en el caso de que lo sea, puede originar otros inconvenientes, como exceso de espacios en blanco o la necesidad de incorporar nuevos contenidos para rellenar.

La similitud

Para presentar el contenido en forma coherente, debemos tener en cuenta la similitud entre los diferentes componentes que se encuentran próximos. Para que un usuario identifique un grupo de elementos como relacionados entre sí, éstos deben presentar algunas características comunes que permita la relación con solo un vistazo.

Para conseguir esto, podemos igualar algunos de los atributos de estos elementos (tamaño, forma, color, etc.) de forma que con solo una pasada de la vista se pueda identificar la relación existente entre ellos.

Para que el concepto quede más claro, veamos un ejemplo:

En esta página podemos ver que los contenidos se agrupan de acuerdo a similitudes. En la parte superior se encuentra el logotipo y una breve presentación. En el centro y a la izquierda, una serie de imágenes que muestran los últimos trabajos realizados, agrupados en una misma zona de la página con similitud temática y de forma. En el centro y a la derecha, se encuentra el menú, también agrupado por similitud temática, de forma, color, tamaño y disposición. Aquí se puede apreciar que con una breve pasada de la vista por la página, podemos identificar claramente cada uno de los grupos de contenidos de la misma.

Los diferentes elementos pueden ser similares en uno o más tipos de atributos. Los atributos usados con mayor frecuencia son la forma, el color y el tamaño. Sin embargo, en muchas ocasiones es necesario realizar énfasis en alguno de los elementos que componen el grupo, para lo cual basta con alterar uno solo de los atributos para conseguirlo y aún así lograr mantener la unidad del grupo.

Clases de proximidad

Existen varios tipos de proximidad que pueden ser empleados de acuerdo con el diseño que se esté llevando a cabo.

Proximidad por menor distancia

Se llama así cuando los diferentes elementos de un grupo se encuentran separados por un espacio que resulta menor que el espacio que los separa de otros grupos.

En este tipo de proximidades, es importante que la diferencia de separación entre los elementos del grupo sean notoriamente inferiores que la separación entre los diferentes grupos, de forma que se note al primer golpe de vista cuales objetos forman parte del grupo y cuales no. Veamos un ejemplo:

En los párrafos, es sencillo encontrar qué parte del texto forma parte de uno u otro párrafo, ya que la separación entre los diferentes renglones de cada párrafo es visiblemente menor que la separación entre párrafos.

Proximidad por contacto

Una forma de agrupar objetos es evitar que exista separación entre ellos. Esto solo es posible en los casos en que los objetos pueden estar juntos y distinguirse claramente unos de otros y sean compatibles visualmente.

En el centro de la página se encuentran tres elementos que forman claramente un grupo, cuya separación entre ellos es nula. En este caso se emplea el color para lograr diferenciar un elemento de otro.

Proximidad por superposición

En algunos casos, puede emplearse un leve solapamiento (superposición) de los elementos para aumentar la sensación de proximidad entre ellos, lo que agrega un bonito efecto visual. Tal es el caso del siguiente ejemplo:

A la izquierda de la página web, se muestra una imagen con su descripción, formando claramente un grupo de elementos que tienen similitud temática. La descripción se ha superpuesto a la imagen de forma tal que altere muy poco a ambos elementos.

Formación de grupos de elementos en diseño web

En el diseño web los grupos deben estar conformados por elementos que formen unidades temáticas. Por ejemplo, el logotipo de una página, el título y el subtítulo, deben próximos entre sí, formando una unidad temática y visual a la vez. Otro ejemplo son los menús, cuyos componentes tienen que estar muy próximos para facilitar su visibilidad y contribuir en la navegabilidad de la página.

Los grupos pueden estar conformados por elementos diferentes (por ejemplo, textos e imágenes, textos y videos, etc.), ordenados de forma tal que pueda identificarse su relación con solo un golpe de vista.

La diferenciación entre los diferentes grupos de elementos también resulta importante, ya que esto permite que los usuarios perciban claramente que se trata de elementos temáticamente diferentes con solo una breve observación.