Un bouton avec un lien: compréhensible ou déroutant?
Je travaille sur la conception d'une version à écran tactile d'une application Web. Puisqu'il s'agit d'un écran tactile, j'aimerais que tous les éléments cliquables soient assez grands et faciles à utiliser (c'est un simple kiosque, donc le multi-touch et le zoom ne fonctionneraient pas).
L'hyperlien standard est bien reconnaissable mais plutôt petit:
Le bouton pourrait être beaucoup plus gros:
Mais le problème est que généralement des boutons sont utilisés pour certaines actions et des liens pour la navigation. Et que je ne le pensais: et si je place un lien sur un bouton comme celui-ci:
Et si j'utilise un tel hybride pour la navigation, cela fonctionnerait-il? Est-ce un lien avec une grande zone cliquable autour ou est-ce juste quelque chose de déroutant et de désorientant? Qu'est-ce que tu penses?
À mon avis, vous devriez tilisez l'approche par bouton si le lien n'est pas placé dans le texte/phrase, paragraphe /. Cela dit - utilisez l'arrière-plan du bouton et la couleur du lien, mais sans souligner - ce type de mélange/texte souligné dans un bouton/est déroutant pour les utilisateurs expérimentés.
L'utilisateur final, cependant, fait rarement la différence entre le lien et le bouton.
Comme ce sont des écrans tactiles de style kiosque et que la zone tactile est assez grande, vous n'êtes pas limité à utiliser simplement du texte. Peut-être un gros bouton avec une icône appropriée?
(Excusez le design brut, je n'ai pas la possibilité de faire des images décentes ici).
Cette méthode montre clairement qu'il s'agit d'un bouton, et l'immobilier supplémentaire disponible peut être utilisé pour fournir plus d'informations à l'utilisateur afin qu'il sache ce que fait réellement le bouton.
D'après mon expérience, les gens ne se soucient pas vraiment de savoir si vous montrez des liens ou des boutons si cela ne les fait pas réfléchir. La plupart des annonces visuelles ont des boutons, par exemple, même si elles fonctionnent comme des liens.
Le défi est quand vous avez une page où vous devez utiliser les deux. Dans ce cas, vous devez avoir une hiérarchie claire entre le bouton d'action principal et les liens/boutons secondaires. Vous pouvez toujours y parvenir avec le dimensionnement, le style, le positionnement.
Et une autre chose: vous pouvez toujours agrandir la zone tactile plus que le texte. Cela maintient votre hiérarchie visuelle et offre également une bonne convivialité.
Je trouve un bouton avec du texte souligné assez déroutant. Peut-être que l'utilisation d'un bouton avec une flèche indiquant une navigation supplémentaire serait une meilleure idée.
Un texte très important sur le bouton serait également un facteur très important. Si le bouton indique "Accéder à Google", l'action serait assez évidente. S'il préfère lire "Recherche", l'utilisateur ne s'attendrait pas à la redirection vers une page Web.
Les `` liens de balise '' sur cette même page sont un excellent exemple de quelque chose qui est un lien (dans le balisage), qui se comporte comme un lien (affiche une autre page à la place de la page actuelle, sans autres effets secondaires), mais est très semblable à un bouton.
Je pense que, généralement, le contexte est parfaitement logique, par exemple, quelque chose qui ressemble même vaguement à un bouton dans un formulaire sera interprété comme un bouton; quelque chose qui ressemble vaguement à un lien en dehors d'un formulaire sera interprété comme un lien. Par conséquent, je serais toujours très prudent lors de l'inclusion d'un lien dans un formulaire.
Je pense qu'il est raisonnable d'indiquer la zone tactile/clic d'un lien, en particulier sur un appareil à écran tactile qui n'a pas d'équivalent: survoler. Donc, ajouter un arrière-plan subtil à un lien me semble raisonnable.
Gardez à l'esprit le support pour lequel vous concevez - le toucher, pas une souris. Avez-vous observé des personnes interagissant avec un kiosque ou vérifié les meilleures pratiques de conception d'appareils tactiles?
Liens sont bons pour l'interaction avec la souris car les gens ont une grande précision avec une souris.
Boutons sont bons pour l'interaction avec les doigts (tactiles) car ils fournissent une zone cible plus grande à toucher.
- Tout d'abord, nous voulons que votre utilisateur puisse cliquer - mon avis: utilisez le bouton (cible plus grande pour les doigts épais)
- Deuxièmement, l'utilisateur doit comprendre ce qui va se produire lorsqu'il cliquera avant de le faire. Le texte des boutons est donc important.
Après cette discussion, je pense que souligner ou non le texte n'est pas aussi important que de fournir une grande cible pour les doigts maladroits et un texte descriptif qui guide les utilisateurs.
Je pense que c'est plus que correct de les combiner.
Assurez-vous simplement que le bouton entier est enveloppé dans un lien. De cette façon, lorsque l'utilisateur survole n'importe où sur le bouton, vous pouvez activer le retour de survol approprié (par exemple: souligner).
Voir cette capture d'écran pour un exemple tiré de la page iPhone actuelle d'Apple.
Je suis tout à fait d'accord avec vous que nous perdons une occasion majeure de communiquer avec nos utilisateurs si nous continuons à utiliser les liens et les boutons de manière interchangeable pour la navigation et les actions de commande. Pour faire la différence entre la navigation et les commandes, je voudrais que les commandes des commandes ressemblent le plus possible à des boutons:
Étiquette avec du texte noir.
Fond ombré contrastant avec la zone de travail.
Look 3D "surélevé".
Et faites en sorte que les commandes de navigation ressemblent le plus possible à des liens tout en trouvant un moyen de délimiter une grande "zone chaude" cible pour les écrans tactiles:
Étiquette avec du texte en couleur.
Souligné.
Fond blanchâtre de la même couleur que la zone de travail.
Un marquage aussi subtil que possible des limites des zones chaudes.
Pour la dernière puce, j'essaierais une sorte de marquage "ouvert" et me baserais sur le principe de fermeture Gestalt pour le faire apparaître comme une zone chaude cible rectangulaire. Par exemple, essayez d'entourer le lien avec:
Grands crochets.
Coins du rectangle de la zone chaude (mais assurez-vous qu'ils ne sont pas confondus avec les "poignées" de sélection).
Règles horizontales au-dessus et en dessous.
Le dernier peut éliminer la nécessité de souligner le texte, car la règle inférieure suggérera de le souligner même s'il y aura un grand écart entre le texte et la règle. En fait, cela rendra également vos étiquettes de lien plus lisibles au démarrage.