Instructions pour choisir un bouton sur un lien dans des formulaires Web

Question

Il semble que les boutons et les liens soient interchangeables de nos jours. Du point de vue de l'expérience utilisateur, existe-t-il des lignes directrices pour choisir entre les deux? Est-ce même important?

En règle générale, je dirais que la navigation pure doit toujours être exprimée avec un lien et qu'une action doit être exprimée avec un bouton. Cependant, de nombreux exemples et situations divergent de ce fait, tels que la page Adresses d'expédition de Google Checkout . Enregistrer effectue une action et utilise un bouton. Modifier est un lien qui dirige l'utilisateur vers une nouvelle page. Les deux ont du sens. Cependant, delete effectue une action avec un lien.

Alors, quand et comment choisissons-nous des boutons ou des liens?

Exemples de scénarios:

Une page avec une grille d'utilisateurs:

• Une fonctionnalité ajouter un utilisateur vous permettant d'accéder à une nouvelle page. Lien, car il navigue.
• Une fonctionnalité réinitialiser le mot de passe qui reste sur la même page. Bouton, parce que c'est une action.
• Une fonctionnalité d'exportation vers csv qui ouvre une boîte de téléchargement mais reste sur la même page. Je ne sais pas.
• Un pager au bas de la grille qui utilise AJAX pour actualiser la grille. Liens, en raison de la priorité existante.

Un assistant avec "Suivant", "Retour", "Annuler" et " Terminer " Caractéristiques. Alors que Next et Back devraient probablement être des liens, la priorité dit qu'ils devraient tous être des boutons.

Answer 1

Les bonnes ressources sont: Nielsen (duh) et cette discussion

Auparavant, les principaux boutons indiquaient que les boutons concernaient des objets ayant des effets (par exemple, "Supprimer"), tandis que les liens concernaient des actions affectant la navigation. Ces jours-ci, c'est un peu flou, mais c'est une bonne idée de dire qu'une action non récupérable, comme la suppression d'un enregistrement, devrait être un bouton, quoi qu'il arrive.

En général, il est bien pire de se tromper en utilisant un lien au lieu d'un bouton, car l'utilisateur ne s'attend pas à ce que l'action sur les effets secondaires se produise.

Je suis d’accord avec vos 5 exemples, bien que Download CSV puisse être utilisé en toute sécurité et dépend principalement de l’apparence du reste de l’UI (par exemple, s’il fait partie d’un ensemble d’actions telles que "Télécharger" et "|"; " Options "|" "Signet", et les deux autres sont des liens, alors le vôtre devrait également être un lien.

Answer 2

Je pense que la décision dépend de la manière dont vous souhaitez que la page fonctionne. Par exemple, si une partie de la navigation implique l'utilisation des résultats du formulaire, vous souhaiterez utiliser un bouton.

Ainsi, si l'option Ajouter un utilisateur possède une zone de sélection sur laquelle le type d'utilisateur est ajouté, car cela peut déterminer le formulaire d'ajout d'utilisateur à utiliser, puis un bouton.

Pour réinitialiser le mot de passe, comme il reste sur la même page, un bouton pourrait alors avoir un sens.

J'ai tendance à faire ensuite, de retour, etc. sous forme de liens, car je peux avoir des mots ou une image, mais j'aime bien la main qui apparaît pour les liens.

Exporter au format csv devrait être un bouton, car vous n’allez nulle part, vous ne faites que télécharger.

Cela peut fonctionner, mais ce qui est important, c'est non seulement d'être cohérent, mais aussi de voir ce que font des applications similaires, pour voir si vous pouvez essayer de respecter certaines normes de l'industrie.

Comme je l’ai mentionné plus tôt, j’ai parfois envie que la main s’affiche, car il n’est peut-être pas évident que quelque chose soit cliquable, mais je ne veux pas que le bouton apparaisse.

Ainsi, si j’ai un mot qui peut mener à une action, il devrait être inséré dans le reste du texte, mais si vous passez le curseur de la souris sur l’affichage, il est possible d’indiquer que c’est cliquable, le lien fonctionne mieux.

Nous ne voulons pas toujours que les boutons ressemblent à des boutons. Les liens fonctionnent donc, mais cela nécessite une interface très cohérente.