Comment afficher les liens sur les wireframes lors des tests utilisateurs?
Nous menions des tests utilisateurs, dans lesquels nous avons donné à l'utilisateur des tâches à effectuer, sur un ensemble de wireframes interactifs que nous avions créés. Tous les liens sur la page étaient bleus (illustrés ci-dessous).
Étant donné que les liens étaient le seul texte de la page qui n'était pas noir et qu'il n'y avait pas d'images, les utilisateurs étaient instantanément attirés par les liens bleus. Pour cette raison, la personne exécutant les tests utilisateur a pris la décision de rendre les liens noirs.
Le fait que les liens soient bleus a fait que l'utilisateur ignore tout le reste de la page, ce qui est irréaliste, tandis que les rendre à nouveau noirs rend difficile de dire quel texte est un lien et ce qui ne l'est pas, ce qui est également irréaliste car les liens auront toujours une couleur .
Quelle est la meilleure façon d'afficher des liens?
Que diriez-vous de rendre tous les hyperliens gris et soulignés? De cette façon, ils apparaissent plus doux contre le texte de contenu noir. Le soulignement aidera à la définition. La capture d'écran est un prototype très lo-fi, donc je suppose que cela dépend aussi de ce que vous testez - facilité de navigation, placement de contenu et d'informations, accès à des informations importantes, etc. Des prototypes comme celui-ci doivent être réalisés avec un certain degré de flexibilité dans l'interprétation, car l'utilisateur changera son comportement en fonction de ce qui est visuellement disponible.
Si vous effectuez des tests sur le filaire, vous devez garder l'expérience aussi proche que possible de la véritable expérience du site Web (compte tenu de la faible fidélité du filaire, bien sûr - donc je ne parle pas d'utiliser des graphiques).
Dans le site Web final, les liens, onglets et boutons seront exposés (par un style approprié, y compris des styles onmouseon). Si vous ne les fournissez pas, l'expérience sera abusée et les résultats du test seront inadéquats.
Donc, mon conseil est:
- ne masquez pas les liens, mais gardez-les exposés par un style approprié
- faites de même pour les autres éléments cliquables.
De cette façon, vous garderez les testeurs concentrés sur les liens, les boutons et les onglets (comme les vrais utilisateurs le seront dans le produit final).
Les liens étant plus évidents n'est pas nécessairement une mauvaise chose - les liens devraient être visuellement distingués et évidents. J'ai fait de nombreux tests d'utilisabilité en utilisant des wireframes noir et blanc avec des liens colorés, et cela n'a jamais été un problème. Le bleu peut être légèrement plus évident, mais si vous testez un filaire basse fidélité, vous ne testez pas la conception visuelle de toute façon. Je suppose que vous regardez les chemins de navigation, l'organisation du contenu, etc. - il est peu probable que les commentaires soient affectés simplement parce que les liens sont bleus.
Une autre option si vous êtes vraiment, vraiment anti-bleu, est de rendre tout le texte sans lien sur le site gris (comme la couleur hexadécimale # 666) et de rendre les liens noirs. Vous avez besoin d'une différenciation visuelle. Je pense que c'est plus irréaliste que d'utiliser du bleu, mais si vous êtes toujours confronté à une résistance au bleu, cela laisse au moins tout en niveaux de gris.