4.6 : Llamar la atención del usuario: 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″]

Llamar la atención del usuario: 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=1684264005” 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/45DrawtheUsersAttention-scaled.jpg?media=1684264005” 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 sus usuarios llamando su atención sobre las partes más importantes de la pantalla cuando sea necesario. Esto se puede lograr con la conciencia y el conocimiento de los principios de la organización perceptiva Gestalt.

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

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

Un sitio web puede ser un lugar confuso, especialmente para los nuevos visitantes. No están completamente seguros de qué hay disponible, qué pueden hacer o dónde pueden ir dentro del sitio web. Su objetivo debe ser ayudar al usuario a responder todas estas preguntas (‘¿Qué hay disponible?’, ‘¿Qué puedo hacer?’ Y ‘¿Dónde puedo ir?’) En cuestión de segundos después de que llegue el usuario. Para ello, debes llamar la atención del usuario sobre los aspectos más informativos del display, o los elementos que le ayuden a responder estas preguntas en el menor tiempo. Por ejemplo, los sitios web generalmente incluyen una barra de navegación de nivel superior en la parte superior (de ahí el nombre) de cada página, para ayudar al usuario a responder “¿dónde estoy?” y ‘¿a dónde puedo ir?’.

Dentro del cuerpo de cada página, al usuario se le muestra típicamente una serie de imágenes, historias, productos, elementos, etc. interesantes (según la naturaleza del sitio) que le ayudan a establecer lo que puede hacer. Estos también sirven para establecer lo que está disponible u ofrecido dentro del sitio. Por lo tanto, la pantalla puede considerarse como una serie de regiones distintas que ayudan al usuario a responder las preguntas más importantes y comunes a su llegada (Jeffrey Veen, autor de The Art and Science of Web Design ).

Si bien dividir la pantalla en compartimentos puede ayudar al usuario, si cada una de estas secciones está abarrotada de muchas imágenes, texto y otros elementos diferentes, entonces no sabrán a dónde dirigir su atención. Por tanto, es importante mantener la pantalla ordenada, organizada y estructurada para que el usuario pueda establecer cuál de los elementos requiere su atención y cuándo.

El sitio web Graze es un ejemplo de diseño minimalista, que a menudo se considera una buena forma de ayudar a los usuarios a identificar elementos específicos y sin la necesidad de un escaneo que consume mucho tiempo. En la parte superior de la página de inicio, el usuario puede ver una imagen que consta de varios productos disponibles en el sitio, y dentro de esta imagen hay una serie de elementos que ayudan al usuario a determinar lo que necesita hacer. Por ejemplo, el botón ‘Comenzar’ proporciona al usuario un único punto de inicio, que le permite simplemente seguir el flujo predeterminado y está estratégicamente ubicado, por lo que se elimina la carga de escanear la pantalla en busca de este trampolín. Además, la descripción de ‘cómo funciona’ se coloca justo debajo del llamativo inicial, lo que satisface la necesidad del usuario de una breve explicación de lo que debe hacer en el proceso.

El minimalismo del diseño web Graze refleja, en parte, el número limitado de cosas que hacer; ofrecen efectivamente un servicio: entregar los bocadillos de su elección. Otros sitios web con muchos productos y servicios diferentes en oferta pueden tener dificultades para emplear ese minimalismo. Sin embargo, este ejemplo de diseño web sirve para resaltar algunas de las formas en que los diseñadores pueden utilizar los principios Gestalt de organización perceptiva para ayudar a llamar la atención del usuario sobre las partes más importantes de la pantalla, que pueden ser partes que son importantes para el usuario. objetivos y actividades o los objetivos e intenciones del diseñador. Por ejemplo, el usuario puede estar ingresando sus datos personales al realizar una compra en un sitio de comercio electrónico, por lo que es importante que los campos de entrada estén claros y haya la menor distracción posible.

Por el contrario, la intención del diseñador puede ser llamar la atención del usuario sobre los anuncios dentro de su sitio web, lo que normalmente no es algo que beneficie al usuario. El diseñador puede lograr esto mostrando el anuncio en el centro de la pantalla o evitando que el usuario haga cualquier otra cosa antes de hacer clic en la cruz del cuadro de anuncio. Ambos ejemplos requerirían una comprensión de cómo funciona el sistema visual y cómo explotar los sesgos perceptuales que subyacen a 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″]

Uso de las leyes de la Gestalt: llamar la atención

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

En esta sección veremos algunas de las formas en que se han empleado las leyes de la Gestalt para llamar la atención del usuario sobre elementos importantes en la página de inicio de Graze.

• Figura / Organización del terreno : hay muchos ejemplos de las partes más importantes o significativas de la pantalla que aparecen orgullosas del resto de la página. Por ejemplo, el botón verde “Empezar ahora” sobre un fondo blanco aparece como figura y el resto del cuadro como fondo, lo que ayuda al usuario a identificar el elemento interactivo (es decir, el botón). La oferta de la ‘1ra caja a mitad de precio’ también se considera más destacada, ya que la ‘etiqueta’ amarilla clara se destaca en la imagen oscura del fondo. Todo texto es un ejemplo de organización de figura / fondo, ya que somos capaces de extraer las letras / palabras del fondo y centrarnos en ellas, en lugar de tener que determinar conscientemente qué parte (es decir, las palabras o el fondo) requiere nuestra atención.
• La ley de la continuidad– Las imágenes en la sección ‘cómo funciona’ son dibujos de líneas simples que podrían verse como cualquier número de combinaciones diferentes de líneas, curvas y formas, pero gracias a la continuidad podemos identificar y enfocar nuestra atención en las partes significativas formar objetos completos. Al utilizar estos dibujos lineales, los diseñadores han minimizado el potencial de confusión; explotar la naturaleza inconsciente y automática de la percepción de objetos para ayudar a los usuarios a identificar y formar representaciones mentales significativas. Las cifras ambiguas o más detalladas pueden ralentizar al usuario al intentar establecer qué significan las imágenes y cómo se relacionan con el texto que las acompaña. Por lo tanto, al reconocer la capacidad perceptiva de formar formas completas y significativas a partir de líneas simples, los diseñadores han apoyado la ley de la continuidad y han dibujado al usuario ‘ s atención a los elementos útiles de la pantalla. (ver también ‘Pragnanz’ y la ‘Ley de la significación’)

Se han explotado otros principios de la Gestalt en el diseño de Graze; Compruébelo usted mismo e intente averiguar cuáles son y cómo se han utilizado para llamar la atención del usuario sobre elementos específicos.

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