Lección 1 de 0
En Progreso

5.2 : Identificación de elementos significativos: resumen con ejemplos

2 julio, 2022

[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″]

Identificación de elementos significativos: 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” 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/53IdentificationofMeaningfulElements.jpg” 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″ 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 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″]

Ayude a los usuarios a identificar los elementos significativos en sus pantallas empleando los principios Gestalt de organización perceptiva.

Si el usuario no puede encontrar los elementos de un sitio web que sean relevantes para sus propósitos y objetivos actuales en cuestión de segundos, simplemente irá a otro sitio web. Por esta razón, es vital que los diseñadores organicen sus visualizaciones web de modo que el usuario no tenga ninguna duda sobre dónde están los elementos importantes y significativos y que estén disponibles cuando los necesite. Es necesario comprender los muchos sesgos perceptuales que ayudan al procesamiento visual. Los principios de la Gestalt de organización perceptiva nos brindan una lista de consideraciones al analizar la efectividad de nuestros diseños. Ahora veremos algunas características de diseño web existentes que ejemplifican las leyes de la Gestalt y describiremos cómo se adaptan a uno de los sesgos perceptuales de la percepción visual humana.

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

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|” 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″]

Identificación de elementos significativos con la distinción figura / fondo– Las partes interactivas o portadoras de información de la pantalla no deben quedar enterradas dentro de la pantalla. En cambio, estos elementos útiles / utilizables deben distinguirse y estar orgullosos del resto de la pantalla, para ayudar al usuario a establecer inmediatamente qué está disponible y qué puede hacer. Para dar prominencia a los elementos significativos dentro de su pantalla, debe explotar la organización de la figura / suelo, lo que nos permite extraer y enfocar elementos específicos dentro de una escena visual. Como puede ver en el encabezado del sitio web de National Geographic, el fondo es negro y los elementos significativos son blancos o de otro color claro (por ejemplo, amarillo soleado). Las marcadas diferencias de color y los fondos en blanco nos ayudan a distinguir una parte de una escena visual de otra, y también permiten al usuario concentrarse en una parte particular de una pantalla con la mínima distracción. Al llegar al sitio de National Geographic, vemos inmediatamente las opciones de navegación de nivel superior y la oferta de suscripción en la esquina superior derecha. Estos son los elementos más importantes, ya que las opciones de navegación informan al usuario de dónde puede ir, y la oferta de suscripción seduce al usuario para realizar una compra (el aspecto más importante del eCommerce). Por lo tanto, la organización figura / fondo es posiblemente el principio Gestalt más importante a considerar cuando se desea ayudar a la identificación de elementos significativos de forma inmediata y sin dificultad al escanear la pantalla. Estos son los elementos más importantes, ya que las opciones de navegación informan al usuario de dónde puede ir, y la oferta de suscripción seduce al usuario para realizar una compra (el aspecto más importante del eCommerce). Por lo tanto, la organización figura / fondo es posiblemente el principio Gestalt más importante a considerar cuando se desea ayudar a la identificación de elementos significativos de forma inmediata y sin dificultad al escanear la pantalla. Estos son los elementos más importantes, ya que las opciones de navegación informan al usuario de dónde puede ir, y la oferta de suscripción seduce al usuario para realizar una compra (el aspecto más importante del eCommerce). Por lo tanto, la organización figura / fondo es posiblemente el principio Gestalt más importante a considerar cuando se desea ayudar a la identificación de elementos significativos de forma inmediata y sin dificultad al escanear la pantalla.

[/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||50px||true|” 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″]

Ejemplo B

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

Identificación de elementos significativos con la Ley de Proximidad– La proximidad es una consideración esencial al organizar todas las pantallas, pero cuando desee que el usuario identifique qué elementos merecen o requieren la mayor atención, es posible que desee disminuir la proximidad (es decir, elementos significativos de distancia), en lugar de colocarlos uno cerca del otro. Como puede ver en la oferta de Amazon, el producto se encuentra en una gran área de espacio en blanco, lo que garantiza que es probable que el usuario dirija su atención a este elemento de inmediato. Ayudar a los usuarios a identificar elementos significativos no siempre es una intención altruista; a veces querrá mejorar la apariencia de elementos que ayuden a su sitio web o negocio, que es el caso de los anuncios, a diferencia del usuario. En estas ocasiones, puede aprovechar la ley de la proximidad aumentando la distancia de un elemento significativo a otro. Sin embargo, cuando existe una relación importante entre elementos significativos, puede ser necesario acercar estos elementos. Cuando este es el caso, se requiere una comprensión de la forma en que los visitantes usarán e interactuarán con su sitio. Considere siempre las leyes de la Gestalt en combinación con sus propósitos y objetivos, y los de sus usuarios.

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

Ejemplo C

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

Identificación de elementos significativos con la ley del destino común– El Comprobador de síntomas del NHS ejemplifica la ley del destino común y cómo puede adaptarse y utilizarse para ayudar a los visitantes del sitio a realizar una serie de tareas en un orden prescrito. Los elementos del sitio web no siempre son significativos al mismo tiempo. Los usuarios realizan tareas en diferentes órdenes e incluir todos los elementos a la vez puede resultar confuso y / o ralentizarlos en cada subtarea. Mediante el uso de un asistente (un patrón de diseño de interfaz de usuario en el que una tarea general se divide en una serie ordenada de subtareas), el usuario pasa por las tareas sin la distracción y la complejidad de tener todos los elementos disponibles a la vez. El usuario progresa gradualmente a través de las subtareas en una dirección (destino común), y los elementos necesarios para cada subtarea se proporcionan cuando es necesario. Ordenar las tareas de esta manera asegura que los elementos significativos en cada etapa sean los únicos proporcionados. Por lo tanto, un mago representa una forma potencial de aprovechar el poder del sesgo perceptivo del destino común.

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

Puede parecer obvio, pero es esencial que los usuarios puedan identificar los elementos significativos de un sitio web. Sin la información necesaria, los usuarios no pueden satisfacer sus intereses y completar sus fines y objetivos. Por lo tanto, debe asegurarse de que el usuario pueda determinar qué elementos de la pantalla son significativos y que son visibles en el momento adecuado. Las leyes de la Gestalt proporcionan un conjunto de reglas claras que pueden guiar nuestros esfuerzos al intentar organizar pantallas web para maximizar la capacidad del usuario para identificar elementos significativos de forma rápida, precisa y cuando sea necesario.

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