4.3 : Percepción de grupo: resumen con ejemplos
La percepción del grupo es esencial para la experiencia del usuario de la web; si los usuarios no pueden distinguir un grupo de elementos de otro, tardarán más en realizar sus tareas, cometerán errores o simplemente abandonarán su sitio web por uno de los sitios de sus competidores.
Al organizar los contenidos de cualquier sitio web, es importante considerar la rapidez con la que los usuarios pueden identificar qué grupos o categorías están disponibles. La disposición de la pantalla requiere una planificación cuidadosa y la adaptación de los sesgos perceptivos que son comunes al procesamiento visual humano. Muchos de estos sesgos perceptuales se clasifican como leyes de agrupación Gestalt, ya que se manifiestan en la forma en que percibimos los elementos en determinadas condiciones como agrupados. Al diseñar de acuerdo con estos sesgos, podemos verlos como un obstáculo, pero nos brindan un conjunto claro de reglas que ayudan a guiar el proceso de diseño.
Para la mayoría con visión humana normal y procesamiento visual, la información se organiza para formar grupos u objetos completos a partir de elementos visuales individuales. Para lograr esto, la información visual se somete a procesos aditivos en la mente humana que permiten la identificación instantánea de objetos completos, grupos y escenas visuales.
Sin embargo, estos procesos pueden ser fuertes y resistentes a muchos otros factores (por ejemplo, arreglos visuales ocupados), pero sin la información visual necesaria es poco probable que saquemos ciertas conclusiones o obtengamos una impresión exacta de nuestro entorno. Por lo tanto, las leyes de agrupación de la Gestalt deben considerarse como un juego de herramientas para el diseñador; use las leyes con prudencia y podrá crear una pantalla que ayude al usuario y le proporcione una pantalla que sea fácil de digerir.
Consideraremos ahora algunas de las formas en que se pueden utilizar las leyes de la Gestalt para lograr grupos y categorías perceptibles instantáneamente y evitar que el usuario saque conclusiones incorrectas.
Eche otro vistazo a la imagen a continuación y la definición de cada ejemplo.
Ejemplo A
Permitiendo la percepción grupal instantánea con la Ley de Similitud : los artículos de las Estadísticas Nacionales del Reino Unido están agrupados de varias maneras, pero un elemento llamativo, compartido por todos estos elementos, es el logotipo de estadísticas nacionales. El uso del logotipo en la misma posición para todos los artículos transmite inmediatamente que existe una calidad, función o vínculo compartido entre los artículos. Incluso sin los bordes y otras características superficiales compartidas, el logotipo proporciona un elemento unificador que llevará a los usuarios a identificar la agrupación. A veces, esto es todo lo que el usuario necesita para distinguir los elementos de un grupo de otros.
Las pequeñas funciones pueden marcar una diferencia significativa en la pantalla y la experiencia del usuario; no siempre tienen que ser grandes, llamativos o incluso atraer la conciencia. El sesgo perceptual de similitud se estimula automáticamente cuando los elementos comparten características superficiales, lo que pasa por alto la conciencia. Por lo tanto, la similitud es un método rápido para llamar la atención del usuario sobre conjuntos específicos de información o ayudarlo a identificar la ubicación de un grupo de elementos, lo que se evidencia en el ejemplo A en la imagen compuesta anterior.
Ejemplo B
Permitiendo la percepción grupal instantánea con la Ley de Cierre : las opciones de refinamiento de productos de Asos, un sitio de ropa unisex, se dividen en varias categorías con el uso de bordes parciales. A pesar de no utilizar bordes completos para encerrar las opciones, percibimos instantáneamente los elementos agrupados en tres categorías separadas. La ley del cierre sirve para llenar los espacios en blanco, por lo que mientras las categorías solo se distinguen con unas pocas líneas, las unimos, en el sistema visual, para formar límites completos.
La ley del cierre es una herramienta útil disponible para los diseñadores, ya que los usuarios son capaces de sacar la conclusión correcta o prevista con una cantidad limitada de información visual. Esto es de particular utilidad cuando se intenta lograr una buena proporción de datos y tinta en su diseño, ya que las líneas simples y los bordes incompletos pueden ser tan efectivos como los equivalentes completos.
Ejemplo C
Habilitación de la percepción grupal instantánea con la organización figura / suelo : en un intento de separar un grupo particular de elementos u opciones del resto de la pantalla, la distinción figura / fondo a menudo se explota mediante el uso de un cuadro prominente sobre un fondo menos llamativo. La caja de Thomas Cook ‘Find My Perfect Holiday’ ejemplifica la distinción figura / suelo con un panel azul oscuro que no se puede perder sobre un fondo de escena de playa apagada. Cuando un conjunto de opciones debe considerarse más importante que el resto, organizar la pantalla de acuerdo con la organización de la figura / suelo suele presentar el mejor enfoque. Agrupar elementos y luego distinguirlos del resto de la pantalla capta la atención del usuario y garantiza que se vean como un grupo independiente.
Ejemplo D
Habilitación de la percepción grupal instantánea con la Ley de la región común : las tres listas de opciones del sitio web del Wandsworth Council (Londres, Reino Unido) demuestran el efecto que tiene el espacio compartido en la percepción grupal. Un fondo gris claro da la apariencia de que las opciones son parte de un espacio separado del resto de la pantalla. Y aunque no hay un límite delineado para estas tres regiones del espacio, los bordes donde los rectángulos grises se encuentran con el espacio en blanco sirven para crear la impresión de un contorno.
Colocar elementos en la misma región claramente definida es quizás la forma más común de agrupar en la web y en la mayoría de los otros tipos de diseño de interfaz de usuario. El sesgo perceptivo para agrupar elementos cuando comparten una región común es poderoso, instantáneo e inconsciente, de ahí el uso de límites, fronteras, contornos y cualquier otra característica gráfica que distinga un área del espacio de otra.
Ejemplo E
Habilitación de la percepción grupal instantánea con la Ley de familiaridad : las pestañas (también denominadas interfaces de documentos con pestañas) son un ejemplo de esqueuomorfismo, que, en esta ocasión, se puede considerar como un enfoque de diseño donde las características, cualidades y características de los objetos en el mundo físico se utilizan en el diseño gráfico. En el mundo real, estas características físicas realizan alguna función real, pero cuando se traducen en diseño gráfico, no necesariamente realizan la misma función ni requieren el mismo método de interacción.
La mayoría de nosotros conoce las pestañas por el uso de agendas telefónicas, agendas de direcciones y sistemas de archivo. Esta familiaridad se aprovecha con el uso de pestañas gráficas en el diseño web. La forma y disposición de las opciones a lo largo de la parte superior juega con el sesgo de percepción de familiaridad, asegurando que percibamos instantáneamente las formas deseadas y podamos identificar el propósito exacto de estos elementos.
El uso de formas significativas del mundo físico en el diseño gráfico puede ser una herramienta poderosa para promover la comprensión y la conciencia inmediatas de cómo se agrupan los elementos. Sin embargo, también debe asegurarse de que estos esqueuomorfos se vean y se comporten como las características del mundo real; de lo contrario, es probable que los usuarios se confundan y cometan errores al intentar interactuar con el diseño de acuerdo con sus expectativas, que se han adquirido al interactuar con el elemento correspondiente en el mundo físico.
Ejemplo F
Habilitación de la percepción grupal instantánea con la Ley de conexión de elementos : la primera imagen fija del video de instrucciones de Google Webmasters ejemplifica la capacidad de agrupación de la conexión de elementos. Al vincular cada uno de los personajes a la imagen de la computadora, con el uso de una flecha punteada, parecen formar un grupo general. De la misma manera que la interconexión de partes de una cadena crea la impresión de agrupación, la vinculación de elementos en una pantalla gráfica puede estimular inmediatamente la ley de la conexión de los elementos.
Una línea recta de un elemento a otro es un método simple pero excelente de agrupación, ya que estamos predispuestos a percibir los elementos visuales conectados como pertenecientes o formando un grupo. Esto se ejemplifica con el uso de líneas que unen las letras a cada imagen de ejemplo. Si bien es probable que veamos las letras como vinculadas a la imagen correspondiente gracias a la ley de proximidad, la conectividad de los elementos garantiza que el usuario agrupe inmediatamente la imagen de la letra correcta.