Cette page fournit des consignes de conception pour créer une expérience utilisateur de qualité sur les réseaux lents et hors connexion.
La qualité d'une connexion réseau peut être affectée par un certain nombre de facteurs, tels que les suivants:
- Mauvaise couverture du réseau d'un opérateur.
- Conditions météorologiques extrêmes.
- en cas de coupure de courant.
- entrée dans des "zones mortes" permanentes, par exemple dans les bâtiments dont les murs bloquent les connexions réseau ;
- Entrées dans des "zones mortes" temporaires, par exemple lors d'un trajet en train ou d'un tunnel
- des connexions Internet limitées dans le temps, comme celles des aéroports ou des hôtels.
- Pratiques culturelles qui nécessitent un accès limité ou inexistant à Internet à des heures ou des jours spécifiques.
En tant que développeur, votre objectif est d'offrir une expérience de qualité qui réduit l'impact des changements de connectivité.
Déterminez quelles informations présenter à vos utilisateurs lorsque la connexion réseau est de mauvaise qualité
La première question à se poser est la réussite et l'échec d'une connexion réseau pour votre application. Une connexion réussie est l'expérience en ligne normale de votre application. L'échec de connexion inclut le comportement de votre application hors connexion et sur les réseaux lents.
Pour déterminer comment gérer les échecs de connexion, posez-vous ces questions importantes concernant l'expérience utilisateur:
- Combien de temps attendez-vous pour déterminer le succès ou l'échec d'une connexion ?
- Que pouvez-vous faire pendant que la réussite ou l’échec est déterminé ?
- Que faire si la connexion échoue ?
- Comment dire à l'utilisateur ce qui se passe ?
Informer les utilisateurs de leur état actuel et de son changement d'état
Indiquez à l'utilisateur l'état de l'application et les actions qu'il peut encore effectuer en cas de défaillance du réseau. Voici un exemple de notification:
Votre connexion réseau semble être de mauvaise qualité. Ne vous inquiétez pas. Des messages seront envoyés lorsque le réseau sera restauré.
Informer les utilisateurs lorsque la connexion réseau s'améliore ou est rétablie
La manière dont vous indiquez à l'utilisateur que sa connexion réseau s'est améliorée dépend de votre application. Les applications qui donnent la priorité aux informations actuelles, comme la météo ou les outils de suivi boursier, doivent se mettre à jour automatiquement et en informer l'utilisateur dès que possible.
Nous vous recommandons d'informer l'utilisateur que votre application Web a été mise à jour "en arrière-plan" à l'aide d'un repère visuel, tel qu'un toast Material Design. Cela implique de détecter à la fois la présence d'un service worker et une mise à jour de son contenu géré. Vous pouvez voir un exemple de code de cette fonction en action ici.
Chrome Platform Status (État de la plate-forme Chrome) en est un exemple, qui publie une note à l'attention de l'utilisateur lorsque l'application a été mise à jour.
Certaines applications peuvent toujours afficher la date de leur dernière mise à jour. Cela est particulièrement utile pour les applications de conversion de devises.
Les applications d'actualités peuvent afficher une simple notification de mise à jour indiquant à l'utilisateur qu'un nouveau contenu est disponible. Si vous mettez à jour automatiquement un article, les utilisateurs perdront leur place.
Mettre à jour l'UI pour refléter l'état contextuel actuel
Chaque élément d'interface utilisateur peut avoir son propre contexte et son propre comportement, qui change selon que la connexion est établie ou non. C'est le cas, par exemple, d'un site d'e-commerce qui peut être consulté hors connexion, mais qui désactive la tarification et le bouton "Acheter" jusqu'à ce qu'une connexion soit rétablie.
D'autres formes d'états contextuels peuvent inclure des données. Par exemple, l'application financière Robinhood utilise des couleurs et des graphiques pour indiquer à l'utilisateur quand la bourse est ouverte. Toute l'interface devient blanche, puis grisée à la fermeture du marché. Lorsque la valeur d'une action augmente ou diminue, chaque widget boursier devient vert ou rouge en fonction de son état.
Informer l'utilisateur afin qu'il comprenne en quoi consiste le modèle hors connexion
La plupart des utilisateurs ont l'habitude d'avoir une connexion réseau en permanence. Vous devez les informer des modifications apportées à votre application lorsqu'ils n'ont pas de connexion. Indiquez-leur où les données volumineuses sont enregistrées et donnez-leur des paramètres pour modifier le comportement par défaut. Utilisez plusieurs composants de conception d'interface utilisateur (comme le langage informatif, les icônes, les notifications, la couleur et les images) pour transmettre ces idées, au lieu de compter sur un seul choix de conception, comme une icône à part, pour raconter l'histoire complète.
Offrir une expérience hors connexion par défaut
Si votre application nécessite peu de données, mettez-les en cache par défaut. Les utilisateurs peuvent devenir de plus en plus frustrés s'ils ne peuvent accéder à leurs données qu'avec une connexion réseau.
Essayez de rendre l'expérience aussi stable que possible. Une connexion instable rend votre application non fiable. Une application qui réduit l'impact d'une défaillance du réseau fait le bonheur de ses utilisateurs.
Les sites d'actualités peuvent bénéficier du téléchargement et de l'enregistrement automatiques des dernières actualités, voire d'économiser des données en ne téléchargeant que le texte afin qu'un utilisateur puisse lire les actualités du jour sans connexion. Vous pouvez adapter ce comportement au comportement de l'utilisateur en téléchargeant en priorité les catégories d'actualités qu'il consulte le plus.
Informer l'utilisateur lorsque l'application est prête pour une utilisation hors connexion
Lorsqu'une application Web se charge pour la première fois, elle doit indiquer à l'utilisateur si elle est prête pour une utilisation hors connexion. Pour ce faire, utilisez un widget qui fournit de brefs commentaires sur une opération via un message en bas de l'écran, par exemple lorsqu'une section a été synchronisée ou qu'un fichier a été téléchargé.
Assurez-vous que le langage que vous utilisez correspond à votre public et utilisez la même formulation dans tous les cas où cela s'applique. Les audiences non techniques ne comprennent souvent pas le mot "hors connexion". Utilisez plutôt un langage incitant à l'action auquel votre audience peut s'identifier.
Mettre en évidence l'option "Enregistrer pour accès hors connexion" dans l'interface
Si une application utilise beaucoup de données, assurez-vous de disposer d'un bouton bascule ou d'une épingle pour ajouter un élément à utiliser hors connexion. Ne télécharger automatiquement les fichiers que si un utilisateur a spécifiquement demandé ce comportement via un menu de paramètres. Assurez-vous que l'épingle ou l'UI de téléchargement est bien visible pour l'utilisateur et qu'elle n'est pas masquée par d'autres éléments de l'UI.
C'est le cas, par exemple, d'un lecteur de musique qui nécessite des fichiers volumineux. L'utilisateur est conscient du coût de données associé, mais peut également vouloir utiliser le lecteur hors connexion. Le téléchargement de musique pour une utilisation ultérieure nécessite que l'utilisateur ait planifié son utilisation. Vous devez donc probablement en informer l'utilisateur lors de l'intégration.
Déterminer quelles informations sont disponibles hors connexion
Indiquez clairement les options que vous proposez. Vous devrez peut-être afficher un onglet ou un paramètre pour une "bibliothèque hors connexion" ou un index de contenu afin que l'utilisateur puisse voir ce qu'il a stocké sur son appareil et ce qui doit être enregistré. Assurez-vous que les paramètres sont concis, et indiquez clairement où les données sont stockées et qui y a accès.
Afficher le coût réel d'une action
De nombreux utilisateurs associent la fonctionnalité hors connexion au "téléchargement". Les utilisateurs situés dans des pays où les connexions réseau échouent régulièrement ou ne sont pas disponibles partagent souvent du contenu avec d'autres utilisateurs ou enregistrent du contenu pour une utilisation hors connexion lorsqu'ils disposent d'une connexion.
Les utilisateurs disposant de forfaits de données évitent parfois de télécharger des fichiers volumineux par peur des coûts. Vous pouvez donc également afficher un coût associé afin que les utilisateurs puissent effectuer une comparaison active pour un fichier ou une tâche spécifique. Par exemple, l'application musicale mentionnée précédemment peut détecter si l'utilisateur a souscrit un forfait Internet et afficher la taille du fichier afin que l'utilisateur puisse voir le coût d'un fichier.
Empêcher le piratage d'expériences
Les utilisateurs piratent souvent une expérience sans s'en rendre compte. Par exemple, avant l'existence d'applications Web de partage de fichiers dans le cloud, les utilisateurs enregistrons souvent des fichiers volumineux et les joignent à des e-mails afin de pouvoir continuer à modifier ces fichiers depuis un autre appareil. Une bonne interface utilisateur permet de résoudre le problème que les utilisateurs essaient de résoudre sans être submergés par l'expérience piratée. Par exemple, fournissez un moyen de partager des fichiers volumineux entre plusieurs appareils, au lieu de rendre les fichiers volumineux joints plus faciles à utiliser.
Rendez vos expériences transférables d'un appareil à un autre
Lorsque vous compilez des réseaux irréguliers, essayez de synchroniser dès que la connexion s'améliore afin que l'expérience soit transférable. Par exemple, imaginez une application de voyage qui perd une connexion réseau en cours de réservation. Une fois la connexion rétablie, l'application se synchronise avec le compte de l'utilisateur, ce qui lui permet de poursuivre sa réservation sur son ordinateur de bureau et de rendre l'expérience fluide.
Indiquez à l'utilisateur l'état dans lequel se trouvent ses données. Par exemple, vous pouvez indiquer si l'application s'est synchronisée. Formez-le si possible, mais essayez de ne pas le submerger de messages.
Créer des expériences de conception inclusives
Lors de la conception de votre expérience utilisateur, essayez d'être inclusif en fournissant des appareils de conception pertinents, un langage simple, une iconographie standard et des images pertinentes qui guident l'utilisateur pour effectuer l'action ou la tâche sans l'entraver.
Utiliser un langage simple et clair
Une bonne expérience utilisateur ne consiste pas seulement à concevoir votre interface. Cela inclut le chemin emprunté par un utilisateur dans votre application et tout ce qu'il rencontre en cours de route, y compris le langage utilisé par l'application pour décrire ce parcours. Lorsque vous expliquez les composants de l'interface utilisateur ou l'état de l'application, évitez le jargon technique. Souvent, le mot "hors connexion" n'est pas assez clair pour indiquer à l'utilisateur ce que fait votre application.
Utiliser plusieurs appareils de conception pour créer des expériences utilisateur accessibles
Utilisez des composants linguistiques, visuels et de couleurs pour indiquer un état ou un changement d'état. L'utilisation de la seule couleur pour afficher l'état peut être difficile à remarquer pour les utilisateurs, voire totalement inaccessible aux personnes souffrant de déficiences visuelles. En outre, étant donné que la conception Web a tendance à utiliser du gris pour les éléments désactivés, l'utilisation d'une UI grisée pour indiquer que votre application est hors connexion peut prêter à confusion sur ce qu'elle peut faire hors connexion, en particulier si vous n'utilisez que la couleur pour afficher l'état.
Pour éviter tout malentendu, exprimez les états de l'application à l'utilisateur de plusieurs manières, par exemple à l'aide de couleurs, de libellés et de composants d'interface utilisateur.
Utilisez des icônes qui traduisent le sens
Veillez à utiliser des libellés de texte significatifs à côté de vos icônes. Les icônes seules peuvent être déroutantes, d 'autant plus que le concept d'« hors connexion » sur le Web est relativement nouveau. D'autres exemples d'icônes prêtant à confusion incluent l'utilisation d'une disquette pour représenter "Enregistrer", qui peut être dénué de sens pour les jeunes utilisateurs qui n'ont jamais vu de disquette, ainsi que pour l'icône de menu "hamburger".
Lorsque vous introduisez une icône hors connexion, restez cohérent avec les visuels standard du secteur lorsqu'ils existent, et fournissez un libellé textuel et une description. Par exemple, vous pouvez utiliser une icône de téléchargement pour indiquer l'enregistrement hors connexion ou une icône de synchronisation pour une action impliquant la synchronisation. Soyez prudent lorsque vous utilisez des icônes pour illustrer un état qui pourrait être interprété comme une action d'enregistrement ou de téléchargement.
Pour plus d'inspiration, consultez le jeu d'icônes Material Design.
Utiliser des mises en page de squelette et d'autres mécanismes de commentaires
Pendant que votre application charge du contenu, montrez à l'utilisateur qu'elle est en cours de chargement afin qu'il ne pense pas qu'elle est défectueuse. Pour ce faire, vous pouvez utiliser un squelette de mise en page, une version de maquette fonctionnelle de votre application qui s'affiche pendant le chargement du contenu. Envisagez également d'utiliser une interface utilisateur de pré-chargeur avec une étiquette de texte indiquant à l'utilisateur que l'application est en cours de chargement, ou une animation clignotante doucement pour la maquette fonctionnelle afin de lui donner l'impression qu'elle est active et en cours de chargement. Cela rassure l'utilisateur sur le fait qu'il se passe quelque chose, et permet d'éviter les nouveaux envois ou les actualisations inutiles.
Affichez l'état d'une action en envoyant des commentaires. Par exemple, si un utilisateur modifie un document hors connexion, envisagez de modifier la conception des commentaires pour qu'elle soit visiblement différente de celle utilisée lorsqu'il est en ligne, mais montre toujours que son fichier a été "enregistré" et sera synchronisé lorsqu'il sera connecté à un réseau. Cela informe l'utilisateur sur le fonctionnement de votre application et le rassure sur le stockage de sa tâche ou de son action, ce qui l'incite à se servir de votre application en toute confiance.
Ne pas bloquer le contenu
Dans certaines applications, un utilisateur peut déclencher une action, par exemple la création d'un document. Certaines applications tentent de se connecter à un serveur pour synchroniser le nouveau document. Pour le démontrer, elles affichent une boîte de dialogue modale de chargement intrusive qui couvre la totalité de l'écran. Cela peut fonctionner si l'utilisateur dispose d'une connexion réseau stable, mais si le réseau est instable, il ne pourra pas éviter cette action. L'interface utilisateur l'empêche donc d'effectuer toute autre action.
Évitez les requêtes réseau qui bloquent du contenu. Laissez l'utilisateur continuer à parcourir votre application et les tâches de la file d'attente qui seront effectuées et synchronisées lorsque la connexion s'améliorera.
Concevoir pour le prochain milliard d'utilisateurs
Dans de nombreuses régions, les appareils bas de gamme sont monnaie courante, la connectivité n'est pas fiable et pour de nombreux utilisateurs, les données sont extrêmement coûteuses. Gagnez la confiance de vos utilisateurs en étant transparents et simples avec les données. Cherchez des moyens d'aider les utilisateurs dont la connexion est mauvaise et de simplifier l'interface pour accélérer les tâches. Essayez toujours de demander l'avis des utilisateurs avant de télécharger un contenu gourmand en données.
Proposez des options de faible bande passante aux utilisateurs dont la connexion est lente. Fournissez des éléments plus petits pour les connexions réseau plus lentes, ou offrez la possibilité de choisir des éléments de haute ou de faible qualité.
Conclusion
La formation est essentielle pour l'expérience utilisateur hors connexion, car les utilisateurs ne la connaissent pas. Pour les aider à apprendre, essayez de créer des associations avec des concepts familiers, par exemple en expliquant que télécharger pour une utilisation ultérieure revient à télécharger des données hors ligne.
Lors de la conception pour des connexions réseau instables, tenez compte de ces consignes:
- Concevoir votre solution en vue de la réussite, de l'échec et de l'instabilité d'une connexion réseau
- Les données peuvent être coûteuses, alors soyez respectueux de l'utilisateur.
- Pour la plupart des utilisateurs à travers le monde, l'environnement technologique est presque exclusivement mobile.
- Les appareils d'entrée de gamme sont monnaie courante, avec un espace de stockage, une mémoire et une puissance de traitement limités, des écrans de petite taille et une qualité d'écran tactile inférieure. Assurez-vous que la performance fait partie de votre processus de conception.
- Autorisez les utilisateurs à parcourir votre application hors connexion.
- Informez les utilisateurs de leur état actuel et des changements d'état.
- Essayez de fournir l'accès hors connexion par défaut si votre application ne nécessite pas beaucoup de données.
- Si l'application consomme beaucoup de données, expliquez aux utilisateurs comment la télécharger pour une utilisation hors connexion.
- Rendez vos expériences transférables d'un appareil à l'autre.
- Combinez le langage, les icônes, les images, la typographie et la couleur pour exprimer des idées à l'utilisateur.
- Offrir de l’assurance et des commentaires pour aider l’utilisateur.