web-dev-qa-db-fra.com

États des icônes de bouton

J'essaie actuellement de déterminer comment les boutons avec seulement des icônes comme espaces réservés devraient être représentés dans tout notre produit.

Actuellement, chaque bouton est affiché comme la représentation à droite dans cette image.

enter image description here

Je suis curieux de savoir s'ils ne devraient pas être colorés ou avoir un état de vol stationnaire actif comme un bouton, et plus comme le côté gauche où ils sont gris et ont ensuite un état de vol stationnaire légèrement plus sombre?

Je ne sais pas quel est le meilleur cas d'utilisation pour cela. J'essaie également de m'en tenir à la conception des matériaux.

1
Bryce Snyder

Si je comprends bien leurs spécifications pour les basculements d'icônes:

Toggles Material Design

1
Keno

Un bon bouton offre une facilité d'utilisation en présentant un style visuel différent pour chaque état dans lequel se trouve le bouton. Certains peuvent ne pas s'appliquer complètement selon le support (par exemple, le survol n'est pas vraiment un état sur un appareil à écran tactile).

États:

  1. Default
  2. Focalisé
  3. Plané
  4. Actif

Bien que 2,3,4 puissent tous être ignorés techniquement, (le bouton fonctionne toujours), l'expérience des utilisateurs n'est pas aussi bonne.

L'état de focus permet à un utilisateur de voir quel élément sur l'écran a le focus "où suis-je?" et laissez l'utilisateur appuyer sur espace/entrée pour l'invoquer.

L'état de survol aide à la découvrabilité en montrant quels éléments sont actionnables, et informons l'utilisateur qu'ils sont "dans le hotspot".

Enfin, l'état actif permet à l'utilisateur de savoir que son tap/touch/click a réussi et que le système a enregistré l'entrée. Si vous avez déjà utilisé un système qui n'a pas cet état, cela peut être ennuyeux si la réponse est lente ... vous vous demandez si j'ai vraiment cliqué sur ça? Et finissez par cliquer dessus encore et encore.

TL; DR dans la mesure du possible, assurez-vous que vos boutons rendent quelque chose pour tous les états.

Remarque: De plus, dans certains cas, il existe un mode supplémentaire de "désactivé".

2
scunliffe