Publicado el 10 de noviembre de 2016
La calidad de una conexión de red puede verse afectada por varios factores, como los siguientes:
- Poca cobertura del operador de red
- Condiciones climáticas extremas
- Interrupciones de energía
- Ingresar a "zonas muertas" permanentes, como edificios con paredes que bloquean las conexiones de red
- Ingresar a "zonas muertas" temporales, como cuando viajas en tren y atraviesas un túnel
- Conexiones a Internet con límite de tiempo, como las de aeropuertos u hoteles
- Prácticas culturales que requieren acceso a Internet limitado o nulo 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é mostrar a los 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 para 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 lentas.
Para determinar cómo controlar la falla de conexión, hazte 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 si falla la conexión?
- ¿Cómo le dices al usuario lo que está sucediendo?
Informa a los usuarios sobre el estado
Indícale al usuario el estado de la aplicación y las acciones que aún puede realizar cuando se produce una falla en la 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 sobre las mejoras en la conexión
La forma en que le indicas al usuario que mejoró su conexión de red depende de tu aplicación. Las apps que priorizan la información actual, como los monitores del clima o del mercado de valores, deben actualizarse automáticamente y avisarle al usuario lo antes posible.
Te recomendamos que le informes al usuario que tu app web se actualizó "en segundo plano" con una señal visual, como un elemento emergente 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 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 especialmente útil para las apps de conversión de moneda.
Las apps de noticias pueden mostrar una notificación de actualización con un solo toque para informar al usuario sobre el contenido nuevo. Si se actualizara 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 según 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 restablece la 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, gris 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. Indícales dónde se guardan los datos grandes y proporciónales parámetros de configuración para cambiar el comportamiento predeterminado. Usa varios componentes de diseño de la 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, almacénalos 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 tu app parezca poco confiable. Una app que reduce el impacto de una falla de red deleita a sus usuarios.
Los sitios de noticias pueden beneficiarse de la descarga y el almacenamiento automáticos de las noticias más recientes, tal vez ahorrando datos al descargar solo el texto, de modo que un usuario pueda leer las noticias de hoy sin conexión. Puedes adaptar este comportamiento al del usuario priorizando la descarga de las categorías de noticias que más ve.
Informa al usuario cuando la app esté sin conexión
Cuando se carga una app web por primera vez, debe indicarle al usuario si está lista para usarse 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 sincronizó una sección o se descargó un archivo.
Asegúrate de que el idioma que usas se adapte a tu público y usa la misma redacción en todos los casos en los que se aplique. El público no técnico suele malinterpretar la palabra "sin conexión", por lo que te recomendamos que uses un lenguaje basado en acciones con el que tu público pueda identificarse.
Hacer que la opción "Guardar sin conexión" sea obvia 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 usarlo sin conexión. Descarga automáticamente los archivos solo si el usuario solicitó específicamente este comportamiento a través de un menú de configuración. Asegúrate de que la IU de fijado o descarga 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 también puede querer usar el reproductor sin conexión. Para descargar música y usarla más tarde, el usuario debe planificar con anticipación, por lo que probablemente quieras informarle sobre esta función durante la integración.
Aclarar qué está disponible sin conexión
Sé claro sobre las opciones que proporcionas. 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 tiene almacenado en su dispositivo y lo que debe guardar. Asegúrate de que la configuración sea concisa y explica claramente dónde se almacenan los datos y quién tiene acceso a ellos.
Mostrar el costo real de una acción
Muchos usuarios equiparan la capacidad sin conexión con la "descarga". Los usuarios de países donde las conexiones de red suelen fallar o no están disponibles a menudo comparten contenido con otros usuarios o lo guardan para usarlo sin conexión cuando tienen conectividad.
A veces, los usuarios con planes de datos evitan descargar archivos grandes por temor a los costos, por lo que también puedes mostrar un costo asociado para que los usuarios puedan hacer 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 el usuario pueda ver el costo de un archivo.
Cómo evitar las 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 para compartir 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 verse arrastrados a 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.
Hacer que las experiencias sean transferibles de un dispositivo a otro
Cuando compiles para redes inestables, intenta sincronizarte tan pronto como mejore la conexión para que la experiencia sea transferible. Por ejemplo, imagina que una app de viajes pierde la conexión de red a mitad 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 computadora y hacer que la experiencia sea fluida.
Indicarle al usuario el estado de sus datos Por ejemplo, puedes mostrar si la app se sincronizó. Edúcalos cuando sea posible, pero intenta no abrumarlos con demasiados mensajes.
Crea experiencias de diseño inclusivas
Cuando diseñes tu UX, procura ser inclusivo proporcionando recursos de diseño significativos, lenguaje sencillo, iconografía estándar e imágenes significativas que guíen al usuario para completar la acción o tarea sin interferir.
Usa un lenguaje claro y sencillo
Un buen diseño de UX no se trata solo de diseñar la interfaz. Incluye la ruta que sigue un usuario en tu app y todo lo que encuentra en el camino, incluido el idioma 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. La palabra "sin conexión" a menudo no es lo suficientemente clara como para indicarle al usuario lo que está haciendo tu app.
Usa varios dispositivos de diseño para crear experiencias del usuario accesibles
Usa componentes visuales, de color y de lenguaje para mostrar un estado o un cambio de estado. Usar solo el 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, dado que el diseño web suele usar el color gris para los elementos inhabilitados, usar una IU en gris para mostrar que tu app no está disponible sin conexión puede generar confusión sobre lo que puede hacer tu 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 colores, 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 "guardar", que puede no tener sentido para los usuarios más jóvenes que nunca vieron un disquete, así como el ícono de menú "hamburguesa".
Cuando introduzcas un ícono sin conexión, mantén la coherencia con los elementos visuales estándares 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á el contenido para verlo sin conexión o un ícono de sincronización para una acción que implique sincronización. Ten cuidado cuando uses íconos para demostrar estados que, en cambio, podrían interpretarse como una acción de guardar o descargar.
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 tu app carga contenido, muéstrale al usuario que se está cargando para que no piense que no funciona. Una forma de hacerlo es usar un diseño de esqueleto, una versión de estructura alámbrica de tu app que se muestra mientras se carga el contenido. También puedes usar una IU de precarga con una etiqueta de texto que le indique al usuario que la app se está cargando o una animación suavemente pulsante para el boceto, de modo que parezca que está activa y cargándose. Esto le asegura al usuario que algo está sucediendo y ayuda a evitar reenvíos o actualizaciones innecesarias.
Mostrar el estado de una acción proporcionando comentarios Por ejemplo, si un usuario está editando un documento sin conexión, considera cambiar el diseño de comentarios para que sea visiblemente diferente de cuando está en línea, pero que siga mostrando que su archivo se "guardó" y se sincronizará cuando tenga conexión de red. Esto le informa al usuario cómo funciona tu app y le asegura que su tarea o acción se guardó, lo que puede hacer que tenga más confianza en el uso de tu aplicación.
No bloquear el 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á salir de esta acción, por lo que la IU le impedirá hacer cualquier otra cosa.
Evita las solicitudes de red que bloquean el contenido. Permite que el usuario siga navegando por tu app y ponga en cola las tareas que se realizarán y sincronizarán cuando mejore la conexió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 son extremadamente costosos. Gánate 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 preguntarles a los usuarios antes de descargar contenido que consuma muchos datos.
Ofrece opciones de bajo ancho de banda para los usuarios con conexiones lentas. Proporciona recursos más pequeños en conexiones de red más lentas u 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 familiares, como explicar que descargar para usar más tarde es lo mismo que poner datos sin conexión.
Cuando diseñes para conexiones de red inestables, recuerda estos lineamientos:
- Diseña para el éxito, el fracaso 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 a nivel mundial, 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 una calidad 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 los cambios en los estados.
- Intenta proporcionar la opción sin conexión de forma predeterminada si tu app no requiere muchos datos.
- Si la app requiere muchos datos, informa a los usuarios cómo pueden descargar contenido para usarlo sin conexión.
- Haz que las experiencias sean transferibles entre dispositivos.
- Usa el lenguaje, los íconos, las imágenes, la tipografía y el color en conjunto para expresar ideas al usuario.
- Proporciona seguridad y comentarios para ayudar al usuario.