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.
- Cortes de energía
- Entrar en "zonas sin conexión" permanentes, como en edificios con paredes que bloquean las conexiones de red
- Entrar en “zonas muertas” temporales, como cuando viajas en un tren y atraviesas un túnel
- Conexiones a Internet con tiempo, como las de hoteles o aeropuertos
- Prácticas culturales que requieren acceso limitado o nulo a Internet en momentos o en 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é mostrar a los usuarios cuando tengan una mala conexión de red.
La primera pregunta que debes hacer es cómo se ve el éxito y la falla de una conexión de red en tu app. Una conexión exitosa es la experiencia en línea normal de tu app. La falla de conexión incluye el comportamiento de tu app sin conexión y en redes retrasadas.
Para determinar cómo manejar las fallas de conexión, hazte estas preguntas importantes sobre la UX:
- ¿Cuánto tiempo esperas para determinar el éxito o la falla 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 informas al usuario lo que está sucediendo?
Informa a los usuarios sobre su estado actual y el cambio de estado
Indica al usuario el estado de la aplicación y las acciones que puede realizar si tiene una falla de red. Por ejemplo, una notificación podría decir lo siguiente:
Parece que la conexión de red es mala. 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 informas al usuario que su conexión de red mejoró depende de tu aplicación. Las apps que priorizan la información actual, como las herramientas de seguimiento del clima o del mercado de valores, deben actualizarse automáticamente e informar al usuario lo antes posible.
Te recomendamos que le informes al usuario que tu app web se actualizó "en segundo plano" mediante una indicación visual, como un elemento de aviso de Material Design. Esto implica detectar la presencia de un service worker y una actualización de su contenido administrado. Puedes ver un ejemplo de código de esta función en funcionamiento aquí.
Un ejemplo de esto es el estado de la plataforma de Chrome, 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, es particularmente útil para apps de conversión de monedas.
Las apps de noticias pueden mostrar una notificación simple de presionar para actualizar para informar al usuario sobre el contenido nuevo. Si actualizas automáticamente un artículo, los usuarios perderían su lugar.
Actualiza la IU para reflejar el estado contextual actual
Cada elemento de la IU puede tener su propio contexto y comportamiento que cambia en función de si necesita una conexión exitosa. 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 restablezca 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 pone blanca y se vuelve gris cuando el mercado cierra. 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 cuál es el modelo sin conexión.
La mayoría de los usuarios están acostumbrados a tener siempre una conexión de red. Debes enseñarles sobre los cambios en tu app cuando no tienen una conexión. Indícales dónde se guardan los datos grandes y otórgales opciones de configuración para cambiar el comportamiento predeterminado. Usa varios componentes de diseño de la IU (como lenguaje informativo, íconos, notificaciones, colores e imágenes) juntos para transmitir estas ideas, en lugar de depender de una sola opción de diseño, como un ícono, para contar toda la historia.
Cómo brindar una experiencia sin conexión de forma predeterminada
Si tu app no requiere muchos datos, puedes almacenarlos en caché 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 los usuarios.
Los sitios de noticias pueden beneficiarse de la descarga y el guardado automáticos de las noticias más recientes, quizás para ahorrar datos mediante la descarga del texto, de manera que un usuario pueda leer las noticias de hoy sin conexión. Para adaptar este comportamiento al comportamiento del usuario, prioriza la descarga de las categorías de noticias que más ve el usuario.
Informa al usuario cuando la app esté lista para usarse sin conexión
Cuando se carga una app web por primera vez, debe indicar al usuario si está lista para usarse sin conexión. Para ello, utiliza un widget que proporcione comentarios breves sobre una operación a través de un mensaje en la parte inferior de la pantalla, como, por ejemplo, cuando se sincronizó una sección o se descargó un archivo.
Asegúrate de que el idioma que utilices se ajuste a tu público y utiliza la misma frase en todos los casos en los que se aplique. Los públicos que no son técnicos a menudo malinterpretan la palabra “sin conexión” y, en su lugar, usa un lenguaje basado en la acción con el que tu público pueda identificarse.
Hacer que "Guardar para uso sin conexión" sea evidente en la interfaz.
Si una aplicación usa muchos datos, asegúrate de que haya un interruptor o un pin para agregar un elemento para su uso sin conexión. Descargar archivos automáticamente solo si un usuario solicitó este comportamiento de forma específica a través de un menú de configuración Asegúrate de que el PIN o la IU de descarga sean evidentes para el usuario y no los oculten otros elementos de la IU.
Un ejemplo es un reproductor de música que requiere archivos grandes. El usuario conoce el costo de datos asociado, pero también es posible que quiera usar el reproductor sin conexión. La descarga de música para usarla más adelante requiere que el usuario planifique con anticipación, por lo que es probable que quieras explicársela al usuario 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 de una "biblioteca sin conexión" o un índice de contenido, de modo 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 clara sobre dónde se almacenan los datos y quién tiene acceso a ellos.
Mostrar el costo real de una acción
Muchos usuarios equiparan el funcionamiento sin conexión con la función de "descarga". A menudo, los usuarios de países en los que las conexiones de red fallan o no están disponibles comparten contenido con otros usuarios o guardan contenido para usarlo sin conexión cuando tienen conectividad.
A veces, los usuarios de planes de datos evitan descargar archivos grandes por temor al costo. Por lo tanto, es posible que también quieras mostrar 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 mencionada anteriormente podría detectar si el usuario tiene un plan de datos y mostrar el tamaño del archivo para que pueda ver el costo de un archivo.
Cómo evitar experiencias hackeadas
A menudo, los usuarios hackean una experiencia sin darse cuenta de que lo están haciendo. Por ejemplo, antes de que existieran las aplicaciones 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 editando esos archivos en otro dispositivo. Una buena IU resuelve el problema que los usuarios intentan resolver sin verse involucrados en la experiencia hackeada. Por ejemplo, proporciona una manera de compartir archivos grandes entre dispositivos, en lugar de hacer que adjuntar archivos grandes a correos electrónicos sea más fácil de usar.
Haz que las experiencias sean transferibles de un dispositivo a otro
Cuando compiles para redes débiles, intenta sincronizar en cuanto mejore la conexión para que la experiencia sea transferible. Por ejemplo, imagina que una app de viajes pierde la 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 la reserva en su dispositivo de escritorio y hace que la experiencia se sienta fluida.
Dile al usuario en qué estado se encuentran sus datos. Por ejemplo, puedes mostrar si se sincronizó la app. Educa a los usuarios siempre que sea posible, pero trata de no abrumarlos con demasiados mensajes.
Crea experiencias de diseño inclusivas
Cuando diseñes tu UX, busca ser inclusivo y proporciona dispositivos de diseño significativos, lenguaje simple, iconografía estándar e imágenes significativas que guíen al usuario a completar la acción o tarea sin intervenir.
Usa un lenguaje claro y simple
Una buena UX no se trata solo de diseñar una interfaz. Este 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 qué hace la app.
Usar múltiples 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 de solo color para mostrar el estado puede ser difícil de notar para los usuarios o incluso completamente inaccesible para los usuarios con discapacidades visuales. Además, debido a que el diseño web tiende a usar gris para los elementos inhabilitados, usar una IU en gris para mostrar que la app está sin conexión puede generar confusión acerca de lo que puede hacer sin conexión, en especial si solo usas color para mostrar el estado.
Para evitar malentendidos, expresa los estados de la app al usuario de varias maneras, por ejemplo, con colores, etiquetas y componentes de la IU.
Usa íconos que transmitan significado
Asegúrate de usar etiquetas de texto significativas junto a 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 "guardar", lo 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 presentes un ícono sin conexión, mantén la coherencia con las imágenes estándar de la industria (cuando existan) y proporciona una etiqueta de texto y una descripción. Por ejemplo, puedes usar un ícono de descarga para guardar los cambios sin conexión y un ícono de sincronización para una acción que implica la sincronización. Ten cuidado cuando uses íconos para demostrar un estado que podría interpretarse como una acción de guardar o descargar.
Para obtener más inspiración, consulta el conjunto de íconos de Material Design.
Usar diseños de esqueleto y otros mecanismos de retroalimentación
Mientras tu app carga contenido, muéstrale al usuario que se está cargando para que no considere que no funciona. Una forma de hacerlo es usar un diseño de esquema de página, una versión de esquema de página de tu app que se muestra mientras se carga el contenido. Considera usar también una IU de precarga con una etiqueta de texto que le indique al usuario que la app se está cargando o una animación que parpadee suavemente para que el esquema de página parezca que está vivo y cargándose. Esto le garantiza al usuario que algo está sucediendo y ayuda a evitar que se vuelvan a enviar o actualizaciones innecesarias.
Muestra el estado de una acción mediante comentarios. Por ejemplo, si un usuario está editando un documento sin conexión, considera cambiar el diseño de los comentarios para que sea visiblemente diferente a cuando está en línea, pero aun así muestra que el archivo se “guardó” y se sincronizará cuando tenga una conexión de red. De esta manera, se informa al usuario sobre el funcionamiento de tu app y se asegura de que se almacenó su tarea o acción, lo que puede aumentar su confianza en el uso de tu aplicación.
No bloquear contenido
En algunas apps, un usuario podría 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. Sin embargo, si la red es inestable, no podrá escapar de esta acción, por lo que la IU lo bloqueará y no podrá realizar ninguna otra acción.
Evita las solicitudes de red que bloqueen contenido. Permite que el usuario siga explorando tu app y ponga en cola las tareas que se realizarán y sincronizarán cuando la conexión mejore.
Diseña para los próximos mil millones de usuarios
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 al usar datos transparentes y ahorrativos. Piensa en formas de ayudar a los usuarios con conexiones deficientes y simplifica la interfaz para acelerar las tareas. Intenta preguntar siempre a los usuarios antes de descargar contenido con muchos datos.
Ofrece opciones de ancho de banda bajo para los usuarios con conexiones retrasadas. Proporciona recursos más pequeños en conexiones de red más lentas, o bien ofrece la opción de elegir recursos de alta o baja calidad.
Conclusión
La educación es clave para la UX sin conexión porque los usuarios no la conocen. Para ayudarlos a aprender, intenta crear asociaciones con conceptos familiares, 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 sé considerado con el usuario.
- Para la mayoría de los usuarios del mundo, el entorno tecnológico es casi exclusivamente móvil.
- Los dispositivos de gama baja son comunes y tienen almacenamiento, memoria y potencia de procesamiento limitados, pantallas pequeñas y pantallas táctiles de menor calidad. Asegúrate de que el rendimiento sea parte de tu proceso de diseño.
- Permite que los usuarios exploren tu aplicación cuando estén sin conexión.
- Informa a los usuarios sobre su estado actual y los cambios en los estados.
- Intenta brindar acceso sin conexión de forma predeterminada si tu app no necesita muchos datos.
- Si tu app tiene una gran cantidad de datos, educa a los usuarios sobre cómo pueden descargarla para usarla sin conexión.
- Haz que las experiencias sean transferibles entre dispositivos.
- Usa lenguaje, íconos, imágenes, tipografía y color en conjunto para expresar ideas al usuario.
- Proporciona seguridad y comentarios para ayudar al usuario.