Rendre l'icône du calendrier évidemment cliquable
Sur une page Web, un calendrier affiche uniquement le jour du mois en cours. Lorsque ce calendrier est cliqué, le calendrier du mois en cours apparaît. Comment puis-je rendre évident que le calendrier est cliquable?
Voici à quoi ressemble le calendrier quotidien:
Quelques indices standard:
- Hover state: Transformez l'icône du calendrier lorsque l'utilisateur la survole, peut-être que le calendrier affiche une grille représentant un mois au survol.
- Texte contextuel: Écrire Afficher le mois ou similaire comme un lien adjacent au calendrier.
- bouton Mimic: Ajoutez des bordures à l'icône qui la fait apparaître comme un bouton.
Vous ne montrez pas tout le contexte, nous ne pouvons donc pas voir comment l'icône que vous affichez s'inscrit dans le contexte de la page.
Cependant, cela vous aidera si vous faites de la "chose" un élément actionnable autonome - le plus souvent sous la forme d'un bouton (quel que soit le style qui convient à votre thème) et ajoutez également un appel à l'action (par exemple afficher le calendrier ) ou une étiquette ( Calendrier ).
Pour plus d'informations sur le sujet accessibilité , voir discussion Michaels sur le terme ici sur ux.se où, comme il le dit correctement, ce que nous percevons comme un élément cliquable tel qu'un bouton est basé sur notre expérience précédente avec les boutons. Les indices de position tels que l'icône centrée, le texte centré, les coins arrondis, les dégradés, etc. aident tous à fournir des moyens dans une situation parce que nous devenons habitués à les attendre - nous construire une attente à quoi ressemble un bouton dans nos esprits et créer et rechercher des motifs qui déclenchent la reconnaissance en tant que telle.
JonW a suggéré d'ajouter une touche de couleur, ce qui est une bonne idée:
Une autre option à considérer consiste à ajuster certains des éléments visuels pour renforcer la nature "Je suis cliquable" du graphique. Je suggérerais de faire de l'étiquette "Aujourd'hui" la même couleur que la couleur du lien principal que vous utilisez sur le site (ou peut-être d'utiliser cette couleur dans le dégradé d'arrière-plan). Le dégradé blanc sur gris actuel présente des problèmes de contraste et de lisibilité, vous pouvez donc y tuer deux oiseaux.
De plus, un ajout courant et efficace que nous avons utilisé auparavant est l'ajout d'un triangle en bas à droite de la page du jour du calendrier, indiquant que le calendrier est modifiable (soit perçu comme "retournable" ou comme un moyen d'obtenir un menu contextuel ).
Pour que l'utilisateur perçoive quelque chose comme un déclencheur d'une action (et donc cliquable), il doit être étiqueté avec un verbe.
Au lieu de calendrier vous pouvez essayer afficher le calendrier, ou relayer sur l'image et l'étiqueter comme ouvrir.
De plus, et c'est mon avis, l'icône (telle qu'affichée pour cette question) est trop réaliste. C'est distrayant. Les utilisateurs peuvent épuiser la charge cognitive allouée à cet élément particulier avant de se rendre compte qu'il s'agit d'un bouton.
OMI, il serait plus facile pour l'utilisateur harcelé de ne pas avoir les anneaux métalliques et la base noire. Juste la page du calendrier, peut-être avec la date d'aujourd'hui.
En ce qui concerne l'effet de survol, il est également très utile de s'assurer que le pointeur passe de la flèche par défaut à la main habituelle.
Si vous l'avez étiqueté avec seulement open alors la Parole devrait également réagir en vol stationnaire.
Pour l'utilisateur qui a peur, ajoutez une info-bulle indiquant ce qui se passerait s'il cliquait sur le bouton, en clair.
L'état de vol stationnaire ne fonctionnerait que si vous créez cette application/site Web pour une utilisation sur le bureau uniquement. La meilleure chose à faire est de changer la couleur du calendrier ou de souligner le nombre. Souligner le texte inciterait les utilisateurs à penser qu'ils peuvent interagir avec lui.
L'abordabilité de la cliquabilité est généralement indiquée aux utilisateurs de bureau par un changement d'état lorsque le pointeur de la souris survole quelque chose.
Si vous avez un bon artiste, vous pouvez faire animer l'image du calendrier en survolant (faites tourner les pages).
Si l'image elle-même ne change pas en survol, vous devez changer le curseur en un pointeur, au lieu de la flèche par défaut.
En CSS:.calendar-button {
cursor: pointer;
}
Un accent supplémentaire peut être nécessaire pour les utilisateurs mobiles, car il n'y a pas de curseur à modifier. Au lieu de cela, les boutons partagent souvent un style unificateur, tel qu'une forme commune ou une couleur d'arrière-plan pour indiquer aux utilisateurs quels éléments d'une page Web sont utilisables.
Si votre site Web est suffisamment complexe (webapp vraiment), vous voudrez peut-être envisager un rapide tutoriel modal * pour les nouveaux utilisateurs afin de mettre en évidence différentes fonctionnalités qu'ils ont peut-être manquées. Cela peut également être utilisé lorsque de nouvelles fonctionnalités sont ajoutées pour alerter les utilisateurs de la modification.
* Je ne parle pas d'une lightbox, elle n'a pas besoin de cacher le reste de la page, il peut s'agir d'une simple flèche avec du texte comme légende rapide