fr

UX Design et ligne de flottaison : quelle est la règle ?

UX Design et ligne de flottaison : quelle est la règle ?

Lors de la conception d’un site internet, il faut prendre en compte ce qu’on appelle la ligne de flottaison. Et même si les « règles » évoluent, certains principes de base perdurent.

Définition et recommandations, par Youdemus.

Définition de la ligne de flottaison

Historiquement, la ligne de flottaison remonte à l’époque de l’imprimerie, quand les journaux étaient pliés et qu’ils devaient montrer leur meilleure première face pour se vendre.

Version Web, la ligne de flottaison correspond simplement à ce que vous voyez sur votre écran, avant de faire défiler vers le bas la page du site internet pour voir le reste du contenu.

La ligne de flottaison varie selon la taille de l’écran (ordinateur fixe, ordinateur portable, tablette, téléphone…) et c’est là que rentre en jeu le travail sur le responsive design.

 

screen youdemus ligne de flottaison 1024x597 - UX Design et ligne de flottaison : quelle est la règle ?

Voici ce qui s’affiche lorsque l’on arrive sur la page de notre site Youdemus, sans faire défiler le contenu, sur un écran de résolution 1920 x 1200px.

 

Ligne de flottaison et responsive design

La ligne de flottaison n’est pas un principe gravé dans la roche mais relève plutôt du bon sens. Il est effectivement pertinent d’avoir du contenu engageant au dessus de cette fameuse ligne. Et de donner envie de découvrir la suite du site Internet.

Après plusieurs années respectant au pied de la lettre ce principe, les sites s’émancipent.

Très en vogue, les sites présentant une première partie en « plein écran » contournent le problème puisque le site s’adapte automatiquement à la taille de l’écran.

Notre réalisation Immopolis, par exemple, est un site dont la premère section est construite en full-height (plein écran) : les informations sont les mêmes quelle que soit la taille de l’écran (le contenu est seulement redimensionné).

ligne de flottaison immopolis 1024x415 - UX Design et ligne de flottaison : quelle est la règle ?

Vues de cette première partie du site Immopolis sur 2 écrans de résolution différentes

 

Côté bonnes pratiques, pensez à placer les informations incontournables et principaux Call-To-Action dans le haut de votre page. Mais allez à l’essentiel pour ne pas rendre votre site illisible.

Et selon la taille des écrans, il faudra donc prévoir d’adapter sa position et l’organisation des différents éléments du haut de page.

En effet, un site doit aujourd’hui absolument être construit en responsive design.

Pour exemple, le site de la Block’Out Cup qui lui n’est pas construit sur le principe du full-height, le nombre d’informations diffère en fonction de la résolution de l’écran. Les informations les plus importantes sont néanmoins toujours visibles (logo, informations, compteurs, prize money, partenariat).

ligne de flottaison blockoutcup 1024x415 - UX Design et ligne de flottaison : quelle est la règle ?

 

Votre site internet mérite une refonte ? Faites confiance à nos experts en création de site Internet, contactez-nous !