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 plusieurs facteurs, par exemple:
- Mauvaise couverture du fournisseur de réseau
- Conditions météorologiques extrêmes
- Coupures de courant
- En entrant dans des "zones mortes" permanentes, comme dans des bâtiments dont les murs bloquent les connexions réseau.
- Passage dans des "zones mortes" temporaires, par exemple lorsque vous voyagez en train et que vous passez dans un tunnel.
- 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 nul à Internet à des heures ou des jours spécifiques.
En tant que développeur, votre objectif est de fournir une bonne expérience qui atténue l'impact des changements de connectivité.
Décider de ce que vous devez afficher à vos utilisateurs lorsqu'ils ont une mauvaise connexion réseau
La première question à se poser est de savoir à quoi ressemblent la réussite et l'échec d'une connexion réseau pour votre application. Une connexion réussie correspond à l'expérience en ligne normale de votre application. Les défaillances de connexion incluent le comportement de votre application hors connexion et sur des réseaux lents.
Pour déterminer comment gérer les échecs de connexion, posez-vous ces questions importantes en matière d'expérience utilisateur:
- Combien de temps attendez-vous pour déterminer si une connexion a réussi ou échoué ?
- Que pouvez-vous faire pendant que le succès ou l'échec est déterminé ?
- Que devez-vous faire si la connexion échoue ?
- Comment lui expliquer ce qui se passe ?
Informer les utilisateurs de leur état actuel et de tout changement d'état
Indiquez à l'utilisateur l'état de l'application et les actions qu'il peut encore effectuer en cas de défaillance réseau. Par exemple, une notification peut indiquer ce qui suit:
Votre connexion réseau semble mauvaise. Ne vous inquiétez pas. Les messages seront envoyés lorsque le réseau sera rétabli.
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, telles que les applications de météo ou de suivi des marchés boursiers, 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 indice visuel tel qu'un élément de notification 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.
État de la plate-forme Chrome en est un exemple. Il envoie une note à l'utilisateur lorsque l'application a été mise à jour.
Certaines applications peuvent toujours afficher la date et l'heure de leur dernière mise à jour. Par exemple, cette fonctionnalité est particulièrement utile pour les applications de conversion de devises.
Les applications d'actualités peuvent afficher une notification simple "Appuyer pour mettre à jour" informant l'utilisateur de nouveaux contenus. La mise à jour automatique d'un article entraînerait la perte de la position de l'utilisateur.
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 changent selon qu'il a besoin d'une connexion réussie. Par exemple, un site d'e-commerce que vous pouvez consulter hors connexion, mais qui désactive les prix 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. L'interface entière devient blanche, puis grisée lorsque la place de marché ferme. Lorsque la valeur d'une action augmente ou diminue, chaque widget d'action devient vert ou rouge, selon son état.
Expliquez à l'utilisateur ce qu'est le modèle hors connexion.
La plupart des utilisateurs sont habitués à disposer d'une connexion réseau en permanence. Vous devez les informer des modifications apportées à votre application lorsqu'ils n'ont pas de connexion. Indiquez-lui où les données volumineuses sont enregistrées et fournissez-lui les paramètres permettant de modifier le comportement par défaut. Utilisez plusieurs composants de conception d'interface utilisateur (tels que le langage informatif, les icônes, les notifications, la couleur et les images) pour transmettre ces idées, au lieu de vous appuyer sur un seul choix de conception, comme une icône seule, pour raconter l'histoire complète.
Proposer une expérience hors connexion par défaut
Si votre application ne nécessite pas beaucoup de données, mettez-les en cache par défaut. Les utilisateurs peuvent être 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 donne l'impression que votre application n'est pas fiable. Une application qui atténue l'impact d'une défaillance réseau fait plaisir à 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, en économisant peut-être 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 donnant la priorité au téléchargement des catégories d'actualités qu'il consulte le plus.
Informer l'utilisateur lorsque l'application est prête à être utilisée hors connexion
Lorsqu'une application Web se charge pour la première fois, elle doit indiquer à l'utilisateur si elle est prête à être utilisée 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 convient à votre audience et utilisez la même formulation dans tous les cas où cela s'applique. Les audiences non techniques comprennent souvent mal le terme "hors connexion". Utilisez plutôt un langage basé sur l'action auquel votre audience peut s'identifier.
Rendre l'option "Enregistrer pour utilisation hors connexion" plus visible dans l'interface
Si une application utilise beaucoup de données, assurez-vous qu'un bouton ou un repère permet d'ajouter un élément pour une utilisation hors connexion. Téléchargez automatiquement les fichiers uniquement si un utilisateur a spécifiquement demandé ce comportement via un menu de paramètres. Assurez-vous que l'interface utilisateur de l'épingle ou du téléchargement est visible par l'utilisateur et qu'elle n'est pas masquée par d'autres éléments de l'interface utilisateur.
Par exemple, un lecteur de musique qui nécessite de gros fichiers. L'utilisateur est conscient du coût des données associé, mais il peut également vouloir utiliser le lecteur hors connexion. Le téléchargement de musique pour une utilisation ultérieure nécessite que l'utilisateur planifie à l'avance. Vous devrez donc probablement l'en informer lors de l'intégration.
Clarifier ce qui est disponible 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 assimilent la fonctionnalité hors connexion au "téléchargement". Dans les pays où les connexions réseau échouent régulièrement ou ne sont pas disponibles, les utilisateurs partagent souvent des contenus avec d'autres utilisateurs ou les enregistrent pour les utiliser hors connexion lorsqu'ils ont accès à une connexion.
Les utilisateurs disposant de forfaits de données évitent parfois de télécharger de gros fichiers par crainte de frais. 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 ci-dessus peut détecter si l'utilisateur dispose d'un forfait de données et afficher la taille du fichier afin que l'utilisateur puisse voir le coût d'un fichier.
Prévenir les expériences piratées
Les utilisateurs piratent souvent une expérience sans s'en rendre compte. Par exemple, avant l'existence des applications Web de partage de fichiers dans le cloud, il était courant que les utilisateurs enregistrent de gros fichiers et les joignent à des e-mails afin de pouvoir continuer à les modifier depuis un autre appareil. Une bonne interface utilisateur résout le problème que les utilisateurs tentent de résoudre sans les entraîner dans l'expérience de piratage. Par exemple, proposez un moyen de partager de grands fichiers entre les appareils, plutôt que de rendre l'ajout de pièces jointes volumineux aux e-mails plus convivial.
Transférer les expériences d'un appareil à un autre
Lorsque vous développez pour des réseaux instables, essayez de synchroniser dès que la connexion s'améliore afin que l'expérience soit transférable. Par exemple, imaginons qu'une application de voyage perde la connexion réseau au milieu d'une réservation. Lorsque la connexion est 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 bénéficier d'une expérience fluide.
Indiquez à l'utilisateur l'état de ses données. Par exemple, vous pouvez indiquer si l'application a été synchronisée. Si possible, informez-les, mais essayez de ne pas les submerger de messages.
Créer des expériences de conception inclusives
Lorsque vous concevez votre expérience utilisateur, veillez à être inclusif en fournissant des dispositifs de conception pertinents, un langage simple, une iconographie standard et des images pertinentes qui guident l'utilisateur pour qu'il accomplisse l'action ou la tâche sans entrave.
Utiliser un langage simple et clair
Une bonne expérience utilisateur ne se limite pas à la conception de votre interface. Il comprend le chemin qu'un utilisateur emprunte 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'UI ou l'état de l'application, évitez le jargon technique. Le mot "hors connexion" n'est souvent pas assez clair pour indiquer à l'utilisateur ce que fait votre application.
Utiliser plusieurs outils de conception pour créer des expériences utilisateur accessibles
Utilisez le langage, la couleur et les composants visuels pour indiquer un état ou un changement d'état. Utiliser uniquement la couleur pour indiquer l'état peut être difficile à remarquer pour les utilisateurs, voire complètement inaccessible pour les utilisateurs ayant un handicap visuel. De plus, comme la conception Web a tendance à utiliser le gris pour les éléments désactivés, utiliser une UI grisée pour indiquer que votre application est hors connexion peut prêter à confusion quant à ce que votre application peut faire en mode hors connexion, en particulier si vous n'utilisez que la couleur pour indiquer l'état.
Pour éviter les malentendus, exprimez les états de l'application à l'utilisateur de plusieurs manières, par exemple avec des couleurs, des libellés et des composants d'interface utilisateur.
Utiliser des icônes qui véhiculent un sens
Veillez à utiliser des libellés textuels pertinents à côté de vos icônes. Les icônes seules peuvent prêter à confusion, en particulier parce que le concept d''hors connexion' sur le Web est relativement nouveau. D'autres icônes peuvent prêter à confusion, par exemple l'utilisation d'une disquette pour représenter l'action "Enregistrer", qui peut être incompréhensible pour les utilisateurs plus jeunes qui n'ont jamais vu de disquette, ou l'icône de menu "hamburger".
Lorsque vous introduisez une icône hors connexion, restez cohérent avec les visuels standards du secteur, le cas échéant, et fournissez un libellé et une description textuels. Par exemple, vous pouvez utiliser une icône de téléchargement pour indiquer l'enregistrement pour une utilisation hors connexion, et une icône de synchronisation pour une action impliquant une synchronisation. Soyez prudent lorsque vous utilisez des icônes pour indiquer un état qui pourrait être interprété comme une action d'enregistrement ou de téléchargement.
Pour plus d'inspiration, consultez l'ensemble d'icônes Material Design.
Utiliser des mises en page squelettes et d'autres mécanismes de rétroaction
Pendant que votre application charge du contenu, indiquez à l'utilisateur qu'elle est en cours de chargement pour qu'il ne pense pas qu'elle est défectueuse. Pour ce faire, vous pouvez utiliser une mise en page squelette, une version de la maquette fonctionnelle de votre application qui s'affiche pendant le chargement du contenu. Envisagez également d'utiliser une UI de préchargeur avec un libellé textuel indiquant à l'utilisateur que l'application est en cours de chargement, ou une animation pulsante douce pour la maquette fonctionnelle afin de donner l'impression qu'elle est active et en cours de chargement. Cela rassure l'utilisateur, qui constate qu'il se passe quelque chose, et permet d'éviter les nouvelles soumissions ou les actualisations inutiles.
Afficher l'état d'une action en fournissant des commentaires Par exemple, si un utilisateur modifie un document hors connexion, envisagez de modifier la conception des commentaires afin qu'elle soit visuellement différente de celle lorsqu'il est en ligne, mais qu'elle indique toujours que son fichier a été "enregistré" et qu'il se synchronisera lorsqu'il aura une connexion réseau. Cela permet à l'utilisateur de comprendre le fonctionnement de votre application et de le rassurer sur le fait que sa tâche ou son action a été enregistrée, ce qui peut l'inciter à utiliser votre application avec plus de confiance.
Ne pas bloquer le contenu
Dans certaines applications, un utilisateur peut déclencher une action, comme créer un document. Certaines applications tentent de se connecter à un serveur pour synchroniser le nouveau document. Pour ce faire, elles affichent une boîte de dialogue modale de chargement intrusive qui couvre l'intégralité 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 échapper à cette action. L'UI l'empêche donc de faire quoi que ce soit d'autre.
Évitez les requêtes réseau qui bloquent du contenu. Autorisez l'utilisateur à continuer à parcourir votre application et à mettre en file d'attente les tâches qui seront effectuées et synchronisées lorsque la connexion sera améliorée.
Concevoir pour le prochain milliard
Dans de nombreuses régions, les appareils bas de gamme sont courants, la connectivité est peu fiable et, pour de nombreux utilisateurs, les données sont extrêmement coûteuses. Gagnez la confiance de vos utilisateurs en faisant preuve de transparence et de parcimonie avec les données. Réfléchissez à des moyens d'aider les utilisateurs en cas de mauvaise connexion et de simplifier l'interface pour accélérer les tâches. Essayez toujours de demander aux utilisateurs avant de télécharger du contenu volumineux.
Proposez des options à faible bande passante aux utilisateurs dont les connexions sont lentes. Fournissez des composants plus petits sur des connexions réseau plus lentes ou proposez une option permettant de choisir des composants de haute ou de basse qualité.
Conclusion
L'éducation est essentielle à l'expérience utilisateur hors connexion, car les utilisateurs ne sont pas familiers avec ce type d'expérience. Pour les aider à apprendre, essayez de créer des associations avec des concepts familiers, par exemple en expliquant que le téléchargement pour une utilisation ultérieure est identique à la mise hors connexion des données.
Lorsque vous concevez pour des connexions réseau instables, tenez compte des consignes suivantes:
- Concevez pour la réussite, l'échec et l'instabilité d'une connexion réseau.
- Les données peuvent être coûteuses. Par conséquent, soyez respectueux envers l'utilisateur.
- Pour la plupart des utilisateurs dans le monde, l'environnement technologique est presque exclusivement mobile.
- Les appareils bas de gamme sont courants, avec un espace de stockage, une mémoire et une puissance de traitement limités, de petits écrans et une qualité d'écran tactile inférieure. Assurez-vous que les performances font partie de votre processus de conception.
- Autorisez les utilisateurs à parcourir votre application lorsqu'ils sont hors connexion.
- Informez les utilisateurs de leur état actuel et des changements d'état.
- Essayez de fournir des données 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 l'utiliser hors connexion.
- Faites en sorte que les expériences puissent être transférées d'un appareil à un autre.
- Utilisez le langage, les icônes, les images, la typographie et la couleur pour exprimer des idées à l'utilisateur.
- Rassurez l'utilisateur et fournissez-lui des commentaires pour l'aider.