Toujours en quête d’amélioration, j’aborde ici l’UX adaptative, un thème à la fois technique et stratégique, idéal pour un front-end développeur qui veut aller plus loin que le simple « design qui tient sur un petit écran ».
On a tous entendu mille fois parler de web responsive : c’est ce qui permet à une page de s’adapter à la taille de l’écran, que l’on soit sur un mobile, un ordi ou même une télé. C’est devenu la base.
Mais aujourd’hui, les utilisateurs attendent un peu plus qu’un menu qui se transforme en burger ou qu’un bloc qui passe sous un autre. Ce qu’ils veulent, c’est une expérience fluide, intuitive, adaptée à leur contexte. Et là, on entre dans le monde (trop peu exploré) de l’UX adaptative.
Responsive VS Adaptative : c’est quoi la diff ?
Le responsive, c’est surtout de la mise en page : grâce aux media queries, on ajuste les blocs, les marges, les grilles. L’interface change de forme, mais le contenu reste le même, et le comportement aussi.
L’UX adaptative, c’est différent : c’est une conception centrée sur l’utilisateur. On ne se contente pas d’ajuster la page, on repense aussi :
- Ce qu’on montre (ou pas),
- Comment on le montre,
- Et comment on interagit avec.
C’est pas juste “est-ce que ça rentre sur l’écran ?”, c’est plutôt “comment est-ce que je peux proposer la meilleure expérience possible dans cette situation précise ?”.
Imaginons une appli de météo :
- En responsive, l’interface change : les éléments passent en colonne sur mobile.
- En adaptative, elle détecte que tu es en extérieur, sur un écran petit, avec une connexion moyenne. Alors elle :
- Te montre juste l’info clé (température + icône),
- Utilise une interface tactile avec gros boutons,
- Active le mode sombre si ton système le préfère.
C’est la même page web, mais l’expérience utilisateur est totalement différente. Et franchement, c’est ce qu’on veut tous quand on utilise une appli : que ça marche bien pour nous, dans notre contexte.
Des exemples d’usage concrets
Sur un site e-commerce assez chargé, on peut imaginer proposer des filtres simplifiés sur mobile (moins de choix à disposition) ou encore masquer les carrousels qui peuvent être trop lourds pour les utilisateurs en 4G.
Dans le cas d’un outil professionnel type SaaS, on peut détecter si l’utilisateur se connecte depuis un PC et lui afficher un dashboard complet. Ou au contraire, lui restreindre la densité d’informations et se concentrer sur les indicateurs principaux lorsqu’il se connecte depuis son mobile.
Pour des sites de news, on peut proposer un mode de lecture allégé pour un utilisateur mobile, checker l’heure afin de passer en dark-mode et soigner les yeux de nos visiteurs.
Finalement avec ces quelques exemples, on se rend vite compte des conditions sur lesquels on va jouer :
- la détection du device (tv, pc, téléphone, …)
- l’état de la connexion internet
- les préférences visuelles (dark mode, reduce-motion ou la réduction de la quantité d’animations à l’écran)
- les données contextuelles (heure, la localisation)
- l’historique
Sans rentrer dans de l’IA, on pourrait faire de l’apprentissage de comportement et se dire “tiens cet utilisateur a l’habitude de venir à 18h sur mon site et de regarder telles pages. Est-ce que je pourrais pas ajuster sa page d’accueil ou son parcours pour lui faciliter la vie ?”
Concrètement, comment faire de l’UX adaptative ?
Pas besoin d’une magie noire. Il existe des commandes Javascript pour rendre les interfaces adaptatives :
- window.matchMedia() pour détecter les préférences système (dark mode, motion reduce…),
- navigator.connection pour voir si la connexion est lente
- des librairies comme react-device-detect pour cibler certains écrans ou types d’interactions
- Tailwind CSS propose également des variantes dark ou motion-safe afin d’adapter plus facilement l’affichage à certaines conditions spécifiques.
- et bien sûr, un peu de logique métier pour adapter le contenu affiché selon les cas.
Côté conception, il faut aussi réfléchir différemment : simplifier certains écrans, proposer des alternatives aux hovers, revoir les priorités de contenu selon le device.
SEO & UX adaptative : amis ou ennemis ?
C’est une question qu’on peut forcément se poser puisque si nos pages changent en fonction de tous les paramètres établis plus haut, quelle version on propose à Google en termes de SEO ? Car oui avec l’UX adaptative, on ne se contente pas de réorganiser des éléments mais plutôt d’en masquer ou d’en rajouter.
Comme le dit Pierre Calvet dont vous pouvez retrouver les articles sur le blog : « Le SEO amène des utilisateurs, l’UX contribue à les faire rester sur le site. Il ne sert à rien d’opposer l’un et l’autre, ce sont des sujets complémentaires. »
Le piège serait de servir deux expériences radicalement différentes : une version ultra-allégée pour l’utilisateur mobile, une version complète pour Googlebot.
Dans le pire des cas, ça peut être vu comme du cloaking (technique peu appréciée du moteur consistant à montrer des choses différentes aux moteurs et aux humains) pouvant être pénalisé par Google.
De manière générale, on ne va jamais construire des variantes complètes de sites en fonction du type d’appareil détecté. C’est fragile et souvent pénalisé. On va plutôt valoriser des détections à partir d’une base de page générique.
Google indexe ce qu’il peut voir au premier chargement. S’il doit exécuter du JavaScript pour accéder à un contenu critique, il peut l’ignorer ou mal le valoriser.
Exemple : Si la page météo n’affiche la température qu’après détection de la géolocalisation, et que ce n’est pas présent dans le DOM initial, Google peut ne jamais voir ce contenu.
Alors on va prévoir tous les blocs peu importe le device, et masquer via Javascript selon les conditions que l’on souhaite. Ça porte un nom : le progressive enhancement. La base de la page est complète, l’adaptation vient en bonus.
Conclusion
Le responsive est une bonne entrée en matière et déjà un premier signe que l’on propose une alternative à tous les types d’écrans.
Il faut aller plus loin qu’une simple proposition notamment quand une majorité de ses visiteurs vient du mobile, et s’intéresser aux différentes cas d’usage. L’UX adaptative, c’est une approche plus humaine, plus contextuelle. On pense à l’utilisateur, pas juste à la taille de son écran.
Pour son référencement web, on fera toutefois attention à ne pas tomber dans le piège de créer des versions différentes pour chaque cas d’usage et à privilégier davantage de l’amélioration progressive. C’est-à-dire adapter la page avec des conditions Javascript en fonction de l’environnement utilisateur.
