Icône d'ajout / suppression de favoris: indiquant l'état par rapport à l'action
Disons que nous avons une application mobile qui permet aux utilisateurs de rechercher l'artiste préféré et de les ajouter à leurs favoris. Lors de la recherche de nouveaux artistes, certains d'entre eux figurent probablement déjà dans la liste des favoris.
L'image ci-dessus a deux exemples.
- Les étoiles à gauche suggèrent l'état de l'artiste: est-il actuellement ajouté aux favoris ou non.
- Les x et + impliquent l'action ce qui se passera lorsque l'icône est tapée: l'artiste sera soit supprimé soit ajouté.
Si nous n'utilisons que des icônes sans texte, quel devrait être l'objectif principal de l'icône: état ou action? Serait-il également préférable d'avoir un design différent (afficher ou masquer les icônes) pour la liste des favoris (tout est déjà ajouté) et pour la liste de recherche (la plupart des éléments ne sont pas ajoutés aux favoris)?
Je dois dire que l'approche de l'État creux vs étoile d'or est suffisamment standard pour que je pense que ce serait votre meilleur pari. Non seulement il est assez courant pour devenir intuitif, mais il agit à la fois comme un état ET une action: les utilisateurs connaissent assez bien le "appuyez dessus pour l'ajouter à mes favoris - oh regardez, maintenant c'est de l'or, c'est DANS mes favoris". Il s'agit d'un ensemble agréable et concis de contrôle et d'informations tout en un - profitez-en!
Tout d'abord, un peu de conceptualisation: les états viennent des actions. Un endroit vide n'est rien, c'est le vide. Un endroit vide avec la possibilité d'effectuer des actions pourrait être absolument n'importe quoi.
Le concept ci-dessus est important car il vous aidera à choisir des chemins différents chaque fois qu'un problème comme celui-ci vous est présenté.
Maintenant, revenons à votre question spécifique, je pense qu'il manque des informations (oooh, le redoutable "contexte est tout"). Par exemple, nous ne savons pas si vos actions ajouteront/supprimeront un élément des favoris, ou s'il l'enregistrera/supprimera. Bien qu'il existe des similitudes, un favori est essentiellement un signet, un raccourci vers une entrée de base de données. Par conséquent, il pourrait agir de manière similaire à un élément enregistré dans des environnements cloud. Cependant, l'enregistrement signifie que l'utilisateur a réellement l'article, même sous forme numérique, ou même dans son propre segment du cloud.
Dans cet esprit, les icônes que vous proposez ne sont pas très claires. Les étoiles sont généralement utilisées pour les notes, donc elles ont un peu de friction. Peut-être que vous pouvez utiliser une icône en forme de cœur pour l'article favori. Cependant, et plus important encore, est l'ensemble d'icônes ajouter/supprimer. Les avoir à côté de l'icône fav a également une certaine friction, donc au lieu d'utiliser l'icône fav pour communiquer un état, vous pouvez l'utiliser comme déclencheur d'action et vous débarrasser des 2 autres icônes d'action. Par exemple, si vous utilisez le cœur, vous pouvez utiliser un cœur creux pour un élément sans aucune action effectuée (rappelez-vous le endroit vide ci-dessus?), Et coeur rempli pour l'élément ajouté. Ce seraient les États.
Ensuite, pour les actions, vous définissez un conditionnel au clic :
if emptyItem (click) --> filledItem
elseif filledItem (click) --> deletedItem
else continue
puis vous pouvez utiliser un cœur brisé pour l'élément supprimé pour ajouter une ambiance ludique. Veuillez noter que je ne dis pas "revenir au creux", mais pour le marquer comme supprimé afin que l'utilisateur sache qu'il a interagi avec l'élément et qu'il l'a supprimé. Alternativement, vous pouvez utiliser un menu avec ajouter supprimer comme éléments et être un campeur heureux.
Et tout cela étant dit: tilisez des étiquettes. Toujours. Il y a une raison pour laquelle les étiquettes sont de bonnes UX
Comme indiqué dans d'autres réponses, le style Empty Star/Filled Star (et l'étoile elle-même) est très courant, donc la reconnaissance est susceptible d'être élevée parmi les utilisateurs. Je n'ai pas de statistiques pertinentes pour étayer cela, mais je peux certainement dire de manière anecdotique que je l'ai beaucoup vu. Je pense que vous pouvez également voir comment les sites Web gèrent les boutons J'aime et N'aime pas, car ils remplissent une fonction similaire.
En l'absence de statistiques, nous pouvons voir comment les grandes sociétés gèrent ce problème pour obtenir des informations qui pourraient bénéficier de la recherche.
Microsoft a utilisé l'étoile pour représenter les favoris pour de nombreuses versions de son système d'exploitation, mais ce n'est pas si pertinent pour nous car il n'y a pas de véritable bouton pour favoriser comme je peux le dire dans Windows 7. Je peux confirmer qu'ils ont également évité cela problème dans Internet Explorer en utilisant l'étoile pour simplement basculer la barre des favoris, à partir de laquelle l'utilisateur peut ajouter ou supprimer la page de ses favoris.
En ce qui concerne mes outils de développement, après avoir examiné le jeu d'icônes de Visual Studio 2015 pour voir quelles icônes se rapportent aux favoris, ils ont à la fois une icône Ajouter aux favoris et des icônes avec des étoiles pleines et vides (ce ne sont pas des notes d'étoiles ; il y a un autre ensemble pour ceux qui ont aussi des demi-étoiles), donc il n'y a pas de réponse claire là-bas.
Pour référence, voici l'icône Ajouter aux favoris de Visual Studio: 
(Je pense que ce style de bouton est une concession acceptable pour ceux qui pourraient ne pas comprendre pourquoi une étoile est là dans la page, mais si cela est souhaitable pour vous, cela peut dépendre de votre public cible et de la disposition générale de l'application. )
Pour être honnête avec Apple, j'ai fait une recherche rapide de ce que fait OSX, et il semble (veuillez me corriger si je me trompe) qu'ils croient simplement à un volet sur le côté de l'explorateur de fichiers où vous faites glisser les dossiers couramment utilisés pour un accès rapide . Bien que cela ne soit pas vraiment pertinent à première vue, cela nous informe que vous pourriez peut-être avoir un toucher ou un toucher et maintenir le nom de l'artiste pour demander d'ajouter aux favoris, mais cela ne correspond pas vraiment à l'objectif d'actions visuellement évidentes que vous visez.
Pendant ce temps, Google opte pour des boutons d'état en tant qu'action pour les concepts à double état tels que les favoris. Les boutons J'aime/Je n'aime pas sur Youtube en sont un bon exemple (ils surlignent le bleu lorsqu'ils sont cochés et sont d'une couleur gris terne dans le cas contraire). Leur navigateur Chrome en est un autre. Il a une étoile vide sur le côté droit de la barre d'adresse, qui est remplie lorsque vous êtes sur une page que vous avez déjà favorisée. Celui de Nice ils fournissent une rétroaction visuelle et une étape d'édition après avoir touché l'étoile, pour permettre à l'utilisateur de spécifier le dossier dans lequel se trouve le favori, le titre, etc.
Ainsi:
Cela signifie qu'il est clair ce qui s'est passé lorsque l'utilisateur appuie sur le bouton, dans le cas où l'utilisateur est analphabète.
Dans le contexte mobile, cela pourrait être aussi simple que d'afficher une boîte de dialogue en bas de l'application pendant une courte période disant "Ajouté aux favoris!", Avant de disparaître.
Je n'ai pas d'image, mais l'application Youtube sur Android fait exactement ce comportement lorsque vous ajoutez une vidéo à une catégorie (comme Regarder plus tard ou bien Favoris (bien que l'ajout ne soit pas un appuyez sur un bouton)), ou aimez/n'aimez pas/ne ressemble pas à une vidéo. Une petite notification apparaît puis disparaît. Il en va de même pour Chrome pour Android (où l'icône des favoris se trouve dans le menu sandwich en haut à droite, également dans un état comme style d'action), en optant pour une brève notification au lieu d'une fenêtre avec des options comme sa version de bureau. Je crois que ce comportement est conforme avec les normes de conception matérielle de Google sur la reconnaissance (je le lierais, mais hélas, je suis limité à deux), qui stipule:
L'acquittement supprime l'incertitude concernant les opérations implicites que le système effectue. Il peut être associé à une option pour annuler l'action.
[Lorsqu'une action est exécutée] ... Un accusé de réception sous la forme d'un toast apparaît, puis s'estompe après quelques secondes.
Vous pourrez peut-être dire mon parti pris car je m'attarde sur cette dernière option depuis un certain temps, mais je pense que c'est raisonnable (et clair quant à ce qui s'est passé), en particulier parce qu'il est difficile à manquer, l'exécution accidentelle de l'opération ne le sera pas causer des dommages et le défaire est aussi simple que d'appuyer à nouveau sur le bouton.
Certes, ce n'est pas un substitut aux statistiques relatives à la reconnaissance des utilisateurs, mais nous pouvons au moins supposer que Google pense que cette approche est appropriée pour son public cible non négligeable.
Je pense que vous devriez être cohérent avec la majorité des interfaces web actuelles qui utilisent le paradigme d'état. Par exemple, les boutons favoris chrome chrome affichent l'état plutôt que de demander des actions aux utilisateurs.
Youtube utilise également le même paradigme:
Par conséquent, utilisez le paradigme d'état plutôt que l'action afin d'éviter toute violation de l'heuristique d'utilisation de cohérence cohérence .