En esta página, se proporcionan lineamientos de diseño para crear una excelente experiencia del usuario en redes lentas y sin conexión.
La calidad de una conexión de red puede verse afectada por varios factores, como los siguientes:
- Mala cobertura del proveedor de red
- Condiciones climáticas extremas
- Interrupciones de energía
- Entrar en "zonas muertas" permanentes, como en edificios con paredes que bloquean las conexiones de red
- Ingresar a "zonas muertas" temporales, como cuando viajas en un tren y pasas por un túnel
- Conexiones a Internet con límite de tiempo, como las de aeropuertos o hoteles
- Prácticas culturales que requieren acceso limitado a Internet o no tienen acceso en momentos o días específicos
Tu objetivo como desarrollador es proporcionar una buena experiencia que disminuya el impacto de los cambios en la conectividad.
Decide qué mostrarles a los usuarios cuando tengan una mala conexión de red
La primera pregunta que debes hacer es cómo se ven el éxito y la falla de una conexión de red para tu app. Una conexión correcta es la experiencia en línea normal de tu app. La falla de conexión incluye cómo se comporta tu app sin conexión y en redes con retrasos.
Para determinar cómo controlar la falla de conexión, hazte estas preguntas importantes de UX:
- ¿Cuánto tiempo esperas para determinar el éxito o el fracaso de una conexión?
- ¿Qué puedes hacer mientras se determina el éxito o el fracaso?
- ¿Qué debes hacer si falla la conexión?
- ¿Cómo le dices al usuario lo que está sucediendo?
Informa a los usuarios sobre su estado actual y el cambio de estado
Infórmale al usuario el estado de la aplicación y las acciones que puede realizar cuando tenga una falla de red. Por ejemplo, una notificación podría decir lo siguiente:
Parece que tienes una mala conexión de red. No se preocupe. Los mensajes se enviarán cuando se restablezca la red.
Informa a los usuarios cuando la conexión de red mejore o se restablezca
La forma en que le digas al usuario que su conexión de red mejoró depende de tu aplicación. Las apps que priorizan la información actual, como los servicios de seguimiento del clima o de la bolsa, deben actualizarse automáticamente y avisar al usuario lo antes posible.
Te recomendamos que le avises al usuario que tu app web se actualizó "en segundo plano" con un indicador visual, como un elemento de notificación de Material Design. Esto implica detectar la presencia de un trabajador de servicio y una actualización de su contenido administrado. Puedes ver un ejemplo de código de esta función en acción aquí.
Un ejemplo de esto es Chrome Platform Status, que publica una nota para el usuario cuando se actualiza la app.
Algunas apps siempre pueden mostrar la última vez que se actualizaron. Por ejemplo, esto es útil para las apps de conversión de monedas.
Las apps de noticias pueden mostrar una notificación simple para actualizar con la que se le informa al usuario que hay contenido nuevo. Si se actualizara automáticamente un artículo, los usuarios perderían su lugar.
Actualiza la IU para que refleje el estado contextual actual
Cada elemento de la IU puede tener su propio contexto y comportamiento que cambia según si necesita una conexión correcta. Un ejemplo sería un sitio de comercio electrónico que se puede explorar sin conexión, pero que inhabilita los precios y el botón Comprar hasta que se restablece una conexión.
Otras formas de estados contextuales pueden incluir datos. Por ejemplo, la app financiera Robinhood usa colores y gráficos para indicarle al usuario cuándo está abierto el mercado de valores. Toda la interfaz se vuelve blanca y, luego, se atenúa cuando cierra el mercado. Cuando el valor de una acción aumenta o disminuye, cada widget de acciones individual se vuelve verde o rojo según su estado.
Informa al usuario para que comprenda qué es el modelo sin conexión
La mayoría de los usuarios están acostumbrados a tener siempre una conexión de red. Debes informarles sobre los cambios que se producen en tu app cuando no tienen conexión. Infórmale dónde se guardan los datos grandes y proporciónale la configuración para cambiar el comportamiento predeterminado. Usa varios componentes de diseño de IU (como lenguaje informativo, íconos, notificaciones, color e imágenes) en conjunto para transmitir estas ideas, en lugar de depender de una sola opción de diseño, como un ícono por sí solo, para contar toda la historia.
Proporciona una experiencia sin conexión de forma predeterminada
Si tu app no requiere muchos datos, almacena en caché esos datos de forma predeterminada. Los usuarios pueden frustrarse cada vez más si solo pueden acceder a sus datos con una conexión de red.
Intenta que la experiencia sea lo más estable posible. Una conexión inestable hace que la app parezca poco confiable. Una app que disminuye el impacto de una falla de red deleita a sus usuarios.
Los sitios de noticias pueden beneficiarse de la descarga y el guardado automáticos de las noticias más recientes, quizás ahorrando datos descargando solo el texto, de modo que un usuario pueda leer las noticias del día sin conexión. Puedes adaptar este comportamiento al del usuario si priorizas la descarga de las categorías de noticias que el usuario ve con más frecuencia.
Informa al usuario cuando la app esté lista para el consumo sin conexión
Cuando una app web se carga por primera vez, debe indicarle al usuario si está lista para su uso sin conexión. Hazlo con un widget que proporcione comentarios breves sobre una operación a través de un mensaje en la parte inferior de la pantalla, por ejemplo, cuando se sincronice una sección o se descargue un archivo.
Asegúrate de que el lenguaje que usas se adapte a tu público y usa la misma redacción en todos los casos en los que corresponda. Los públicos no técnicos a menudo malinterpretan la palabra "sin conexión", por lo que, en su lugar, usa un lenguaje basado en acciones con el que tu público pueda identificarse.
Hacer que la opción "Guardar sin conexión" sea evidente en la interfaz
Si una aplicación usa muchos datos, asegúrate de que haya un interruptor o un elemento fijado para agregar un elemento para usar sin conexión. Descargar archivos automáticamente solo si un usuario solicitó específicamente este comportamiento a través de un menú de configuración Asegúrate de que la IU de fijar o descargar sea obvia para el usuario y que no esté oculta por otros elementos de la IU.
Un ejemplo de esto es un reproductor de música que requiere archivos grandes. El usuario conoce el costo de datos asociado, pero es posible que también quiera usar el reproductor sin conexión. Descargar música para usarla más tarde requiere que el usuario planifique con anticipación, por lo que es probable que quieras informarle al respecto durante la integración.
Aclara qué está disponible sin conexión
Explica con claridad las opciones que ofreces. Es posible que debas mostrar una pestaña o un parámetro de configuración para una "biblioteca sin conexión" o un índice de contenido para que el usuario pueda ver lo que almacenó en su dispositivo y lo que debe guardar. Asegúrate de que la configuración sea concisa y de indicar de forma clara dónde se almacenan los datos y quién tiene acceso a ellos.
Cómo mostrar el costo real de una acción
Muchos usuarios equiparan la capacidad sin conexión con "descarga". Los usuarios de países en los que las conexiones de red fallan con frecuencia o no están disponibles suelen compartir contenido con otros usuarios o guardarlo para usarlo sin conexión cuando tienen conectividad.
Los usuarios con planes de datos a veces evitan descargar archivos grandes por temor al costo, por lo que también te recomendamos que muestres un costo asociado para que los usuarios puedan realizar una comparación activa de un archivo o una tarea específicos. Por ejemplo, la app de música antes mencionada podría detectar si el usuario tiene un plan de datos y mostrar el tamaño del archivo para que pueda ver el costo.
Ayuda a evitar experiencias hackeadas
Los usuarios suelen hackear una experiencia sin darse cuenta de que lo están haciendo. Por ejemplo, antes de que existieran las apps web de uso compartido de archivos basadas en la nube, era común que los usuarios guardaran archivos grandes y los adjuntaran a correos electrónicos para poder seguir editándolos desde otro dispositivo. Una buena IU resuelve el problema que los usuarios intentan resolver sin que se vean involucrados en la experiencia hackeada. Por ejemplo, proporciona una forma de compartir archivos grandes entre dispositivos, en lugar de hacer que adjuntar archivos grandes a los correos electrónicos sea más fácil de usar.
Cómo hacer que las experiencias se puedan transferir de un dispositivo a otro
Cuando compiles para redes inestables, intenta sincronizar en cuanto mejore la conexión para que la experiencia se pueda transferir. Por ejemplo, imagina que una app de viajes pierde una conexión de red en medio de una reserva. Cuando se restablece la conexión, la app se sincroniza con la cuenta del usuario, lo que le permite continuar con su reserva en su dispositivo de escritorio y hace que la experiencia sea fluida.
Dile al usuario en qué estado se encuentran sus datos. Por ejemplo, puedes mostrar si la app se sincronizó. Infórmales cuando sea posible, pero intenta no abrumar a los usuarios con demasiados mensajes.
Crea experiencias de diseño inclusivas
Cuando diseñes tu UX, busca ser inclusivo proporcionando dispositivos de diseño significativos, lenguaje sencillo, iconografía estándar y imágenes significativas que guíen al usuario para que complete la acción o la tarea sin interponerse.
Usa un lenguaje simple y claro
Una buena UX no solo se trata de diseñar tu interfaz. Incluye la ruta que sigue un usuario en tu app y todo lo que encuentra en el camino, incluido el lenguaje que usa la app para describir ese recorrido. Cuando expliques los componentes de la IU o el estado de la app, evita la jerga técnica. A menudo, la palabra "sin conexión" no es lo suficientemente clara como para indicarle al usuario lo que hace tu app.
Usa varios dispositivos de diseño para crear experiencias del usuario accesibles
Usa el lenguaje, el color y los componentes visuales para mostrar un estado o un cambio de estado. El uso solo de color para mostrar el estado puede ser difícil de detectar para los usuarios o incluso ser completamente inaccesible para los usuarios con discapacidades visuales. Además, como el diseño web suele usar el color gris para los elementos inhabilitados, usar una IU en gris para mostrar que tu app está sin conexión puede generar confusión sobre lo que puede hacer la app sin conexión, en especial, si solo usas el color para mostrar el estado.
Para evitar malentendidos, expresa los estados de la app al usuario de varias maneras, por ejemplo, con color, etiquetas y componentes de la IU.
Usa íconos que transmitan significado
Asegúrate de usar etiquetas de texto significativas junto con tus íconos. Los íconos por sí solos pueden ser confusos, en especial porque el concepto de "sin conexión" en la Web es relativamente nuevo. Otros casos de íconos confusos incluyen el uso de un disquete para representar la acción de “guardar”, que puede no tener sentido para los usuarios más jóvenes que nunca vieron un disquete, así como el ícono de menú de “hamburguesa”.
Cuando introduzcas un ícono sin conexión, mantén la coherencia con los elementos visuales estándar de la industria cuando existan y proporciona una etiqueta y una descripción de texto. Por ejemplo, puedes usar un ícono de descarga para indicar que se guardará para usar sin conexión, o un ícono de sincronización para una acción que implique sincronización. Ten cuidado cuando uses íconos para demostrar el estado que podría interpretarse como una acción de guardado o descarga.
Para obtener más inspiración, consulta el conjunto de íconos de Material Design.
Usa diseños de esqueleto y otros mecanismos de comentarios
Mientras la app carga contenido, muéstrale al usuario que está cargando para que no piense que está dañada. Una forma de hacerlo es usar un diseño de esqueleto, una versión del esquema de página de tu app que se muestra mientras se carga el contenido. Considera también usar una IU de cargador previo con una etiqueta de texto que le diga al usuario que la app se está cargando o una animación que titile suavemente para el esquema de página para que parezca que está activa y se está cargando. Esto le asegura al usuario que está sucediendo algo y ayuda a evitar que se vuelva a enviar o que se actualice innecesariamente.
Proporciona comentarios para mostrar el estado de una acción. Por ejemplo, si un usuario está editando un documento sin conexión, considera cambiar el diseño de los comentarios para que sea visualmente diferente de cuando está en línea, pero que aún muestre que su archivo se “guardó” y se sincronizará cuando tenga una conexión de red. Esto le informa al usuario cómo funciona tu app y le asegura que se almacenó su tarea o acción, lo que puede generar más confianza en el uso de tu aplicación.
No bloquear contenido
En algunas apps, un usuario puede activar una acción, como crear un documento nuevo. Algunas apps intentan conectarse a un servidor para sincronizar el documento nuevo y, para demostrarlo, muestran un diálogo modal de carga intrusivo que cubre toda la pantalla. Esto podría funcionar si el usuario tiene una conexión de red estable, pero si la red es inestable, no podrá escapar de esta acción, por lo que la IU lo bloquea para que no haga nada más.
Evita las solicitudes de red que bloqueen el contenido. Permite que el usuario siga explorando tu app y pone en cola tareas que se realizarán y sincronizarán cuando mejore la conexión.
Diseñar para los próximos mil millones
En muchas regiones, los dispositivos de gama baja son comunes, la conectividad no es confiable y, para muchos usuarios, los datos son extremadamente costosos. Gana la confianza de tus usuarios siendo transparente y ahorrativo con los datos. Piensa en formas de ayudar a los usuarios con conexiones deficientes y simplifica la interfaz para acelerar las tareas. Siempre intenta preguntar a los usuarios antes de descargar contenido con muchos datos.
Ofrece opciones de ancho de banda bajo para los usuarios con conexiones con retraso. Proporciona recursos más pequeños en conexiones de red más lentas o ofrece una opción para elegir recursos de alta o baja calidad.
Conclusión
La educación es clave para la UX sin conexión porque los usuarios no están familiarizados con ella. Para ayudarlos a aprender, intenta crear asociaciones con conceptos conocidos, como explicar que descargar para usar más tarde es lo mismo que usar datos sin conexión.
Cuando diseñes para conexiones de red inestables, recuerda estos lineamientos:
- Diseña para el éxito, la falla y la inestabilidad de una conexión de red.
- Los datos pueden ser costosos, así que ten en cuenta al usuario.
- Para la mayoría de los usuarios de todo el mundo, el entorno tecnológico es casi exclusivamente móvil.
- Los dispositivos de gama baja son muy comunes, con almacenamiento, memoria y potencia de procesamiento limitados, pantallas pequeñas y una calidad de pantalla táctil inferior. Asegúrate de que el rendimiento sea parte de tu proceso de diseño.
- Permite que los usuarios exploren tu aplicación cuando no tengan conexión.
- Informa a los usuarios sobre su estado actual y sobre los cambios en los estados.
- Intenta proporcionar datos sin conexión de forma predeterminada si tu app no requiere muchos datos.
- Si la app consume muchos datos, infórmales a los usuarios cómo pueden descargarla para usarla sin conexión.
- Haz que las experiencias se puedan transferir entre dispositivos.
- Usa lenguaje, íconos, imágenes, tipografía y color en conjunto para expresar ideas al usuario.
- Brinda tranquilidad y comentarios para ayudar al usuario.