Mise en page/mise en écran: ne perdez pas vos visiteurs!


Lorsque j’étais encore aux études, je m’amusais déjà à créer des sites internet. Mon objectif était de produire de jolis écrans, harmonieux à regarder. Je n’avais aucune connaissance en graphisme ou de quoi que ce fût d’autre, je faisais cela au feeling. Une fois les sites en ligne, je me retrouvais toujours devant le même constat frustrant: le nombre de visiteurs augmentait chaque jour mais aucun ne passait jamais à l’action et ça ne me rapportait aucun lead. C’est un sentiment vraiment désagréable que d’avoir un site sans qu’il ne permette de réaliser nos objectifs… On pourrait comparer cela à un magasin bondé, rempli de clients potentiels, dans lequel jamais personne n'achèterait quoi que ce soit.

La façon de présenter les écrans d’un site internet ou d’une app est fondamentale. La manière selon laquelle sont disposés les éléments, la taille de ces éléments ou encore leur couleur sont autant de choses importantes. Cela permet d’aiguiller les visiteurs.

Dès qu’un écran est créé, il doit avoir une finalité claire: qu’est-ce que je veux que mon visiteur/utilisateur fasse sur cet écran? Est-ce que cette action a une plus-value? Si on ne peut répondre à cette question, c’est que cette page ne mérite pas d’exister.

Une fois l’écran créé, il faut se poser la question suivante: quelle action doit réaliser le visiteur/utilisateur? On appelle cela un «call to action». Ce «call to action» doit être visible sans qu’il ne soit nécessaire de scroller. Il faut partir du principe qu’une personne qui vient visiter un site/une app est fainéante et qu’elle ne va pas lire les informations, ou peut-être juste les titres. Elle ne scrollera probablement pas, ou très rapidement. Il faut lui donner directement ce qu’elle vient chercher afin qu’elle ne disparaisse pas dans les méandres d’Internet.

Pour donner de l’importance aux différents éléments, pour faire comprendre aux visiteurs/ utilisateurs ce qui est important à lire ou regarder, un moyen efficace est de jouer avec les tailles, les couleurs, les photos et les animations.

Quand il s’agit de texte, il est préférable de toujours commencer par le plus grand et de terminer avec le plus petit. Outre le fait de hiérarchiser l’information, cela permet de guider le regard de votre visiteur/utilisateur en formant une flèche.

Voici un exemple:

Si vous lisez quelque chose, il s’agira d’office dela première grande ligne.

Par contre, je suis beaucoup moins sûr pour le reste.

L’être humain est fainéant de nature.

Du coup il ne lira pas ça.

Vous pouvez observer que, disposé comme cela, le texte ressemble à une flèche. Même si le texte n’est pas lu, cela montre au visiteur/utilisateur le chemin à suivre.

La première chose que le visiteur regardera est ce qui se trouve en haut à gauche de l’écran. Son regard seraégalement attiré par les animations, les couleurs et les images. Il faut donc éviter de mettre trop d’éléments dans une seule et même page…


A titre d’exemple, voici Google:

Et voici un contre-exemple d’un site beaucoup trop chargé: (https://www.ladn.eu)


Dans l’exemple de la page Google, le visiteur/utilisateur ne peut pas se perdre ou ne pas comprendre ce qu’on attend de lui. Par contre, dans le contre-exemple on ne peut pas en dire autant.


Une photo d’une personne qui regarde dans une direction guidera également le regard de votre visiteur/utilisateur. (Eye tracking)



Les couleurs ont une signification qui peut différer d’une culture à une autre, mais qui peut aussi avoir la même signification pour tout le monde. Prenez l’exemple du rouge: le rouge signale les interdits et fait penser au danger. Alors, même si le rouge fait partie de votre charte graphique, évitez, par exemple, d’insérer un bouton « call-to action » rouge.


Ce sont tous ces détails qui garantissent votre succès à guider vos visiteurs/utilisateurs et éviter qu’ils s’en aillent sans avoir réalisé la moindre action. Il est normal que la première version ne soit pas parfaite, c’est grâce au feedback de vos visiteurs/utilisateurs que vous pourrez améliorer ces petits détails.


Retenez qu’il est important de hiérarchiser l’information grâce à la taille, aux couleurs et aux animations, qu’il est préférable d’éviter de distraire votre visiteur/utilisateur avec d’autres éléments et qu’il ne faut pas oublier de lui montrer le chemin que vous voulez qu’il emprunte.

Si vous voulez en savoir plus sur l'ergonomie des écrans, je vous conseille ce livre: https://amzn.to/3zPAF1K



Si ce sujet vous a intéressé, l’e-book gratuit « Une app, comment faire ? » peut également vous intéresser. Vous le trouverez sur le site www.blapp.be/e-book

27 vues0 commentaire