Choisir la disposition (layout) d’une page d’un produit numérique est le premier pas de l’UI Design. En effet, le choix de la mise en page va conditionner la hiérarchisation de l’information, le parcours utilisateur et donc directement l’expérience utilisateur. L’évolution technologique ouvre chaque année de nouvelles perspectives de création, mais toutes les mises en page ne se valent pas et ne répondent surtout pas aux mêmes besoins. Voici un panorama des principaux layouts, comment et pourquoi les utiliser.
Nous regroupons ici les dispositions essentiellement utiles aux grands écrans et aux écrans de laptops.
Sommaire
1. Disposition en grille (grid layout)
Layout en grille – source bibliothèque numérique de Paris
Cette maquette de grilles organise les éléments visuels en lignes et colonnes, ce qui permet l’affichage parallèle de plusieurs objets ou textes sur une même page.
Pour quels sites utiliser ce layout ?
Cette mise en page est particulièrement adaptée aux interfaces qui gèrent de gros volumes de données ou des données complexes, pour lesquelles la cohérence et la scalabilité sont primordiales.
La plupart des plateformes de e-commerce utilisent la disposition en grille pour leurs mises en page. Des articles de taille identique sont ainsi alignables sur une même page.
Les bibliothèques numériques, les applications de gestion de contenu ainsi que les dashboards utilisent également ce format pour agencer les objets et faciliter la compréhension et la navigation. L’utilisateur se repère aisément et peut parcourir les colonnes de gauche à droite ou de haut en bas suivant le regroupement des objets qu’il lui est proposé.
Pour l’UX, tout le travail consiste à la répartition des volumes d’information et donc à la taille des cellules et des colonnes, ainsi qu’aux espaces blancs entre les éléments.
La disposition en grille est implémentée à l’aide de CSS Grid ou de Flexbox. On notera que la plupart des grid layouts sont aujourd’hui responsives et donc adaptables sur les différents écrans.
2. Disposition par onglets (tabbed layout)
Layout en onglet — source Pinterest
Le tabbed layout est une convention UI qui partitionne l’espace conteneurs, chacun étant identifié par un onglet. Ces conteneurs, ou vues permettent de segmenter l’information en catégories ce qui facilite la navigation et la compréhension. Les onglets peuvent être de différents types : fixes, déroulants, verticaux ou horizontaux.
Le mécanisme de basculement entre les onglets offre une UX fluide, permettant aux utilisateurs de passer d’un conteneur à l’autre sans quitter le contexte principal de la page.
Pour quels sites utiliser ce layout ?
C’est une disposition appropriée pour les interfaces à forte densité d’information qui demandent en général une hiérarchie bien définie, donc pour toutes les interfaces de productivité.
Du point de vue technique, les onglets sont généralement implémentés à l’aide de composants réutilisables, tels que les tabs dans les frameworks CSS ou les tab views dans les SDK mobiles.
3. Disposition de la maçonnerie (masonry layout)
Disposition en maçonnerie — source Pinterest
Les mises en page de type « maçonnerie » proposent une structure flexible où les éléments, plutôt que d’être configurés en cellules de taille fixe, varient en hauteur et en largeur, comme les pierres d’un mur en maçonnerie. Ce layout permet de créer des pages plus dynamiques et organiques.
Le masonry layout favorise la flexibilité (agencement d’éléments de différentes dimensions), l’adaptabilité aux différentes tailles d’écran et compose des pages de façon attrayante.
On l’utilisera pour des galeries d’images, les portfolios, les blogs, mais également pour certaines mises en page produit comme des articles de mode pour dynamiser les visuels.
Des bibliothèques comme Masonry ou Isotope permettent de créer facilement ce layout, CSS Grid offre des fonctionnalités natives pour des grilles et responsives. Combiné avec CSS Grid, Flexbox peut être utilisé pour gérer l’alignement et l’espacement des éléments à l’intérieur des cellules de la grille.
La disposition de type « maçonnerie » est souvent une solution d’agencement facile. Attention toutefois à l’UI des pages. Les gouttières entre les cases et les espaces à l’intérieur des cases déterminent l’attrait et la lisibilité de la page.
4. Disposition de superposition (overlay)
Exemple de disposition en superposition – Sok Studio – Dribbble
La disposition en superposition est un élément qui vient par-dessus un contenu de la page. Il est couramment utilisé pour afficher des informations contextuelles, des options, ou encore pour interrompre le parcours par un CTA.
Les types les plus usuels sont les boîtes de dialogue ou modales (ex. : confirmations, formulaires), les infobulles ou tooltips qui apparaissent au survol, les notifications non intrusives comme les messages d’alerte et les menus contextuels. Attention lors de la mise en place de ce layout de bien vérifier son accessibilité aux utilisateurs qui ont besoin d’une technologie d’assistance comme la lecture d’écran.
De nombreuses bibliothèques UI comme Bootstrap, Material UI propose des composants prêts à l’emploi. En CSS, les propriétés position, z-index et opacity sont couramment utilisées pour créer des effets de superposition. Cette mise en page usuelle est très fréquente. Attention toutefois à ne pas en abuser pour ne pas venir polluer le parcours utilisateur de façon intrusive ou redondante. De plus, la superposition ne doit pas masquer les éléments de navigation pour que celle-ci reste fluide.
Que ce soit pour la productivité ou l’esthétique, les avancées techniques offrent de nouvelles mises en page et l’accès plus facile à de nouveaux outils, en voici trois.
5. Disposition du canevas (canvas layout)
Exemple de tableau blanc collaboratif — source Dribbble
Les dispositions en canevas permettent de créer un espace personnalisable où chaque utilisateur pourra placer et manipuler des éléments de manière libre à l’aide des outils qui lui sont proposés.
Ce layout est utilisé pour les plateformes de conception graphique, de collaboration et de mind mapping (Figma, Canva, Lucidchart…) Par définition, cette construction de page est personnalisable, flexible et évolutive pratiquement à l’infini.
Les techniques d’implémentation passent principalement par HTML5 Canvas (pour les graphiques vectoriels et la possibilité de manipuler des pixels individuellement), SVG pour créer des graphiques vectoriels scalables et interactifs, et WebGL pour les graphiques 3D et des animations.
Lors de la conception d’une page de ce type, le designer devra fournir tous les outils de guidage pour organiser facilement le travail de l’utilisateur. Les guides et alignements, les fonctions liées à la collaboration (verrouillages des éléments, historique des versions et des échanges), les zooms et panoramiques pour les canevas de grandes dimensions, etc.
La modélisation d’un espace de travail comme un tableau blanc (whiteboard) demande un travail spécifique de l’UX designer pour que le besoin utilisateur soit clairement défini. Condition sine qua non d’une interface utilisable et intuitive.
6. Disposition plein écran (full screen)
Trois pages fullscreen — agence de design shchk – source Pinterest
Les mises en page plein écran exploitent l’intégralité de la surface de l’écran afin de créer un impact visuel fort, une immersion ou une focalisation sur un élément particulier comme un CTA, un texte ou une image. On trouvera donc ce type de page sur les sites de luxe, les sites d’hôtellerie et de voyage pour les pages d’accueil, les sites de jeu avec diaporama interactifs, mais aussi pour les pages de destination classiques avec, par exemple, une demande d’enregistrement de données.
Les considérations particulières d’un full-screen.
La navigation y est souvent minimale pour focaliser l’utilisateur, le masquage des éléments de navigation est souvent de mise. Il faut toutefois prévoir une sortie claire pour éviter de piéger l’utilisateur. L’UX designer devra trouver l’équilibre entre immersion et contrôle de l’utilisateur sur son parcours. L’information doit être hiérarchisée pour ne pas perdre l’utilisateur. Une fois la section héros décryptée et l’immersion faite, l’utilisateur voudra continuer vers un achat ou la recherche d’une information. Il faut donc lui en ouvrir l’accès.
Une utilisation de JavaScript pour détecter les événements (clic, touche) et déclencher les transitions est appropriée à cette mise en page. Des propriétés CSS comme position : fixed ou position : absolute permettent de positionner les éléments en dehors du flux normal du document.
7. Disposition du parallaxe (parallax layout)
Effet de parallaxe avec le parallax layout — Giulio Cucito — source Dribbble
Une mise en page parallaxe propose un effet visuel immersif par une illusion de profondeur inspirée du monde physique. Il s’agit de faire passer un élément devant un autre lors du défilement. Par cette action, les éléments d’arrière-plan paraissent plus éloignés que ceux du premier plan et la vitesse de déplacement des éléments de premier plan semble plus rapide. Le but est de créer une expérience immersive ou un attrait visuel ludique.
Ce layout peut être mis en place pour des pages complètes comme pour des éléments d’une page. Cet effet peut être personnalisé en ajustant vitesse, direction et amplitude du déplacement des éléments en les combinant à d’autres effets d’animation et de transition. Attention, le layout parallaxe doit pouvoir être désactivé, car il ne convient pas à certaines personnes souffrant de troubles visuels.
Il est préférable de réserver ce dispositif à des illustrations plutôt qu’à du contenu texte, bien que la plupart des effets de parallaxe soient contrôlables par la souris. Ce genre de défilement doit sous-tendre une histoire, la suite d’images doit être construite pour raconter quelque chose. Les effets de pages tournées pour les applis de productivité sont un peu passés de mode. Avec CSS3, les propriétés « transform » et « translate » permettent de créer des effets de parallaxe simples. JavaScript peut calculer les positions des éléments en fonction du défilement, ce qui permet d’affiner l’effet. Des bibliothèques JavaScript comme ScrollMagic ou Parallax.js facilitent la mise en œuvre de ce layout.
Attention, ces layouts sont gourmands en ressources, il vaut donc mieux limiter le nombre d’éléments et optimiser les animations. Pour finir, ce sont des dispositions graphiques qui conviennent également très bien aux écrans tactiles qui rendent leur manipulation plus facile et ludique.
Ce qu’il faut retenir
Le nombre de layouts mis à disposition des UX, UI designers et des développeurs est important et leurs combinaisons offrent de multiples combinaisons de créations.
Il faut toutefois garder en tête que l’expérience utilisateur est le principal moteur de la création et se poser les bonnes questions au moment du choix des layouts : « que vient-il chercher ? Que faut-il lui apporter, à quel moment lui donner tel ou tel élément ? » etc… Associées à : « quel est le meilleur agencement pour le satisfaire », ces questions permettront de choisir les layouts appropriés pour chaque besoin.
Image à la UNE : Proposition de design de page — Agence Tubik — Dribbble