Un guide pour concevoir des expériences Web pour les réseaux lents et hors connexion.
Cet article fournit des consignes de conception pour vous aider à créer une expérience 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:
- Mauvaise couverture d'un fournisseur.
- Conditions météorologiques extrêmes.
- Coupures de courant.
- Pénétrer dans des "zones mortes" permanentes, comme dans les bâtiments dont les murs bloquent les connexions réseau
- Pénétrer dans des "zones mortes" temporaires (par exemple, lorsqu'on emprunte un train ou un tunnel)
- les connexions Internet limitées dans le temps, telles que celles des aéroports ou des hôtels.
- Pratiques culturelles nécessitant un accès limité ou inexistant à Internet à certaines heures ou certains jours
Votre objectif est d'offrir une expérience utilisateur de qualité qui diminue l'impact des changements de connectivité.
Choisissez ce que vous voulez montrer à vos utilisateurs lorsque la connexion réseau est de mauvaise qualité
La première question à se poser est la suivante : à quoi ressemblent le succès et l'échec d'une connexion réseau ? Une connexion réussie est une expérience en ligne normale de votre application. L'échec d'une connexion peut toutefois être à la fois l'état hors connexion de votre application et son comportement en cas de réseau lent.
Lorsque vous pensez à la réussite ou à l'échec d'une connexion réseau, vous devez vous poser ces questions importantes concernant l'expérience utilisateur:
- Combien de temps attendez-vous pour déterminer si une connexion a réussi ou échoué ?
- Que pouvez-vous faire pendant l'évaluation de la réussite ou de l'échec ?
- Que devez-vous faire en cas d'échec ?
- Comment informer l'utilisateur de ce qui précède ?
Informer les utilisateurs de leur état actuel et de son changement d'état
Informez l'utilisateur des actions qu'il peut encore effectuer en cas de défaillance du réseau et de l'état actuel de l'application. Voici un exemple de notification:
Votre connexion réseau semble être de mauvaise qualité. Ne vous inquiétez pas. Les 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 informez l'utilisateur que sa connexion réseau s'est améliorée dépend de votre application. Les applications telles qu'une application boursière qui donne la priorité aux informations actuelles doivent se mettre à jour automatiquement et avertir 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, par exemple. Cette opération implique la détection à la fois de la présence d'un service worker et d'une mise à jour de son contenu géré. Vous pouvez voir un exemple de code de cette fonction en cours d'utilisation.
Par exemple, Chrome Platform Status (État de la plate-forme Chrome) est un message qui publie une note à l'attention de l'utilisateur lorsque l'application a été mise à jour.
Vous pouvez également afficher à tout moment la date et l'heure de la dernière mise à jour de l'application, dans un espace bien en vue. Cette approche est utile pour une application de conversion de devises, par exemple.
Les applications telles que les applications d'actualités peuvent afficher une simple notification de mise à jour sans contact et informant l'utilisateur d'un nouveau contenu. La mise à jour automatique risquerait de faire perdre la place aux utilisateurs.
Mettre à jour l'UI pour refléter l'état contextuel actuel
Chaque élément de l'interface utilisateur peut avoir son propre contexte et sa propre fonctionnalité, qui varient selon que la connexion est établie ou non. Prenons l'exemple d'un site d'e-commerce qui peut être consulté hors connexion. Le bouton "Acheter" et la tarification seront désactivés jusqu'à ce qu'une connexion soit rétablie.
D'autres formes d'états contextuels peuvent inclure les données. Par exemple, l'application financière Robinhood permet aux utilisateurs d'acheter des actions, et utilise des couleurs et des graphismes pour avertir l'utilisateur lorsque le marché est ouvert. L'interface complète devient blanche, puis grise à la fermeture du marché. Lorsque la valeur d'une action augmente ou diminue, chaque widget d'action devient vert ou rouge en fonction de son état.
Informer l'utilisateur afin qu'il comprenne en quoi consiste le modèle hors connexion
L'activité hors connexion est un nouveau modèle mental pour tout le monde. Vous devez informer vos utilisateurs des modifications qui se produiront en l'absence de connexion. Informez-les de l'emplacement où des données volumineuses sont enregistrées et fournissez-leur des paramètres permettant de modifier le comportement par défaut. Veillez à utiliser plusieurs composants de conception de l'interface utilisateur, tels que le langage informatif, les icônes, les notifications, la couleur et les images, pour transmettre ces idées collectivement au lieu de vous fier à un seul choix de conception, comme une icône seule, pour raconter toute l'histoire.
Proposez une expérience hors connexion par défaut
Si votre application ne nécessite pas beaucoup de données, mettez ces données 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 donnera l'impression que votre application n'est pas fiable. Une application qui atténue l'impact d'une défaillance du réseau semblera magique pour l'utilisateur.
Les sites d'actualités peuvent bénéficier du téléchargement et de l'enregistrement automatiques des actualités afin qu'un utilisateur puisse lire les actualités du jour sans connexion, éventuellement en téléchargeant le texte sans les images des articles. Adaptez-vous également au comportement de l'utilisateur. Par exemple, si la section "Sports" correspond généralement à ce qu'ils consultent, faites en sorte qu'il s'agisse du téléchargement prioritaire.
Informez l'utilisateur lorsque l'application est prête à être utilisée hors connexion.
Lors du premier chargement d'une application Web, vous devez 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 de données a été téléchargé.
Encore une fois, pensez au langage que vous utilisez pour vous assurer qu'il est adapté à votre public. Assurez-vous que le message est le même dans toutes les situations où il est utilisé. Le terme "hors connexion" est généralement mal compris par une audience non technique. Utilisez donc un langage incitant votre audience à s'identifier à l'action.
Ajouter l'option "Enregistrer pour accès hors connexion" de façon évidente dans les applications gourmandes en données
Si une application utilise de grandes quantités de données, assurez-vous qu'un bouton bascule ou une épingle permettent d'ajouter un élément pour une utilisation hors connexion plutôt que de le télécharger automatiquement, sauf 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 n'est pas masquée par d'autres éléments de l'UI et que cette fonctionnalité est bien visible par l'utilisateur.
Il peut s'agir, par exemple, d'un lecteur de musique qui nécessite des fichiers de données 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 le planifie. Des informations à ce sujet peuvent donc être nécessaires lors de l'intégration.
Clarifier les informations disponibles hors connexion
Indiquez clairement l'option que vous proposez. Vous devrez peut-être afficher un onglet ou un paramètre qui affiche une "bibliothèque hors connexion" ou un index de contenu, afin que l'utilisateur puisse facilement voir ce qu'il a stocké sur son téléphone et ce qui doit être enregistré. Assurez-vous que les paramètres sont concis, et indiquent clairement où les données seront 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 ayant souscrit un forfait Internet peuvent éviter de télécharger des fichiers volumineux par peur des 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, si l'application musicale ci-dessus peut détecter si l'utilisateur a souscrit un forfait Internet et afficher la taille du fichier afin qu'il puisse voir le coût d'un fichier.
Empêcher le piratage d'expériences
Souvent, les utilisateurs piratent une expérience sans s'en rendre compte. Par exemple, avant les applications Web de partage de fichiers dans 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. Il est important de ne pas être intégré à leur expérience de piratage, mais plutôt de regarder ce qu'ils essaient de faire. En d'autres termes, au lieu de réfléchir à la façon dont vous pouvez rendre l'ajout d'un fichier volumineux plus convivial, résolvez le problème du partage de fichiers volumineux sur plusieurs appareils.
Permettre le transfert d'expériences 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 la réservation sur son ordinateur de bureau. Ne pas être en mesure de transférer des expériences peut être incroyablement pénible pour les utilisateurs.
Informez l'utilisateur de l'état actuel de ses données. Par exemple, vous pouvez indiquer si l'application est synchronisée. Informez-les lorsque cela est possible, mais essayez de ne pas les surcharger avec des messages.
Créer des expériences de conception inclusives
Lors de la conception, cherchez à être inclusif en fournissant des appareils de conception pertinents, un langage simple, une iconographie standard et des images pertinentes qui guideront l'utilisateur vers l'action ou la tâche plutôt que d'entraver sa progression.
Utiliser un langage simple et concis
Une bonne expérience utilisateur ne se résume pas à une interface bien conçue. Il inclut le chemin d'un utilisateur ainsi que les mots utilisés dans l'application. Évitez le jargon technique lorsque vous expliquez l'état de l'application ou des composants individuels de l'interface utilisateur. Notez que l'expression "application hors connexion" peut ne pas transmettre à l'utilisateur l'état actuel de l'application.
Utiliser plusieurs appareils de conception pour créer des expériences utilisateur accessibles
Utilisez la langue, la couleur et des composants visuels pour démontrer un changement d'état ou de statut actuel. L'utilisation exclusive de la couleur pour démontrer l'état risque de ne pas être remarquée par l'utilisateur et d'être inaccessible aux utilisateurs ayant une déficience visuelle. En outre, l'instinct des concepteurs est d'utiliser des interfaces utilisateur grisées pour représenter hors connexion, mais cela peut avoir une signification chargée sur le Web. Les éléments d'interface utilisateur grisés, tels que les éléments de saisie d'un formulaire, signifient également qu'un élément est désactivé. Cela peut prêter à confusion si vous n'utilisez que la couleur pour représenter l'état.
Pour éviter tout malentendu, exprimez différents états auprès de l'utilisateur de plusieurs manières, par exemple avec des couleurs, des étiquettes et des composants d'interface utilisateur.
Utiliser des icônes qui traduisent un sens
Assurez-vous que les informations sont transmises correctement à l'aide de libellés textuels et d'icônes pertinents. L'utilisation d'icônes à elles seules peut poser problème, car le concept du mode hors connexion sur le Web est relativement nouveau. Les utilisateurs peuvent mal comprendre les icônes utilisées seules. Par exemple, l'utilisation d'une disquette pour enregistrer est logique pour une génération plus âgée, mais les jeunes utilisateurs qui n'ont jamais vu de disquette risquent d'être perturbés par la métaphore. De même, l 'icône de menu « hamburger » est connue pour tromper les utilisateurs lorsqu'elle est présentée sans étiquette.
Lorsque vous introduisez une icône hors connexion, essayez de rester cohérent avec les visuels standard du secteur (lorsqu'ils existent), tout en fournissant un libellé et une description. Par exemple, l'enregistrement pour accès hors connexion peut être une icône de téléchargement classique. Si l'action implique la synchronisation, il peut s'agir d'une icône de synchronisation. Certaines actions peuvent être interprétées comme un enregistrement pour un accès hors connexion au lieu de démontrer l'état d'un réseau. Pensez à l'action que vous essayez de faire passer plutôt que de présenter à l'utilisateur un concept abstrait. Par exemple, l'enregistrement ou le téléchargement de données se fait en fonction d'une action.
Hors connexion peut avoir plusieurs significations selon le contexte, comme le téléchargement, l'exportation, l'épinglage, etc. Pour plus d'inspiration, consultez l'ensemble d'icônes Material Design.
Utiliser des mises en page de type "squelette" avec d'autres mécanismes de commentaires
Un squelette de mise en page est essentiellement une version armature de votre application qui s'affiche pendant le chargement du contenu. Cela permet de montrer à l'utilisateur que le contenu est sur le point d'être chargé. Envisagez également d'utiliser une interface utilisateur de pré-chargeur, avec un libellé textuel informant l'utilisateur que l'application est en cours de chargement. Par exemple, il serait possible de faire clignoter le contenu de la maquette afin de donner à l'application l'impression d'être active et en charge. Cela rassure l'utilisateur sur le fait qu'il se passe quelque chose, et l'aide à éviter tout nouvel envoi ou actualisation de votre application.
Ne pas bloquer le contenu
Dans certaines applications, un utilisateur peut déclencher une action, telle que la création d'un document. Certaines applications essaient de se connecter à un serveur pour synchroniser le nouveau document. Pour illustrer cela, elles affichent une boîte de dialogue modale de chargement intrusive qui couvre tout l'écran. Cela peut fonctionner correctement si l'utilisateur dispose d'une connexion réseau stable, mais si le réseau est instable, il ne pourra pas échapper à cette action, et l'interface utilisateur l'empêchera de faire autre chose. Les requêtes réseau qui bloquent du contenu doivent être évitées. Autorisez l'utilisateur à continuer à parcourir votre application et à mettre en file d'attente les tâches qui seront effectuées et synchronisées une fois la connexion améliorée.
Démontrez l'état d'une action en fournissant des commentaires à vos utilisateurs. Par exemple, si un utilisateur modifie un document, envisagez de modifier la conception des commentaires pour qu'elle soit visiblement différente de celle lorsqu'il est en ligne, tout en montrant que son fichier a été "enregistré" et qu'il sera synchronisé lorsqu'il se connectera au réseau. Cela permet d'informer l'utilisateur sur les différents états disponibles et de le rassurer sur le fait que sa tâche ou son action a été stockée. L'avantage est que l'utilisateur se sente plus en confiance lorsqu'il se sert de votre application.
Concevoir pour le prochain milliard
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 ne sont pas abordables. Vous devez gagner la confiance des utilisateurs en faisant preuve de transparence et d'économies en matière de données. Cherchez des moyens d'aider les utilisateurs dont la connexion est mauvaise et simplifiez l'interface pour accélérer les tâches. Essayez toujours de demander aux utilisateurs avant de télécharger un contenu gourmand en données.
Proposez des options de faible bande passante aux utilisateurs dont les connexions sont lentes. Donc, si la connexion réseau est lente, fournissez de petits éléments. Offrir la possibilité de choisir des assets de haute ou de mauvaise qualité.
Conclusion
La formation est essentielle pour l'expérience utilisateur hors connexion, car les utilisateurs ne connaissent pas ces concepts. Essayez de créer des associations avec des éléments familiers.Par exemple, le téléchargement pour une utilisation ultérieure équivaut à une utilisation hors connexion.
Lors de la conception de connexions réseau instables, tenez compte des consignes suivantes:
- Concevez votre solution en tenant compte 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 bas de gamme sont monnaie courante, avec un espace de stockage, une mémoire et une puissance de traitement limités, ainsi qu'avec des écrans de petite taille 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 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.
- Utiliser la langue, les icônes, l'imagerie, la typographie et la couleur pour exprimer des idées à l'utilisateur.
- Rassurez l'utilisateur et donnez-lui des commentaires pour l'aider.