web-dev-qa-db-fra.com

Le curseur par défaut sur la souris sur un bouton n'est pas un pointeur manuel

Pourquoi le curseur par défaut est-il une flèche lorsque vous survolez un HTML <button>? J'ai toujours pensé que les flèches vous permettent de sélectionner des choses, mais les mains vous permettent d'exécuter une action. Étant donné que les boutons exécutent des actions, ne devrais-je pas remplacer le style par défaut pour être un pointeur manuel?

button cursor hand

button {
 cursor: pointer;
}
74
JoJo

Les boutons sont un contrôle d'interface utilisateur de logiciel de bureau traditionnel - un contexte où le pointeur manuel n'a jamais été utilisé avant l'avènement d'Internet.

Lorsque les pages Web ont commencé à utiliser le même contrôle, elles ont simplement conservé le bouton tel qu'il était dans un environnement de bureau.

43
franz976

Il s'agit de Affordance . Les boutons ont une grande accessibilité qui suggèrent visuellement comment ils peuvent être utilisés. Le pointeur de la main est utilisé lorsque l'abordance est plus faible pour fournir une indication sur la façon d'interagir avec cet élément.

Voici un extrait de Microsoft applications de bureau Windows> Conception> Lignes directrices> Interaction> Souris et pointeurs )

"On dit que les objets d'interface utilisateur (UI) bien conçus ont une accessibilité, qui sont les propriétés visuelles et comportementales d'un objet qui suggèrent comment il est utilisé.

Et:

Les liens texte et graphiques utilisent une main ou un pointeur de "sélection de lien" (une main avec l'index pointé). Capture d'écran d'une main avec l'index pointé) en raison de leur faible capacité financière. Bien que les liens puissent avoir d'autres indices visuels pour indiquer qu'ils sont des liens (tels que des soulignements et un placement spécial), l'affichage du pointeur de la main en survol est l'indication définitive d'un lien.

Pour éviter toute confusion, il est impératif de ne pas utiliser le pointeur manuel à d'autres fins. Par exemple, les boutons de commande ont déjà une forte capacité financière, donc ils ne ' t besoin d'un pointeur à main. Le pointeur de la main doit signifier "cette cible est un lien" et rien d'autre.

36
JonW

Les spécifications CSS 2.1 et CSS Basic UI indiquent clairement que le curseur du pointeur est spécifiquement pour les liens ('... un pointeur qui indique un lien'). L'un des auteurs de la suite de tests CSS 2.1 a écrit ne remarque suivante dans la liste de diffusion W3C:

Même lorsque vous passez le curseur sur une <img onclick = "... some function ...">, un bouton poussoir, un bouton radio, une case à cocher, le curseur sous Windows ne se transforme pas en pointeur mais reste une flèche.

Le curseur du pointeur doit indiquer un lien et pas aucun/tout cliquable objets. C'est parce que les auteurs Web abusent de la déclaration du curseur ou abusent de la déclaration du curseur qu'il y a une tendance à généraliser ou à supposer des choses (comme un curseur révélant la cliquabilité) que la spécification ne dit pas.

Que ce soit en utilisant cursor:pointer dans un autre contexte que pour les liens améliore la convivialité ou non, il viole toujours les normes CSS.

12
Ilya Streltsyn

Fait intéressant, le fait de survoler le bouton de soumission sur le formulaire de commentaire this change le curseur en main. Je dirais que "flèche = faire et main = aller" était probablement une convention à un moment donné, mais elle a été largement rejetée par a) l'ignorance et b) une meilleure conception. Rendez un bouton cliquable et le changement de curseur n'aura pas d'importance pour l'utilisateur final.

10
Lyndon

C'est aussi un peu la psychologie. Changer le curseur aussi une flèche au survol de la souris indique que l'utilisateur survole quelque chose qui peut être actionné, mais pas nécessairement une action qui les mènera ailleurs. C'est différent d'une icône de main au survol de la souris, qui sur le Web, indique qu'ils peuvent aller quelque part.

3
jameswanless

Les interfaces Web n'ont pas d'éléments standardisés comme tous les systèmes d'exploitation. Étant donné que les interfaces Web iCloud et OneDrive varient selon leurs normes de système d'exploitation de bureau.

Si vous considérez que iCloud et OneDrive ont tous deux leurs interfaces natives et Web, en natif, ils utilisent le curseur par défaut sur un bouton, tandis que sur le Web, ils utilisent le curseur manuel sur les boutons.

enter image description here

enter image description here

0
Pradeep

Un bouton est, d'une manière subtile, différent d'un lien. Alors qu'un lien remplace simplement la page en cours par une autre, un bouton - généralement - soumet une entrée utilisateur et, souvent, affecte quelque part les données stockées. Une distinction est donc raisonnable.

Cependant, comme je laisse généralement mes boutons stylisés comme des boutons, et les liens de la même manière, je stylise souvent le pointeur du bouton pour faire un "action" avec la main.

0
Bobby Jack