3.1 : La ley de la similitud: Gestalt y diseño web

[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.6.6″ 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”]

La ley de la similitud: Gestalt y diseño web

[/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/2020/10/menu.jpg?media=1669990493” title_text=”menu” show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.6.6″ animation_style=”fade” animation_duration=”500ms” hover_enabled=”0″ use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” sticky=”on” always_center_on_mobile=”on” sticky_enabled=”0″][/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.6.6″ 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|” 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″]

Aplicación de las leyes de la Gestalt

[/et_pb_text][et_pb_text quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.6.6″ 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″]

Aproveche la ley de similitud para ayudar a los usuarios a identificar de inmediato qué elementos de la pantalla están agrupados.

Cuando los objetos, ya sean físicos o gráficos, comparten características superficiales similares, la percepción humana sesga nuestra visión y es probable que los percibamos como pertenecientes o formando un grupo. Este fenómeno de percepción fue observado y documentado por los psicólogos de la Gestalt Max Wertheimer, Kurt Koffka y Wolfgang Kohler a finales del siglo XIX. Se refirieron a este principio de organización perceptiva como la “ley de similitud”.

Como puede ver en los elementos del menú vertical que se encuentran en el sitio web de McDonalds, cuando miramos elementos similares, inconscientemente los agrupamos y asumimos que comparten una relación significativa. Estas similitudes pueden ser forma, color, tamaño, fuente coincidente cuando se usa texto o todas estas cualidades. El mismo sesgo de percepción también es aplicable a la información auditiva, con notas de tono similar tocadas sucesivamente percibidas como una melodía.

[/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.6″ 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|” 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″]

La solución de diseño

[/et_pb_text][et_pb_text quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.6.6″ 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″]

Los diseñadores web pueden explotar este sesgo de percepción aumentando la similitud de los elementos que el usuario debería considerar como pertenecientes al mismo grupo y disminuyendo la similitud de los elementos que no deberían considerarse agrupados. Por ejemplo, los elementos del menú en el menú de navegación vertical de McDonalds explotan la ley de similitud para ayudar a los usuarios a identificar instantáneamente todos los elementos que realizan la misma función de arco (es decir, navegar a otra parte de la interfaz de usuario). El color de fondo, la fuente, el tamaño de las letras y la alineación son los mismos para todos los elementos del menú.

La similitud también juega un papel esencial para mantener la coherencia dentro de una interfaz de usuario. Ben Shneiderman estableció una lista de pautas de diseño de interfaz de usuario, conocida como la ‘ocho reglas de oro’, uno de los cuales pidió a los diseñadores que “luchen por la coherencia”. Mantener un diseño coherente en toda la interfaz de usuario permite a los usuarios inferir rápidamente que los elementos siguen realizando la misma función aunque estén realizando una tarea diferente.

La importancia de establecer coherencia con el uso de la similitud se ejemplifica nuevamente en el menú de McDonalds. Si el usuario desea evaluar todos los puntos de navegación potenciales, debe ver todas estas opciones desde una parte fija de la pantalla. Colocar elementos en posiciones irregulares, usando diferentes colores, fuentes o tamaños de letras complicaría la tarea y ralentizaría el proceso de comparar opciones para determinar cuál encaja mejor con las intenciones actuales del usuario. Además, tal es la fuerza de nuestros sesgos de percepción, que es probable que los elementos que no comparten características superficiales básicas se perciban inmediatamente como distintos o no relacionados; en cuyo caso, el usuario tendría que reevaluar la interfaz para apreciar que estos elementos de hecho deberían verse como agrupados (una experiencia que requiere más tiempo).

Otra consideración importante al diseñar con la ley de similitud en mente es asegurarse de que los elementos que no comparten ninguna relación significativa se distingan claramente. Por ejemplo, al interactuar con el menú de McDonalds, la apariencia de la opción seleccionada actualmente cambia para que ya no se mezcle con las otras opciones. De esta manera, el usuario tiene una fuerte señal visual que le muestra qué categoría amplia está viendo.

Sin estos cambios superficiales, el usuario tendría que realizar alguna actividad de prueba y error, como pasar el cursor sobre otros elementos del menú y volver a ver qué opciones están vinculadas a cada categoría. Por lo tanto, la disimilitud es una herramienta que los diseñadores pueden utilizar tanto como la similitud; aumentar la similitud cuando los elementos están relacionados de alguna manera y distinguir claramente los elementos que no deben identificarse como agrupados.

[/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.6.6″ 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″]

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