Lección 1 de 0
En Progreso

4.5 : Elementos distintivos: Gestalt y diseño web

2 octubre, 2023

Las pantallas web pueden resultar confusas y complejas, especialmente para los usuarios novatos. Al reforzar su conocimiento sobre cómo percibimos los elementos cuando se organizan de determinadas formas, podrá ayudar a los usuarios a distinguir entre los elementos de sus pantallas.

Los beneficios de un enfoque impulsado por la Gestalt

Gran parte del enfoque de los principios Gestalt de organización perceptiva se centra en cómo la percepción humana nos ayuda a identificar grupos, pero son igualmente importantes para ayudarnos a distinguir entre elementos distintos. Al organizar la información en grupos separados, hemos establecido que un conjunto de elementos es distinto del otro. Sin embargo, aunque un grupo puede parecer separado de otro, podemos percibirlo como perteneciente a un grupo o categoría más grande. Por ejemplo, los productos individuales enumerados en el ejemplo de PC World anterior comparten ciertas características, lo que nos ayuda a identificar cada imagen y conjunto de detalles del producto como parte de la misma categoría general (es decir, ‘Computadoras portátiles’), aunque estén separadas por el uso de proximidad y región común (ver más abajo para una explicación).

Si todas las cosas parecen ser iguales en la pantalla, el usuario tendrá dificultades para identificar elementos específicos rápidamente, y el usuario tiene una carga adicional para recordar dónde se encuentra un elemento específico dentro de la pantalla. Por ejemplo, en la categoría ‘Laptops’ del mundo de las PC, las características superficiales compartidas pueden ayudar al usuario a establecer que todos los productos descritos están en el mismo grupo, pero hay poca diferencia superficial entre estos elementos para ayudar al usuario a extraer rápidamente el producto de destino. .

A menos que el usuario recuerde dónde se encuentra un artículo específico dentro de la lista, debe escanear toda la lista cada vez que quiera ubicar un producto en particular. Por lo tanto, aunque se ha utilizado la ley de similitud para crear un grupo de elementos claro y cohesivo, este mismo enfoque hace que sea más difícil para el usuario encontrar elementos dentro de este grupo general. Las imágenes de la computadora portátil brindan algunas pistas para ayudar al usuario cuando escanea rápidamente la pantalla y hay una serie de productos que comparten el mismo precio, por lo que es posible que se haya requerido otra característica de diseño. Por ejemplo, incluir el nombre del producto en negrita debajo de la imagen puede ayudar al usuario. Hay muchos otros enfoques que puede adoptar, pero también es importante que el enfoque que elija no interrumpa la capacidad del usuario para reconocer instantáneamente que todos los elementos pertenecen al mismo grupo.

Distinguir elementos con las leyes de la Gestalt

  • Ley de la región común : el uso de contornos / bordes para los productos individuales ayuda al usuario a distinguir cada artículo y no deja ninguna duda sobre con qué imagen se relacionan los detalles del producto. Un borde o contorno simple juega con el sesgo perceptivo de la región común, lo que nos ayuda a identificar elementos agrupados cuando comparten el mismo espacio delineado. Este enfoque se utiliza en casi todas las interfaces de usuario y, en particular, en los sitios web. Cuando tiene muchos grupos o secciones diferentes dentro de su pantalla, la ley de la región común puede ayudar a crear orden y estructura, y ayudar al usuario al intentar distinguir elementos, especialmente cuando hay poco espacio disponible para usar la proximidad solo para separar elementos.
  • Ley de similitud : la disposición de los productos recomendados en una línea horizontal se ha utilizado para distinguir estos elementos de los elementos dispuestos verticalmente. Como se señaló anteriormente, todas las cajas de productos individuales son muy similares, pero para ayudar a distinguir los productos recomendados de todos los demás, se han dispuesto horizontalmente. Por tanto, hay otro aspecto de la ley de la semejanza; utilice la diferencia para ayudar a los usuarios a distinguir grupos distintos o elementos individuales.
  • Ley de proximidad : cuanto más cercanos estén los elementos entre sí, más probabilidades habrá de que se perciban como agrupados; por lo tanto, la proximidad dificulta la capacidad del usuario para distinguir elementos. Cuando desea que el usuario identifique rápidamente elementos específicos, agruparlos afecta negativamente el proceso de escaneo y, a su vez, ralentiza la velocidad de detección de elementos. Sin embargo, esto no quiere decir que los elementos deban estar tan separados que haya un mar de espacios en blanco entre ellos. En su lugar, se debe usar un espacio pequeño y consistente para garantizar que el usuario no solo pueda distinguir elementos separados, sino que también pueda saltar rápidamente de un elemento a otro si así lo desea. Esto se ejemplifica en la imagen del sitio web de PC World que se muestra arriba, con las cajas de productos separadas por una pequeña y regular cantidad de espacio en blanco.