Guía para diseñar experiencias web para redes lentas y sin conexión.
En este artículo, se proporcionan lineamientos de diseño sobre cómo crear una experiencia excelente tanto en redes lentas como sin conexión.
La calidad de una conexión de red puede verse afectada por varios factores, como los siguientes:
- Mala cobertura de un proveedor.
- Condiciones climáticas extremas.
- Cortes de energía
- Acceso a "zonas sin conexión" permanentes, como edificios con paredes que bloquean las conexiones de red
- Entrada a “zonas sin salida” temporales, como cuando viajas en tren y atraviesas un túnel.
- Conexiones a Internet con límite de tiempo, como las de hoteles o aeropuertos
- Prácticas culturales que requieren poco o ningún acceso a Internet en momentos o días específicos
Tu objetivo es brindar 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 se debe hacer es: ¿cómo se ven el éxito y la falla de una conexión de red? Una conexión exitosa ofrece la experiencia en línea normal de la app. Sin embargo, la falla de la conexión puede representar tanto el estado sin conexión de tu app como el comportamiento de esta cuando hay una red retardada.
Cuando pienses en el éxito o el fracaso de una conexión de red, debes hacerte estas importantes preguntas 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 en caso de falla?
- ¿Cómo informas al usuario sobre lo anterior?
Informa a los usuarios sobre su estado actual y el cambio de estado
Informar al usuario sobre las acciones que aún puede realizar si tiene una falla de red y el estado actual de la aplicación 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 informas al usuario que su conexión de red mejoró depende de tu aplicación. Las apps, como las del mercado de valores, que priorizan la información actual, deben actualizarse automáticamente y notificar al usuario lo antes posible.
Te recomendamos que le informes al usuario que tu aplicación 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 el trabajo.
Un ejemplo de esto sería el estado de la plataforma de Chrome, que publica una nota para el usuario cuando se actualiza la app.
También puedes mostrar la última vez que la app se actualizó en un espacio destacado. Por ejemplo, esto sería útil para una app de conversión de monedas.
Las aplicaciones como las de noticias podrían mostrar una notificación simple de presionar para actualizar que le informe al usuario sobre el contenido nuevo. La actualización automática haría que los usuarios perdieran su lugar.
Actualiza la IU para reflejar el estado contextual actual
Cada parte de la IU puede tener su propio contexto y funcionalidad que cambiarán según si requiere una conexión exitosa. Un ejemplo sería un sitio de comercio electrónico que se puede explorar sin conexión. El botón Comprar y el precio permanecerán inhabilitados hasta que se restablezca la conexión.
Otras formas de estados contextuales pueden incluir los datos. Por ejemplo, la aplicación financiera Robinhood permite a los usuarios comprar acciones y usa colores y gráficos para notificarlos cuando el mercado está abierto. Toda la interfaz se pone blanca y se vuelve gris cuando el mercado cierra. Cuando el valor de las acciones 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.
El uso sin conexión es un nuevo modelo mental para todo el mundo. Debes informar a los usuarios qué cambios se producirán cuando no tengan conexión. Infórmales dónde se guardan los datos de gran tamaño y ofréceles opciones de configuración para cambiar el comportamiento predeterminado. Asegúrate de usar varios componentes de diseño de la IU, como lenguaje informativo, íconos, notificaciones, color e imágenes, para transmitir estas ideas de forma colectiva, 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. Trata de que la experiencia sea lo más estable posible. Una conexión inestable hará que tu app parezca poco confiable, mientras que una app que disminuye el impacto de una falla de red le parecerá mágica.
Los sitios de noticias podrían beneficiarse de la descarga y el guardado automáticos de las noticias más recientes para que el usuario pueda leerlas sin conexión y, quizás, descargar el texto sin las imágenes del artículo. Además, adáptate al comportamiento del usuario. Por ejemplo, si la sección de deportes es lo que suele ver, haz que sea la descarga prioritaria.
Informa al usuario cuando la app esté lista para usarse sin conexión
Cuando una app web se carga por primera vez, debes indicarle al usuario si está lista para usarla sin conexión. Para ello, usa 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 sincronizó una sección o se descargó un archivo de datos.
Nuevamente, piensa en el lenguaje que usas para asegurarte de que sea adecuado para tu público. Asegúrate de que el mensaje sea el mismo en todas las instancias en las que se usa. El término “sin conexión” suele entenderse mal para el público sin conocimientos técnicos, por lo que debes usar un lenguaje basado en la acción con el que tu público pueda identificarse.
Haz que "Guardar para uso sin conexión" sea una parte obvia de la interfaz para las apps que consumen muchos datos.
Si una aplicación utiliza grandes cantidades de datos, asegúrate de que haya un interruptor o un marcador para agregar un elemento para su uso sin conexión en lugar de realizar una descarga automática, a menos que un usuario haya solicitado específicamente este comportamiento en un menú de configuración. Asegúrate de que la IU de fijación o descarga no esté oculta por otros elementos de la IU y de que la función sea evidente para el usuario.
Un ejemplo sería un reproductor de música que requiere archivos de datos 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 tarde requiere que el usuario planifique con anticipación, por lo que es posible que se requiera información sobre este tema durante la integración.
Aclara qué está disponible sin conexión
Sé claro sobre la opción que ofreces. Es posible que debas mostrar una pestaña o un parámetro de configuración que muestre una "biblioteca sin conexión" o un índice de contenido, de modo que el usuario pueda ver fácilmente lo que almacenó en su teléfono y lo que debe guardar. Asegúrate de que la configuración sea concisa y clara sobre dónde se almacenarán los datos y quién tendrá 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.
Los usuarios de planes de datos pueden evitar la descarga de 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, si la app de música anterior pudiera detectar si el usuario tiene un plan de datos y mostrar el tamaño del archivo para que los usuarios puedan 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 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 en otro dispositivo. Es importante no centrarse en su experiencia hackeada, sino observar lo que intentan lograr. En otras palabras, en lugar de pensar cómo puedes hacer que adjuntar un archivo grande sea más fácil de usar, resuelve el problema de compartir archivos grandes en varios dispositivos.
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. No poder transferir experiencias puede ser muy molesto para los usuarios.
Informar al usuario sobre el estado actual de sus datos Por ejemplo, puedes mostrar si se sincronizó la app. Enséñales siempre que sea posible, pero trata de no sobrecargarlos con la mensajería.
Crea experiencias de diseño inclusivas
Cuando diseñes, busca ser inclusivo y proporciona dispositivos de diseño significativos, lenguaje simple, iconografía estándar e imágenes significativas que guiarán al usuario a completar la acción o tarea en lugar de obstaculizar su progreso.
Usa un lenguaje simple y conciso
Una buena UX no se trata solo de tener una interfaz bien diseñada. Incluye la ruta que toma el usuario y las palabras usadas en la app. Evita la jerga técnica cuando expliques el estado de la app o los componentes individuales de la IU. Ten en cuenta que la frase "app sin conexión" podría no transmitirle al usuario el estado actual de 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 demostrar un cambio de estado o el estado actual. Es posible que el usuario no note el uso exclusivo del color para demostrar el estado y que los usuarios con discapacidades visuales no puedan acceder a él. Además, el instinto de los diseñadores es usar una IU atenuada para representar el estado sin conexión, pero esto puede tener un significado cargado en la Web. La IU en gris, como los elementos de entrada en un formulario, también significa que un elemento está inhabilitado. Esto puede causar confusión si solo usas color para representar el estado.
Para evitar malentendidos, muéstrale al usuario diferentes estados de varias maneras, por ejemplo, con colores, etiquetas y componentes de la IU.
Usa íconos que transmitan significado
Asegúrate de que la información se transmita correctamente con etiquetas de texto significativas, así como íconos. Los íconos por sí solos pueden ser problemáticos, ya que el concepto de uso sin conexión en la Web es relativamente nuevo. Es posible que los usuarios malinterpreten los íconos que se usan por sí mismos. Por ejemplo, usar un disquete para guardar tiene sentido para una generación mayor, pero la metáfora podría confundir a los usuarios jóvenes que nunca vieron un disquete. Del mismo modo, se sabe que el icono de menú 'hamburguesa' confunde a los usuarios cuando se presenta sin una etiqueta.
Cuando introduzcas un ícono sin conexión, intenta mantener la coherencia con las imágenes estándar de la industria (si existen), así como proporcionar una etiqueta de texto y una descripción. Por ejemplo, la opción de guardar para el uso sin conexión puede ser un ícono típico de descarga o, si la acción implica sincronización, puede ser un ícono de sincronización. Algunas acciones pueden interpretarse como “guardar para uso sin conexión”, en lugar de demostrar el estado de una red. Piensa en la acción que intentas transmitir en lugar de presentar un concepto abstracto al usuario. Por ejemplo, guardar o descargar datos se basaría en acciones.
“Sin conexión” puede significar una serie de cosas según el contexto, como descargar, exportar, fijar, etc. Para obtener más inspiración, consulta el conjunto de íconos de Material Design.
Usar diseños de esqueleto con otros mecanismos de retroalimentación
Un diseño de esqueleto es, en esencia, una versión de esquema de página de tu app que se muestra mientras se carga el contenido. Esto ayuda a demostrar al usuario que el contenido está por cargarse. Considera usar también una IU de precargador, con una etiqueta de texto que informe al usuario que se está cargando la app. Un ejemplo sería presionar el contenido del esquema de página para darle a la app la sensación de que está viva y cargando. Esto le garantiza al usuario que algo está sucediendo y ayuda a evitar que la app se vuelva a enviar o actualizar la app.
No bloquear contenido
En algunas aplicaciones, un usuario podría activar una acción, como crear un documento nuevo. Algunas apps intentarán conectarse a un servidor para sincronizar el documento nuevo y, para demostrarlo, mostrarán un diálogo modal de carga intrusivo que cubre toda la pantalla. Esto puede funcionar bien si el usuario tiene una conexión de red estable. Sin embargo, si la red es inestable, no podrá escapar de esta acción y la IU lo bloqueará de forma eficaz. Se deben evitar las solicitudes de red que bloquean el contenido. Permite que el usuario siga explorando tu app y pon en cola las tareas que se realizarán y sincronizarán una vez que la conexión mejore.
Proporciona comentarios a los usuarios para demostrar el estado de una acción. Por ejemplo, si un usuario está editando un documento, considera cambiar el diseño de los comentarios para que sea visiblemente diferente de cuando está en línea, pero aun así muestra que su archivo se "guardó" y se sincronizará cuando tenga una conexión de red. Esto le enseñará al usuario los diferentes estados disponibles y le asegurará que se almacenó su tarea o acción. Esto tiene el beneficio adicional de que el usuario tenga más confianza en el uso de tu aplicación.
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 no son asequibles. Debes ser transparente y ahorrativo con los datos para ganarte la confianza de los usuarios. 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 que consume muchos datos.
Ofrece opciones de ancho de banda bajo para los usuarios con conexiones retrasadas. Si la conexión de red es lenta, proporciona elementos pequeños. 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, ya que los usuarios no están familiarizados con estos conceptos. Intenta crear asociaciones con elementos que te resulten familiares, p. ej., 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 muchos datos, educa a los usuarios sobre cómo pueden descargarlas 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.