La règle : bureau uniquement, et masqué sur mobile
L'erreur la plus courante est d'afficher le code aux utilisateurs de téléphone. Il ne peut pas être scanné, il prend de la hauteur d'écran, et il donne à la page un air négligé.
Affichez le code au-dessus du point de rupture tablette et masquez-le en dessous. C'est une seule media query et c'est la différence entre une fonctionnalité intelligente et un bug évident.
Ce que doit faire un code de site web
Tous les bons cas sont un relais, où l'étape suivante appartient réellement au téléphone :
- Se connecter sans rien taper. Scanner sur le bureau, confirmer sur le téléphone. L'explication de la connexion par QR détaille l'échange de jeton qui la sous-tend.
- Appairer un appareil. Décodeurs, tableaux de bord, bornes et écrans connectés, où taper un mot de passe relève de la torture.
- Installer l'application. Un seul code qui envoie les iPhone vers l'App Store et Android vers Play, via un code d'application intelligent.
- Continuer sur mobile. Un formulaire long, une carte d'embarquement, un billet ou une carte plus utile dans une poche que sur un moniteur.
- L'inscription à la double authentification, l'usage le plus répandu des QR codes sur le web, traité dans le guide des applications d'authentification.
- Payer depuis le téléphone, là où vivent les applications bancaires.
Les écrans se scannent différemment du papier
- Gardez le code affiché à 200 px ou plus. En dessous, les appareils photo de téléphone peinent avec la grille de pixels.
- Utilisez du noir pur sur blanc pur, sans dégradés ni teintes de marque derrière.
- Méfiez-vous du mode sombre. Un code inversé sur une interface sombre se scanne plus lentement sur de nombreux téléphones. Affichez le code sur une carte blanche même dans les thèmes sombres.
- N'animez pas la zone autour du code. Le mouvement met en échec l'autofocus de l'appareil photo.
- Les codes de connexion qui se régénèrent doivent afficher un compte à rebours visible et un bouton de régénération, pour qu'un code expiré soit compris plutôt que pris pour une panne.
Il existe d'autres subtilités au scan d'un code affiché sur un moniteur, dont le moirage lié au taux de rafraîchissement, dans le guide du scan depuis un écran.
Affichez toujours l'alternative
Chaque code sur un site web doit se trouver à côté d'un lien, d'une URL courte ou d'un code à saisir manuellement. Certains utilisateurs sont sur un ordinateur sans téléphone à portée, d'autres sont déjà sur un téléphone, et d'autres utilisent un lecteur d'écran qui ne peut pas décrire un carré.
Ce dernier point n'est pas optionnel. Un QR code est une image, et il lui faut une alternative textuelle qui porte la même information. Le guide du texte alternatif explique ce que cette alternative doit dire.
Quand ne pas en utiliser
- Sur une page réservée au mobile, où personne ne peut scanner
- Pour ouvrir une page sur le même appareil, ce qui est un lien avec des étapes en plus
- Comme décoration dans une image de bannière, ce qui apprend aux gens que vos codes ne servent à rien
- Pour remplacer un code copiable dans un parcours de support, où sélectionner du texte est plus rapide et plus accessible
Ajouter un QR code à une page web en 4 étapes
Vérifiez que c'est un vrai relais
Connexion, appairage, installation d'application, paiement ou poursuite sur mobile. Si l'étape suivante marche très bien sur le même appareil, utilisez un lien.
Affichez-le uniquement sur bureau
Masquez le code sous le point de rupture tablette. Les utilisateurs de téléphone ne peuvent pas scanner leur propre écran.
Dessinez-le à 200 px ou plus sur blanc
Noir pur sur blanc pur, aucun mouvement à proximité, et une carte blanche même en mode sombre.
Proposez toujours l'alternative textuelle
Une URL courte, un code à saisir et un vrai texte alternatif, pour ne pas exclure le clavier et les lecteurs d'écran.
Questions fréquentes
Un QR code doit-il apparaître sur la version mobile d'un site ?
Non. Un téléphone ne peut pas scanner son propre écran, le code est donc un poids mort. Masquez-le sous le point de rupture tablette et affichez un lien normal à la place.
Quelle taille doit faire un QR code à l'écran ?
Au moins 200 px, dessiné en noir pur sur blanc pur. En dessous, l'appareil photo peine avec la grille de pixels de l'écran, surtout sur les moniteurs haute densité.
Pourquoi les QR codes échouent-ils en mode sombre ?
Les codes inversés sont pris en charge par les téléphones récents mais se décodent nettement plus lentement. Afficher le code sur une carte blanche dans l'interface sombre supprime ce délai.
Quel est l'usage légitime le plus courant d'un QR code sur un site web ?
La connexion et l'appairage d'appareils, suivis de l'inscription à la double authentification. Dans ces trois cas, l'étape suivante appartient réellement au téléphone plutôt qu'à l'ordinateur.
Les QR codes sur les sites web posent-ils des problèmes d'accessibilité ?
Oui, quand ils sont le seul chemin. Un carré est invisible pour un lecteur d'écran : associez-le donc toujours à une URL courte, un code à saisir et un texte alternatif utile.
À lire ensuite
Besoin d'un autre type de QR code ? Parcourir les 48 types de QR codes sur la page d'accueil.