Loading

Les sites web ont apporté des modifications dans la lecture d’une page des utilisateurs. Avant les lecteurs étaient habitués aux formats papier avec ses règles d’impression. Aujourd’hui l’interface écran a apporté une liberté au niveau des placements et des contraintes typographiques. Cela amène a une organisation différente pour chaque site et oblige l’œil à s’adapter rapidement à la structure de page. Pourtant nous retrouvons toujours une base commune qui nous guide dans notre navigation. Due à l’accoutumance nous avons développé une aptitude de reconnaissance cognitive.

Les forces cognitives de l'interface utilisateur #ErgonomieCognitive #UI Cliquez pour tweeter

 

Que lisez-vous instinctivement ?

google-cognitif

En effet on reconnait (évidemment) la forme et les couleurs du logo Google ! 

 

Le panneaux de signalisations, l’exemple le plus (re)connu

L’exemple des panneaux de signalisations présents le long des autoroutes, va surement vous éclaircir la voie.

typo-spec

De manière générale vous passez devant à environ 110km/h, ce qui laisse très peu de temps (500ms à 1s) pour lire son inscription.Et pourtant vous arrivez toujours à déchiffrer ce qui est affiché. Mais en réalité la plus part du temps votre cerveau reconnait ou imagine un nom adéquate. Ceci grâce au contexte (localisation), à votre mémoire (visuelle) mais aussi à la forme des lettres. En effet la police sans-serif utilisée avec une taille, une épaisseur et un écartement imposant permet la reconnaissance rapide du texte. Néanmoins cela fonctionne dans son contexte, évidemment que pour le corps d’un article, par exemple, une police tout en capitale avec un interlignage équivalent au triple de sa taille, ne sera  juste pas lisible.

Ce principe de reconnaissance visuelle s’applique aussi pour les éléments principaux d’un site web

 

Menu navigation : Cap ou pas Cap ?

Il est pas rare d’entendre dans des discussions traitant des points précis de l’interface utilisateur: la typographie de la navigation et des labels, devraient-ils être tout en majuscules? Juste des icônes? Des icônes avec des labels? Doit-on le cacher avec un icône hamburger ? 

 

Capture d’écran 2015-06-15 à 13.14.20Apple utilise une navigation avec seulement une majuscule en début de label : plus respirant. #PasCap 

 

Capture d’écran 2015-06-15 à 13.15.23Samsung opte pour le tout en majuscule aligné à gauche : plus concentré. #Cap

 

Parmi les principales forces cognitives en jeu dans le design d’interface : la reconnaissance est l’un des plus puissants et mystique. Il a même le mot «connaissance» en lui. Preuve qu’il est le retour d’une expérience connue.

Certains principes de travail quant à la reconnaissance que je trouve particulièrement utile lorsque l’on considère la navigation et la labellisation :

  • la perception de la Gestalt (reconnaissance d’un «tout») précède tout le processus cognitif
  • la reconnaissance est quasi instantanée
  • la reconnaissance est facile et instinctive
  • le cerveau improvise une signification avant même que nous en comprenons le sens
  • la reconnaissance arrive au centre de l’attention

L’essentiel c’est d’avoir un rapport entre la perception et l’idéalisation qui soit suffisant afin d’analyser rapidement un item. Vous pouvez décider de ne pas mettre les éléments de navigation en majuscule sans pour autant qu’ils ne soient indistinct du reste de la page. Du moment que l’accès et la mise en forme soient assimilables rapidement.

 

Les utilisateurs ne sont pas idiots, mais pourtant…

Chaque utilisateur a sa propre façon d’aborder du contenu, de lire une page. Mais ce qui est sûr et commun à tous, c’est que nous ne lisons jamais TOUT, car oui nous sommes feignants. Nos yeux passent rapidement les mots, en sautent d’autres, ou imaginent le reste de la phrase.

6-skipping-words-preview-opt

 

Concernant la navigation, ce qui va primer c’est évidement le positionnement des items. De gauche à droite, dans leur niveau d’importance (pour les cultures latines). L’affichage de haut en bas est aussi envisageable, mais déconseillé lorsque vous avez un nombre important d’entrées.  L’intitulé de l’item a aussi son importance. Ce n’est pas un titre d’article, ni un mot au hasard. L’architecture de l’information est primordiale pour inciter les utilisateurs à continuer leur navigation. Et les ponts les plus utilisés sont principalement la navigation du menu et la recherche directe.

C’est pourquoi les labels attribués doivent être “glance-able” c’est à dire reconnaissables d’un coup d’oeil. Bien sûr en fonction de la cible, les intitulés ne sont pas les mêmes, la taille et la police seront aussi variables. Mais de manière générale, lorsque vous désirez qu’un utilisateur interagissent, il faut mettre un verbe d’action. Lorsqu’il s’agit d’un élément de navigation, il faut être le plus précis sur l’arrivée du lien. Et lorsque c’est un bouton d’action, il faut être le plus succinct tout en étant le plus évident possible.

 

labe-long

Pour un formulaire, par exemple, les informations demandées paraissent souvent verbeux, on le remplirait presque par automatisme. Alors qu’on peut éviter l’étiquetage de chaque encart en remplaçant le label par une courte phrase d’action. De plus pour attirer d’avantage l’intérêt des utilisateurs on peut tout mettre en capitale. L’effort de lecture est alors un peu plus complexe mais reste relativement rapide.

labe-long2

 

Ici, l’ajout des verbes d’action peut paraître évident, pourtant il va intriguer et forcer les plus évasifs à s’intéresser d’avantage à ce bloc.

 

On ne peut pas généraliser lorsqu’on parle de perception et les règles sont faites pour être brisées. L’important c’est de faire des tests et de voir si vos boutons sont efficients.

 

Source : Article Medium article Smashing

Do you like Hugo Vermot's articles? Follow on social!
No Comments
Comments to: La reconnaissance visuelle : la force de l’UI Design
Inscription obligatoire et gratuite

Suivez toutes nos actualités

Ne manquez pas un article ! Toutes les nouveautés directement dans vos emails.

ARTICLES LES PLUS APPRÉCIÉS

Articles des membres

Devenir un community manager n’est pas une tâche facile. Cela demande beaucoup de travail, de dévouement et, surtout, de bonnes compétences. Un community manager doit posséder des compétences exceptionnelles en matière de communication, être capable de gérer des situations difficiles et de réfléchir rapidement. Ils doivent également avoir une connaissance approfondie des produits ou services […]

LES NOUVEAUX ARTICLES

  1. Actualités
Cela n’est plus nouveau, la cybersécurité est un enjeu crucial pour toutes les entreprises et organisations qui utilisent des systèmes informatiques. Mais, en même temps, l’expérience utilisateur (UX) est également devenue un facteur clé pour la bonne utilisation des systèmes. Malheureusement, ces deux objectifs ne vont pas toujours de pair. En effet, sécuriser quelque chose […]
  1. Articles des membres
Devenir un community manager n’est pas une tâche facile. Cela demande beaucoup de travail, de dévouement et, surtout, de bonnes compétences. Un community manager doit posséder des compétences exceptionnelles en matière de communication, être capable de gérer des situations difficiles et de réfléchir rapidement. Ils doivent également avoir une connaissance approfondie des produits ou services […]