Les tabs sur mobile : du basique au swipe parfait

Ouvre n'importe quelle app sur ton téléphone. Instagram, Spotify, les réglages de ton iPhone — il y a des tabs partout. C'est un des patterns les plus universels du mobile.Open any app on your phone. Instagram, Spotify, your iPhone settings — tabs are everywhere. It's one of the most universal mobile patterns. Maintenant ouvre un site web au hasard sur ton téléphone. Si il y a des tabs, il y a de grandes chances que ce soit… deux boutons tristes qui changent le contenu instantanément. Pas de transition, pas de geste, pas de feedback. Ça fonctionne, mais ça ne vit pas.Now open a random website on your phone. If there are tabs, chances are they're… two sad buttons that change content instantly. No transition, no gesture, no feedback. It works, but it doesn't live. On va corriger ça. En 3 étapes, on va prendre un composant tabs basique et le transformer en quelque chose qui a le feeling d'une app native. Chaque étape est jouable directement — essaye sur ton téléphone pour sentir la différence.Let's fix that. In 3 steps, we'll take a basic tabs component and transform it into something that feels like a native app. Each step is playable right here — try it on your phone to feel the difference.

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.

Tous ces exemples ont un point commun : ils ignorent le ressenti de l'utilisateur. Ils fonctionnent techniquement, mais chaque interaction crée une micro-friction qui s'accumule.All these examples share one thing: they ignore the user's feeling. They work technically, but each interaction creates micro-friction that accumulates.

Étape 1 — Le minimum viableStep 1 — The minimum viable

Deux boutons, un contenu qui change au clic. C'est le tabs que 90% des sites web utilisent. Fonctionnellement, ça marche. Le contenu change, l'utilisateur sait où il est.Two buttons, content that changes on click. This is the tabs that 90% of websites use. Functionally, it works. Content changes, the user knows where they are. Mais compare avec ce que fait iOS quand tu switch d'onglet dans les Réglages, ou quand tu passes d'un tab à l'autre dans Spotify. La différence est flagrante, et elle tient en un mot : la continuité.But compare with what iOS does when you switch tabs in Settings, or when you swipe between tabs in Spotify. The difference is striking, and it comes down to one word: continuity.

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

Clique sur les tabs. Tu vois la différence ? Deux choses ont changé : l'indicateur glisse d'un tab à l'autre au lieu de se téléporter, et le contenu slide dans la direction du tab sélectionné.Click on the tabs. See the difference? Two things changed: the indicator slides from one tab to another instead of teleporting, and the content slides in the direction of the selected tab. C'est subtil, mais l'impact est énorme. Ton cerveau comprend maintenant la géographie de l'interface. Le mouvement te dit où chaque tab se situe sans que tu aies besoin de lire.It's subtle, but the impact is huge. Your brain now understands the interface's geography. The movement tells you where each tab is without needing to read.

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

Glisse le contenu vers la gauche ou la droite. Sur mobile, utilise ton doigt. Sur desktop, clique-glisse avec la souris. Ça y est — on est au niveau d'une app native.Swipe the content left or right. On mobile, use your finger. On desktop, click-drag with the mouse. There we go — we're at native app level.

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:

Le seuil de déclenchementThe trigger threshold

Le swipe ne change de tab que si tu as dépassé une certaine distance. En dessous, le contenu revient à sa place. Ce seuil évite les faux positifs — un scroll vertical avec un léger angle ne déclenche pas un changement de tab.The swipe only changes tab if you've passed a certain distance. Below that, the content snaps back. This threshold prevents false positives — a vertical scroll with a slight angle won't trigger a tab change.

Le feedback haptiqueHaptic feedback

Sur les appareils qui le supportent, une micro-vibration se déclenche quand le tab change. C'est imperceptible consciemment, mais ça renforce la sensation de « clic » physique. Comme le retour haptique quand tu baisses le volume sur un iPhone. Le système respecte aussi les préférences d'accessibilité de l'utilisateur.On devices that support it, a micro-vibration triggers when the tab changes. It's imperceptible consciously, but it reinforces the feeling of a physical 'click.' Like the haptic feedback when you lower the volume on an iPhone. The system also respects the user's accessibility preferences.

Le récapThe recap

Le rapport effort/impact est intéressant : l'étape 2 est celle qui en donne le plus pour le moins d'effort. Si tu n'as le temps que pour une amélioration, c'est celle-là. L'étape 3 est le graal mais n'a de sens que sur mobile.The effort/impact ratio is interesting: step 2 gives the most for the least effort. If you only have time for one improvement, that's the one. Step 3 is the holy grail but only makes sense on mobile.

ConclusionConclusion

La différence entre un site web « correct » et un site qui feel comme une app native tient à très peu de choses. Le web mobile a rattrapé les apps natives en termes de puissance brute. Ce qui manque encore souvent, c'est l'attention au ressenti.The difference between a 'correct' website and one that feels like a native app comes down to very little. The mobile web has caught up with native apps in terms of raw power. What's still often missing is attention to the feel. Les micro-interactions, le feedback haptique, la continuité spatiale — ces détails invisibles font qu'une interface donne envie d'être utilisée plutôt que simplement tolérée.Micro-interactions, haptic feedback, spatial continuity — those invisible details make an interface feel worth using rather than merely tolerated. Si tu retiens une seule chose : commence par l'étape 2. Un indicateur animé et une transition directionnelle, ça transforme l'expérience. Le swipe viendra naturellement après.If you take one thing away: start with step 2. An animated indicator and a directional transition transform the experience. The swipe will come naturally after.