Mise à jour de la page: "complet", "notification" ou "remplacement"
Quelle est la meilleure expérience utilisateur avec les pages de mise à jour automatique - par exemple, une liste de chansons. Actuellement, je pense à trois bonnes solutions possibles:
- Mise à jour "complète": lorsque le nouveau contenu apparaît en haut, comme sur le flux Vk.com;
- Mise à jour "Notification": lorsque l'utilisateur doit cliquer sur une notification spéciale pour charger de nouveaux éléments, comme sur Twitter;
- Mise à jour "Remplacement": lorsqu'il y a un nombre fixe d'articles et que de nouveaux éléments remplacent les anciens, comme sur les questions en temps réel de StackExchange.
Quels sont les avantages et les inconvénients de ces méthodes? Existe-t-il des idées d'expérience utilisateur utiles pour mettre à jour constamment et en temps réel le contenu?
Ne pas actualiser sans interaction avec l'utilisateur
Section 6.7. des W3C's Web Content Accessibility Guidelines 1. (publié le 5 mai 1999 déjà, pensez-vous) déclare:
Assurez le contrôle de l'utilisateur des modifications de contenu sensibles au facteur temps.
Assurez-vous que le déplacement, le clignotement, le défilement ou la mise à jour automatique d'objets ou de pages peuvent être interrompus ou arrêtés.
À l'époque, cela signifiait principalement ne pas utiliser de méta-balises pour actualiser automatiquement la page. Le raisonnement derrière cela est évident: vous ne pouvez pas savoir ce qu'un utilisateur fait à un moment donné, donc actualiser la page (ou une partie de celle-ci) à un moment arbitraire est perturbateur et désorientant.
Un autre aspect concernant la convivialité qui est également valable depuis ces jours est que les approches peu orthodoxes de rafraîchissement peuvent potentiellement casser l'historique du navigateur et la fonctionnalité du bouton de retour. En implémentant tout type de rafraîchissement, vous devez vous assurer que vous gérez les événements d'historique de manière appropriée (ce que vous pouvez faire via les implémentations d'historique html5 et les polyfills respectifs).
Charger des vues partielles si possible
Du point de vue de l'expérience utilisateur, le chargement des bits d'une page semble être préféré par les utilisateurs , car le délai légèrement inférieur dans les temps de chargement est perçu comme ayant impact moins négatif. ( Il y a un blog sur le blog de recherche Google avec des points intéressants et des données, voir le pdf lié dans l'article.)
Compte tenu de ces deux considérations vraiment la meilleure méthode semble être un rafraîchissement après interaction de l'utilisateur , ou "Notification update", comme vous le dites. De plus, la position de chargement des éléments (avant les éléments existants ou après les éléments existants) dépend de la direction générale de tri de votre contenu.
Quelques points à garder à l'esprit avec cette approche:
- permet à l'utilisateur de suivre facilement où de nouveaux éléments sont insérés et comment le contenu visible actuel est réorganisé (par exemple, la position de défilement de la page sur Twitter "saute" parfois lors du chargement de nouveaux éléments, ce qui perturbe l'expérience de lecture)
- montrer quoi ou combien d'éléments ont été chargés (inclure un décompte ou de nouveaux éléments, ou mettre en évidence visuellement ce qui a été chargé, au moins temporairement - par exemple jusqu'au prochain chargement; cet article sur le défilement infini a quelques bonnes considérations)
- à mon avis, l'utilisation du bouton de retour du navigateur devrait rétablir la vue avant la mise à jour, de sorte que si quelqu'un "met à jour" accidentellement et se sème la confusion, il puisse toujours se retirer pour revenir en arrière - il y a cependant une situation où cela pourrait ne pas être conseillé et vous pourrait ne pas vouloir inonder l'histoire avec des événements de "mise à jour" sans signification - cela dépend de vos données et de la fréquence de mise à jour, je dirais
Personnellement, j'aime avoir le contrôle des choses et je déteste plus ou moins tout ce qui se passe en dehors de mon contrôle, comme une actualisation de page ou de nouvelles listes d'articles. Au moins, en tant qu'utilisateur, j'ai besoin d'avoir l'impression que je contrôle.
En parlant à mon équipe, ils sont du même avis que moi. Ainsi, la mise en œuvre de la notification SE d'une nouvelle activité et de la nouvelle notification Twitters de Twitters est en passe de devenir une convention.
Il y a plusieurs facteurs à considérer. Google Actualités se met automatiquement à jour (je ne sais pas quelle méthode) et cela ne me dérange pas. Si Twitter se mettait à jour automatiquement, ce serait très intrusif si quelque chose défile pendant que j'essaie de le lire. Pire encore, quelque chose bougerait lorsque j'interagirais (cliquer, faire glisser, taper) avec.
La notification et la nécessité d'un clic est le moyen le plus sûr en ce qu'elle n'assure aucun mouvement inattendu. Vous pouvez toujours commencer par le moyen sûr et si vous recevez des commentaires écrasants sur le fait que c'est en quelque sorte lourd, vous pouvez essayer une méthode plus automatisée.
Personnellement, je préfère la mise à jour des notifications , comme sur Twitter, je pense que ce n'est pas intrusif, et j'aime décider si je mettrai à jour le contenu et quand je le ferai.
Facebook fait parfois une mise à jour complète (comme @ m0nhawk l'a défini) lorsque vous faites défiler vers le bas puis faites défiler vers le haut; quand il le fait, cela semble un peu intrusif, mais c'est toujours OK.
Je devrais ajouter à la liste une mise à jour complète inutile et ennuyeuse : (il y a exemple , si vous voyez un clic ajouter sur [X] Cerrar este anuncio) où la page s'actualise de temps en temps, désorientant l'utilisateur. Le lien d'exemple est un site d'actualités vénézuélien populaire, qui rafraîchit la page toutes les 15 minutes. Je dois le lire rapidement afin d'éviter le rafraîchissement, qui parfois ne charge pas de nouveau contenu, mais le même que j'avais lu.
imao, l'approche Twitter va bien.
mais que diriez-vous d'une "nouvelle" approche hybride?
Ça peut être comme ça:
Inclure le fait que si l'utilisateur fait défiler vers le haut/bas la liste/messages ou non.
Si l'utilisateur est que actif, NE chargez PAS automatiquement; n'affiche que le nombre de nouvelles mises à jour en haut de la page (mais en faisant défiler la page) afin que l'utilisateur reste informé mais ne se laisse pas distraire.
Si l'utilisateur N'EST PAS que actif, avant d'atteindre un certain limite nombre de nouvelles publications/mises à jour, il ferait notification uniquement approche Twitter. Quand il atteindra cette limite, chargez comme 10% de nouveaux articles; dans le style de Twitter. Mais, pour l'amour de Dieu, ne rafraîchissez pas entièrement la page. De plus, le chargement d'une énorme masse de nouveaux articles est certainement dérangeant.
Dans cette approche, vous devez trouver le "fung-shui" exact entre le nombre limite et le nouveau pourcentage de chargement ainsi que l'optimisation grâce aux commentaires des utilisateurs.