Pautas de diseño UX sin conexión

Una guía para diseñar experiencias web para redes lentas y sin conexión.

Nov 10, 2016 — Actualizado May 25, 2021

Available in: English, and Português

Appears in: Aplicaciones web progresivas | Confiabilidad de la red

Mustafa Kurtuldu

Twitter GitHub Homepage

Thomas Steiner

Twitter GitHub Glitch Homepage

Este artículo proporciona pautas de diseño sobre cómo crear una gran experiencia tanto en redes lentas y sin conexión.

La calidad de una conexión de red puede verse afectada por varios factores, como:

• Pésima cobertura de un proveedor.
• Condiciones climáticas extremas.
• Cortes de energía.
• Entrar en "zonas muertas" permanentes, como edificios con paredes que bloquean las conexiones de red.
• Entrar en "zonas muertas" temporales, como cuando viajas en un tren y se atraviesa un túnel.
• Conexiones a internet dependientes del tiempo, como las de los aeropuertos u hoteles.
• Prácticas culturales que requieren acceso limitado o nulo a internet en momentos o días específicos.

Tu objetivo es brindar una buena experiencia que reduzca el impacto de los cambios en la conectividad.

Decide qué mostrar a tus usuarios cuando tengan una mala conexión de red #

La primera pregunta que debes hacerte es: ¿cómo se ve el éxito y el fracaso de una conexión de red? Una conexión exitosa es la experiencia en línea normal de tu aplicación. Sin embargo, la falla de una conexión puede ser tanto el estado sin conexión de línea de tu aplicación como el comportamiento de la aplicación cuando hay una red con retraso (lag).

Cuando piensas en el éxito o el fracaso de una conexión de red, debes hacerte estas importantes preguntas 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 en caso de una falla?
• ¿Cómo le informas al usuario de lo anterior?

Infórmale a los usuarios de su estado actual y el cambio de estado #

Informa al usuario tanto de las acciones que aún puede hacer cuando tiene una falla en la red y del estado actual de la aplicación. Por ejemplo, una notificación podría decir:

Parece que tienes una mala conexión a la red. ¡No es para preocuparse! Los mensajes se enviarán cuando la red se restaure.

Infórmale 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 ha mejorado depende de tu aplicación. Las aplicaciones como una del mercado de valores que priorizan la información actual, deben actualizarse automáticamente y notificar al usuario lo antes posible.

Se recomienda que le informes al usuario que tu aplicación web se ha actualizado "en segundo plano" mediante el uso de una señal visual como, por ejemplo, un elemento de toast de material design. Esto implica detectar tanto la presencia de un service worker como una actualización de tu contenido administrado. Puedes ver un ejemplo de código de esta función en acción aquí.

Un ejemplo de esto sería el Chrome Platform Status, que publica una nota para el usuario cuando se actualiza la aplicación.

También puedes mostrar, en todo momento, la última vez que se actualizó la aplicación en un espacio prominente. Por ejemplo, esto sería útil para una aplicación de conversión de moneda.

Las aplicaciones, como las de noticias, pueden mostrar una simple notificación de "toque aquí para actualizar" que informa al usuario sobre el nuevo contenido. La actualización automática haría que los usuarios perdieran su posición.

}

{figcaption0 …pero permite a los usuarios actualizar manualmente para que no pierdan su posición en un artículo.

Actualizar la interfaz de usuario para reflejar el estado contextual actual #

Cada bit de la interfaz de usuario puede tener su propio contexto y funcionalidad que cambiarán dependiendo de si requiere una conexión exitosa. Un ejemplo sería un sitio de comercio electrónico que se puede navegar sin conexión. El botón de comprar y el precio estarán desactivados hasta que se restablezca la conexión.

Otras formas de estados contextuales podrían incluir datos. Por ejemplo, la aplicación financiera Robinhood permite a los usuarios comprar acciones y utiliza colores y gráficos para notificar al usuario cuando el mercado está abierto. Toda la interfaz se vuelve blanca para luego volverse 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.

Educa al usuario para que comprenda qué es el modelo sin conexión #

Offline es un nuevo modelo mental para todos. Debes de educar a tus usuarios sobre los cambios que ocurrirán cuando no tengan una conexión. Informa a tus usuarios en dónde se guardan los datos grandes y bríndales la configuración para cambiar el comportamiento predeterminado. Asegúrate de utilizar varios componentes de diseño de la interfaz de usuario, como lenguaje informativo, iconos, notificaciones, color e imágenes para transmitir estas ideas de forma colectiva, en lugar de depender de una única opción de diseño, como un icono por sí solo para que se encargue de todo.

Proporciona una experiencia sin conexión de forma predeterminada #

Si tu aplicación no requiere de muchos datos, entonces almacena esos datos en caché de forma predeterminada. Los usuarios pueden sentirse cada vez más frustrados 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 hará que tu aplicación se sienta poco confiable, mientras que una aplicación que reduce el impacto de una falla en la red se sentirá mágica para el usuario.

Los sitios de noticias podrían beneficiarse de la descarga automática y el guardado automático de las últimas noticias para que un usuario pueda leer las noticias de hoy sin una conexión, tal vez descargando 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 ven normalmente, conviértelo en la descarga prioritaria.

Infórmale al usuario cuando la aplicación esté lista para su uso sin conexión #

Cuando una aplicación web se carga por primera vez, debe de indicarle al usuario si está lista para su uso sin conexión. Haz esto con un widget que proporcione información breve 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 de datos.

De nuevo, piensa en el lenguaje que estás utilizando para asegurarte de que sea adecuado para tu audiencia. Asegúrate de que el mensaje sea el mismo en todos los casos en los que se utilice. El término sin conexión generalmente es mal entendido por una audiencia no técnica, por lo tanto, usa un lenguaje basado en acciones con el que tu audiencia pueda relacionarse.

…y también lo hace el sitio de Chrome Platform Status, que incluye información sobre el almacenamiento ocupado.

Haz que 'guardar para usar sin conexión' una parte obvia de la interfaz para aplicaciones con gran cantidad de datos #

Si una aplicación usa grandes cantidades de datos, asegúrate de que haya un interruptor o pin para agregar un elemento para uso sin conexión en lugar de descargarlo automáticamente, a menos que un usuario haya solicitado específicamente este comportamiento a través de un menú de configuración. Asegúrate de que el pin o la interfaz de usuario de descarga no esté oculta por otros elementos de la interfaz de usuario y que la función sea obvia para el usuario.

Un ejemplo sería un reproductor de música que requiere grandes archivos de datos. El usuario conoce el costo de los datos asociados, pero también puede querer usar el reproductor sin conexión. La descarga de música para su uso posterior requiere que el usuario planifique con anticipación, por lo que es posible que se requiera educación al respecto durante la incorporación.

Se claro con lo que está disponible sin conexión #

Debes de ser claro en cuanto a la opción que ofreces. Es posible que debas de mostrar una pestaña o configuración que muestre una "biblioteca sin conexión" o un índice de contenido, para que el usuario pueda ver fácilmente lo que ha almacenado en su teléfono y lo que debe guardarse. Asegúrate de que la configuración sea concisa y ten claro dónde se almacenarán los datos y quién tiene acceso a ellos.

Muestra el costo real de una acción #

Muchos usuarios hacen una equivalencia de la capacidad sin conexión con la "descarga". Los usuarios de países donde las conexiones de red fallan o no están disponibles a menudo comparten contenido con otros usuarios o guardan contenido para usarlo sin conexión cuando tienen conectividad.

Los usuarios de planes de datos pueden evitar descargar archivos grandes por temor al costo, por lo que es posible que también desees mostrar un costo asociado para que los usuarios puedan realizar una comparación activa para un archivo o tarea específica. Por ejemplo, si la aplicación de música anterior pudiera detectar si el usuario está en un plan de datos y mostrar el tamaño del archivo para que los usuarios puedan ver el costo de un archivo.

Ayuda a prevenir 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 que compartían archivos basados en la nube, era común que los usuarios guardaran archivos grandes y los adjuntaran a los correos electrónicos para poder continuar con la edición desde un dispositivo diferente. Es importante no dejarse llevar por su experiencia hackeada, sino más bien mirar lo que están tratando de lograr. En otras palabras, en lugar de pensar en cómo hacer que sea más fácil adjuntar un archivo grande, resuelve el problema de compartir grandes archivos entre diferentes dispositivos.

Haz que las experiencias sean transferibles de un dispositivo a otro #

Cuando creas para redes inestables, intenta sincronizar tan pronto como mejore la conexión para que la experiencia sea transferible. Por ejemplo, imagina que una aplicación de viajes que pierde una conexión de red a mitad de una reserva. Cuando se restablece la conexión, la aplicación 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 resultar increíblemente irritante para los usuarios.

Infórmale al usuario del estado actual de sus datos. Por ejemplo, puedes mostrar si la aplicación se ha sincronizado. Edúcalos siempre que sea posible, pero trata de no sobrecargarlos con mensajes.

Crea experiencias de diseño inclusivas #

Al diseñar, busca ser inclusivo al proporcionar dispositivos de diseño significativos, lenguaje simple, iconografía estándar e imágenes significativas que guiarán al usuario para completar la acción o tarea en lugar de obstaculizar su progreso.

Utiliza un lenguaje simple y conciso #

Una buena experiencia de usuario no se trata solo de una interfaz bien diseñada. Incluye la ruta que toma un usuario, así como las palabras utilizadas en la aplicación. Evita la jerga tecnológica al explicar el estado de la aplicación o los componentes individuales de la interfaz de usuario. Ten en cuenta que es posible que la frase "aplicación sin conexión" no transmita al usuario el estado actual de la aplicación.

No hagas

Hacer