Comment montrer à l'utilisateur que les objets de page sont automatiquement mis à jour
Je travaille sur un site d'enchères en ligne. Nous travaillons sur des fonctionnalités permettant de mettre à jour automatiquement le tableau de bord de l'utilisateur sans l'actualiser, afin qu'un utilisateur puisse voir la mise à jour des enchères en temps réel. Le prix de l'enchère et l'heure sont mis à jour, ainsi que le badge lorsque l'utilisateur surenchérit ou a gagné l'article
Nous avons trouvé une idée pour mettre subtilement en surbrillance la vignette lorsqu'une nouvelle enchère arrive. Cependant, notre utilisateur ne se rendra pas compte qu'elle se met à jour à moins qu'il se trouve qu'il y ait une enchère peu de temps après son arrivée sur la page. Ils peuvent également voir le point culminant, et aucune autre offre ne parvient pendant un certain temps.
Je cherche des idées sur la bonne direction:
Devrions-nous simplement mettre une notification unique pour informer l'utilisateur qu'il n'a pas à actualiser?
Ou devrions-nous ajouter un rappel constant sous la forme d'un gif de chargement pour indiquer qu'il communique toujours?
Faut-il simplement laisser faire et laisser l'utilisateur découvrir qu'il n'a pas besoin de rafraîchir la page?
Mise à jour
A pris vos conseils. Vous pouvez voir le résultat dans le gif: 
Une rétroaction appropriée est l'une des parties les plus importantes de la création d'une bonne UX intuitive. Le laisser ne fournirait que très peu de commentaires et pourrait créer de la confusion parmi vos utilisateurs. D'après mon expérience dans les tests UX, la majorité des utilisateurs ne conservent pas les informations présentées sur de nombreuses notifications "ponctuelles", il est donc probable que ce ne sera pas l'option la plus réussie si elle est utilisée seule.
Un gif de chargement pourrait être une solution décente, mais vous devez faire attention à ce que le design ne soit pas accidentellement confondu avec une indication que la page ne se charge pas assez rapidement. Les gens associent souvent les informations en temps réel à des mouvements continus et continus de quelque sorte. Certains exemples pourraient être que le chronomètre compte réellement les secondes jusqu'à la clôture de l'enchère, ou qu'un flux en direct de nouvelles enchères apparaît dans le coin de l'écran (excessif je sais, mais cet exemple est juste pour aider à l'élaboration), ou même quelque chose d'aussi simple qu'un petit cercle rouge et vert qui tourne quand une mise à jour est sur le point de se produire.
Dans l'ensemble, je suggère une combinaison de la notification unique et d'un gif de chargement soigneusement conçu (et bien testé) en tant qu'indicateur de rafraîchissement ou en temps réel. Il serait préférable de souligner ce que l'indicateur est dans la notification elle-même, à moins que ce soit quelque chose de complètement intuitif (comme un compte à rebours d'horloge) auquel cas le signaler n'est pas entièrement nécessaire.
Joli design :)
En ce qui concerne la façon dont vous pouvez afficher le contenu, je recommanderais une combinaison des deux en utilisant une animation de chargement pour informer les utilisateurs que la nouvelle offre est en cours de récupération. Cela pourrait donc ressembler à ceci
Tirer une nouvelle enchère du serveur
Cela informe l'utilisateur qu'un chargement est en cours.
Une fois que la dernière enchère a été chargée, vous pouvez changer le message en "dernière mise à jour il y a 5 secondes" afin que les utilisateurs soient conscients du fait que le contenu est tiré en permanence et qu'ils n'ont pas à actualiser le page.
Voici une approximation approximative de ce que je veux dire
Dans le cas des enchères, l'historique est pertinent. J'ajouterais un div ticker sur la page. Initialement, le ticker est caché. Lorsqu'une nouvelle offre arrive, le ticker apparaît un peu avec un message "De nouvelles offres sont arrivées". L'utilisateur peut agrandir le ticker pour montrer exactement quel était le changement d'enchère ("+ 105 $ sur les couteaux Wuesthof"). Au fur et à mesure que de nouvelles enchères arrivent, le ticker les pousse vers le bas dans la pile (donc le plus récent est toujours en haut du ticker). Horodatage de chaque changement d'enchère.
Vous pouvez également envisager de placer un graphique sparkline sous chaque élément et afficher les modifications depuis que l'utilisateur a actualisé la page dans une couleur différente. De cette façon, en un coup d'œil, l'utilisateur peut voir la tendance de l'enchère et celles qui ont été mises à jour.
Ouais, mettez également en évidence les éléments qui ont été mis à jour avec une couleur subtile.
Est-ce que cela va se mettre à jour à intervalles réguliers (par exemple 10 secondes) ou est-ce que ce sera juste un flux ouvert?
S'il se met à jour à des intervalles spécifiés, un indicateur de progression qui vous notifiera quand la prochaine mise à jour aura lieu pourrait être bon.
Sinon, j'aime personnellement une bascule au-dessus du contenu de mise à jour qui aura une mise à jour en direct par défaut et vous permettra de le désactiver. Cela permet à la fois la préférence de l'utilisateur et informe l'utilisateur du fait que la mise à jour en direct se produit.
J'aime votre idée de mettre en évidence les éléments individuels qui ont été mis à jour.