Un bon site se reconnaît sur un téléphone.

Ouvrez-le sur un téléphone

Ce premier point n'est pas un point parmi d'autres. C'est celui qui commande tous les suivants, et il explique pourquoi cette liste ressemble à ce qu'elle est.

C'est là que sont vos visiteurs

Sur les sites que je suis, la part du trafic mobile va généralement de 80 à 90 %. J'ai un client qui plafonne à 98 %.

Ce n'est pas surprenant quand on y pense deux secondes. On communique sur les réseaux, on regarde les réseaux sur son téléphone, on clique depuis son téléphone. Tout le monde a un mobile dans la poche, tout le monde n'a pas un ordinateur allumé.

J'ai consacré un article entier à ce constat, donc je ne le refais pas ici. Retenez juste la conséquence pratique : votre site se juge sur l'écran où il est réellement vu.

Et pas sur votre téléphone à vous

L'erreur classique consiste à tester sur le dernier modèle sorti, grand écran, connexion parfaite. Tout va bien.

Testez sur un appareil de quatre ou cinq ans. Testez sur un petit écran, parce que c'est là que les mises en page cassent. Testez en 4G moyenne, pas sur votre réseau domestique. Et allez jusqu'au bout d'une demande, pas seulement sur la page d'accueil.

Le grand écran est facile, le petit est l'examen

C'est le cœur du sujet, et personne ne le formule.

Faire un site agréable sur un écran d'ordinateur n'est pas difficile : il y a de la place. On peut aligner trois colonnes, laisser respirer, mettre un grand visuel, tout tient.

Sur un téléphone, chaque élément doit gagner sa place contre les autres. C'est un exercice de contrainte, et c'est justement pour ça qu'il révèle tout.

Je préfère un site parfaitement fonctionnel sur mobile à un beau site sur ordinateur. Si je dois choisir, le choix est fait d'avance.

Sur un grand écran, tout passe. Un site ne se juge que là où il est vraiment regardé.

La barre du haut

Premier élément visible, première impression, et probablement l'endroit le plus négligé de tout le web. Trois choses s'y jouent.

Le logo, neuf fois sur dix inadapté

Je vois régulièrement des logos horizontaux, longs, détaillés, glissés tels quels dans une barre de téléphone. Résultat : soit c'est minuscule et illisible, soit ça déborde et ça casse l'alignement.

La solution est simple, et elle consiste à préparer deux versions :

• une version horizontale, avec le nom lisible, pour la barre du haut ;
• une version carrée ou ronde, réduite à l'essentiel, pour les petits espaces et les réseaux ;
• les deux en une seule couleur, pour fonctionner sur fond clair comme sur fond sombre.

Le réflexe le plus rentable, si vous n'en préparez qu'une : faites-la pour le mobile. Elle passera partout ailleurs, l'inverse n'est pas vrai. Et ne surinvestissez pas pour autant, un logo se règle en une heure.

Le menu, et le pouce

Deuxième source de friction, et elle se corrige en une ligne de règle.

Le même bouton doit ouvrir et fermer le menu, au même endroit. Je vois des sites où l'on clique en haut à droite pour ouvrir, et où la fermeture se trouve ailleurs, ou nulle part. Ce n'est pas un détail, c'est une demande d'effort.

Inspirez-vous des applications que vos visiteurs utilisent déjà toute la journée. Elles ont réglé ces questions il y a longtemps, avec des moyens que vous n'aurez jamais. Rien à deviner, rien à chercher, aucun déplacement inutile du pouce.

Le bouton qui appelle sans dire qui

Celui-là me frappe à chaque fois, parce qu'il coûte des appels à des entreprises qui n'en ont pas de trop.

Un bouton « Appelez-nous » qui déclenche directement la composition d'un numéro qu'on n'a jamais vu demande une confiance que personne n'a envie de donner. Le visiteur ne sait pas qui il appelle, ni si c'est surtaxé, ni s'il va tomber sur un standard.

L'humain n'aime pas les devinettes. Deux solutions, aussi simples l'une que l'autre : afficher le numéro en clair, ou faire ouvrir une fenêtre qui présente tous vos moyens de contact, numéro visible, messagerie, adresse. La personne choisit en connaissance de cause.

Faut-il une barre collante

Une barre collante, ou « sticky » dans le jargon, est une barre qui reste visible pendant qu'on fait défiler la page.

C'est utile quand l'action principale doit rester à portée en permanence. C'est gênant quand elle mange une part d'un écran déjà petit, ou quand elle se superpose au contenu qu'on essaie de lire.

Ça se décide donc au cas par cas, en regardant ce que fait votre page, et pas parce que c'est la mode.

La barre du haut est la première chose que voit un visiteur. C'est aussi celle que personne ne teste sur un petit écran.

Les boutons qui flottent, et le bas de l'écran

Deux problèmes distincts, mais qui se produisent au même endroit et finissent par se gêner mutuellement.

Les pastilles sur les côtés

Il fut un temps où l'on collait des boutons flottants partout : une pastille pour la messagerie, une pour le téléphone, une pour le devis, une pour les avis. Souvent de couleurs différentes, souvent superposées.

L'expérience est mauvaise, et pour des raisons cumulables :

• on ne sait plus où regarder, donc on ne clique nulle part ;
• elles recouvrent le contenu qu'on essaie de lire ;
• elles se chevauchent entre elles dès que l'écran rétrécit ;
• elles donnent une impression de bricolage, donc elles ne rassurent pas ;
• et elles finissent souvent par ne plus fonctionner du tout.

Multiplier les portes ne fait pas entrer plus de monde, c'est même l'inverse : une seule porte convertit mieux que six.

Ce que j'utilise de plus en plus à la place : une barre d'actions en bas de l'écran, à hauteur du pouce, avec deux ou trois entrées maximum. Exactement comme une application. Le geste est déjà connu, il ne s'apprend pas.

Le bandeau de consentement

Celui-là est obligatoire, donc on ne discute pas son existence. On discute son emplacement.

Le bandeau de consentement aux cookies, qu'on appelle parfois CMP dans le métier, s'affiche presque toujours en bas. Sur un ordinateur, aucun problème, il reste une bande fine dans un grand espace.

Sur un téléphone, il occupe parfois un tiers de l'écran, et il recouvre ce qui se trouve en bas de page. Le cas que je vois le plus souvent : il masque le lien vers les mentions légales. Autrement dit, l'obligation légale en cache une autre, et le visiteur ne peut plus consulter vos informations.

Le geste de vérification tient en une minute : ouvrez votre site sur un téléphone, sans accepter, et faites défiler jusqu'en bas. Regardez ce qui est recouvert. Vérifiez que rien de cliquable ne se retrouve sous autre chose.

Ce qui est caché derrière un autre élément n'existe pas. Et ce qui n'existe pas ne peut pas être cliqué.

Les textes

On arrive à l'erreur la plus répandue de toutes, et à celle qui se corrige le plus vite. Elle a une seule cause : les textes ont été écrits en regardant un grand écran.

Quatre lignes qui en font dix

Un paragraphe de quatre ou cinq lignes sur un ordinateur paraît court. Il donne même une impression de sérieux.

Le même paragraphe sur un téléphone en fait huit, dix, parfois douze. Il occupe la totalité de l'écran. Et un bloc qui remplit tout l'écran ne se lit pas, il se saute.

Ajoutez à ça les tailles de caractères mal réglées, les interlignes trop serrés, les marges qui collent au bord, et vous obtenez une page que personne ne lira jamais.

Je précise, parce que la nuance compte : je ne parle pas d'un article de blog. Dans un article, la lecture est attendue et les paragraphes longs sont légitimes. Je parle des pages où l'on cherche une information, une page d'accueil, une page de service.

Le texte s'écrit avec la mise en page

Voilà le point de méthode, et il vaut pour tout le monde.

Le fonctionnement habituel consiste à écrire les textes d'un côté, puis à les verser dans une maquette. Ça ne marche jamais. On se retrouve avec des blocs qui ne tiennent pas, des titres qui débordent, des colonnes déséquilibrées.

Personnellement je rédige d'abord, puis je retravaille en même temps que la mise en page. Ce sont deux mouvements, pas deux étapes séparées : un texte qui casse la page se raccourcit, une page qui étouffe un texte s'élargit.

Ce va-et-vient est exactement le travail de quelqu'un qui s'occupe de l'expérience utilisateur. Ce n'est ni de la rédaction ni du graphisme, c'est l'arbitrage entre les deux.

Et parfois, il faut bien le dire

Ne prenez pas ce qui précède à la lettre, ce serait une mauvaise lecture.

Il arrive qu'une information soit indispensable à la décision, et qu'elle prenne cinq lignes. Dans ce cas on les écrit, et on cherche autre chose : découper, hiérarchiser, mettre en avant une phrase, replier le reste.

Ce n'est pas tout noir ou tout blanc. Le travail consiste précisément à trouver la solution quand les deux exigences s'opposent, pas à appliquer une règle.

Un texte qui n'a pas été relu sur un téléphone n'a pas été relu.

Les images et les vidéos

Même logique, appliquée à ce qui coûte le plus cher à produire. Et c'est justement là que l'oubli se paie, parce qu'on ne refait pas un tournage.

Anticiper le cadrage, pas le recadrer après

Une image pensée pour un grand format horizontal ne se recadre pas proprement en vertical. Le sujet se retrouve coupé, décentré, ou perdu dans un décor qui n'avait aucune importance.

Ça se décide au moment de la commande, pas après. Quand vous travaillez avec un photographe, demandez explicitement des cadrages verticaux en plus des horizontaux. C'est presque gratuit sur place, et impossible à rattraper ensuite.

Et rappelez-vous que vos propres photos prises au téléphone font souvent le travail, à condition d'être cadrées en pensant à l'usage.

La vidéo, et l'exemple du Grand Bleu

Même problème, en plus coûteux. On commande une vidéo, elle arrive en format horizontal comme un film, et elle devient inexploitable sur la moitié des emplacements.

Un cas que j'assume complètement : sur le site du Grand Bleu, les vidéos disponibles venaient d'influenceurs, donc tournées en vertical. Plutôt que de les recadrer de force, on a fait l'inverse et on a construit l'affichage autour du vertical, y compris sur ordinateur.

Le résultat est cohérent, et surtout il correspond à ce que les gens regardent déjà. On ne demande pas à un créateur de tourner à l'horizontale, ça n'a aucun sens. On adapte la page.

Le poids, qui décide qui verra l'image

Dernier point sur les médias, plus technique mais direct dans ses effets.

Une image conçue pour un grand écran pèse lourd. Chargée telle quelle sur un téléphone en connexion moyenne, elle met plusieurs secondes à apparaître, et pendant ce temps la page saute pendant qu'on essaie de lire.

Prévoir des versions allégées pour les petits écrans n'est pas un raffinement de développeur. C'est ce qui décide si votre plus belle photo sera vue ou non.

Ce qui n'a pas été prévu au tournage ne se rattrape pas au montage.

Le survol n'existe pas

On arrive à l'erreur qui m'agace le plus, parce qu'elle est commise par des gens dont c'est le métier.

Il n'y a pas de souris sur un téléphone

Le survol, ou « hover », c'est l'effet qui se déclenche quand le curseur passe sur un élément : une information qui apparaît, une image qui se révèle, un menu qui se déplie.

Sur un écran tactile, il n'y a pas de curseur. Il n'y a que le doigt, et le doigt ne survole rien : il touche ou il ne touche pas.

Conséquence directe : tout ce qui est caché derrière un survol est invisible pour la majorité de vos visiteurs. Pas dégradé, pas moins lisible : absent.

Je le vois sur des sites réalisés par des agences installées, et je le dis comme je le pense : c'est une faute de métier. Le sujet est connu depuis quinze ans. J'en avais déjà touché un mot en parlant de ce qui fait fuir les visiteurs, mais il mérite d'être posé pour lui-même.

Le faux modernisme

Derrière cette erreur, il y a presque toujours la même intention : faire moderne. Des animations, des révélations, des éléments qui bougent au passage.

Sur l'écran du concepteur, c'est réussi et ça se montre bien. Sur un téléphone, ça ne se déclenche pas, ou ça se déclenche au mauvais moment, ou ça ralentit tout.

Regardez plutôt les entreprises qui vivent de leur taux de conversion. Amazon, Airbnb, les grandes plateformes que vos clients utilisent tous les jours. Vous n'y trouverez presque aucun effet gratuit. Elles vont à l'essentiel parce qu'elles mesurent tout, et que ce qui ne produit rien ne survit pas à l'examen.

L'effet spectaculaire coûte deux fois : une fois en développement, une fois en visiteurs perdus.

Un effet que la majorité de vos visiteurs ne peut pas déclencher n'est pas un effet. C'est une information supprimée.

Un écran, une section

Voici un principe que je m'applique systématiquement. Ce n'est pas une règle universelle, c'est un constat d'expérience, et il change beaucoup de choses.

Le principe

Sur mobile, un écran devrait correspondre à une idée. On fait défiler, on arrive sur un bloc, on comprend de quoi il s'agit, on continue.

Ce rythme donne une sensation de progression. On avance dans un contenu, chaque arrêt apporte quelque chose. À l'inverse, quand une seule section s'étire sur six écrans, on a l'impression d'être coincé dans une page qui ne parle que de ça.

Sauf quand on sait où on est

Il y a une exception, et elle est importante pour ne pas mal appliquer ce qui précède.

Sur une page de petites annonces, on fait défiler pendant des minutes sans que ça pose le moindre problème. Pourquoi ? Parce qu'on sait qu'il n'y a que ça sur la page. Le défilement long est le comportement attendu, il est même le service rendu.

Idem pour une page catégorie d'une boutique, ou pour une liste d'articles. Le long défilement est légitime quand la page ne fait qu'une chose.

Le problème apparaît sur les pages qui font plusieurs choses, à commencer par la page d'accueil.

La grille qui devient un couloir

Le cas concret, et il est partout.

Sur ordinateur, vous affichez une grille de trois colonnes sur trois rangées. Neuf éléments visibles d'un coup, c'est propre et lisible.

Passez au téléphone : les colonnes s'empilent, et vos neuf éléments deviennent une colonne unique de neuf blocs. Le visiteur doit faire défiler sur plusieurs écrans pour dépasser une section qui, sur ordinateur, tenait en un regard.

Les issues sont connues et faciles :

• afficher moins d'éléments sur mobile, trois plutôt que neuf ;
• passer en défilement horizontal, comme un carrousel, geste que tout le monde connaît ;
• regrouper, et renvoyer le reste vers une page dédiée.

Ce qui ne marche jamais, c'est de ne rien décider et de laisser la grille s'empiler toute seule. C'est pourtant le comportement par défaut de la plupart des outils.

Une mise en page ne se convertit pas du grand écran vers le petit. Elle se décide pour le petit, puis on l'étale.

Le bon sens, et pourquoi ça convertit

Tous ces points ont l'air techniques. Ils ne le sont pas vraiment : ils demandent surtout de regarder son propre site comme un inconnu le ferait.

Regardez ailleurs, c'est gratuit

Le meilleur exercice ne coûte rien : ouvrez les sites de vos concurrents depuis un téléphone, et allez jusqu'au bout d'un parcours. Puis faites la même chose dans un autre secteur que le vôtre, et sur les applications que vous utilisez tous les jours.

Vous verrez immédiatement ce qui est confortable et ce qui ne l'est pas. Vous n'avez pas besoin d'un vocabulaire de spécialiste pour sentir qu'un parcours résiste.

Une bonne expérience se paie en confiance

Il faut dire pourquoi tout ça compte, sinon ça reste une affaire de goût.

Un site fluide installe deux choses. Le professionnalisme : quelqu'un a réfléchi, donc l'entreprise est probablement sérieuse. Et la confiance : si le parcours fonctionne, le reste fonctionnera sans doute aussi.

À l'inverse, chaque friction crée une objection que vous n'aurez jamais l'occasion de traiter. La personne ne vous dira pas non, elle partira, et elle ne fera pas l'effort de revenir.

Un esprit confus dira toujours non

C'est la phrase que je retiens de toutes ces années, et elle résume la liste entière.

Quand quelqu'un doit réfléchir pour comprendre où cliquer, ce que vous vendez, ou combien ça coûte, il ne prend pas une mauvaise décision : il n'en prend aucune. Il repousse, et repousser ressemble beaucoup à un non.

Si vous faites réfléchir quelqu'un, vous l'avez perdu.

Faites le test vous-même, aujourd'hui, sur votre téléphone. Si un seul point de cette liste vous arrête, vous savez déjà par quoi commencer. Et si vous voulez un regard extérieur, écrivez-moi : je parcours votre site comme le ferait un de vos clients, et je vous dis ce qui bloque.