Les erreurs classiquesCommon mistakes
Avant de construire, regardons ce qu'il ne faut pas faire. Ces 4 anti-patterns sont partout sur le web. Essaye-les pour ressentir la friction.Before building, let's look at what not to do. These 4 anti-patterns are everywhere on the web. Try them to feel the friction.Anti-patternLe <select> mobile
Le dropdown cache les options. L'utilisateur ne sait pas combien de sections existent ni où il se trouve dans la navigation.
Anti-patternLe faux loading
Un délai artificiel de 600ms entre chaque tab. L'interface paraît lente alors que le contenu est déjà là. Frustrant.
Anti-patternLe saut de hauteur
Chaque tab a une hauteur différente — la page "saute" à chaque clic. Le lecteur perd sa position de scroll.
Anti-patternLes tabs invisibles
8 tabs dans un scroll horizontal sans indicateur. L'utilisateur ne sait pas qu'il y a d'autres options à droite.
Étape 1 — Le minimum viableStep 1 — The minimum viable
Étape 1 — Tabs basiques
Ce qui manqueWhat's missing
Quand le contenu apparaît instantanément, le cerveau doit reconstituer seul la relation spatiale entre les tabs. « Ok, j'étais là, maintenant je suis ici. » Ça demande un micro-effort cognitif à chaque clic.When content appears instantly, the brain has to reconstruct the spatial relationship between tabs on its own. 'Ok, I was here, now I'm there.' That requires a micro cognitive effort with every click. Dans une app native, une transition glissée te dit implicitement : « le contenu d'à côté est à côté. » Tu n'as pas besoin d'y penser — ton cerveau le comprend tout seul.In a native app, a sliding transition implicitly tells you: 'the content next door is next door.' You don't need to think about it — your brain gets it automatically.Étape 2 — Le polish qui change toutStep 2 — The polish that changes everything
Étape 2 — Animated tabs
L'indicateur animéThe animated indicator
C'est le petit rectangle qui suit le tab actif. Au lieu d'afficher un indicateur fixe sur chaque bouton, on en a un seul qui se déplace. Le cerveau le perçoit comme un objet physique qui glisse — pas comme un état qui change.It's the small rectangle that follows the active tab. Instead of showing a fixed indicator on each button, we have a single one that moves. The brain perceives it as a physical object sliding — not a state changing.La transition directionnelleThe directional transition
Quand tu cliques sur un tab à droite, le contenu sort vers la gauche et le nouveau entre par la droite. Et inversement. Le mouvement reflète la position spatiale — exactement ce que font les apps natives.When you click a tab to the right, the content exits left and the new one enters from the right. And vice versa. The movement reflects spatial position — exactly what native apps do.Pourquoi un ressort plutôt qu'une animation classique ?Why a spring rather than a classic animation?
Le mouvement a un petit rebond naturel. Imagine que tu pousses une porte : elle ne s'arrête pas net, elle dépasse un peu puis revient. C'est comme ça que les objets bougent dans le monde réel. Quand une interface reproduit cette physique, elle paraît plus réactive et plus naturelle.The movement has a natural little bounce. Imagine pushing a door: it doesn't stop dead, it overshoots slightly then comes back. That's how objects move in the real world. When an interface reproduces this physics, it feels more responsive and natural. Avec juste ces deux ajouts — indicateur glissant et transition directionnelle — on passe d'un composant « ça marche » à « ça feel bien ». Mais on n'est pas encore au niveau d'une app native. Il manque le geste.With just these two additions — sliding indicator and directional transition — we go from a 'it works' component to 'it feels good.' But we're not yet at native app level. The gesture is missing.Étape 3 — Le swipe, le graal mobileStep 3 — The swipe, the mobile holy grail
Étape 3 — Swipeable tabs
Code›
Design System
Un bon design system repose sur la cohérence. Couleurs, typographie, espacement — chaque token doit être intentionnel. L'objectif n'est pas de tout uniformiser, mais de créer un langage visuel partagé.
← Glisse pour naviguer →
Pourquoi le swipe est attenduWhy the swipe is expected
Si tu utilises un smartphone, ton pouce sait déjà swiper entre des tabs. C'est de la mémoire musculaire — Instagram, Twitter, Chrome, quasiment toutes les apps natives l'ont. Quand un site web ne le supporte pas, le pouce essaie, rien ne se passe, l'utilisateur doit chercher le bouton.If you use a smartphone, your thumb already knows how to swipe between tabs. It's muscle memory — Instagram, Twitter, Chrome, virtually all native apps have it. When a website doesn't support it, the thumb tries, nothing happens, the user has to find the button.Le feedback pendant le dragFeedback during the drag
Quand tu commences à glisser, trois effets visuels se déclenchent en même temps :When you start swiping, three visual effects trigger simultaneously:1
Le squeeze élastique
Le contenu se compresse horizontalement, comme si tu tirais sur un élastique. C'est subtil (le scale descend à 0.85) mais ça donne l'impression que l'interface résiste à ton geste.
2
L'opacité et le blur progressif
Plus tu glisses loin, plus le contenu s'estompe et se floute. Signal visuel : "tu es en train de quitter cette vue."
3
Les hints sur les bords
Des petits pills apparaissent sur les bords de l'écran avec le nom du tab adjacent. Un détail qu'on ne voit presque nulle part sur le web.