4.4 : Identificación de elementos significativos: 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″]
Identificación de elementos significativos: 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=1685903855” 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/43IdentificationofMeaningfulElements.jpg?media=1685903855” 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” width=”50%” 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″]
Utilice los principios Gestalt de organización perceptiva para ayudar a sus usuarios a identificar rápidamente qué elementos son significativos para ellos y en general.
[/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″]
Los usuarios tienen metas y objetivos cuando llegan a cualquier sitio web, pero están enfocados en lo que quieren lograr, más que en cómo lo van a hacer. El objetivo del diseñador es cuidar el cómo y dejar que el usuario dedique la mayor parte de su tiempo y atención a alcanzar sus objetivos finales. Por ejemplo, cuando un usuario visita rightmove.co.uk, su principal objetivo es encontrar una propiedad para alquilar o comprar; Rara vez piensan en términos de las acciones componentes que deberán llevar a cabo para identificar una propiedad dentro de una ubicación en particular. Para ayudar al usuario a alcanzar su objetivo, con el mínimo de atención a lo que necesita hacer, el diseñador debe simplificar cada subtarea entre el estado inicial y la finalización de la tarea.
El diseñador se comunica con el usuario a través de la visualización del sitio web. Los elementos visibles se pueden considerar como el lenguaje del diseñador y la capacidad del usuario para navegar e interactuar de forma precisa y oportuna es el medio por el cual juzgamos la eficacia con la que se ha utilizado este “lenguaje”. Una de las primeras consideraciones al comunicarse con el usuario a través de cualquier pantalla es cómo se distinguen los elementos significativos del resto de la pantalla o página. Si el usuario es incapaz de identificar los elementos que tienen significado o los elementos con los que puede interactuar, ha caído en el primer obstáculo.
El usuario debe poder identificar los elementos relevantes de la tarea de un vistazo o, como mínimo, sin tener que dedicar una cantidad significativa de tiempo a rastrear conscientemente la pantalla. Las pantallas complejas, ambiguas y confusas obligan al usuario a salir de su estado mental orientado a las tareas. Cuando el usuario ve por primera vez cualquier página dentro del sitio web, debe traducir la visualización de acuerdo con su (s) tarea (s). Las visualizaciones simples, claras y explícitas eximen de la mayor parte de esta responsabilidad al usuario; dejando también poco margen para malas interpretaciones. Estas cualidades se logran, en gran parte, mediante la apreciación y el diseño de acuerdo con los principios Gestalt de organización perceptiva.
La mente humana procesa la información recibida del entorno, lo que nos da una impresión, pero no siempre una visión completa o totalmente precisa del mundo. La información disponible, de nuestra imagen retiniana, se ‘ensambla’ para generar una representación mental significativa para cada evento visual. Y es al convertir la imagen retiniana en estas representaciones mentales que se aplican los sesgos perceptuales de la Gestalt para ayudarnos a dar sentido al mundo y extraer partes personalmente relevantes de la imagen general.
Si bien los principios de la organización perceptiva tienen una influencia significativa en la representación mental, la información visual sigue siendo la base sobre la que se construye por completo nuestra impresión de cualquier escena visual. Por lo tanto, es fundamental que el espectador / usuario disponga de la información visual necesaria para sus tareas y que aparezca cuando la necesite, donde esperaría y de forma que se asegure que sea claramente visible al escanear rápidamente 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||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″]
Usando los principios 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″]
Para apreciar cómo los principios Gestalt pueden ayudar al usuario a identificar elementos significativos de un vistazo, los aplicaremos a la página de inicio de rightmove.co.uk que se muestra arriba.
Figura / Organización del suelo– Quizás el principio más importante para la identificación de elementos significativos, la organización figura / suelo sesga la percepción visual de modo que una parte particular de la escena visual recibe nuestra atención dedicada, mientras que todas las demás partes retroceden a un segundo plano (tanto en términos de nuestra impresión visual y el nivel percibido de importancia para nosotros personalmente). Si consideramos la página de inicio de rightmove.co.uk como seis secciones separadas (es decir, barra de navegación de nivel superior, barra de búsqueda, anuncio de esquema de ‘Ayuda para comprar’, opciones con imágenes, opciones sin imagen y mapa del sitio), hay una serie de casos en los que se ha tenido en cuenta la organización de la figura / suelo. Por ejemplo, la barra de navegación de nivel superior consta de palabras / términos en letras azules sobre un fondo blanco;
La imagen en sí misma ejemplifica la organización figura / suelo, con nuestra mirada inmediatamente atraída hacia la mujer en el lado izquierdo de la barra de búsqueda. Hay muchos otros casos en los que el elemento clave se distingue del resto de la pantalla en la página de inicio de rightmove.co.uk, pero los ejemplos enumerados muestran las formas principales en que los diseñadores pueden respaldar y explotar la organización de la figura / suelo, que son: distinciones de color claras , ruido visual limitado y diferencias de tamaño entre los elementos significativos (generalmente más grandes) y los sin significado.
Ley de proximidad– Cuando los elementos se colocan muy cerca, la percepción humana tiende a agrupar estos elementos; esto está bien si ese es el efecto deseado, pero cuando el usuario debe percibir estos elementos como distintos, la proximidad es problemática. Considere la barra de búsqueda de la imagen de la página de inicio de arriba; si la imagen de la mujer joven estaba a unos pocos milímetros de la barra, el usuario puede ver incorrectamente la imagen como significativa de alguna manera o relacionada con la función de esta sección de la pantalla. Además, cuantos más elementos haya en una pantalla, más difícil será identificar el elemento de destino. El desorden visual es el enemigo del usuario; quieren encontrar partes de la pantalla relevantes para la tarea de inmediato, sin tener que jugar al escondite. Al separar los elementos significativos con espacios en blanco o algún otro fondo anodino, el usuario puede escanear la pantalla e identificar los elementos de destino en menos tiempo (es cierto, después de tener en cuenta una serie de otros factores). Por lo tanto, los elementos significativos son más fáciles de identificar y distinguir cuando están espaciados, pero cuando estos elementos pertenecen a un grupo significativo, la proximidad debe incrementarse.
Ley de la similitud : cuando los elementos comparten características superficiales asumimos que pertenecen al mismo grupo; por lo tanto, si los elementos no deben verse como agrupados, la similitud debe reducirse. Además, si los elementos sin sentido o irrelevantes son similares a las partes significativas de la pantalla, es probable que el usuario los confunda y tarde más en identificar y seleccionar los elementos relevantes de la tarea. Por ejemplo, imagine lo difícil que sería identificar el cuadro de búsqueda en la página de inicio de rightmove.co.uk si el fondo constara de muchos rectángulos blancos con un contorno negro.
[/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]