Exploradores de experiencias: Navegando por 5 Estados del Sistema en aplicaciones móviles
Este artículo fue escrito en colaboración con @sergio.oviedodr — Analista UX de Pragma.
Cuando se trata de construir los estados del sistema en una aplicación móvil, es fundamental tener en cuenta dos aspectos principales: el sistema híbrido y el sistema nativo. Las aplicaciones híbridas poseen un sistema de diseño estándar que se adapta a cualquier tipo de sistema operativo. Esto no quiere decir que los estados no se presenten en las aplicaciones nativas, sino que tienden a presentarse de forma diferente dependiendo de las reglas y condiciones de cada sistema operativo.
En este artículo se analizarán y explicarán los estados del sistema para aplicaciones híbridas, ya que permiten aplicar patrones de diseño más comunes y brindan mucha más libertad creativa. Por lo tanto, se deben tener en cuenta muchos aspectos claves que se consideran indispensables para la creación de estados óptimos, los cuales ofrezcan una experiencia fluida. Estos aspectos pueden ir desde satisfacer las necesidades del usuario hasta garantizar una estética excelente y tener una buena usabilidad.
Ahora bien, estos estados conviven en la gran mayoría de aplicaciones, por lo que se convierten en insumos necesarios para la experiencia que las personas viven con el sistema. Estos estados tienen en cuenta acciones simples, desempeñando un papel significativo en la comunicación entre la tecnología y el usuario, asegurando que comprendan lo que está sucediendo en el sistema en todo momento.
Estado de Carga y Espera: Manteniendo al Usuario Informado
Cuando los consumidores están interactuando con una aplicación, generalmente quieren respuestas instantáneas a sus acciones, por lo tanto, es aquí donde entra el estado de carga, su propósito es brindar una retroalimentación visual que indique que la aplicación está funcionando y procesando datos.
Jakob Nielsen, afirma que siempre se debe mantener informados a los usuarios sobre lo que está sucediendo en el sistema, ya que esto puede determinar los próximos pasos a seguir de los usuarios (Nielsen,1994). Es así como este estado se puede considerar como uno de los más importantes en cualquier aplicación.
Este estado puede representarse de manera muy simple, por ejemplo, en aplicaciones como YouTube, cuando se carga un video, se muestra un indicador de carga que gira para mostrar que la aplicación está trabajando en la acción solicitada. Debido a que su objetivo principal es evitar que las personas piensen que la aplicación no responde. Esta retroalimentación evita la frustración y además mantiene al usuario informado, paciente y comprometido.
Por otro lado, existe otro caso habitual conocido como el estado de espera, donde los usuarios se encuentran en una situación de espera muy prolongada durante una interacción, como puede ser cuando la aplicación está cargando datos o contenido.
En el artículo publicado por el estudio Torresburriel, titulado “Mantener el interés del usuario durante las esperas”, se explica que por lo general se recomiendan dos puntos claves, mantener informados a los usuarios y reducir la frustración (Torresburriel, 2021). Para lograrlo se pueden utilizar animaciones sutiles y mensajes informativos, ya que mantienen al usuario al tanto de la situación, evitando así la sensación de abandono o frustración.
En algunos casos, los usuarios se pueden enfrentar a situaciones de carga pesadas o extensas, como acciones de descarga o carga de documentos, por esta razón, es importante brindarles la oportunidad de tener control y libertad sobre el estado de carga.
Por último, existe la carga de esqueleto o de contenido, que generalmente suele ser una de las más transparentes en situaciones de espera del usuario. Este tipo de carga tiene como misión mejorar su experiencia de manera desapercibida, ya que al brindar la impresión de una carga más rápida, logra disminuir la ansiedad durante la espera y mejora la usabilidad de la aplicación.
Lucia Ojeda explica en su artículo “Cómo mejorar la UX durante los tiempos de espera” que este tipo de carga muestra en todo momento el contenido clave, aunque la carga no se haya completado al 100%, lo que la hace mucho más intuitiva y eficaz (Ojeda, 2020). Para implementarlos correctamente, es importante diseñarlos con precisión basándose en el modelo de cajas, asegurando que la estructura mostrada refleje fielmente el contenido real. También es recomendable usar animaciones sutiles para una transición suave entre el esqueleto y el contenido final.
Estado de Éxito y Error: Guiando al Usuario a través de la Experiencia
Los estados de éxito y error son muy importantes en el diseño de aplicaciones móviles. Cada uno cumple funciones específicas para guiar al consumidor de forma correcta a través de su experiencia.
El estado de éxito indica que una acción o tarea se ha completado exitosamente, brindando confianza al momento de recibir una confirmación visual de que todo ha ido bien. Para esto, se deben utilizar colores vibrantes, iconos de marca de verificación y mensajes de confirmación para transmitir al usuario que su acción se ha realizado correctamente.
Por el contrario, el estado de error entra en juego cuando algo sale mal. Los errores son inevitables en las interacciones del usuario en cualquier aplicación, pero cómo se manejan es lo que define la experiencia. Ya sea que se trate de un error de validación en un formulario o un problema de conexión, es fundamental proporcionar mensajes claros y sugerencias para corregir el problema. Se debe utilizar colores llamativos, iconos de advertencia y mensajes descriptivos para comunicar el error de manera efectiva y así guiar al usuario hacia una solución.
Los estados de Éxito y Error deben ser considerados en los componentes de un sistema de diseño. Estos estados pueden manifestarse a través de alert toast, campos de texto, formularios, steppers, entre otros. Un ejemplo de esto se encuentra en el Design System de Pragma, en donde se pueden encontrar múltiples componentes creados para representar estos estados. Estos elementos se pueden personalizar dependiendo de las necesidades y preferencias del usuario.
Estado de Navegación: Manteniendo al Usuario Orientado
Este estado se refiere a mantener al usuario informado sobre la condición actual de la interacción de una persona con una aplicación. Es decir, le indica dónde se encuentra dentro de la estructura del sitio y cómo puede moverse de una sección a otra, siendo crucial para diseñar experiencias efectivas que faciliten la orientación y la navegación.
Para fortalecer el estado de navegación, se utilizan elementos como los indicadores de pestañas y secciones, diseñados para comunicar la ubicación del usuario cuando la aplicación contiene múltiples pestañas o acciones.
Por otro lado, es importante que los elementos con los que interactúan se encuentren en un estado activo, proporcionando una retroalimentación visual sobre su ubicación dentro de la aplicación. Para diferenciar estos elementos activos, se pueden utilizar colores que contrasten con los elementos inactivos, logrando darle una visibilidad al mostrar ese cambio de estado cuando el usuario navega de una sección a otra o simplemente realiza una acción.
En ocasiones, cuando no se puede visualizar toda la ruta de navegación del usuario, es útil indicar claramente en qué sección de la aplicación se encuentra. Para esto, es importante usar títulos que pueda detectar y entender con facilidad. Por eso, se recomienda asegurarse de que el título de la sección destaque y sea claramente visible con colores y estilos de fuente que contrasten adecuadamente.
Se puede utilizar un tamaño de fuente lo suficientemente grande para que sea legible sin esfuerzo. También es conveniente evitar tener un título con muchos caracteres. Por último, se debe colocar el título en un lugar que mantenga un estándar en el sistema, como la parte superior de la interfaz, donde las personas puedan encontrar fácilmente esta información ayudando a mantener al usuario informado durante la navegación.
Para culminar el tema del estado de navegación, se encuentran elementos como la barra de progreso, también conocida como “steppers”, los cuales informan al consumidor sobre su avance dentro de un proceso. Ya sea en formularios multistep o en acciones de compras, estas barras visuales ayudan a reducir la incertidumbre y la ansiedad, al proporcionar una indicación clara de cuánto se ha completado y cuánto queda por hacer.
Para estos elementos, se debe tener en cuenta los estados que pueden presentarse, tales como:
- ¿En qué paso estás? Indicar claramente el paso actual del usuario.
- Pasos completados: Muestra visualmente que un paso ha sido completado.
- Pasos no completados: Indicar los pasos pendientes.
Para cada uno de estos estados, es esencial crear diferentes estados que apoyen la navegación. Estos pueden incluir iconos, colores y estilos que diferencian claramente cada estado.
También existen elementos que muestran el progreso del usuario. Estos se representan mediante una barra de progreso horizontal que señala los distintos pasos del proceso y la posición actual en la que se encuentra. Esto genera valor, ya que indica cuánto le queda para completar la tarea, generando confianza al permitirle visualizar el avance en el proceso (GAMMAUX, 2022) .
Tenemos varias alternativas de usar varios elementos de progreso personalizados que adoptan formas y animaciones específicas para adaptarse al diseño y temática en la aplicación, como por ejemplo un spinner el cual me va simulando el progreso que voy teniendo mediante un porcentaje de 0 a 100.
Estado de Conexión/Desconexión: Informando al usuario sobre la Conectividad
Como su propio nombre indica, es fundamental garantizar que los usuarios estén al tanto de si están desconectados, si la conexión es débil o si se ha restablecido. Esto les permite tomar decisiones informadas sobre cómo interactuar con la aplicación en función de su conectividad.
Para notificar correctamente los estados de conexión, es fundamental ser claro y visible. Por ejemplo, para las notificaciones temporales, como los cambios breves en la conexión, se pueden emplear snackbars o alertas de brindis ubicados en lugares visibles pero no invasivos. Esto informa y reduce la frustración durante las pérdidas de conexión.
Los mensajes de estas notificaciones deben ser breves, indicando claramente el estado de la conexión de manera simple, como: “Conexión perdida”, “Conexión intermitente” o “Conexión restablecida”. En este artículo sobre notificaciones en UX/UI , el diseñador Pablo Elices aconseja el uso de iconos y colores específicos para representar cada estado: rojo para desconexión , naranja para conexión intermitente y verde para conexión estable (Elices, 2024) . Esta ayuda visual complementa el mensaje clave y, a su vez, ayuda a los consumidores a identificar rápidamente si hubo algún cambio en la conexión.
Es fundamental combinar los recursos gráficos y apoyos visuales de manera correcta para asegurar que personas con condiciones visuales, tales como la sensibilidad a la luz, daltonismo (ceguera al color), visión borrosa, entre otras, puedan entender el mensaje. También se debe implementar una iconografía universal, que tenga coincidencia con el mundo real, como lo dice uno de los 10 principios de Nielsen. Por último, se debe tener en cuenta el uso de textos legibles. De este modo, se estará creando una aplicación con principios sólidos de accesibilidad que podrá marcar una gran diferencia para ellos.
Conexión restablecida:
Conexión intermitente:
Conexión perdida:
En casos donde la experiencia depende de una buena conexión, se pueden usar banners o mensajes relevantes en la interfaz. Estos deben explicar claramente el problema y proporcionar soluciones específicas, convirtiéndose en el salvavidas que evita la frustración del usuario. Los mensajes de error deben ser claros, específicos y no solo anunciar que hay un problema, sino sugerir soluciones (The Bridge,2024). Por ejemplo, se puede indicar cómo recargar la aplicación o simplemente redirigir al usuario a una sección para solucionar el problema de conexión.
Estado de Autenticación: Garantizando Seguridad y Control de Cuenta
Para finalizar, se encuentra el estado de autenticación, el cual informa si se ha iniciado sesión correctamente en la cuenta, asegurando el control del usuario y garantizando la seguridad. Para este estado, se recomienda utilizar notificaciones leves como snackbars, con las mismas indicaciones mencionadas anteriormente, definiendo textos cortos y sencillos que indiquen el estado de la sesión. Los posibles estados de autenticación pueden incluir:
Sesión iniciada:
Sesión cerrada:
Datos incorrectos:
Para el estado de “ Datos incorrectos ”, es útil apoyarse en los comportamientos de los campos de texto cuando se ingresa un dato incorrecto. Se recomienda resaltar los campos de error en color rojo y proporcionar mensajes descriptivos cerca de cada campo para comunicar claramente lo que sucedió. Esto ayuda a identificar y corregir rápidamente cualquier problema con la información ingresada, mejorando la experiencia general de la autenticación.
Conclusiones
Los estados del sistema desempeñan un papel fundamental en el diseño de aplicaciones, al proporcionar ciertas características clave que mejoran la experiencia de los usuarios; estos estados brindan una retroalimentación visual, garantizan transparencia y seguridad. Al implementar estos estados de manera efectiva, los diseñadores pueden aumentar la satisfacción y fidelidad de los consumidores.
Además, al definir y considerar los estados del sistema desde el inicio de cualquier proceso de diseño digital, se puede mejorar la efectividad y la consistencia de las aplicaciones móviles de manera estandarizada. Esto permite enfocar la atención en la construcción de situaciones más complejas que los usuarios puedan experimentar durante la navegación del sistema. En última instancia, se trata de crear una experiencia fluida y satisfactoria que motive a los usuarios a regresar una y otra vez.
Lista de referencias:
Nielsen, J. (24 de abril, 1994) Diez heurísticas de usabilidad para el diseño de interfaces de usuario. https://www.nngroup.com/articles/ten-usability-heuristics/
Ojeda, L. (13 de enero, 2020) Cómo mejorar la UX durante los tiempos de espera. https://welcometoux.com/ui/como-mejorar-la-ux-durante-los-tiempos-de-espera/
Torresburriel Estudio. (7 de septiembre, 2021) Mantener el interés del usuario durante las esperas. https://torresburriel.com/weblog/mantener-interes-del-usuario-durante-las-esperas/
Gamaux. (7 de octubre, 2022) Diseñar estados vacíos para generar interacción. https://www.gammaux.com/blog/disenar-estados-vacios-para-generar-interaccion/
El puente. (27 de mayo de 2024) Diseñar con palabras: el UX Writing. https://thebridge.tech/blog/disenar-con-palabras-el-ux-writing
Elices, P. (16 de abril de 2024). Notificaciones en UX/UI. https://aprenderuxui.com/notificaciones-ux-ui/aprender/uidesign/
Torresburriel Estudio (27 de mayo de 2023). Mensajes de error y UX: una guía completa. https://torresburriel.com/weblog/mensajes-de-error-y-ux-una-guia-completa/
TorresBurriel Estudio (12 de abril, 2022) Barras de progreso e indicadores de tiempo. https://torresburriel.com/weblog/barras-de-progreso-e-indicadores-de-tiempo/
