4.5 : Elementos distintivos: 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.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|” hover_enabled=”0″ 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” sticky_enabled=”0″]
Elementos distintivos: 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 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|” 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 beneficios de un enfoque impulsado por la Gestalt
[/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″]
Gran parte del enfoque de los principios Gestalt de la organización perceptiva está 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 percibir que este grupo pertenece 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 (consulte la explicación a continuació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 objetivo .
A menos que el usuario recuerde dónde se encuentra un elemento específico dentro de la lista, debe escanear toda la lista cada vez que desee ubicar un producto en particular. Por lo tanto, aunque se ha utilizado la ley de similitud para crear un grupo de elementos claro y coherente, 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.
[/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|” 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″]
Distinguir elementos con las leyes de la Gestalt
[/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″]
- 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 le deja ninguna duda a qué imagen se refieren 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 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 mencionó 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.
[/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″]
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]