Mettre à jour la liste lorsqu'un utilisateur affiche la liste sans le déranger
Nous avons une liste d'éléments avec lesquels l'utilisateur interagira fréquemment pendant les sessions. Chaque session durera une minute ou deux et pendant ce temps, ils changent l'état des éléments et les mettent à jour d'autres manières. En même temps, d'autres personnes pourraient mettre à jour la liste ailleurs.
Existe-t-il un bon moyen de montrer que nous mettons à jour la liste? Ou devrions-nous essayer de comprendre qu'ils utilisent la liste et éviter de la mettre à jour jusqu'à ce qu'ils ne le soient pas (détecter l'inactivité)?
Un anti-cas est lors de l'utilisation de Netflix sur Roku XR. Il apparaît quand il dort un peu (en veille avec l'économiseur d'écran) et je le réveille pour choisir quelque chose à regarder. Cela me donne environ 5 secondes pour faire défiler avant d'effacer tout, puis d'actualiser la file d'attente et d'autres listes.
Ces 5 secondes, c'est assez de temps pour choisir quelque chose rapidement, mais cela détruit juste l'emplacement que j'ai donc je dois le retrouver. Super ennuyeux, mais je comprends qu'il veut me donner les dernières informations.
L'utilisateur peut interagir avec le service via une souris/un clavier ainsi qu'un écran tactile.
Réflexions sur les stratégies pour cela?
Il y a quelques considérations différentes ici:
- Ajout de nouveaux éléments
- Suppression d'éléments précédemment disponibles
- Modifications apportées aux éléments existants
La nature exacte de votre application aura une grande influence sur la "bonne" approche (et si vous nous donnez plus d'informations sur le type d'application et ses utilisateurs, nous pouvons être plus précis) ... cependant ...
Ajout de nouveaux éléments
Le modèle de conception actuel semble être de mettre en surbrillance le nouvel élément .
Le plus souvent, cela se manifeste dans les applications sociales qui prennent en charge les mises à jour en temps réel. Par exemple, Facebook mettra en surbrillance les commentaires "juste ajoutés" lorsqu'ils apparaissent attachés à une histoire de flux d'actualités ou sur un mur - les commentaires qui sont nouveaux depuis le dernier chargement de la page ont une fine surbrillance bleue sur le côté gauche.
Google Docs met en évidence le nouveau conten lors de son ajout (avec un petit indicateur "ajouté par" sur le curseur):
De plus, si l'ajout est pertinent pour la tâche à accomplir, vous pouvez notifier aux utilisateurs un message de notification ou un "toast", ce que fait StackExchange lorsqu'une réponse est publiée dans un sujet auquel vous répondez actuellement:
Suppression d'éléments précédemment disponibles
Pour maintenir le contexte de l'utilisateur, il est très important de ne pas supprimer les choses déjà vues de la vue d'un utilisateur sans le lui faire savoir. Je recommanderais de supprimer ou de griser la ligne qui n'est plus pertinente, mais de la garder à l'écran jusqu'à ce que l'utilisateur actualise la page.
De plus, si cela est pertinent pour la tâche à accomplir (par exemple, si un utilisateur a sélectionné un élément qui n'est plus disponible), vous voudrez le lui faire savoir. Encore une fois, une notification peut bien fonctionner dans ce cas, comme Amazon montre quand le le prix d'un article dans votre panier a changé , ou un article dans votre panier n'est plus disponible:
Dans le cas de données tabulaires, il serait également judicieux d'avoir un lien sur la notification pour revenir à la ligne incriminée.
Modifications apportées aux éléments existants
Les modifications apportées aux éléments existants doivent être soigneusement pesées en fonction de leur importance pour l'utilisateur. Par exemple, si un tableau montre la quantité d'un article disponible et que cette quantité diminue de 1, vous ne voulez probablement pas en faire une grande production - à moins que ce changement n'affecte l'utilisateur (par exemple, ils avaient ajouté indiqué que ils voulaient 2 d'un article mais maintenant vous avez seulement 1 en stock).
En supposant, cependant, qu'un changement affectera l'utilisateur, vous voudrez probablement utiliser une combinaison des méthodes décrites ci-dessus pour mettre en évidence simultanément la nouvelle valeur, barrer l'ancienne valeur et informer l'utilisateur si le changement est pertinent pour la tâche à accomplir.
Bonne chance!
Twitter et Facebook ont une solution pour cela. Afficher un message au-dessus de la liste qui "il y a # nouveaux éléments" - ou, si cela va perturber l'ordre de la liste, quelque chose comme "il y a des changements à cette liste en attente - cliquez ici pour recharger ".
Ne rafraîchissez pas la liste entière, ajoutez simplement des modifications aux éléments existants ...
- Ajoutez de nouveaux éléments à la fin, coloriez-les dans une couleur différente (par exemple, vert pour frais -> nouveau).
- Transformez les éléments supprimés en gris et/ou rayés, ne les supprimez pas.
- Marquez les éléments mis à jour d'une manière ou d'une autre (par exemple, jaune ou gras).
Envisagez de laisser les utilisateurs décider s'ils souhaitent voir les mises à jour (sous la forme ci-dessus ou actualiser si cela n'est pas possible) en affichant une notification au-dessus et/ou en dessous de la liste (comme le fait stackexchange lorsqu'une autre réponse a été ajoutée à la question à laquelle vous répondez).
Je suis d'accord avec ce que Danny avait dit, optez pour une approche consistant à ajouter de nouveaux éléments à la liste au bas de la liste.Facebook le fait assez bien avec leurs amis, grâce au nouveau bouton de chargement
Cependant, le principal problème de cette approche est que les utilisateurs ne savent souvent pas combien il reste d'éléments et combien de temps ils devront attendre la fin de la liste. Je recommanderais une aide à la navigation qui donne des informations telles que (affichant 250 éléments sur 20) pour que les gens sachent jusqu'où ils doivent aller
Je combinerais les réponses de @Felixander Weber et @Danny Varod.
En d'autres termes:
Afficher une barre en haut de la liste des mises à jour (si vous souhaitez inclure le nombre d'éléments nouveaux, modifiés et supprimés)
Lorsque vous cliquez sur la barre, affichez les mises à jour. Mettez-les et/ou déplacez-les tous en haut de la liste. Gradez les éléments supprimés, mettez en surbrillance les nouveaux éléments (couleur de fond différente) et ajoutez un autre marqueur pour indiquer les éléments modifiés.
Lorsque vous affichez les mises à jour, changez la barre pour dire "ok, j'ai fini de réviser". Lorsque vous cliquez dessus, affichez toutes les mises à jour en tant qu'éléments normaux et remettez-les dans leur position "légitime" en ce qui concerne l'ordre de tri.
De cette façon, l'utilisateur a le contrôle, ne manquera pas les mises à jour qui peuvent être hors page (écran de visualisation) et peut facilement voir ce qui a été changé.