Idées de QR code esthétique : ce que coûte chaque style

Les règles sont déjà rassemblées ailleurs sur ce site : les bonnes pratiques de design d'un QR code détaillent le contraste, le calcul de la taille, la limite du logo et les tests, et rien de tout cela n'est répété ici. Cet article traite de l'autre moitié : à quoi un code peut vraiment ressembler, et ce que chaque style vous coûte.

Ce que chaque idée dépense

Chaque choix décoratif puise dans la même réserve, autant donc la nommer avant de commencer à dépenser.

Un décodeur fait deux travaux distincts. Il trouve d'abord le code, en balayant l'image à la recherche des trois carrés d'angle et de leur enchaînement caractéristique de sombre et de clair, dans des proportions proches de 1:1:3:1:1. Puis il lit le code, en échantillonnant la grille et en réparant ce qu'il a mal vu grâce aux données de correction d'erreurs inscrites dans le symbole. Le premier travail est tout ou rien : si la détection échoue, rien d'autre ne se produit, et aucune quantité de taille ou de lumière ne le rattrape. Le second est un budget : une proportion bornée des modules peut être fausse et le résultat rester juste.

Les idées décoratives se répartissent donc en deux classes. Celles qui touchent aux carrés d'angle ou à la zone de silence parient sur la détection, et c'est la classe risquée. Celles qui rendent seulement les modules plus difficiles à lire tirent sur le budget de réparation, ce qui se supporte jusqu'au moment où cela ne se supporte plus. Dans notre générateur, la correction d'erreurs est fixée au niveau le plus élevé, donc le budget dont vous disposez est déjà le plus large que le format offre et il n'y a plus rien à ajouter ensuite. Dépensez-le sur une seule idée plutôt que sur trois.

Forme des modules et style des yeux

Le changement le moins cher au rendement visuel le plus élevé, c'est la forme des modules. Les carrés arrondis ne coûtent presque rien : le centre du module, là où un décodeur échantillonne, reste franchement sombre, et les coins perdus ne portent rien. Les points coûtent davantage. Un cercle inscrit dans une cellule carrée a une surface d'encre nettement moindre, si bien qu'aux petites tailles et sur un papier absorbant le contraste effectif baisse, et qu'une suite de modules sombres voisins, qu'un lecteur attend comme une barre continue, lui arrive en pointillé. Sans problème sur un écran à taille généreuse. Risqué sur une carte de visite.

Les styles d'yeux, c'est-à-dire les trois carrés d'angle, sont l'autre moitié de la même décision et considérablement plus dangereux. C'est de la proportion entre l'anneau et le centre que dépend la détection. Un cadre extérieur arrondi avec un centre arrondi conserve ces proportions et se lit sans mal. Un œil redessiné en filet fin, en tache molle, en marque de logo ou en feuille change les longueurs que le détecteur mesure, et quand la détection échoue le symptôme est qu'il ne se passe rien du tout, ce que les graphistes prennent par habitude pour une mauvaise impression. La même défaillance en tout ou rien revient avec les codes inversés, et le diagnostic est identique : un code qui n'est pas trouvé n'est pas lu.

Deux teintes en travers du corps

Un dégradé sur les modules, ou une coupe où la moitié haute est d'une couleur et la moitié basse d'une autre, est l'un des rares gestes purement décoratifs qui peuvent être presque gratuits. La condition est étroite et absolue : les deux extrémités doivent rester franchement sombres face au fond. Les graphistes échouent du côté pâle, là où le dégradé s'achève sur un demi-ton qui paraît très bien sur un moniteur lumineux et se retrouve trop proche de la valeur du fond une fois que le décodeur a jeté la couleur.

C'est cette dernière proposition qu'il faut retenir. Le seuillage écarte la teinte et garde la clarté, donc un bleu-vert saturé et un orange saturé de même clarté sont une seule et même couleur pour un lecteur, et un corps bicolore qui vous paraît très contrasté peut être presque plat pour le décodeur. Les règles de contraste donnent les seuils face auxquels concevoir. La version en cinq secondes : convertissez le code en niveaux de gris et regardez-le. Si vous avez du mal à séparer les modules du fond là, aucun téléphone n'y arrivera non plus.

Un code dessiné dans une illustration

C'est l'idée que les gens veulent le plus et préparent le moins. Les modules deviennent des objets : grains de café, feuilles, étoiles, petites briques, un banc de poissons nageant en formation. Bien menée, c'est la chose la plus mémorable de la page.

Elle coûte le budget de réparation, et elle en coûte plus qu'un logo. Un logo est une seule tache de dégâts contiguë au milieu, soit l'endroit le moins cher où la placer, et le plafond de taille d'un logo explique pourquoi le centre est bon marché. Une illustration répartit au contraire de petites erreurs partout : un grain à la forme un peu fausse, une feuille dont la tige empiète sur une cellule claire, un contour qui amincit le bord d'un module. Des dégâts éparpillés sur toute la grille peuvent épuiser le budget en ayant fait perdre moins d'encre au total qu'un seul logo central n'en aurait coûté.

Deux habitudes évitent l'effondrement. Ne dessinez qu'à l'intérieur de la matrice, jamais dans la zone libre autour d'elle. Et gardez l'illustration expressive sur les bords et littérale au milieu : laissez les anneaux extérieurs porter le caractère, et ne touchez pas du tout aux carrés d'angle ni aux lignes de synchronisation.

Un code en motif, et un code dans une forme

Deux idées de mise en page apparentées, qui portent toutes deux sur le champ plutôt que sur les modules.

Répéter un code en motif de fond a un excellent rendu sur la papeterie et les emballages, et cela ne fonctionne que si le vrai code s'en détache. La construction la plus sûre est un panneau clair uni encastré dans le motif, portant un code unique à pleine taille avec sa marge intacte, le motif se comportant en décor autour de lui. Un motif qui vient jusqu'au symbole tend au détecteur un champ plein de quasi-réussites à éprouver, ce qui coûte au mieux du temps de décodage.

Poser un code dans une forme, un cercle, un hexagone, un écusson à ruban, ne pose pas de problème à une mesure près. Le bord intérieur de la forme doit rester à quatre modules de la matrice. La norme en demande quatre ; la marge par défaut de notre générateur est de deux, et le curseur, dans l'onglet couleurs de l'étape Design, monte jusqu'à huit : relevez-le donc avant de dessiner un cadre autour de quoi que ce soit. Ce qui mange une zone de silence raconte comment ce dégagement disparaît discrètement en maquette et à l'impression.

Se conformer à une palette de marque

Le réflexe est de prendre la couleur signature de la marque pour les modules. Cette couleur est en général un demi-ton, choisi pour bien tenir à côté d'un texte blanc, et un demi-ton est précisément ce avec quoi un décodeur se débat.

Prenez la couleur la plus sombre de la palette pour les modules et la plus claire pour le fond, même s'il s'agit de couleurs secondaires plutôt que des vedettes. Le code se lit toujours comme la marque, parce que le rapport de palette survit, et il se lit aussi comme un code. Si la palette n'a aucun membre réellement sombre, empruntez un presque-noir pour la matrice et laissez la couleur de marque vivre dans le cadre, dans l'appel à l'action ou dans un motif autour du symbole. Un cadre est gratuit. La matrice, non.

Et en France ?

Un code esthétique s'accompagne presque toujours d'un appel à l'action, « Scannez pour découvrir », écrit dans les couleurs de la marque. Ce texte doit rester lisible par tous. Le référentiel d'accessibilité utilisé en France, le RGAA, reprend le seuil des normes internationales : un contraste d'au moins 4,5 pour 1 entre un texte courant et son fond.

Un beau dégradé pastel derrière une phrase gris clair passe rarement ce seuil. Vérifiez le contraste de l'appel à l'action avec un outil gratuit de mesure, au même titre que la lisibilité du code : un visiteur qui ne comprend pas ce qu'il va trouver ne scanne pas, aussi joli que soit le motif.

Là où l'idée rencontre l'imprimeur

Tout ce qui précède a été jugé sur un écran de quatre cents pixels de large, alors que l'objet fini, lui, existera ailleurs, dans une autre matière et à une autre échelle. C'est de cet écart que naissent la plupart des mauvaises surprises, et c'est pourquoi trois vérifications s'imposent avant de lancer la moindre impression, chacune revenant bien moins cher qu'un retirage.

Imprimez à la taille finale sur le support final, pas sur le laser du bureau à l'échelle qui tient dans la page. Regardez le résultat en niveaux de gris. Et flashez-le avec le plus vieux téléphone de la maison, depuis la distance à laquelle les gens se tiendront vraiment.

Si l'une de ces vérifications échoue, défaites la dernière idée ajoutée plutôt que d'ajuster tout à la fois, car la décoration ajoutée en dernier est presque toujours celle qui a cassé le code. Régler directement les couleurs et les formes prend deux minutes, ce qui veut dire que le flux de travail honnête consiste à produire trois versions et à laisser le plus vieux téléphone du bureau choisir entre elles.