Date de publication : 10 novembre 2016
La qualité d'une connexion réseau peut être affectée par plusieurs facteurs, tels que :
- Mauvaise couverture de l'opérateur réseau.
- Conditions météorologiques extrêmes.
- Pannes de courant
- Pénétrer dans des "zones mortes" permanentes, par exemple dans des bâtiments dont les murs bloquent les connexions réseau.
- Vous entrez dans des "zones mortes" temporaires, par exemple lorsque vous voyagez en train et que vous traversez un tunnel.
- Connexions Internet à durée limitée, comme celles des aéroports ou des hôtels.
- Pratiques culturelles qui nécessitent un accès à Internet limité, voire nul, à des moments ou des jours spécifiques.
En tant que développeur, votre objectif est de fournir une expérience de qualité qui atténue l'impact des changements de connectivité.
Décider du contenu à afficher à vos utilisateurs lorsqu'ils disposent d'une mauvaise connexion réseau
La première question à se poser est de savoir à quoi ressemble le succès 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. L'échec de la connexion inclut le comportement de votre application hors connexion et sur les réseaux lents.
Pour déterminer comment gérer un échec de connexion, posez-vous les questions importantes suivantes sur l'UX :
- 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 faire si la connexion échoue ?
- Comment expliquer à l'utilisateur ce qui se passe ?
Informer les utilisateurs de l'état
Indique à l'utilisateur l'état de l'application et les actions qu'il peut encore effectuer en cas de problème de réseau. Par exemple, une notification peut indiquer ce qui suit :
Il semble que votre connexion réseau soit de mauvaise qualité. Ne vous inquiétez pas. Les messages seront envoyés lorsque le réseau sera rétabli.
Informer les utilisateurs des améliorations apportées à la connexion
La façon dont vous informez l'utilisateur que sa connexion réseau s'est améliorée dépend de votre application. Les applications qui privilégient les informations actuelles, comme les applications de suivi de la météo ou du marché 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 élément 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 trouverez un exemple de code de cette fonction en action ici.
Chrome Platform Status en est un exemple. Il publie une note à l'intention de l'utilisateur lorsque l'application a été mise à jour.
Certaines applications peuvent toujours afficher la date de leur dernière mise à jour. Par exemple, cela est particulièrement utile pour les applications de conversion de devises.
Les applications d'actualités peuvent afficher une notification "Appuyer pour mettre à jour" informant l'utilisateur de nouveaux contenus. La mise à jour automatique d'un article ferait perdre leur place aux utilisateurs.
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 varient selon qu'une connexion réussie est nécessaire ou non. Par exemple, un site d'e-commerce peut être parcouru hors connexion, mais il 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'ensemble de l'interface devient blanc, puis grisé lorsque le marché ferme. Lorsque la valeur d'une action augmente ou diminue, chaque widget d'action individuel 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 leur expliquer ce qui change dans votre application lorsqu'ils n'ont pas de connexion. Indiquez-leur où les données volumineuses sont enregistrées et donnez-leur les paramètres permettant de modifier le comportement par défaut. Utilisez plusieurs composants de conception d'interface utilisateur (comme un langage informatif, des icônes, des notifications, des couleurs et des images) ensemble pour transmettre ces idées, au lieu de vous appuyer sur un seul choix de conception, comme une icône seule, pour raconter toute l'histoire.
Fournir 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 du réseau ravit 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, peut-être en économisant 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 à celui 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 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 un bref commentaire sur une opération par le biais d'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 la langue que vous utilisez correspond à votre audience et utilisez la même formulation dans tous les cas où elle s'applique. Les audiences non techniques comprennent souvent mal le mot "hors connexion". Utilisez plutôt un langage basé sur l'action auquel votre audience peut s'identifier.
Rendre l'option "Enregistrer hors connexion" évidente dans l'interface
Si une application utilise beaucoup de données, assurez-vous qu'il existe un bouton ou un code pour ajouter un élément à utiliser hors connexion. Ne téléchargez automatiquement les fichiers que si un utilisateur a spécifiquement demandé ce comportement dans un menu de paramètres. Assurez-vous que l'interface utilisateur de l'épinglage ou du téléchargement est évidente pour l'utilisateur et n'est pas masquée par d'autres éléments de l'interface utilisateur.
Par exemple, un lecteur de musique qui nécessite des fichiers volumineux. L'utilisateur est conscient des coûts de données associés, mais peut également souhaiter utiliser le lecteur hors connexion. Le téléchargement de musique pour une utilisation ultérieure nécessite une planification de la part de l'utilisateur. Vous devez donc probablement l'informer à ce sujet lors de l'intégration.
Préciser ce qui est disponible hors connexion
Définissez 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. Les utilisateurs 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 l'enregistrent pour une utilisation hors connexion lorsqu'ils ont une connexion.
Les utilisateurs qui ont un forfait de données évitent parfois de télécharger des fichiers volumineux par crainte de coûts supplémentaires. Vous pouvez donc également afficher les coûts associés pour que les utilisateurs puissent comparer activement un fichier ou une tâche spécifiques. Par exemple, l'application musicale mentionnée précédemment pourrait détecter si l'utilisateur dispose d'un forfait de données et afficher la taille du fichier pour qu'il puisse voir son coût.
Éviter 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 basées sur le cloud, il était courant que les utilisateurs enregistrent des fichiers volumineux et les joignent à des e-mails afin de pouvoir continuer à les modifier depuis un autre appareil. Une bonne UI résout le problème que les utilisateurs essaient de résoudre sans se laisser entraîner dans l'expérience piratée. Par exemple, proposez un moyen de partager des fichiers volumineux sur plusieurs appareils, au lieu de rendre plus conviviale l'ajout de fichiers volumineux aux e-mails.
Rendre les expériences transférables 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. Imaginons, par exemple, qu'une application de voyage perde sa 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 profiter 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, expliquez-leur les choses, mais essayez de ne pas les submerger avec trop de messages.
Créer des expériences de conception inclusives
Lorsque vous concevez votre UX, essayez d'être inclusif en fournissant des éléments de conception significatifs, un langage simple, une iconographie standard et des images pertinentes qui guident l'utilisateur pour qu'il puisse effectuer l'action ou la tâche sans être gêné.
Utiliser un langage simple et clair
Une bonne UX ne se limite pas à la conception de votre interface. Il inclut le chemin emprunté par un utilisateur dans votre application et tout ce qu'il rencontre en cours de route, y compris la langue utilisée 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. Il peut être difficile pour les utilisateurs de remarquer un état indiqué uniquement par une couleur, voire complètement inaccessible pour les utilisateurs souffrant d'un handicap visuel. De plus, comme la conception Web a tendance à utiliser le gris pour les éléments désactivés, l'utilisation d'une interface utilisateur grisée pour indiquer que votre application est hors connexion peut entraîner une confusion quant à ce que votre application peut faire hors connexion, en particulier si vous n'utilisez que la couleur pour indiquer l'état.
Pour éviter tout malentendu, exprimez les états de l'application à l'utilisateur de plusieurs façons, par exemple avec des couleurs, des libellés et des composants d'interface utilisateur.
Utiliser des icônes qui ont du sens
Veillez à utiliser des libellés de texte pertinents à côté de vos icônes. Les icônes seules peuvent être déroutantes, d'autant plus que le concept de "hors connexion" sur le Web est relativement nouveau. Parmi les autres cas d'icônes déroutantes, on peut citer l'utilisation d'une disquette pour représenter l'action "Enregistrer", qui peut n'avoir aucun sens pour les jeunes utilisateurs qui n'ont jamais vu de disquette, ainsi que l'icône de menu "hamburger".
Lorsque vous présentez une icône hors connexion, respectez 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 hors connexion ou une icône de synchronisation pour une action impliquant la synchronisation. Faites attention 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 trouver d'autres sources d'inspiration, consultez l'ensemble d'icônes Material Design.
Utiliser des mises en page squelettiques et d'autres mécanismes de commentaires
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 cassée. Pour ce faire, vous pouvez utiliser une mise en page squelette, une version fil de fer de votre application qui s'affiche pendant le chargement du contenu. Envisagez également d'utiliser une interface utilisateur de préchargement avec un libellé textuel indiquant à l'utilisateur que l'application est en cours de chargement, ou une animation légèrement pulsée pour le wireframe afin de lui donner l'impression qu'il est actif et en cours de chargement. Cela rassure l'utilisateur, qui constate qu'il se passe quelque chose, et permet d'éviter les renvois ou les actualisations inutiles.
Indiquez l'état d'une action en fournissant un retour d'information. Par exemple, si un utilisateur modifie un document hors connexion, envisagez de modifier la conception des commentaires afin qu'elle soit visiblement différente de celle utilisée lorsqu'il est en ligne, mais qu'elle indique toujours que son fichier a été "enregistré" et qu'il sera synchronisé lorsqu'il disposera d'une connexion réseau. Cela permet à l'utilisateur de comprendre le fonctionnement de votre application et de le rassurer en lui indiquant que sa tâche ou son action a été enregistrée, ce qui peut le rendre plus confiant dans l'utilisation de votre application.
Ne pas bloquer le contenu
Dans certaines applications, un utilisateur peut déclencher une action, comme la création d'un document. Certaines applications tentent de se connecter à un serveur pour synchroniser le nouveau document et, pour le démontrer, affichent une boîte de dialogue modale de chargement intrusive qui recouvre 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 autre chose.
Évitez les requêtes réseau qui bloquent le contenu. Permettez à l'utilisateur de 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 d'utilisateurs
Dans de nombreuses régions, les appareils bas de gamme sont courants, 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 faisant preuve de transparence et en utilisant les données avec parcimonie. Pensez à des moyens d'aider les utilisateurs disposant d'une mauvaise connexion et à 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 pour les utilisateurs dont la connexion est lente. Fournissez des composants plus petits sur les connexions réseau plus lentes ou proposez une option permettant de choisir des composants de haute ou basse qualité.
Conclusion
L'éducation est essentielle pour l'UX hors connexion, car les utilisateurs ne la connaissent pas. Pour l'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 à mettre des données hors connexion.
Lorsque vous concevez des applications pour des connexions réseau instables, tenez compte des consignes suivantes :
- Concevez votre application en tenant compte du succès, de l'échec et de l'instabilité d'une connexion réseau.
- Les données peuvent être coûteuses. Pensez donc à l'utilisateur.
- Pour la plupart des utilisateurs dans le monde, l'environnement technologique est presque exclusivement mobile.
- Les appareils bas de gamme sont courants. Ils disposent d'un espace de stockage, d'une mémoire et d'une puissance de traitement limités, d'un petit écran et d'un écran tactile de qualité 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.
- Informer les utilisateurs de leur état actuel et des changements d'état
- Essayez de fournir un accès hors connexion par défaut si votre application ne nécessite pas beaucoup de données.
- Si l'application utilise beaucoup de données, expliquez aux utilisateurs comment les télécharger pour les utiliser hors connexion.
- Rendez les expériences transférables entre les appareils.
- Utilisez le langage, les icônes, les images, la typographie et les couleurs pour exprimer des idées à l'utilisateur.
- Rassurez l'utilisateur et donnez-lui des informations pour l'aider.