Quelles sont les différences entre les boutons et les liens?
Quelles sont les différences entre les boutons et les liens?
Règle générale: un lien vous amène à un autre endroit, un bouton fait quelque chose.
Cela dit, les choses peuvent être flexibles à cet égard. Les liens sont parfois considérés comme des boutons de faible priorité et les boutons vous mènent presque toujours à un autre endroit.
[edit 2013] Les choses ont un peu changé depuis que j'ai écrit cette réponse. J'utilise maintenant de gros boutons comme "appel à l'action" et j'évite d'en utiliser plus de deux sur n'importe quel écran. Ensuite, j'utilise de petits boutons ou liens en forme de balises comme options de faible priorité.
La signification différente des boutons et des liens n'est pas dans leur nature, mais dans son poids visuel et sa place dans la hiérarchie de l'écran/du design.
En général, les utilisateurs s'attendent à ce que les liens à lier et les boutons de commande à commander. C'est-à-dire que les liens naviguent, présentent du nouveau contenu sans modifier les objets de données sous-jacents ou leurs relations ou positions. Les boutons changent ces choses, effectuant la création, la suppression, l'association, la conversion, la duplication, etc. Une règle empirique simple est si la légende la plus laconique pour le contrôle est un nom (par exemple, Accueil, Produits, Plan du site), puis utilisez un lien. Si la légende est un verbe (par exemple, mettre à jour, soumettre, supprimer, acheter), utilisez un bouton.
Cependant, dans les applications de bureau pour clients lourds, les boutons peuvent naviguer, en particulier dans les applications plus anciennes qui ont vu le jour avant que le Web (et les liens) ne soient couramment utilisés. En outre, plus récemment, des liens ont été utilisés à la place des boutons de commande dans divers sites Web et même certains guides de style l'approuvent. En fait, des liens ont été utilisés à la place de presque tous les autres contrôles (par exemple, les boutons radio, les onglets, les cases à cocher).
Je crois que tout cela déroute les utilisateurs et nous devons vraiment utiliser des contrôles d'apparence distincte pour des fonctions distinctes. Les applications Web et les applications de bureau doivent distinguer clairement la navigation et les commandes en utilisant respectivement le lien et les boutons. La navigation est nettement distincte des commandes car:
Les utilisateurs ne doivent pas enregistrer après avoir navigué. L'enregistrement est souvent nécessaire après une commande.
Les utilisateurs reviennent facilement à la navigation en cliquant sur Retour ou en fermant la fenêtre. C’est toujours une action "sûre". Les commandes ne peuvent souvent pas être annulées dans une application Web. Si les commandes peuvent être annulées, c'est par le biais d'une fonction Annuler, qui implique une réponse utilisateur différente de Retour ou Fermer.
Les commandes fournissent des commentaires différents qui sont souvent plus subtils que la navigation. Cela apparaît généralement lorsque l'utilisateur reçoit un nouveau contenu. Les commandes peuvent montrer le changement dans le contenu, mais souvent aucun changement n'est apparent (par exemple, pour Copier ou Enregistrer). Les applications Web ont souvent recours à des pages de confirmation (qui ne comptent pas comme navigation dans mon livre).
Pour ces raisons, cela aide l'utilisateur à avoir des contrôles distincts pour la navigation et les commandes, et heureusement, les attentes des utilisateurs pour les boutons et les liens facilitent la tâche. Cependant, l'utilisation continue de liens pour les commandes (et de boutons pour la navigation) sape ces attentes, et nous allons bientôt perdre cette opportunité.
La navigation et les commandes qui nous distinguent graphiquement nous offrent de puissants moyens de communiquer avec nos utilisateurs. Par exemple, si Contactez-nous est un lien, il affiche une liste d'adresses et de numéros de téléphone (je l'appellerais "Contactez-nous" plutôt que les "Contacts" les plus laconiques, car "Contactez-nous" est une telle convention courante, les utilisateurs numérisent spécifiquement dans les menus). En revanche, si Contactez-nous est un bouton, il amène les utilisateurs à un formulaire où ils peuvent directement soumettre des questions ou des commentaires (la légende du bouton doit avoir des points de suspension pour indiquer que plus d'informations sont requises pour la commande).
Je suis d'accord qu'il existe un besoin de contrôles légers pour les actions secondaires, en particulier pour les applications Web typiques qui n'ont pas d'interface de sélection d'objet-action. Cependant, la solution consiste à développer une version allégée des contrôles appropriés, et non à recruter un autre contrôle avec des attentes utilisateur totalement différentes. De tels contrôles légers peuvent être techniquement des liens, mais ils devraient ressembler au contrôle qu'ils imitent. Par exemple, un "bouton" léger peut être une image liée d'un petit rectangle ombré avec une légende alignée au centre.
Il y a une zone grise dans la distinction navigation/commande que nous devons trier. Je recommande ce qui suit jusqu'à ce que la recherche appropriée puisse être effectuée:
Utilisez des liens pour:
Chargement d'une page de contenu
Chargement de contenu généré dynamiquement.
Chargement de contenu dans une partie d'une page si aucune autre option n'est tenable (par exemple, un onglet).
Navigation entre les pages d'un assistant (contrairement aux assistants de bureau traditionnels qui utilisent des boutons).
Utilisez les boutons de commande pour:
Actions qui modifient ou appliquent le contenu ou les objets de données sous-jacents.
Actions qui affectent la vue du contenu si aucune autre option n'est tenable.
Exécution des commandes d'une boîte de dialogue, y compris l'action Terminer d'un assistant.
L'annulation d'une boîte de dialogue, en supposant que l'annulation réinitialise les paramètres des boîtes de dialogue aux valeurs par défaut ou précédentes.
Utilisez un bouton de commande avec des points de suspension à la fin de la légende pour accéder à une boîte de dialogue.
Détails sanglants sur http://www.zuschlogin.com/?p=18 .
Les liens véhiculent une relation, tandis que les boutons mettent l'accent sur l'action.
Ce raisonnement est basé sur la prémisse que les boutons imitent réellement les boutons physiques , et la signification symbolique des liens découle du chaînage .
Si vous pensez à ce que fait un vrai bouton ou un déclencheur sur une machine, il est plus facile de voir quel type d'actions un bouton numérique peut utiliser. C'est à dire. on, off, fire, etc. Il en va de même pour penser aux hyperliens comme des fiches dans une bibliothèque - book abc on shelf a1 section b - ils sont utilisés pour identifier un chemin vers un élément.
Les deux sont interchangeables dans différents scénarios, mais la fonctionnalité implicite est légèrement différente.
Les liens sont du texte - si vous ne pouvez que cliquer sur le texte, c'est un lien.
Les boutons ont tendance à ressembler à des commandes physiques ou à des icônes (bien que beaucoup soient déguisés en liens) - si vous pouvez cliquer sur la zone autour du texte, c'est un bouton.
Les liens ont tendance à naviguer vers différentes pages, tandis que les boutons représentent généralement des actions, mais ces actions incluent souvent la navigation. Les liens ont tendance à fournir un impact visuel plus léger car ils sont basés sur du texte. Les boutons ont tendance à souligner une utilisation fonctionnelle. Par exemple, un gros bouton ENREGISTRER a plus d'impact qu'un lien "Enregistrer" en ligne.
Les boutons représentent le modèle mental des contrôles physiques, tandis que les liens sont une entité purement hypertexte sans analogue physique. Comme la conception Web a évolué, la distinction UX entre les boutons et les liens s'est estompée: de nombreux boutons sont conçus pour ressembler à du texte; Le texte de style CSS prend l'apparence des boutons.
Sémantiquement parlant, toute action qui modifie l'état du serveur doit être effectuée à l'aide d'une demande POST provenant d'un et donc utiliser un bouton, plutôt qu'un lien.
Cela ne veut pas dire que les deux ne peuvent pas être stylisés pour ressembler et se comporter de manière identique, mais le balisage devrait être différent.
Je suis d'accord avec ce qui précède et je suis contre l'utilisation d'hyperliens pour les commandes, en particulier dans les applications non Web (par exemple WinForms).
Dans les applications non Web, un lien hypertexte dit à l'utilisateur "ignorez-moi sauf si vous souhaitez naviguer vers des informations différentes" et un bouton dit "je vais changer quelque chose ou afficher une boîte de dialogue si vous cliquez sur moi".
Le problème survient lorsque les deux sont utilisés de manière interchangeable et qu'un nouvel utilisateur scanne le formulaire à la recherche d'une commande particulière. Après un certain temps, ils se rendent compte qu'ils doivent également regarder tous les liens hypertexte et il faut invariablement à l'utilisateur deux fois plus de temps pour trouver ce qu'il recherche car les métaphores de l'interface utilisateur ne sont pas cohérentes. Si les métaphores ne sont pas cohérentes, l'utilisateur perd la confiance et commence à détester le logiciel. Essayer d'utiliser un logiciel comme celui-ci pousse les utilisateurs vers le haut du mur (je pense que Hotmail a eu la commande "attach" comme un lien hypertexte pendant un certain temps et certainement pendant un certain temps, ils l'ont dans une zone de liste déroulante).
Les directives d'interaction de Microsoft Windows sont un peu floues sur la question:
- Consignes: boutons de commande , qui comprend une comparaison avec les liens
- Lignes directrices: Liens , qui comprend une comparaison avec les boutons de commande
Ils suggèrent que les liens sont acceptables pour les commandes secondaires. Le lien posté par Michael Zushlag ci-dessus fait un excellent point à ce sujet et le besoin de boutons légers .
Le problème que je vois avec les boutons légers pour les commandes secondaires est de savoir de quelles commandes il s'agit. Si vous pouvez trouver une logique cohérente derrière celles-ci (qui est évidente pour l'utilisateur) et que vous pouvez différencier facilement les commandes principales et secondaires, alors c'est la meilleure option.
Dans le bon vieux temps où vous pouviez facilement changer le 'lu/non lu' point dans le navigateur, qui montre les liens de lecture dans une couleur différente - l'avantage des liens serait que vous pourriez facilement voir où vous avait déjà été.
(Note - vous pouvez peut-être encore changer les périodes - mais j'ai depuis longtemps renoncé à essayer de trouver le contrôle qui fait ça ...)
Les liens existent depuis longtemps et ont une population plus élevée que les boutons sur le Web. Lorsqu'ils sont utilisés dans le contexte de la navigation dans le contenu, ils sont efficaces.
Les boutons sont beaucoup plus avantageux lorsque vous les utilisez dans les contextes où l'utilisateur fait une forme d'engagement ou d'investissement sur le site Web. (c.-à-d. sauvegarde, partage, abonnement, adhésion, etc.)
J'explique cela en détail dans l'article que j'ai écrit: le-lien-vs-bouton-débat
J'espère que cela clarifie la question de savoir quand utiliser les deux une fois pour toutes.
Une chose très importante à noter dans les différences entre les liens et les boutons est que les robots (à la fois pour les sites de recherche comme Google et pour de nombreux moteurs de recherche au niveau du site) n'iront pas vers la cible d'un bouton; ils ne suivent que des liens.
Au-delà de cela, Luna, Michael et Pete ont tous des points valables qui couvrent à peu près tout le reste auquel je pouvais penser.
La réponse de Michael Zuschlag est excellente, je précise seulement qu'un lien est différent d'une simple référence (une ancre).
Beaucoup de gens font une confusion entre les expériences/interactions des utilisateurs et le balisage HTML car ils ne voient pas la différence entre un lien et une ancre: - un lien a une direction (lien direct ou inverse) et peut être identifié avec une relation mais ne peut pas être utilisé par les utilisateurs avec leurs user-agents pour accéder à la référence hypertexte (attribut href en HTML) car ils ne peuvent pas être activés (sauf sur Opera avec la barre d'outils de navigation). - une ancre fait uniquement référence Il s'agit uniquement d'une référence à une autre ressource même si elle peut être activée (en un clic ou avec votre clavier) car les agents utilisateurs définissent ce comportement.
Et je pense que cela nous aide à comprendre les différences entre une ancre et un bouton: - utilisez un bouton lorsque vous appelez à l'action (comme Michael l'a dit avec "Mettre à jour, soumettre, supprimer, acheter" mais aussi "en savoir plus", "télécharger", etc.) - utilisez une ancre lorsque vous faites simplement référence à une autre ressource avec un texte d'ancre identifiant la ressource. Si vous demandez à votre utilisateur de le lire, cela signifie qu'il s'agit d'un "appel à l'action" et pas seulement d'une référence, alors implémentez-le avec un bouton.
S'il est vrai que les boutons et les liens sont utilisés de manière interchangeable sur le Web moderne, il existe une caractéristique fondamentale du navigateur qui les distingue:
Les utilisateurs peuvent ouvrir un lien dans une nouvelle fenêtre ou un nouvel onglet. A <button> ou <input type='button'> ne peux pas.
(Par exemple, essayez de cliquer avec le bouton droit sur le lien "ajouter un commentaire" et le bouton (Ajouter un commentaire) ci-dessous - seul le premier permet "Ouvrir le lien dans un nouvel onglet".)
Bien que <a> les liens peuvent être stylisés pour ressembler à des boutons, les utilisateurs s'attendent généralement à ce que la fonctionnalité d'ouverture dans l'onglet fonctionne sur des éléments qui ressemblent à des liens.
Mon expérience montre que souvent les liens sont reconnus plus facilement comme cliquables et donc mieux cliqués pour nous conduit parfois à des décisions d'utiliser des liens plutôt que des boutons. Mais je suis d'accord que cela ne devrait pas être fait au plus profond d'un processus où l'utilisateur déclenche une action. Je voudrais également ajouter que la différenciation verbe/nom peut être difficile dans d'autres langues que l'anglais.
La façon la plus simple de distinguer les deux est qu'un lien navigue vers l'utilisateur tandis qu'un bouton déclenche une action .
Pour vous donner une meilleure idée, voici quelques citations des directives de conception de Microsoft, Google et Apple.
Liens:
Les hyperliens dirigent l'utilisateur vers une autre partie de l'application, vers une autre application ou lancent un identificateur de ressource uniforme (URI) spécifique à l'aide d'une application de navigateur distincte - Microsoft Design Guidelines
Boutons:
Un bouton permet à l'utilisateur de déclencher une action immédiate - Microsoft Design Guidelines
Les boutons permettent aux utilisateurs de prendre des mesures et de faire des choix en un seul clic - Material Design Guidelines
Les boutons lancent des actions spécifiques à l'application, ont des arrière-plans personnalisables et peuvent inclure un titre ou une icône - Apple Design Guidelines
En parcourant les directives de conception, vous vous rendrez compte que l'utilisation des boutons est plus polyvalente et diffère selon la plate-forme (par exemple Android ou iOS) sous laquelle vous concevez.
En cas de doute, en particulier sur les types de boutons, je me pencherais sur les meilleures pratiques à l'heure actuelle et choisirais celle qui correspond le mieux à votre contexte.
Je viens d'un point de vue d'accessibilité et pour les utilisateurs non visuels ou malvoyants, il existe des méthodes distinctes pour sélectionner un lien par rapport à un bouton. Le problème se produit lorsqu'un utilisateur ne peut pas naviguer sur la page de la même vitesse et de la même manière qu'une personne visuelle, alors vous êtes poursuivi en justice pour discrimination au titre III. Si cela ressemble à un lien, ce devrait être un lien
S'il plisse comme un canard et ressemble à un canard, c'est donc un canard ...