4.3 : Percepción de grupo: resumen con ejemplos

31 marzo, 2023

[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”3.27.4″ background_color=”#7ebec5″ custom_padding=”||0px|” custom_padding_tablet=”||0px|” transparent_background=”off” padding_mobile=”on” make_fullwidth=”off” use_custom_width=”off” width_unit=”on”][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”||0px|” make_fullwidth=”off” use_custom_width=”off” width_unit=”on”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_divider show_divider=”off” disabled_on=”on|on|off” admin_label=”Divider” _builder_version=”3.23.4″ height=”110px” hide_on_mobile=”on”][/et_pb_divider][et_pb_text admin_label=”Text” _builder_version=”4.4.9″ text_font=”PT Sans|on|||” text_text_color=”#ffffff” text_letter_spacing=”2px” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” module_alignment=”center” custom_margin=”||0px|” custom_padding=”||0px|” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

PSICOLOGÍA GESTALT Y DISEÑO WEB: LA GUÍA DEFINITIVA

[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”4.9.0″ text_font=”PT Sans||||||||” text_text_color=”#010659″ text_font_size=”72″ text_line_height=”1.1em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” max_width=”660px” module_alignment=”center” custom_margin=”18px||80px|” text_font_size_tablet=”52″ text_font_size_phone=”” text_font_size_last_edited=”on|desktop” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Percepción de grupo: resumen con ejemplos

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ admin_label=”Section” _builder_version=”3.27.4″ background_enable_color=”off” custom_padding=”0px|||” custom_padding_tablet=”0px|||” transparent_background=”off” padding_mobile=”on” make_fullwidth=”off” use_custom_width=”off” width_unit=”on”][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”0px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https://usercontent.one/wp/www.interactemos.com/wp-content/uploads/2019/09/logo-circular-nuevo.png?media=1669990493” show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”3.27.4″ width=”20%” custom_margin=”-48px|||” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”off” sticky=”on” always_center_on_mobile=”on”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter=”on” gutter_width=”2″ padding_mobile=”on” column_padding_mobile=”on” custom_padding_last_edited=”on|tablet” admin_label=”Row” _builder_version=”3.27.4″ background_color=”#01065″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”50px|||” custom_padding_tablet=”17px|||” custom_padding_phone=”” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” custom_width_px=”830px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https://usercontent.one/wp/www.interactemos.com/wp-content/uploads/2021/02/52GroupPerceptionExamples.jpg?media=1669990493” title_text=”2014-04-24: Edited by Adam Kyne {memberID:1261}” show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.9.0″ width=”50%” animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” sticky=”on” always_center_on_mobile=”on”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.9.0″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

La percepción del grupo es esencial para la experiencia del usuario 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 sus competidores.

Al organizar los contenidos de cualquier sitio web, es importante tener en cuenta 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 acomodar los sesgos perceptuales que son comunes al procesamiento visual humano. Muchos de estos sesgos de percepción 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. Cuando diseñamos 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, matrices visuales ocupadas), 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 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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter=”on” gutter_width=”2″ padding_mobile=”on” column_padding_mobile=”on” custom_padding_last_edited=”on|tablet” admin_label=”Row” _builder_version=”3.27.4″ background_color=”#01065″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”50px|||” custom_padding_tablet=”17px|||” custom_padding_phone=”” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” custom_width_px=”830px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https://usercontent.one/wp/www.interactemos.com/wp-content/uploads/2021/02/52GroupPerceptionExamples.jpg?media=1669990493” title_text=”2014-04-24: Edited by Adam Kyne {memberID:1261}” show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.9.0″ width=”50%” animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” sticky=”on” always_center_on_mobile=”on”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”4.9.0″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”40px” text_line_height=”1.3em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”900px” custom_margin=”16px||30px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Ejemplo A

[/et_pb_text][et_pb_text quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.9.0″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”4.9.0″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”40px” text_line_height=”1.3em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”900px” custom_margin=”16px||30px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

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 separan en varias categorías con el uso de bordes parciales. A pesar de no utilizar bordes completos para encerrar 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 relación datos-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 Consejo de Wandsworth (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

[/et_pb_text][et_pb_text quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.9.0″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” hover_enabled=”0″ text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid” sticky_enabled=”0″]

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 la 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

[/et_pb_text][et_pb_text quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.9.0″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” hover_enabled=”0″ text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid” sticky_enabled=”0″]

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 de puntos, 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 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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”4.6.1″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”40px” text_line_height=”1.3em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”900px” custom_margin=”16px||30px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

En resumen

[/et_pb_text][et_pb_text quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.9.0″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” hover_enabled=”0″ text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid” sticky_enabled=”0″]

Las leyes de agrupación Gestalt ayudan a los usuarios de la web a establecer a qué grupo pertenece cada elemento. El desorden o el uso indebido de estas leyes de la organización perceptiva pueden ralentizar al usuario cuando ve e interactúa con un sitio web. Por lo tanto, las leyes de la Gestalt deben ser fundamentales para su pensamiento al organizar cualquier exhibición.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

Cookie	Duración	Descripción
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.