3.4 : No es lo que haces, es la forma en que lo haces: mejores prácticas de usabilidad de aplicaciones móviles

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

DISEÑO DE EXPERIENCIA DEL USUARIO MÓVIL

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

No es lo que haces, es la forma en que lo haces: mejores prácticas de usabilidad de aplicaciones móviles

[/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/2020/03/ux.jpg?media=1685903855” show_bottom_space=”off” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.3.4″ 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=”17px|||” 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.3.4″ 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”]

Hay mejores prácticas para la usabilidad móvil, ya que hay mejores prácticas para la usabilidad en otras plataformas. Estas mejores prácticas no sustituyen la investigación del usuario y las pruebas de usabilidad; pretenden ser una guía de “inicio rápido” para que sus diseños se muevan en la dirección correcta. No existen reglas absolutas en el diseño de usabilidad y sus usuarios deben moldear sus decisiones de diseño tanto como las mejores prácticas.

En su documento, Principios UX de la aplicación móvil, el equipo móvil de Google ofrece algunas pautas de mejores prácticas para la usabilidad de la aplicación móvil. Sin embargo, estas pautas deben formar la base de su diseño para la usabilidad en aplicaciones móviles, ya que siempre las mejores prácticas no sustituyen la investigación y las pruebas de los usuarios para descubrir qué funciona para 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.3.4″ 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”]

Mejores prácticas generales de usabilidad de aplicaciones móviles

[/et_pb_text][et_pb_text quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.3.4″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” ul_line_height=”1.6em” ol_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”]

• El contenido y todo el texto deben ser fáciles de leer. Esto debería ser cierto en cualquier entorno, incluso cuando la luz solar brillante afecta la legibilidad de la pantalla. Las fuentes se deben establecer en un mínimo de 11 puntos y se deben usar de manera consistente en todo momento. El contraste entre el texto y el fondo es clave para la legibilidad en luces brillantes.
• El contenido debe estar disponible incluso cuando Internet no lo esté. Si bien no es posible mantener todo el contenido en el dispositivo, el contenido central debe estar disponible incluso cuando no hay una conexión a Internet (tanto 3 / 4G como Wi-Fi).
• El espacio de control y el tamaño son importantes. Estos deben ser fáciles de tocar y controlar por el usuario.

1. Aplicaciones de Android: tamaño objetivo de 48 dp
2. Aplicaciones de iOS: tamaño objetivo de 44 x 44 px

• Las tareas de varios pasos que no están incluidas en la interfaz normal deben presentarse en vistas modales.
• Los botones más importantes de CTA (Llamado a la acción) en su aplicación deben estar “fijos” o permanentemente a la vista.
• El contenido en pantalla y las transiciones deben entregarse de forma rápida y sin dolor para evitar frustrar a los usuarios con largos tiempos de espera.

[/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/03/38f99247607769e012ec8e5361759a63.jpg?media=1685903855” show_bottom_space=”off” force_fullwidth=”on” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.3.4″ 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 admin_label=”Text” _builder_version=”4.3.4″ 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”]

Directrices para formularios de usabilidad en aplicaciones móviles

[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”4.3.4″ 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 etiquetas de formulario deben existir sobre los campos o crearse como etiquetas flotantes para que ciertos usuarios sepan por qué están completando un formulario.
• Los formularios deben intentar comunicar lo que es necesario en un campo para evitar errores del usuario.
• Los formularios deben validarse a medida que se completa cada campo y no al final del proceso.
• Los formularios deben comenzar con el cursor ya colocado en el primer campo y con el teclado de entrada correcto que se muestra.
• Los formularios deben garantizar que la CTA debajo del pliegue se desplace automáticamente hacia arriba cuando un usuario complete el formulario.
• Los formularios donde las listas se presentan como opciones deben mostrarlas horizontalmente sobre el teclado en lugar de verticalmente. Esto asegura que el espacio de la pantalla se use de manera efectiva cuando un teclado está presente en la pantalla.
• Los formularios que requieren una entrada numérica deben mostrar un teclado de estilo de teclado numérico cuando sea necesario.
• Los formularios pueden beneficiarse de los controles paso a paso cuando los usuarios necesitan editar cantidades. Esto también es cierto para las cestas de compras.
• Los formularios y las instalaciones de búsqueda deben ofrecer controles deslizantes para establecer máximos y mínimos.
• Los formularios que requieren la entrada de fecha / hora deben ofrecer controles de selección para facilitar este proceso al usuario.
• Los formularios que requieren entradas de calendario deben considerar mostrar un calendario visual; esto es particularmente importante en las aplicaciones de estilo de reserva de viajes / hotel.
• Si una aplicación falla mientras un usuario está ocupado con un formulario, debe recuperar automáticamente los datos ingresados ​​y devolver al usuario directamente al punto del proceso cuando ocurrió el bloqueo.

[/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/03/df8c05bdb063ebd7a9420168dd2c2c62.png?media=1685903855” show_bottom_space=”off” force_fullwidth=”on” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.3.4″ 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 admin_label=”Text” _builder_version=”4.3.4″ 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”]

Los cuatro grandes no hacer de la usabilidad móvil

[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”4.3.4″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” ul_font=”PT Serif||||||||” ul_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”]

Además de qué hacer, Google también centra su atención en lo que no debe hacer. Han identificado cuatro áreas en el desarrollo de aplicaciones móviles que causan confusión o angustia al usuario. Esto reduce el atractivo general de la aplicación y la experiencia del usuario dramáticamente.

• No copie elementos de la interfaz de usuario entre plataformas. Puede parecer una buena idea asegurarse de que sus aplicaciones iOS y Android y Windows se vean exactamente iguales, pero cada plataforma tiene una apariencia definida. Esto lleva a los usuarios a desarrollar imágenes claras de las convenciones asociadas con esa plataforma. Si cambia la interfaz de usuario para parecerse a una plataforma diferente; no beneficia al usuario, les deja sin saber cómo proceder.
• No utilice enlaces URL subrayados. La URL subrayada es parte de un modelo diferente de interacción en línea: pertenece a sitios web a los que se accede a través de navegadores. Las aplicaciones móviles no funcionan de esa manera, se basan en botones para indicar un cambio en la pantalla en lugar de un enlace que lo lleva a una página diferente. Google también agrega un corolario a esta regla: no codifique los enlaces porque deben cambiarse manualmente y los enlaces rotos estropean la experiencia del usuario.
• No lleve a los usuarios a los navegadores. Desea mantener un usuario de la aplicación dentro de su aplicación y no enviarlo a otra parte. Enviarlos a un navegador los arriesga a no volver a la aplicación y proporciona una experiencia de usuario “torpe”. Si debe llamar su atención sobre algún contenido en línea, use un navegador dentro de su aplicación para entregar ese contenido; no envíe al usuario a otra parte.
• No exija una calificación instantánea en la tienda de aplicaciones después de la descarga. Si desea buenas calificaciones para sus aplicaciones, debe darle al usuario algo de tiempo para que se acostumbre y aprecie la experiencia. Debería pedir a los usuarios habituales que repiten las calificaciones, no las que acaban de instalar la aplicación. Se asegurarán de darle mejores críticas y reseñas con un mayor nivel de contenido.

[/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/03/1b43c99ded6c2baae9cf3e03662dbeb1.jpg?media=1685903855” show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.3.4″ 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 admin_label=”Text” _builder_version=”4.0.9″ 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”]

¿que nos llevamos?

[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”4.3.4″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” ul_font=”PT Serif||||||||” ul_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 usabilidad de la aplicación móvil no es muy diferente de la usabilidad para otras plataformas. Si sigue las pautas anteriores, debería apuntarlo en la dirección correcta; sin embargo, no reemplaza la investigación real del usuario y las pruebas de usabilidad. Cada conjunto de usuarios es único y, en primer lugar, desea satisfacer las preferencias de sus grupos de usuarios.

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