Pastilles

Alias : Chips, pill, filtres, étiquettes, tag, petits boutons, badges, attributs

Les chips affichent une information spécifique, telle qu'un tag ou une catégorie, et sont souvent utilisés pour filtrer, trier ou organiser des données.

J'ai l'impression qu'il faut distinguer les chips

sous forme d'hyperliens augmentés dans un contexte d'entrée de texte (ex. destinataires d'un message, énumération d'étiquettes, référence à un évènement, une personne, un ticket sur Google Docs et Atlassian)
sous forme de filtres, qui remplacent une case à cocher ou un bouton radio.

Avantages

Inconvénients

Gestion efficace des options importantes et dynamiques
Facilité d'utilisation pour les utilisateurs
Capacité à regrouper des informations en groupes ou en catégories
Possibilité de supprimer rapidement des options sélectionnées
Réduction de la quantité d'espace nécessaire pour afficher les informations
Les sacs de chips (groupe de filtres) sont intéressants lorsque le volume d’options est important et dynamique ce qui n’est pas le cas pour les 3 statuts de publication ou le type d’émission.
Par contre, les pastilles qui montrent le résultat d’un auto-complete (pour les étiquettes par exemple) ou des valeurs séparées dans un champ texte et qui sont facilement effaçables au clavier me semblent 10/10 appropriées et reconnaissables.

À priori, je déconseillerais les chips tels que présentés parce que :
Je pense que ces derniers posent un problème d'affordance, la prévisibilité de l'action et la relation entre les éléments étant réduites. On perd le langage familier des cases à cocher ou des boutons radios.
La taille du cliquable peut poser problème pour une personne ayant une motricité lui permettant peu de précision ou une personne en situation de stress.
Problèmes d'affordance et de prévisibilité pour certains utilisateurs
Taille du clicable qui peut poser problème pour les personnes ayant une motricité réduite
Perte de la familiarité des cases à cocher ou des boutons radios
Risque de surcharge visuelle et de confusion si les options sont trop nombreuses ou mal organisées
Nécessité de concevoir des mécanismes de gestion et de modification appropriés pour les étiquettes sélectionnées

Voici quelques éléments à prendre en compte pour la conception d'une interface chips :

Apparence visuelle : Les chips doivent être clairement identifiables et facilement distinguables les uns des autres. Les couleurs, la typographie et les icônes utilisées doivent être cohérentes avec le reste de l'interface utilisateur.
Interactivité : Les chips doivent être cliquables ou sélectionnables pour permettre à l'utilisateur d'interagir avec eux. Les effets visuels tels que les changements de couleur ou les animations peuvent aider à indiquer l'état de sélection des chips.
Positionnement : Les chips doivent être positionnés de manière logique et organisée pour faciliter la lecture et la compréhension des utilisateurs. Les espaces blancs et les séparateurs peuvent être utilisés pour séparer les chips en groupes et améliorer la lisibilité.
Gestion : Les chips doivent être faciles à ajouter, supprimer ou modifier. Les options de modification telles que l'édition de texte ou le changement de couleur doivent être facilement accessibles et intuitives.

Références

Annexe