5.1 : Imposición de estructura: resumen con ejemplos

Las leyes de agrupación Gestalt se pueden utilizar para mejorar sus pantallas, pero el uso indebido o la indiferencia por nuestros sesgos de percepción probablemente conducirán a malas experiencias de usuario.

Para ayudarnos a apreciar cómo se aplican las leyes de la Gestalt en el diseño web como un medio para estructurar el contenido, veremos tres ejemplos. Cada sitio web tendrá características de diseño que se pueden categorizar bajo uno o más de los principios Gestalt de organización perceptiva, pero hemos seleccionado estas imágenes web (mostradas arriba) para resaltar las mejores prácticas al emplear un enfoque de diseño impulsado por Gestalt. Identificaremos una Gestalt en acción para cada uno de los ejemplos, como una forma de cristalizar la (s) intención (es) del diseñador y cómo esto se ha traducido en la exhibición teniendo en cuenta la naturaleza del procesamiento visual humano. Hemos utilizado el término ‘imponer estructura’ para reflejar el esfuerzo consciente y concertado requerido para organizar elementos, imágenes, texto y otros elementos,

Ejemplo A

Imponer una estructura con la ley de la similitud : el panel pequeño, tomado del sitio web de The Guardian, ejemplifica perfectamente el poder de la similitud para ayudar al usuario a identificar de inmediato qué elementos pertenecen a una categoría específica. Las características superficiales genéricas son las mismas para todos los elementos de video (por ejemplo, fuente, tamaño de fuente, color de fuente, espaciado y un pequeño icono de video). Además, cada noticia va acompañada de una imagen, y para distinguir el mejor video del día del resto, el video de este artículo es considerablemente más grande; por lo tanto, utilizar la similitud para agrupar todos los elementos y la disimilitud para distinguir un elemento de interés particular. La similitud es una de las herramientas más simples disponibles para los diseñadores web; Úselo para agrupar elementos y crear estructura. Sin embargo, también es importante tener en cuenta el potencial de confusión cuando los elementos no agrupados comparten características superficiales.

Ejemplo B

Imponiendo estructura con la Ley de Proximidad– La lista de historias de investigación destacadas de Science Daily muestra cómo el diseñador, lidiando con muchos elementos diferentes y un espacio limitado, ha utilizado la proximidad para estructurar la pantalla. Con la simple adición de un espacio en blanco entre los tres grupos principales de noticias, el diseñador ha agrupado los elementos y ha creado una estructura perceptible al instante que ayudará a los usuarios a buscar historias específicas. Unos pocos milímetros más de distancia pueden tener un gran impacto en la estructura aparente dentro de un sitio web. Si se usara la misma cantidad de espacio en blanco para separar todos los elementos en las tres secciones diferentes, la estructura y la agrupación serían menos evidentes en la primera visualización y al escanear la pantalla. Por lo tanto, Se puede lograr una estructura imponente con el uso de la proximidad simplemente reduciendo la cantidad de espacio en blanco entre los elementos que desea que se vean agrupados, mientras aumenta la cantidad de espacio en blanco entre los elementos no agrupados. Hay muchos casos en los que la proximidad puede mejorar la estructura aparente dentro de un sitio web, pero una vez más, asegúrese de que la ley de proximidad se considere tanto en términos de cómo apoya la agrupación intencionada como de la forma en que evita la agrupación no intencionada.

Ejemplo C

Imponiendo estructura con la Ley del Destino Común– Un carrusel es una característica de diseño que se encuentra a menudo en la página de inicio de los sitios de comercio electrónico, y el carrusel que se muestra en la imagen C ejemplifica la capacidad estructural del destino común. Al agrupar productos o imágenes interesantes en un patrón de diseño de interfaz de usuario, donde se revelan gradualmente uno tras otro y en una dirección común, el usuario probablemente los percibirá como agrupados. Agrupar elementos de acuerdo con su dirección y movimiento compartidos no es un método que se use típicamente en el diseño web, pero los carruseles y presentaciones de diapositivas (un patrón de diseño de interfaz de usuario similar) demuestran el poder del movimiento, al ayudar al usuario a establecer qué elementos pertenecen a un determinado categoría o grupo. Sin embargo, también debemos reconocer la naturaleza fascinante del movimiento. No es ningún secreto que los anunciantes buscan constantemente formas de atraer a los usuarios atención y evitar que ignoren sus productos, por lo que no es de extrañar que muchos anuncios contengan imágenes en movimiento. (Para obtener más ejemplos y detalles sobre la ley del destino común en el diseño web, visiteSitio de Andy Rutledge ).