Page d'atterrissage de QR code : les règles du mobile-first

Pourquoi le mobile-first est décisif pour les QR codes

Tous les scans de QR codes se font sur un téléphone. Et pourtant, bien des pages d'atterrissage sont encore dessinées pour un écran d'ordinateur, puis réduites. La personne qui vient de scanner votre affiche est debout sur un trottoir, un seul pouce disponible, en données mobiles. Toutes les règles qui suivent partent de cette scène.

Les fondamentaux du mobile-first

Le contexte mobile

Les personnes qui scannent un QR code sont :

• En déplacement
• Pressées par le temps
• À une seule main
• Dans des conditions de lumière variables
• En données mobiles

Ce que cela implique pour le design

• Un chargement rapide, non négociable
• Une navigation au pouce
• Un texte très contrasté
• Un contenu ramassé
• Des appels à l'action explicites

L'optimisation de la vitesse de chargement

Les objectifs chiffrés

• First Contentful Paint : moins de 1,5 s
• Time to Interactive : moins de 3 s
• Largest Contentful Paint : moins de 2,5 s
• Cumulative Layout Shift : moins de 0,1

Les techniques d'accélération

1. Compressez les images

• Utilisez le format WebP
• Chargez en différé
• Dimensionnez correctement
• Servez depuis un CDN

1. Allégez le code

• Supprimez le CSS inutilisé
• Différez le JavaScript
• Intégrez le CSS critique en ligne
• Découpez le code

1. Mettez en cache à chaque étage

• Le cache navigateur
• Les service workers
• Le cache CDN
• Le cache d'API

Les principes de mise en page

La conception pour l'écran mobile

• Exploitez toute la largeur de l'écran
• Aucun défilement horizontal
• Une taille de texte adaptée
• Des espacements pensés pour le doigt

La hiérarchie du contenu

1. Un titre clair (ce que l'on obtient)
2. Une proposition de valeur (pourquoi ça compte)
3. L'appel à l'action principal (ce qu'il faut faire)
4. Le contenu de soutien (si nécessaire)

Les espaces blancs

• Des marges suffisantes
• De l'air autour des blocs
• Une séparation visuelle nette
• Des zones de focalisation

Les éléments pensés pour le doigt

Le design des boutons

• Des zones tactiles d'au moins 44 x 44 px
• Un espacement suffisant entre les boutons
• Un retour visuel net
• Des couleurs contrastées

Les champs de formulaire

• De grandes zones de saisie
• Le bon type de clavier
• La saisie automatique activée
• Des libellés explicites

La navigation

• Le menu hamburger pour les arborescences complexes
• Une barre basse pour les applications
• Des en-têtes fixes avec parcimonie
• Un retour arrière évident

La stratégie de contenu

Au-dessus de la ligne de flottaison

Les éléments à voir immédiatement :

• Un titre clair
• La proposition de valeur
• L'appel à l'action principal
• L'identification de la marque

La longueur du contenu

• Un texte court, parcourable d'un coup d'œil
• Des listes à puces plutôt que des paragraphes
• Une divulgation progressive
• Des sections dépliables

L'usage des médias

• Des images compressées
• La lecture automatique des vidéos avec prudence
• Le son coupé par défaut
• Des vignettes d'aperçu

La typographie

Les tailles de police

• Texte courant : 16 px minimum
• Titres : 24 à 32 px
• Boutons : 16 à 18 px
• Légendes : 14 px minimum

La lisibilité

• Des rapports de contraste élevés
• Interligne : 1,5 à 1,7
• Longueur de ligne : 45 à 75 caractères
• Une police sans empattement pour l'écran

La hiérarchie

• Des écarts visuels nets
• Un style constant
• Des titres qui disent quelque chose
• Une structure parcourable

Couleur et contraste

Les normes d'accessibilité

• WCAG AA au minimum (4,5:1)
• WCAG AAA de préférence (7:1)
• Compatible avec le daltonisme
• Testé en simulation de plein soleil

La cohérence de marque

• Gardez les couleurs de votre charte
• Ajustez-les pour la lisibilité
• Pensez au mode sombre
• Offrez une expérience homogène

L'optimisation des formulaires

Moins de champs

• Le strict minimum de champs obligatoires
• Un profilage progressif
• La connexion via les réseaux sociaux
• La prise en charge de la saisie automatique

Les types de saisie

• Le bon clavier pour chaque champ
• Des sélecteurs de date
• Une liste déroulante pour les longues listes
• Des boutons radio pour deux ou trois options

La validation

• Un retour en temps réel
• Des messages d'erreur clairs
• Une mise en évidence du champ fautif
• Un texte d'aide quand il le faut

Le protocole de test

Les tests sur appareils

• La priorité aux appareils réels
• Plusieurs tailles d'écran
• iOS et Android
• Différents navigateurs

Les tests de performance

• Google PageSpeed Insights
• Les audits Lighthouse
• WebPageTest
• La mesure sur utilisateurs réels

Les tests utilisateurs

• L'accomplissement des tâches
• Le délai avant conversion
• Les points de friction
• La collecte des retours

Les erreurs classiques

Erreur 1 : le design bureau rétréci

Le problème : réduire une maquette pensée pour le grand écran La solution : concevoir pour le mobile d'abord, enrichir ensuite pour le bureau

Erreur 2 : trop de contenu

Le problème : la surcharge d'informations La solution : hiérarchiser sans pitié et recourir à la divulgation progressive

Erreur 3 : un chargement lent

Le problème : les visiteurs abandonnent les pages lentes La solution : optimiser les images, alléger le code, passer par un CDN

Erreur 4 : des zones tactiles minuscules

Le problème : une expérience de tap frustrante La solution : 44 px minimum et des espacements généreux

L'optimisation de la conversion

Le design de l'appel à l'action

• Une seule action principale
• Une couleur contrastée
• Un texte orienté action
• Un emplacement bien visible

Les éléments de confiance

• Des badges de sécurité
• Des avis et des notes
• Le logo de la marque
• Des coordonnées

Urgence et rareté

• Des offres à durée limitée
• Des indicateurs de stock
• Des comptes à rebours
• La preuve sociale

La mise en place des statistiques

Les indicateurs clés

• Le taux de rebond
• Le temps passé sur la page
• La profondeur de défilement
• Le taux de clic sur l'appel à l'action
• Le taux de conversion

La mise en œuvre du suivi

• Google Analytics 4
• Les cartes de chaleur
• L'enregistrement de sessions
• Les tests A/B

Et en France ?

Trois contraintes propres au terrain français méritent un test avant le lancement.

La couverture réseau. La 4G couvre l'essentiel du territoire, mais les zones mal couvertes existent encore en milieu rural, en montagne, dans certains parkings souterrains et dans le métro entre deux stations. Une page légère, sans vidéo lancée d'office, s'ouvre même avec un signal faible.

Le bandeau cookies. Sur mobile, un bandeau conforme aux exigences de la CNIL peut occuper la moitié de l'écran. Testez votre page avec le bandeau affiché : le bouton principal doit rester visible et atteignable.

La langue. Pour un public en France, la page doit être en français. Si vous visez aussi les touristes, proposez un choix de langue visible dès l'ouverture, pas au fond d'un menu.

Testez-la dans ses conditions réelles

Sortez votre page d'atterrissage dehors. Ouvrez-la sur votre propre téléphone, en données mobiles, en plein jour, un café dans l'autre main. Tout ce qui est lent, illisible ou réclame deux mains constitue votre liste de corrections. Les scores Lighthouse sont utiles, mais le test du trottoir est celui que vos visiteurs font vraiment passer.