• In progress

    • Pastilles

    Owned by VERONIQUE LECLERC
    Last updated: Oct 24, 2024 by VERONIQUE LECLERC
    3 min read

    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 :

    1. 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.

    2. 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.

    3. 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é.

    4. 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

    Catégories sur Mordu (à la manière de liens)
    Ajouter à mes favoris sur les résultats électoraux (à la manière d'un bouton)