1.3 : Principio de coherencia y estándares en el diseño de interfaces de usuario

Lección 1 de 0

En Progreso

1.3 : Principio de coherencia y estándares en el diseño de interfaces de usuario

29 marzo, 2023

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

La guía práctica de usabilidad

[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”4.7.7″ 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”]

Principio de coherencia y estándares en el diseño de interfaces de usuario

[/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/12/5702339106930.jpg?media=1669990493” title_text=”5702339106930″ show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.7.7″ animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” 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 quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.7.7″ 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|” 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”]

Aprenda a diseñar teniendo en cuenta la coherencia y los estándares y comprenda las razones por las que son importantes para incorporarlos a su trabajo. Derivado de las diez pautas de interfaz de usuario (UI) de Jakob Nielsen y Rolf Molich, la “coherencia y los estándares” son evidentes en muchos de los productos de uso generalizado creados por algunas de las empresas más exitosas. Productos como Adobe Photoshop, lanzado originalmente en la década de 1990, y Google Gmail, lanzado a mediados de la década de 2000, son solo algunos de los productos ampliamente populares que exhiben esta importante regla general. Este artículo le enseñará cómo reconocer la coherencia y los estándares y explicará por qué son importantes en el diseño de la interfaz de usuario.

Dos razones clave para la coherencia y los estándares en el diseño de la interfaz de usuario

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

Al diseñar la interfaz de usuario, es importante tener en cuenta las interacciones que tienen lugar entre la cognición humana y la pantalla para la que está diseñando. Facilitar las cosas a sus usuarios significa no obligarlos a aprender nuevas representaciones o conjuntos de herramientas para cada tarea. Reducir la duración del proceso de pensamiento eliminando la confusión también es una apuesta segura cuando se trata de mejorar la experiencia del usuario.

1. Reducir el aprendizaje

La coherencia limita el número de formas en que se representan las acciones y operaciones, lo que garantiza que los usuarios no tengan que aprender nuevas representaciones para cada tarea. Además, establecer normas de diseño como las siguientes convenciones de plataforma permite a los usuarios completar nuevas tareas sin tener que aprender un conjunto de herramientas completamente nuevo. Esto puede parecer un concepto simple, pero hay muchos ejemplos que exhiben una falta de consistencia en sus diseños. Un ejemplo que retrata este problema es el sitio web de Xfinity de Comcast Corporation, una empresa estadounidense de medios de comunicación. En su sitio web, el menú secundario no solo es inconsistente casi cada vez que el usuario hace clic en otra página, sino que también es inconsistente para el menú principal. Echemos un vistazo y comparemos las tres páginas diferentes del sitio web: Página de inicio, My Xfinity y TV.

[/et_pb_text][/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/12/5d93afdf9a2e23846ae2b87a674ff670.png?media=1669990493” title_text=”5d93afdf9a2e23846ae2b87a674ff670″ show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.7.7″ animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” 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 quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.7.7″ 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|” 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”]

Esta es la página de inicio del sitio web de Xfinity. Observe cómo el área anotada que resalta las barras de menú principal y secundaria será diferente a medida que el usuario haga clic en otras páginas.

[/et_pb_text][/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/12/aecd3a5ddcedd8d8f31339d555bf64e9.png?media=1669990493” title_text=”aecd3a5ddcedd8d8f31339d555bf64e9″ show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.7.7″ animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” 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 quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.7.7″ 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|” 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”]

[/et_pb_text][/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/12/23c1da1160aa3edbbe49f87d1e428f80.png?media=1669990493” title_text=”23c1da1160aa3edbbe49f87d1e428f80″ show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.7.7″ animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” 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 quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.7.7″ 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|” 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”]

Esta es la página My Xfinity del sitio web de Xfinity. Las tres páginas examinadas anteriormente tienen colores, diseños y estilos de fuente muy diferentes en su menú de navegación. Estas diferencias hacen que resulte confuso y desorientador para el usuario, ya que ya no se siente como un sitio web, como si fueran tres empresas diferentes.

2. Eliminar la confusión

Los usuarios tienden a aplicar reglas que han experimentado fuera de su sitio web o producto, incorporando un conjunto de sus propias expectativas. Sabiendo eso, debemos ser conscientes de si estamos causando confusión y alienación cuando nos desviamos de los estándares y convenciones de diseño. Además, los usuarios no deberían tener que perder tiempo preguntándose si diferentes palabras, interacciones o acciones realmente significan lo mismo dentro del contexto de su producto. La confusión ocurre cuando las personas no pueden “juntar” la información y, a veces, les impiden lograr algo. Cuando el usuario no puede lograr su objetivo, es comprensible que se sienta enojado o frustrado. No es ningún secreto que la confusión generalmente causa frustración y la frustración conduce a una mala experiencia del usuario. Por lo tanto,

Cinco formas de lograr la coherencia en su trabajo

Hay muchos aspectos para lograr la coherencia dentro de su interfaz de usuario. Aquí hay 5 cosas que puede observar para mejorar la coherencia en sus diseños:

1. Su elección de idioma

El lenguaje que usa tanto en el texto de marketing como en la redacción utilizada en todo el flujo de usuarios no solo puede influir en la percepción que tiene el usuario de su producto, sino que también puede generar confusión cuando usa terminología diferente para representar lo mismo. Esto se refiere no solo a los términos que elija, sino también al tono en el que transmite su mensaje.

Asustar a su usuario con un mensaje de error serio y amenazante cuando navega por un sitio de comercio electrónico que muestra un tono amigable en general seguramente matará una buena experiencia de usuario, por ejemplo.

Cuando las cosas tienen el mismo significado o realizan la misma operación, deben representarse de la misma manera, como es el caso de la función de correo electrónico de Google, Gmail. Según el estilo de organización de las aplicaciones de correo electrónico del cliente, las carpetas de Gmail se denominan “Bandeja de entrada”, “Borradores”, “Correo enviado”, etc. El idioma utilizado para estas carpetas muestra familiaridad y coherencia para cualquiera que haya utilizado aplicaciones de correo electrónico en el pasado.

Las etiquetas de carpeta en la versión 2011 de Gmail muestran una variedad de opciones familiares. El lenguaje utilizado para estas carpetas muestra coherencia, ya que utiliza las etiquetas “Bandeja de entrada”, “Borradores” y “Spam”, todos los cuales son familiares para cualquiera que haya utilizado aplicaciones de correo electrónico en el pasado.

2. Aplicar los elementos de la IU tal como se definieron originalmente

Los elementos de la interfaz de usuario que se utilizan comúnmente, como ventanas de mensajes, barras de menús, iconos, barras de desplazamiento y botones de opción, son elementos gráficos que suelen ser coherentes y tienen representaciones que los usuarios comprenden ampliamente. Por ejemplo, los botones de opción están diseñados para usarse cuando solo se permite una opción. Por otro lado, las casillas de verificación deben usarse solo cuando al usuario se le permite más de una opción. En muchos sentidos, podemos ver cómo HTML5 superó a la tecnología Flash a finales de 2014. Una de las razones es posiblemente la facilidad de aplicación y uso que los desarrolladores, diseñadores y usuarios pueden disfrutar como resultado de la coherencia y los estándares de HTML5 en definir sus elementos de interfaz de usuario.

[/et_pb_text][/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/12/foda.jpg?media=1669990493” title_text=”foda” show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.7.7″ animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” 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 quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.7.7″ 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|” 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”]

Los botones de opción solo permiten una opción. Por lo tanto, solo tiene sentido que los botones de opción integrados de HTML también se comporten de esa manera en la funcionalidad.

[/et_pb_text][/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/12/foda.jpg?media=1669990493” title_text=”foda” show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.7.7″ animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” 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 quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.7.7″ 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|” 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”]

Las casillas de verificación permiten más de una opción. Por lo tanto, solo tiene sentido que las casillas de verificación integradas de HTML se comporten de esa manera también en la funcionalidad.

Un mal ejemplo de coherencia en la elección de los elementos de la interfaz de usuario aparece en la sección de comentarios que solía tener el sitio web de noticias de la BBC en el pasado. Los comentarios de usuarios mejor calificados se indican con una flecha que apunta al sur, pero los usuarios deben hacer clic en la flecha que apunta al norte para aumentar la calificación de los comentarios. Usar una flecha que apunta al sur para representar los comentarios mejor calificados tampoco es intuitivo; los números crecientes suben, no bajan. Cuando los usuarios escanean la sección de comentarios de una página web, pueden simplemente actuar de acuerdo con las flechas, sin leer las etiquetas de acción, lo que puede inducir selecciones incorrectas.

No utilizar representaciones visuales de uso común obligará al usuario a interactuar conscientemente con la interfaz de usuario de una manera incómoda, lo que reduce la velocidad a la que podría estar navegando y realizando las tareas deseadas.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”4.7.7″ 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_image src=”https://usercontent.one/wp/www.interactemos.com/wp-content/uploads/2020/12/afb3ec6fd44c2fd15c180d24805ab791.png?media=1669990493” title_text=”afb3ec6fd44c2fd15c180d24805ab791″ show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.7.7″ animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” 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 quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.7.7″ 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|” 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”]

La sección de comentarios de la BBC muestra una flecha hacia abajo para “Mejor calificación” y una flecha hacia arriba para “Calificación más baja”. Esta representación es inconsistente y confusa para sus usuarios, ya que el concepto “superior” es generalmente sinónimo de una flecha hacia arriba y “inferior” es sinónimo de una flecha hacia abajo.

3. Tenga en cuenta varias convenciones bien establecidas al decidir el diseño.

Ciertamente es discutible si un diseñador debería “copiar” cómo otras personas diseñan sus sitios web o aplicaciones. Sin embargo, cuando diseña teniendo en cuenta la perspectiva y la cognición del usuario, es importante comprender que los seres humanos tienen una memoria sólida para saber dónde se ubican visualmente las cosas en la pantalla. Debe aprovechar esta característica reservando ubicaciones de uso común para varios elementos gráficos, como tener el logotipo en la parte superior izquierda, el campo de búsqueda en la parte superior derecha, el icono de salida en la parte superior derecha, etc.

[/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_image src=”https://usercontent.one/wp/www.interactemos.com/wp-content/uploads/2020/12/262c53c13c14713682dd1e0700a35302.png?media=1669990493” title_text=”262c53c13c14713682dd1e0700a35302″ show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.7.7″ animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” 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_image src=”https://usercontent.one/wp/www.interactemos.com/wp-content/uploads/2020/12/d920a032ef379e110325e8b2c0002f30.png?media=1669990493” title_text=”d920a032ef379e110325e8b2c0002f30″ show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.7.7″ animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” 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 quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.7.7″ 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|” 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”]

Tanto Microsoft como Apple colocan su logotipo en la parte superior izquierda y el campo de búsqueda en la parte superior derecha de sus sitios web. Esta forma de coherencia en el diseño ayuda a los usuarios a sentirse menos desorientados cuando navegan por un sitio nuevo y desconocido.

4. Diseñe según las expectativas de su usuario

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

Asegúrese de tener las características y funcionalidades que los usuarios esperarían ver en su sitio. Por ejemplo, el sitio de una aerolínea debe tener un sistema de reserva de boletos, mientras que un sitio para compartir música debe tener un reproductor multimedia.

Obviamente, se espera que un sitio web para compartir videos como YouTube tenga un reproductor de video. Este es un gran ejemplo de coherencia en el sentido de que las características y la funcionalidad del sitio son compatibles con lo que espera el usuario.

5. Cree elementos visuales coherentes en todo su sitio

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

Asegúrese de que los elementos visuales sean consistentes en todo su sitio. El contenido, los elementos de la interfaz de usuario, las fuentes, los fondos y los colores deben estar en armonía y ser coherentes en cada punto de contacto. Como se mencionó anteriormente, apegarse a las convenciones técnicas que existen en forma de HTML5 y CSS3 es una forma de mantener la coherencia. Mientras tanto, tener una guía de marca y estilo a seguir ayuda cuando se enfrentan a decisiones de diseño como colores y fuentes.

Un ejemplo de una guía de estilo y un manual de marca diseñado para la empresa ‘Goodnyt’. Tener un manual de estilo y marca puede ayudarlo a asegurarse de que sus elementos visuales sean consistentes en todo su sitio.

Un mal ejemplo de coherencia en la elección de colores y fuentes se puede ver en la versión 2013 de la interfaz de usuario móvil de Gmail de Google. Aunque se puede argumentar que el ‘significado’ no se ve afectado en este caso, es innegable que la experiencia del usuario casi siempre empeora como resultado de las extrañas diferencias en los elementos visuales entre pantallas.

Una captura de pantalla de la interfaz de usuario móvil de la aplicación Gmail cuando se implementó por primera vez en 2013 muestra la inconsistencia en la elección de cuadros de colores y estilos de fuente.

En resumen

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

La coherencia y los estándares se reconocen como un principio de diseño esencial y deben aplicarse en todo el contenido y las interacciones dentro de su producto. Hay varios aspectos de la coherencia que podemos observar al mejorar nuestros diseños, esto incluye el lenguaje que usamos, los elementos de la interfaz de usuario que elegimos, la forma en que diseñamos nuestro sitio, las funciones y características que incluimos, así como los componentes visuales. decidimos el color y la fuente similares.

Si bien la coherencia ayuda a mejorar la experiencia del usuario al eliminar el aprendizaje innecesario y la confusión para sus usuarios, es importante tener en cuenta que debe usarlo cuando sea necesario, pero no dejar que le impida innovar en ideas de diseño donde tenga sentido.

Seguir los estándares y convenciones y ser coherente debería ser algo que pueda utilizar a su favor. Lo liberará de decisiones de diseño relativamente triviales. Esto le ayudará a ahorrar tiempo y liberar su mente para que pueda mejorar aún más sus diseños y su experiencia de usuario para sus usuarios.

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

Cookie	Duración	Descripción
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.