web-dev-qa-db-fra.com

Comment indiquer qu'un élément est "nouveau" dans une liste

Je me demandais si vous aviez une idée intelligente de la façon de montrer qu'un élément dans une liste est nouvea.

Dans mon cas, j'affiche une liste de documents et je veux que l'utilisateur voie ceux qui sont nouveaux depuis leur dernière visite sur cette page.

Je peux penser à 2 façons:

  • En ajoutant une "nouvelle" étiquette ou un nouveau badge (mais je veux vraiment éviter ça)
  • En mettant le texte en gras et en arrière-plan plus clair que pour les autres documents, il se démarque. Par exemple, c'est ce que fait Gmail pour afficher les nouveaux e-mails depuis la dernière fois.
  • En choisissant une couleur d'arrière-plan différente pour ces éléments. Dans mon cas, nous sommes vraiment limités avec les couleurs ...

Pouvez-vous penser à une autre façon? Avez-vous des exemples à montrer?

Dans mon cas, les nouveaux éléments seront toujours en haut de la liste.

Merci beaucoup

26
Raphaëlle M

Je vous suggère de montrer la "date ajoutée" comme attribut supplémentaire (colonne) aux documents et de colorer la date des nouvelles entrées:

enter image description here

Alternativement, vous pouvez définir le texte de la date en gras.

24
Simon

Comme cela arrive avec l'interface Gmail, la "nouveauté" des e-mails non lus est différenciée par une "nouvelle" balise momentanée qui se cache après quelques secondes. C'est ainsi que gmail indique les e-mails non lus d'aujourd'hui, à l'exception des e-mails non lus d'hier. Cependant, cela ne s'applique pas à votre cas.

La solution pour moi est un simple horodatage, visible dans chaque ligne, par exemple "il y a 2 heures". Les variations de couleur d'arrière-plan peuvent aider, mais ce ne sont pas les options les plus accessibles.

Comme vous placez de toute façon les plus récents messages en haut, l'horodatage aiderait à différencier la nouveauté de l'élément.

Une simple ligne horizontale sous le dernier "nouvel" élément pourrait également aider à différencier visuellement le nouveau de l'ancien. Dans votre cas, je suppose que l'utilisateur n'a pas besoin d'interagir avec les éléments, et la "nouveauté" disparaîtra une fois la page rafraîchie.

6
Adnan Khan

"Si vous voulez du sexe, dites-le"

A caricature of a couple in bed, with the women telling the man "If you want sex, just ask - there is no need to preface everything with 'in the light of recent events'"

Ou en d'autres termes - transmettre l'information de la manière la plus claire, la plus directe et la plus concise (plutôt que d'utiliser la sémantique du nième degré).

Les caractéristiques visuelles constitueront une sémantique du nième degré.

Vous avez déclaré que les nouveaux documents sont toujours en tête de liste. Si de nouveaux documents présentent effectivement un réel intérêt pour les utilisateurs, il suffit de leur en donner:

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

4
Izhaki

J'adore cette façon: Transformez l'arrière-plan de l'élément en jaune clair et fondez-le à la couleur d'arrière-plan par défaut après quelques secondes.

Highlight new item animation]()![On add item, the new item in the list gives a highlight for some time

2
Gabriel Anderson

Je suis contre l'utilisation de "nouveau", qui n'ajoute pas suffisamment de valeur à un élément mis à jour dans une liste qui a souvent ajouté des éléments. L'utilisation d'horodatages comme: "1h", "2d" va devenir une norme, afin que les gens puissent le reconnaître, ils ont la même expérience dans leur application de réseaux sociaux comme Facebook, Twitter et Gmail, vous pouvez également voir ce formulaire de représentation dans Android et iOS. Donc, en utilisant cette fonctionnalité à côté d'un titre de l'élément de liste, nous pouvons permettre aux utilisateurs de comprendre rapidement que c'est nouveau et aussi plus récent que l'autre élément. Donc beaucoup d'informations précieuses avec seulement 2 caractères: "1s" (il y a 1 seconde)

2
aliesifar

Vous pouvez utiliser une animation d'arrière-plan fanée (je pense que Wordpress l'utilise dans le panneau d'administration).

Cela fonctionnerait comme suit:

  1. L'utilisateur atterrit sur la page la page
  2. Les nouveaux éléments de la liste sont surlignés par une couleur d'arrière-plan (et peut-être même l'étiquette nouvea)
  3. Sur une période de 3 secondes (ou moins), la surbrillance et la nouvelle étiquette s'estompent à la couleur d'arrière-plan des autres éléments (probablement blancs) pour ne plus jamais être revus

L'utilisateur peut alors interagir avec la liste, tous les éléments étant visuellement égaux tout en étant informés des nouveautés.

Étant donné que cela dépend fortement de la réussite de la mémoire à court terme, le nombre d'éléments de la liste, le nombre de nouveaux éléments ajoutés et l'importance pour l'utilisateur de se rappeler quels éléments sont nouveaux dépendent du nombre d'éléments.

1
user11449

Il peut y avoir un problème avec la définition de nouvea pour l'utilisateur.

Les utilisateurs comprennent généralement une date/heure de publication et un sceau de fraîcheur.

Vous pouvez définir un nouvea qui est différent de cela, mais vous ne pouvez pas vous attendre à ce que vos utilisateurs le voient de la même manière, et cela peut être un problème pour les propriétaires de produits si ce n'est pas ce qu'ils veulent nouvea signifie.

Si vous compliquez trop cela, vous risquez de les confondre. J'en ai entendu parler comme acheter du lait.

  • At-il été ouvert?
  • Quelle est la date d'expiration?

Sauf lorsque le quelque chose n'expire pas, utilisez la date la plus pertinente, quand vous l'avez reçu ou quand il a été expédié.

J'aime l'idée du codage couleur pour les choses qui sont arrivées aujourd'hui, ou remplacer la partie date par Today lorsque la date pertinente est aujourd'hui.

Pour ce sceau de fraîcheur, j'irais avec ce à quoi les gens sont habitués. Recherchez Outlook, la messagerie iphone, gmail ou la boîte de réception pour vous inspirer. Vous voulez être intuitif, et être intuitif correspond généralement à se conformer aux attentes des principaux acteurs.

1
Andrew Hoffman

En ajoutant une "nouvelle" étiquette ou un nouveau badge (mais je veux vraiment éviter ça)

Eh bien, vous pouvez ajouter une "ancienne" étiquette ou un badge et l'appliquer à tous les autres documents.

Sérieusement, si vous souhaitez tout d'abord afficher les documents les plus récents, vous pouvez simplement utiliser un séparateur vertical avec un "documents plus anciens" une étiquette. Ou un simple séparateur vertical sans étiquette, je suis sûr que 99% des utilisateurs comprendront ce que cela signifie après seulement quelques utilisations du site.

0
Atsby

Cela dépend de l'application.

Voici une liste générale des techniques qui peuvent être utilisées, mélangées ou pas du tout appliquées pour indiquer à l'utilisateur que le contenu est nouveau:

  1. Appliquer le type en gras
  2. Diminuer ou augmenter la taille de la police
  3. Ajustez, augmentez ou diminuez l'espacement entre les nouveaux contenus
  4. Ajouter ou ajouter une "nouvelle" étiquette au nouveau contenu
  5. Ajouter ou pré-ajouter un message, avec le nombre de nouveaux éléments par liste de contenu
  6. Formater les horodatages de manière relative et conviviale à l'heure actuelle de l'utilisateur

La première question que vous devez vous poser est de savoir si vous devez inclure les "nouveaux" éléments dans votre interface utilisateur en premier lieu. Vos utilisateurs ont-ils avantage à connaître le nouveau contenu qui a été récemment ajouté? Si oui, dans quel contexte? La façon dont les utilisateurs interagissent avec le nouveau contenu varie pour chaque application. Les utilisateurs varient également considérablement dans leur perception du contenu modifié; certains utilisateurs peuvent bien interpréter le texte en gras comme "contenu modifié" ou "contenu modifié", tandis que d'autres peuvent interpréter ce texte comme du contenu qui n'a pas encore été enregistré; de plus, certains utilisateurs peuvent devenir confus ou troublés par les changements entre les éléments de la liste.

Si, après des recherches sur l'utilisabilité, vous déterminez que l'inclusion de nouveaux éléments aide effectivement l'utilisateur, déterminez le flux utilisateur spécifique. Essayez d'isoler quelques histoires d'utilisateurs. En fin de compte, rien ne peut remplacer la recherche d'utilisateurs et toute combinaison des techniques ci-dessus peut s'avérer la plus avantageuse pour vos utilisateurs.

Regardez le tableau suivant, qui utilise la méthode 6, et demandez-vous si vous pouvez trouver immédiatement le contenu le plus récent:

relative timestamps

Parfois, le simple fait d'indiquer la date de modification d'un document suffit pour transmettre sa "nouveauté". Mais en fin de compte, la transmission des enregistrements les plus récents dépendra de l'application.

0
user1429980