Le lien soulignements, Adrian Roselli

Il est étonnant de moi comment cette suggestion provoque tant d'angoisse et de combats. Les concepteurs affirment souvent qu'ils laides, certains utilisateurs affirment qu'ils sont source de distraction, d'autres prétendent même qu'ils réduisent l'accessibilité.

Rappelez-vous, ceci est pour aborder la façon dont les liens sont stylés dans le corps d'une page, le contenu narratif, où ils sont assis parmi les blocs de texte dissociées. Non navigation, pas des pieds de page, pas de contrôles de page, etc.

1. Accessibilité

Un ensemble de règles sur la façon visuellement les liens actuels est disponible. Que ce soit ou non que vous aimez l'accessibilité, il offre des conseils (et vous avez vraiment à assurer l'accessibilité de toute façon). Je l'utilise que comme la ligne de base pour définir certains paramètres de sorte qu'il est un bon endroit pour nous de commencer.

La couleur est pas utilisé comme seul moyen visuel transmission des informations, ce qui indique une action provoquant une réponse, ou de distinguer un élément visuel. (Niveau A)

En bref, les liens ne devraient pas compter uniquement sur la couleur pour indiquer qu'ils sont des liens. Ce niveau est une exigence.

Niveau A signifie que c'est le niveau minimum de conformité. Niveau AA est le prochain niveau de conformité et englobe l'ensemble du niveau A. Vous ne pouvez pas atteindre le niveau AA sans rencontrer le niveau A.

Tous les procès se sont installés au niveau AA (niveau A et par extension) et la plupart des lignes directrices fondées sur l'utilisation WCAG 2.0 niveau AA que le niveau de support de base.

Des lignes directrices

Idéalement, il existe des lignes directrices pour rencontrer SC 1.4.1, et ils fournissent des exemples.

G182: Faire en sorte que des repères visuels supplémentaires sont disponibles lorsque les différences de couleurs de texte sont utilisés pour transmettre l'information:

Quelle que soit d'autres repères visuels, des liens de contenu doivent encore avoir un contraste suffisant du reste du texte.

G183. L'utilisation d'un rapport de contraste de 3: 1 avec le texte environnant et en fournissant des repères visuels supplémentaires sur le focus des liens ou des contrôles où la seule couleur est utilisée pour les identifier:

Cette technique a été écrit avant le toucher des interfaces, l'allocation pour souligner que le vol stationnaire ou mise au point est généralement considéré comme insuffisant étant donné que les appareils tactiles (en général) ne proposent pas ces options en cas d'utilisation sans clavier ni souris.

2. Convivialité

Lignes directrices pour Visualizing Liens

Il se développe sur ce presque immédiatement:

Mise en forme Liens pour Usability

Si vous voulez vraiment les gens à cliquer sur vos liens, alors vous devez le rendre évident qu'ils peuvent et doivent être cliqués. Insistant sur le texte est la manière la plus universelle pour indiquer.

L'argument est simple. Si vous avez des liens dans votre contenu, vous les mettez là pour les gens à cliquer. Alors les faire ressembler à cela.

Beyond Blue Links: Faire Reconnaissable éléments cliquable

Mais les utilisateurs d'aujourd'hui ont vu des hyperliens et des boutons qui semblent très différents. Signifiants peuvent évoluer au fil du temps que les internautes obtenir plus de visibilité aux différents indices d'interaction et d'apprendre à apprendre ces nouveaux indices.

[...] Un problème majeur avec de nombreux modèles plats est que l'une des plus fortes signifiants Clickability -le 3-dimensionality- est retiré de l'équation. Textures que les utilisateurs ont longtemps été invoquées pour les indices sont arrachés, ce qui rend difficile pour les utilisateurs de déterminer ce qui est cliquable et ce qui est pas.

3. Recherche universitaire

Ici, je déduis des recherches fait en dehors des études d'utilisabilité et mesurée à l'aide des paramètres différents que les taux de participation, les taux d'abandon, et ainsi de suite.

On ne peut nier que la présence de liens dans le contenu ajoute une charge cognitive aux lecteurs. Telle est la nature même de l'hypertexte, et sans doute la raison pour laquelle quelqu'un est en train de lire certains types de contenu.

La première étude a conclu que la lisibilité et affectée souligne que soulignements doivent être évités lorsque l'objectif principal du contenu est la compréhension. Étant donné que la plupart des participants ont signalé la numérisation d'une page avant la lecture, les liens soulignés ont d'abord été utiles. En utilisant les faits saillants de meilleurs résultats que soulignements, bien que l'étude n'a pas été mis en place pour mesurer si cela était une meilleure approche.

La deuxième étude suggère cacher tous les liens et faire l'utilisateur déprimer un bouton pour les voir. Lors de la lecture de compréhension et de la vitesse seule ont été mesurés, l'absence de liens de meilleurs résultats. Lorsque l'exécution des tâches dépend de la suite d'un lien, les utilisateurs effectués bien pire.

Comparaison des techniques Lien Lisibilité

Les participants ont indiqué que cela couleurs faible lien de contraste par rapport au texte environnant était problématique, et haut en couleurs de contraste ont été source de distraction. Dans le cas contraire le plus noté qu'il était plus facile de trouver des liens qui ont été soulignés.

charge cognitive en lecture hypertexte: Un examen

Alors que les auteurs soutiennent qu'il ya la charge cognitive juste d'avoir des liens sur une page, aucune déclaration est faite sur les liens étant soulignés ou non. En outre, les auteurs constatent que les résultats disent la compréhension est fonction des objectifs des lecteurs - la compréhension droite par rapport à la recherche ou la numérisation.

Les auteurs postulent que la prévisualisation des liens (via les fenêtres pop-up ou vol stationnaire des superpositions) peut réduire la charge cognitive en offrant aux utilisateurs une information de laquelle un lien les prendre. Ils vont à suggérer des étiquettes de texte et des icônes comme options. En fin de compte, les auteurs concluent que les liens qui sont tout simplement pas soulignés exécutent pire ou mieux que les liens obfusqués ni des liens avec des étiquettes / icônes.

Notez que de nombreuses plates-formes de contenu se déplacent pour faire face contraste de lien avec Drupal même codifiant soulignements dans le noyau et de discuter WordPress il (hors ligne).

5. Options de style

Même dans le monde des applications installées (par rapport aux pages Web), la valeur des indicateurs clairs est important et a souligné dans les concepts de conception pour les développeurs de logiciels, comme Microsoft fait ici:

Le défi est alors de garder suffisamment d'indices visuels afin que les utilisateurs puissent reconnaître les liens. La ligne directrice fondamentale est les utilisateurs doivent être en mesure de reconnaître les liens par inspection visuelle seule, ils ne devraient pas avoir à planer sur un objet ou cliquez dessus pour déterminer si elle est un lien.

Soulignements ne sont pas la seule option. Nous avons déjà identifié que plus que la couleur seule doit être utilisé et que les liens doivent être visibles sans interaction. Passons en revue les options.

soulignements

Les inconvénients de soulignements noté dans les études entrent en jeu lorsqu'un utilisateur doit se concentrer sur un morceau de texte et le comprendre. Toutefois, si vous mettez des liens dans votre contenu, il est ostensiblement pour les utilisateurs à suivre. Les utilisateurs qui analysent le contenu sont mieux servis avec les liens soulignés.

Alors que l'écrêtage descendeur est toujours un problème dans certains cas, soulignements par défaut sont devenues plus légères dans les navigateurs et dans le cas de Safari, les soulignements ne se croisent pas avec descendeurs du tout.

Le texte surligné réalisé un peu mieux que soulignements dans les études. Cela peut être une technique efficace, à condition que le texte du lien et la couleur de fond « highlight » ont un contraste suffisant. Il y a quelques choses à considérer:

Enroulant une bordure autour d'une course entière de texte a les mêmes problèmes potentiels avec l'emballage en mettant en lumière le fait. Cependant, une bordure juste sur le fond vous permet de ne pas couper par le milieu de descendeurs.

Effets gradient

J'ai vu des gradients de fond utilisés comme points saillants de fantaisie, mais je l'ai vu aussi les utiliser comme soulignements plus typographiquement attrayants. Un exemple de quasi-soulignements utilise une combinaison d'ombres de texte et un gradient linéaire d'avoir descendeurs à travers le poinçon « souligné. »

Comme un point culminant, des gradients utilisent des styles de fond qui peuvent être surchargées en mode contraste élevé de Windows, mais vous pouvez revenir à soulignements dans la requête des médias.

L'une des études essayé d'utiliser des icônes avec un certain succès, mais sans une icône au début et à la fin du texte, il n'y avait aucun moyen d'indiquer à un utilisateur lorsque le lien a pris fin.

Styles de police

Je mets en garde contre ce que la plupart de ces styles implique autre chose qu'un lien hypertexte. En utilisant plus ou moins le texte peut casser le rythme (line-height / leader en particulier) de la page, faisant apparaître décousue ou cassé. L'utilisation d'un caractère différent peut regarder cassé pour les utilisateurs, mais même si vous avez un ajustement parfait de style (qui est encore visuellement distincte) avec le reste du contenu, il repose sur le navigateur pouvoir télécharger et afficher la police de caractères.

Modification de styles sur le vol stationnaire ou mise au point est presque toujours une mauvaise idée car il peut le cas où le texte à refusion. Dans certains cas, cela peut même faire le lien se déplacer de sous un pointeur de souris, perdant son style de vol stationnaire, pour glisser en arrière sous, gagner les styles de vol plané, sortir sous ...

6. Recommandation

WCAG nous disent de nous assurer que nous ne comptons pas sur la couleur pour distinguer les liens et même explicitement suggérons soulignements.

les chercheurs et les praticiens de la convivialité suggèrent généralement que soulignements sont la façon la plus claire pour indiquer un lien qui vit dans le contenu.

Les chercheurs universitaires confirment qu'il ya une charge cognitive à même d'avoir des liens dans des blocs de contenu, mais quand vous les avez, vous pouvez réduire la charge cognitive supplémentaire en les faisant apparaître. Bien performé souligne.

autres suggestions

Si vous avez d'autres idées, des liens vers la recherche académique, des études d'utilisabilité, des corrections, des échantillons, etc. alors s'il vous plaît partager.

7. Mises à jour

Je vais inclure les mises à jour à des choses qui sont liées, directement ou indirectement, mais la plupart du temps sur quoique ce soit la logique bizarre est dominante dans ma tête un jour donné.

Je me souviens avoir lu ce lien soulignant après le moyen il y a quelques années. Il est un très bon (bien que le type-ringard) lire. Si bien que je me rappelle dans une situation comme ça, quelques années plus tard :) moyen se sont donné GREAT essayant de réaliser belle soulignage.

Bonne lecture Adrian!

12 ans reste longtemps sur une évolution web aussi vite qu'il fait.

3: Ahh! Peut-être est la raison de vos hypothèses! Je l'avais copier / coller le «

Un lien vers quelque chose d'autre que ce que le texte d'ancrage suggère, serait si mal OMI. Encore une fois: non intentionnel, mais je ne vois pas pourquoi il déclencherait l'alarme « spammeur ». Déclencherait mon propre aussi;)

2. Je ne me sens pas indigné de la conversation. Mon point est que dans le contexte si ce poste, les préférences personnelles tomberont sur (mes) oreille d'un sourd.

Grand poste sur l'état actuel de lien :) Ceci est très complet

Je pense que tous ces problèmes pourraient être mentionnés dans le poste, et j'aimerais avoir votre avis sur ce :)