Guide de la conception d'expériences Web pour les réseaux lents et hors connexion.
Cet article fournit des consignes de conception pour 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 les suivants:
- Mauvaise couverture d'un fournisseur.
- Conditions météorologiques extrêmes.
- en cas de coupure 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, lors d'un trajet en train ou d'un tunnel)
- Connexions Internet limitées dans le temps, comme celles dans les aéroports ou les hôtels
- Pratiques culturelles qui nécessitent un accès limité ou inexistant à Internet à certaines heures ou certains jours
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 suivante : à quoi ressemblent le succès et l'échec d'une connexion réseau ? Une connexion réussie correspond à l'expérience en ligne normale de votre application. Toutefois, l'échec d'une connexion peut être à la fois lié à l'état hors connexion de votre application ainsi qu'à son comportement en cas de réseau lent.
Lorsque vous pensez au succès 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 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 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 des exemples de notifications:
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 informez l'utilisateur que sa connexion réseau s'est améliorée dépend de votre application. Les applications comme les applications boursières qui donnent 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. 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 ici.
Par exemple, Chrome Platform Status (État de la plate-forme Chrome) en est un exemple.
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. Cela peut être 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 indiquant à l'utilisateur qu'un nouveau contenu est disponible. La mise à jour automatique entraînerait la perte des 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 ses propres fonctionnalités, qui varient 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. Le bouton "Acheter" et la tarification restent désactivés 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 permet aux utilisateurs d'acheter des actions, et utilise des couleurs et des graphiques pour avertir l'utilisateur lorsque le marché est ouvert. Toute l'interface devient blanche, puis grisée à 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
Le mode hors connexion est un nouveau modèle mental pour tout le monde. Vous devez informer vos utilisateurs des modifications qui se produisent s'ils n'ont pas de connexion. Informez-les de l'emplacement où les données volumineuses sont enregistrées et fournissez-leur les paramètres permettant de modifier le comportement par défaut. Veillez à utiliser 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 collectivement, au lieu de compter sur un seul choix de conception, comme une icône à part, pour raconter toute l'histoire.
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 très 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, et une application qui réduit l'impact d'une défaillance du réseau semblera magique pour l'utilisateur.
Les sites d'actualités pourraient bénéficier du téléchargement et de l'enregistrement automatiques des dernières actualités afin qu'un utilisateur puisse lire les actualités du jour sans connexion, voire en téléchargeant le texte sans les images de l'article. Adaptez-vous également au comportement de l'utilisateur. Par exemple, si la section "Sports" correspond généralement à ce qu'ils consultent, définissez-la comme téléchargement prioritaire.
Informer l'utilisateur lorsque l'application est prête pour une utilisation 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é.
Pensez à nouveau 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é. En général, le terme "hors connexion" est mal compris par un public non technique. Vous devez donc utiliser un langage suscitant l'action auquel votre audience peut s'identifier.
Faire en sorte que l'option "Enregistrer pour accès hors connexion" soit bien visible dans l'interface pour 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 qu'un téléchargement automatique, sauf si un utilisateur a spécifiquement demandé ce comportement via un menu de paramètres. Assurez-vous que l'interface d'épinglage ou de téléchargement n'est pas masquée par d'autres éléments d'interface, et que la fonctionnalité est bien visible pour l'utilisateur.
C'est le cas, 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 une planification préalable de l'utilisateur. Vous devrez donc peut-être en être informé lors de l'intégration.
Déterminer quelles informations sont disponibles hors connexion
Indiquez clairement l'option que vous proposez. Vous devrez peut-être afficher un onglet ou un paramètre affichant 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 du coût. 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 pour que les utilisateurs puissent 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, les utilisateurs enregistrons souvent 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 piégé par leur expérience de piratage, mais plutôt de regarder ce qu'ils essaient d'accomplir. En d'autres termes, au lieu de réfléchir à la façon de rendre l'ajout d'un fichier volumineux plus facile à utiliser, résolvez le problème du partage de fichiers volumineux sur plusieurs appareils.
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 au milieu d'une 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. L'impossibilité 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 s'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 dispositifs de conception pertinents, un langage simple, une iconographie standard et des images pertinentes qui guideront l'utilisateur vers l'action ou la tâche au lieu d'entraver sa progression.
Utiliser un langage simple et concis
Une bonne expérience utilisateur ne se limite pas à une interface bien conçue. Il inclut le chemin emprunté par 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 de l'interface utilisateur. Gardez à l'esprit 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 le langage, la couleur et les composants visuels pour démontrer un changement d'état ou de statut actuel. L'utilisation exclusive de la couleur pour démontrer l'état peut ne pas être remarquée par l'utilisateur et être inaccessible aux utilisateurs ayant des déficiences visuelles. En outre, les concepteurs utilisent des éléments d'interface utilisateur grisés pour représenter les activités 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 d'entrée 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 à l'utilisateur de plusieurs manières, par exemple avec des couleurs, des étiquettes et des composants d'interface utilisateur.
Utilisez des icônes qui traduisent le sens
Assurez-vous que les informations sont transmises correctement à l'aide de libellés textuels pertinents et d'icônes. Les icônes seules peuvent poser problème, car le concept de mode hors connexion sur le Web est relativement nouveau. Les utilisateurs peuvent mal comprendre les icônes utilisées seuls. Par exemple, l'utilisation d'une disquette pour l'enregistrement est logique pour une génération plus âgée, mais les jeunes utilisateurs n'ayant jamais vu de disquette peuvent être dérouté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é textuel et une description. Par exemple, l'enregistrement pour une utilisation 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 l'accès hors connexion au lieu de démontrer l'état d'un réseau. Pensez à l'action que vous essayez de transmettre 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 des actions.
L'activité "Hors connexion" peut prendre différentes formes 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
Une mise en page squelette est essentiellement une version maquette 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é. Pensez également à utiliser une interface utilisateur de pré-chargeur, avec un libellé textuel informant l'utilisateur que l'application est en cours de chargement. Par exemple, vous pouvez faire clignoter le contenu de la maquette fonctionnelle pour 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'empêche de renvoyer ou d'actualiser 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 de chargement intrusive qui couvre tout 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 et l'interface utilisateur l'empêchera d'effectuer toute autre action. Les requêtes réseau qui bloquent du contenu doivent être évitées. Autorisez l'utilisateur à continuer à parcourir votre application et les tâches de la file d'attente 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, mais montre toujours que son fichier a été "enregistré" et sera synchronisé lorsqu'il se connectera au réseau. Cela informera l'utilisateur des différents états disponibles et le rassurera sur le fait que sa tâche ou son action a été stockée. L'avantage supplémentaire est que l'utilisateur se sent plus à l'aise avec votre application.
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 trop abordables. Pour gagner la confiance des utilisateurs, vous devez faire preuve de transparence et de fragilité dans l'utilisation des données. Réfléchissez à 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 poser la question aux 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. Donc, si la connexion réseau est lente, fournissez de petits éléments. Offrir la possibilité de choisir des assets de haute ou de basse 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, télécharger pour une utilisation ultérieure revient à hors ligne des données.
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, car ils disposent d'un espace de stockage, d'une mémoire et d'une puissance de traitement limités, ainsi que de petits écrans et d'un écran tactile de qualité 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.
- Utilisez 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.