Web design et UX : six grandes approches, et ce qui doit rester commun

15 novembre 2026

Deux sites peuvent présenter exactement le même contenu, les mêmes produits, les mêmes horaires et la même adresse, et laisser une impression radicalement différente. La différence ne tient pas seulement aux couleurs ou à la police : elle vient de la façon dont l'information est organisée à l'écran, de ce qui est montré en premier, de ce qui bouge et de ce qui reste fixe. C'est le travail du web design (l'apparence et la composition) et de l'UX, pour « expérience utilisateur » (la facilité avec laquelle un visiteur trouve ce qu'il cherche et accomplit ce qu'il est venu faire).

Cet article passe en revue les grandes approches de mise en page que l'on rencontre aujourd'hui, avec leurs forces, leurs limites et les situations où elles conviennent. Il commence par ce qui ne devrait jamais varier d'une approche à l'autre : les fondamentaux. Pour rendre les différences concrètes, chaque approche est illustrée avec la page d'accueil d'une même boulangerie fictive, au contenu identique.

Une même boulangerie fictive, un même contenu, six mises en page différentes

Les fondamentaux, communs à toutes les approches

Une direction artistique originale ne compense pas un site lent, illisible ou impossible à utiliser au téléphone. Six règles s'appliquent quel que soit le style choisi : être accessible, être rapide, rendre la navigation évidente, respecter les habitudes, écrire pour des lecteurs qui survolent et garder des formulaires courts.

Fondamental 1 : être lisible et accessible

Les règles internationales d'accessibilité, les WCAG 2.2, fixent des seuils précis. Le contraste entre le texte et le fond doit atteindre au moins 4,5 pour 1 pour un texte courant, et 3 pour 1 pour un grand texte. Les zones cliquables doivent mesurer au moins 24 × 24 pixels, sauf exceptions. Tout contenu qui défile ou clignote automatiquement plus de cinq secondes doit pouvoir être mis en pause. En France, le RGAA traduit ces règles en critères vérifiables ; et depuis le 28 juin 2025, l'acte européen sur l'accessibilité étend ces obligations à de nombreux services en ligne, dont le commerce électronique.

L'accessibilité n'est pas un public à part : un contraste suffisant sert aussi la personne qui consulte le site en plein soleil, et un bouton assez grand sert tous ceux qui naviguent d'une main.

Fondamental 2 : être rapide

Google mesure l'expérience de chargement avec trois indicateurs, les Core Web Vitals :

LCP (affichage du plus grand élément) : moins de 2,5 secondes ;
INP (réactivité aux interactions, qui a remplacé l'ancien FID en 2024) : moins de 200 millisecondes ;
CLS (stabilité visuelle, quand des éléments ne « sautent » pas pendant le chargement) : moins de 0,1.

Les approches les plus spectaculaires, avec de grandes images et des animations, sont aussi celles qui mettent ces seuils le plus à l'épreuve. Elles demandent des images compressées et dimensionnées, et des animations confiées au navigateur plutôt qu'à des scripts lourds.

Les études du Nielsen Norman Group montrent que cacher la navigation dégrade l'expérience, sur ordinateur comme sur mobile. Sur un site de quatre ou cinq rubriques, un menu visible est préférable. Quand il faut le replier sur un téléphone, le bouton doit être grand, se distinguer du logo et porter un libellé : « Menu » est plus compris qu'une simple icône à trois traits.

Fondamental 4 : respecter les habitudes

La loi de Jakob le résume : les visiteurs passent l'essentiel de leur temps sur d'autres sites, et s'attendent à ce que le vôtre fonctionne de la même manière. Le logo en haut à gauche ramène à l'accueil, le panier est en haut à droite, un texte souligné est un lien. Une mise en page originale gagne à respecter ces conventions, car elles ne coûtent aucun effort au visiteur.

Fondamental 5 : écrire pour des lecteurs qui survolent

Les relevés de regard du Nielsen Norman Group ont mis en évidence, dès 2006, une lecture « en F » : les internautes lisent le début des premières lignes, puis descendent en ne regardant plus que le début des paragraphes. Leurs recommandations valent pour toutes les approches : l'essentiel dans les deux premiers paragraphes, des intertitres qui commencent par les mots porteurs de sens, des listes, des liens qui disent où ils mènent.

Fondamental 6 : des formulaires courts

Un formulaire de contact ou de commande est souvent le moment où le visiteur abandonne. L'institut Baymard a mesuré qu'un tunnel de commande comptait 11,3 champs en moyenne en 2024, alors que la plupart des sites n'en ont besoin que de 8. Chaque champ supprimé est une raison de moins de renoncer.

Pourquoi tant de sites se ressemblent

La plupart des sites vitrines suivent le même enchaînement : un en-tête, une grande image avec un titre, trois colonnes d'arguments, une galerie, un pied de page. Ce schéma fonctionne ; il est devenu la norme parce qu'il respecte les habitudes. Mais il produit des sites interchangeables, où seule la palette change.

Ce n'est pas anodin. L'effet esthétique-utilisabilité, décrit en 1995 par deux chercheurs du centre de design d'Hitachi, montre que les utilisateurs jugent plus facile à utiliser une interface qu'ils trouvent belle, même à fonctionnement égal. Une identité visuelle marquée n'est donc pas qu'une question de goût : elle influence la confiance et la tolérance aux petits défauts.

La solution consiste à séparer deux niveaux : des fondamentaux communs et non négociables, et une composition propre à chaque site.

Approche 1 : l'éditorial asymétrique

Inspirée de la presse magazine, cette approche utilise une grille de plusieurs colonnes dans laquelle les blocs ne sont pas alignés de façon symétrique : un titre très grand sur quatre colonnes, un texte d'accompagnement décalé sur le côté, des colonnes numérotées, une citation mise en avant. La typographie, souvent une police à empattements, fait l'essentiel du travail visuel.

Direction éditoriale asymétrique : grille de magazine, titre géant en serif, colonnes numérotées

Forces : donne de la profondeur et du sérieux, valorise un savoir-faire ou une histoire, se distingue nettement des modèles standards.
Limites : demande des textes de qualité et bien calibrés ; sur mobile, la grille se réduit à une colonne et l'asymétrie doit être réinventée.
Pour qui : cabinets de conseil, artisans d'exception, maisons avec une histoire, médias et blogs.

Approche 2 : la grille « bento »

Le nom vient des boîtes-repas japonaises à compartiments. La page est composée de tuiles de tailles différentes, aux coins arrondis, chacune portant une seule information : « Ouvert aujourd'hui », un produit et son prix, un bouton de réservation, un chiffre clé. Popularisée par les présentations de produits d'Apple puis par de nombreux sites de logiciels, elle prolonge le principe des cartes, qui regroupent des contenus liés dans un même cadre.

Grille bento : chaque information utile dans sa tuile, de l'horaire au bouton de réservation

Forces : l'information utile se lit d'un coup d'œil ; les tuiles s'empilent naturellement sur mobile ; facile à faire évoluer.
Limites : peut devenir une mosaïque sans hiérarchie si toutes les tuiles ont le même poids ; il faut une tuile dominante.
Pour qui : commerces de proximité, restaurants, applications, offres de services avec plusieurs informations pratiques.

Approche 3 : l'immersif plein écran

Une photographie ou une vidéo occupe tout l'écran, bord à bord, avec un titre monumental posé dessus. La suite de la page se découvre au défilement, souvent avec des animations : des éléments qui apparaissent, des images qui changent d'échelle. Un bandeau d'action reste fixé en bas de l'écran.

Approche immersive : photo bord à bord, titre monumental et barre d'action fixée en bas

Forces : forte émotion, idéal quand le produit est visuel (gastronomie, tourisme, architecture).
Limites : c'est l'approche la plus exigeante en performance ; le texte posé sur une image pose des problèmes de contraste ; les effets de mouvement peuvent gêner.
Pour qui : hôtellerie, restauration, tourisme, artisanat d'art, événementiel.

Le Nielsen Norman Group a étudié l'effet de parallaxe, où les plans défilent à des vitesses différentes : il attire l'œil, mais les visiteurs qui cherchent une information précise le trouvent gênant, et un mouvement trop marqué peut provoquer des vertiges. La recommandation est de le réserver aux images d'arrière-plan et de rester sobre.

Les navigateurs récents proposent des animations liées au défilement écrites en CSS, sans script : plus légères et plus fluides. Elles doivent respecter le réglage « réduire les animations » que chaque utilisateur peut activer sur son appareil.

Approche 4 : l'écran partagé

L'écran est coupé en deux : à gauche, un visuel fixe ; à droite, un contenu qui défile, par exemple une liste de produits avec photo, description et prix. Le visuel peut changer selon la partie du contenu affichée.

Écran partagé : un visuel fixe à gauche, la carte des produits qui défile à droite

Forces : associe l'émotion d'une grande image et la lisibilité d'une liste ; très efficace pour un catalogue court ou une carte.
Limites : ne fonctionne qu'au-delà d'une certaine largeur d'écran ; sur mobile, le visuel passe au-dessus du contenu.
Pour qui : boulangeries, restaurants, caves, créateurs avec une petite collection, agences immobilières.

Approche 5 : le minimal typographique

Peu ou pas d'images : le texte, sa taille, son rythme et les espaces blancs font le design. Une phrase d'accroche en très grands caractères, des informations pratiques en petite police à chasse fixe, beaucoup de vide.

Minimal typographique : presque pas d'images, le texte et les blancs font la composition

Forces : très rapide à charger, très accessible, élégant, durable dans le temps.
Limites : exige une écriture irréprochable ; peut paraître froid si le ton n'est pas travaillé.
Pour qui : professions libérales, conseil, architectes, studios de création, marques premium.

Le minimalisme n'est pas l'absence de design. Le Nielsen Norman Group en a relevé les caractéristiques : des aplats sans effets, une palette restreinte avec une seule couleur d'accent, des éléments réduits à l'essentiel, beaucoup d'espace vide et une typographie marquée qui porte la hiérarchie.

Approche 6 : le brutalisme

En réaction aux sites lisses et interchangeables, le brutalisme assume un aspect brut : bordures épaisses, couleurs franches, typographies massives, bandeaux défilants, grille visible. Le Nielsen Norman Group distingue ce style visuel de l'« antidesign », qui rend volontairement l'interface confuse, et conseille de limiter le brutalisme à l'apparence en gardant une navigation et une hiérarchie parfaitement claires.

Brutalisme : bordures épaisses, jaune franc, bandeau défilant et prix en très grand

Forces : immédiatement mémorable, affirme une personnalité forte, se démarque dans un secteur conventionnel.
Limites : clive ; inadapté à une clientèle qui cherche d'abord à être rassurée ; les bandeaux animés doivent pouvoir être arrêtés.
Pour qui : marques jeunes, culture, mode, street food, studios créatifs.

Comparatif des six approches

Approche	Ce qu'elle met en avant	Exigence en contenu	Performance	Adaptée au mobile
Éditorial asymétrique	Le texte, l'histoire	Textes soignés	Bonne	Moyenne, à réinventer
Grille bento	Les informations pratiques	Informations courtes	Bonne	Très bonne
Immersif plein écran	L'image, l'émotion	Photos de qualité	Exigeante	Bonne si l'image est optimisée
Écran partagé	Un catalogue court	Photos et descriptions	Bonne	Moyenne, se transforme en pile
Minimal typographique	Le propos, la marque	Écriture irréprochable	Excellente	Très bonne
Brutalisme	La personnalité	Ton affirmé	Bonne	Bonne

Les tendances d'expérience utilisateur à connaître

Au-delà de la mise en page, plusieurs pratiques améliorent concrètement l'usage d'un site.

Les transitions entre pages. L'API View Transitions, désormais prise en charge par les principaux navigateurs, anime le passage d'une page à l'autre : une vignette de produit s'agrandit en photo principale au lieu d'un écran blanc. Des outils comme Astro l'intègrent nativement.
Les actions collantes sur mobile. Un bouton « Réserver » ou « Appeler » fixé en bas de l'écran reste à portée de pouce. La loi de Fitts rappelle qu'une cible est d'autant plus facile à atteindre qu'elle est grande et proche.
Des choix limités. Selon la loi de Hick, le temps de décision augmente avec le nombre d'options : un menu de cinq rubriques et un seul bouton principal par écran.
La divulgation progressive. Montrer d'abord l'essentiel et proposer le détail à la demande, par exemple avec des sections dépliables ou un formulaire en plusieurs étapes. C'est la divulgation progressive.
Le mode sombre. Apprécié en faible luminosité, il peut suivre automatiquement le réglage de l'appareil. Le Nielsen Norman Group observe toutefois que la plupart des personnes lisent mieux sur fond clair, et recommande de proposer le mode sombre sans l'imposer, notamment pour la lecture longue et pour certaines déficiences visuelles.
Les polices variables. Un seul fichier contient toutes les graisses et largeurs d'une police. Elles allègent la page et autorisent des effets typographiques fins.
Les en-têtes qui restent visibles. Un en-tête fixe garde la navigation accessible sur les pages longues, à condition d'être compact et de ne pas masquer le contenu.

Choisir une approche

Le bon choix part du visiteur, pas de la tendance du moment. Trois questions aident à trancher :

Que vient faire le visiteur ? S'il cherche une information pratique (horaires, prix, adresse), une grille bento ou un écran partagé la lui donnent immédiatement. S'il vient se faire une idée, l'éditorial et l'immersif construisent la confiance.
De quels contenus dispose-t-on ? L'immersif sans belles photos tombe à plat ; le minimal sans textes travaillés paraît vide.
Quelle image veut-on donner ? Rassurer, impressionner, surprendre : chaque approche porte un message avant même que le visiteur ait lu une ligne.

Une même entreprise peut d'ailleurs combiner deux approches : une ouverture immersive sur l'accueil, puis des pages de produits en écran partagé. L'essentiel est que les fondamentaux restent identiques partout : lisibilité, rapidité, navigation claire et formulaires courts.

Sources

← Toute la veille