2.3 : Funcionalidad y diseño móvil: no reduzca la pantalla, concéntrese en las tareas

2 octubre, 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.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.2.2″ 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”]

Funcionalidad y diseño móvil: no reduzca la pantalla, concéntrese en las tareas

[/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/02/56e0127742304.jpg?media=1685903855” show_bottom_space=”off” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.2.2″ 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.2.2″ 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”]

El diseño móvil y el diseño de otros dispositivos, como computadoras portátiles y de escritorio, no significa producir el mismo producto, solo que más pequeño. Significa centrarse en lo que le importa al usuario móvil y ofrecer una experiencia de usuario diferenciada. Para hacer esto con éxito, debe centrarse en las tareas y cómo se ejecutan.

El diseño para dispositivos móviles ya no es opcional. Con el teléfono inteligente y, en menor medida, la tableta convirtiéndose en los dispositivos elegidos por miles de millones para acceder a Internet; los diseñadores tienen que atender a esos usuarios o arriesgarse a quedar fuera del mercado para siempre.

Eso significa poner el móvil primero en muchas estrategias de desarrollo de productos. Significa entender que el móvil es diferente y no una experiencia de escritorio. Por ejemplo; el espacio de la pantalla es más limitado en un teléfono inteligente, la conectividad puede no estar garantizada, la duración de la batería es preciosa, etc.

Luego están los beneficios de estos dispositivos a considerar; son más personales que una computadora de escritorio, siempre están encendidos (cuando la batería lo permite) y puede hablar directamente con el usuario a través de ellos. Tienen sensores de movimiento, GPS, acelerómetros y más.

Entonces, ¿cómo abordamos el diseño para dispositivos móviles? Vamos a ver:

Focus on Mobile

Las limitaciones del espacio en pantalla significan que menos es más. Debe mantener las funciones al mínimo. Debe centrarse en las tareas clave que el usuario desea llevar a cabo y deberá soltar cosas de otras plataformas para que el móvil funcione.

Crear valor

Todos y su burro están lanzando una aplicación móvil hoy. Si no puede distinguir claramente su aplicación y las características que ofrece de las de los demás, la suya se perderá en el agujero negro de las tiendas de aplicaciones.

[/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/02/costo.jpg?media=1685903855” show_bottom_space=”off” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.2.2″ 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.2.2″ 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”]

Funcionalidad personal

Si los dispositivos móviles son personales, las funciones que ofrecen también deberían ser personales. Hazlos divertidos, personalízalos y conviértelos en parte integral de la vida de tus usuarios. Hacer las tareas no tiene que ser una tarea difícil.

Considere el contexto de uso

¿Cuándo accederá su usuario a su funcionalidad? ¿Cuándo están aburridos? Cuando estan ocupados? Cuando se pierden? Haga que la funcionalidad se adapte a la situación y está en camino de ser relevante para sus usuarios.

Funciones que se ajustan al dispositivo

Las funciones que ofrece deben seguir patrones que brinden la experiencia en cada dispositivo de manera consistente:

Mantenga al usuario en la imagen. Es posible que los datos demoren un tiempo en procesarse, pero debe informar al usuario cuándo recibió sus datos y cuánto tiempo esperarán, y debe hacerlo de inmediato.
Presta atención a los detalles. Las aplicaciones deben ofrecer experiencias fluidas donde los usuarios puedan realizar tareas de manera eficiente. También necesitan verse y sentirse bien para usar.
Mira la interfaz. Los usuarios son todos pulgares, literalmente, en los teléfonos inteligentes. ¿Se pueden completar sus tareas fácilmente con los pulgares de alguien? ¿No? Entonces reconsiderarlos.
Mantén las cosas intuitivas. Esto es volver al problema de los pulgares realmente: mantenga los botones, pestañas, cuadros, etc. al mínimo y mantenga el contenido de fácil acceso y navegación.
Mantenga los controles consistentes y en la parte inferior. Esto permite al usuario centrarse en el contenido y manipularlo según lo necesite.
Reduzca la entrada del usuario donde sea necesario. Preste atención a si la corrección automática es una ayuda o un obstáculo en el dispositivo para sus tareas. Asegúrese de ayudar al usuario a elegir el teclado correcto para hacer el trabajo. No olvides apoyar una orientación horizontal, especialmente si quieres escribir mucho. Piense en proporcionar un bloqueo de orientación para facilitar esto.

[/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/02/0397ecc4bfb6c68e635605d92ae4069f.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.2.2″ 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.2.2″ 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”]

Piensa en la navegación

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

Mucho depende de la complejidad de su tarea, pero la navegación en dispositivos móviles puede caer en estas categorías:

Ninguno en absoluto. Si está lanzando una aplicación meteorológica para su vecindario, una sola pantalla podría (y debería) entregar toda la tarea para el usuario.
Pestañas simples. Cuando necesita dividir contenido consistente en varias áreas. (Piensa en Twitter)
Desglose menús. Cuando necesita entregar mayores niveles de complejidad. Agrupe el contenido y facilite moverse por la jerarquía. (Piense en el menú de configuración en su teléfono inteligente).

Entrar en gestos

Si va a habilitar el control de gestos (y eso se debe a cómo les gusta a sus usuarios completar sus tareas), debe considerar:

Descubrimiento. ¿Cómo sabrá el usuario que puede usar gestos para completar sus tareas?
Gestos a dos manos. Pueden ser útiles, pero también pueden ser un obstáculo. Si tienes un café en una mano; ¿Cómo completará el usuario su tarea con solo controles con una sola mano?

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

Seguir comunicando

Es importante mantener informado al usuario mientras realiza sus tareas. Necesitas:

Tener un método para enviar comentarios. Desde lo táctil (piense en la función de vibración) hasta lo visual (barras de progreso): debe mantener a los usuarios conscientes de si las cosas van bien mientras ejecutan su tarea.
Solicite confirmación cuando sea necesario. Los cuadros modales son molestos, pero la excepción es cuando desea proteger al usuario. Si está preguntando si alguien quiere eliminar una foto, por ejemplo, puede preguntar si está seguro antes de llevar a cabo la acción.

Mantener en la tarea

Si un usuario sale de su aplicación sin completar una tarea; cuando lo vuelven a abrir, deben volver a la misma tarea en el mismo lugar. Haga que reiniciar un proceso sea rápido y fácil y sus usuarios lo amarán por ello.

Considere los gráficos

El icono que usa para su aplicación, idealmente debería ser representativo de la tarea clave que sus usuarios desean llevar a cabo. Haz que sea cegadoramente obvio de un vistazo lo que hace tu aplicación y será mucho más probable que se descargue y se use.

Considere la primera vez de uso

Mantenga las cosas simples y concéntrese mucho en las tareas clave cuando se inicie su aplicación por primera vez. Puede agregar complejidad con el tiempo. Si es confuso o difícil llevar a cabo una tarea la primera vez que se usa su aplicación, es probable que nunca se vuelva a usar.

[/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.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?

Al centrarse en las tareas requeridas por un usuario desde una plataforma móvil y garantizar que la funcionalidad y la forma respalden esas tareas, puede ofrecer una experiencia de usuario móvil de primer nivel a través de su aplicación. Los dispositivos móviles son diferentes de los equipos de escritorio, pero eso no significa que sea más difícil hacer un buen trabajo, solo que se requiere un enfoque diferente.

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