Le design commence après le premier regard

Pendant cinq ans chez MWM, j’ai dessiné ce qui fait télécharger une application : icônes, screenshots, vidéos de store, puis onboardings et paywalls. Un bon screenshot obtient une installation. Il ne dit rien de la première minute dans l’app, et c’est là que le design se joue.

Sur une page de store, une image dispose de quelques secondes. Elle doit faire croire à quelqu’un que l’application fera quelque chose pour lui. Cette croyance est fragile : elle sera vérifiée à l’ouverture, par des écrans moins photogéniques que ceux de la vitrine. C’est pourquoi je juge un visuel de store à l’écran qui le suit, pas seulement à son taux de conversion.

Une image de store est une promesse

Avant de lire, on estime une interface : sa densité, sa finition, son ton. En 2000, Noam Tractinsky, A. S. Katz et Dror Ikar ont montré que l’esthétique perçue d’un système influençait le jugement porté sur son utilisabilité, et que cet effet persistait après l’usage réel.1 Une belle image ouvre donc un crédit. Ce crédit se dépense dès le premier écran.

Une typographie annonce une hiérarchie, une couleur vive annonce une action, une animation annonce un lien entre deux états. Si ces signes changent de sens une fois l’application ouverte, l’utilisateur doit réapprendre ce que la vitrine venait de lui enseigner. La direction artistique d’une fiche store engage tout le parcours qui suit.

Vendre un usage, puis le tenir

Sur edjing Mix, déjà l’application de DJ la plus téléchargée au monde, j’ai vendu un usage plutôt qu’un outil. Le store promettait de mixer, même en débutant. L’onboarding faisait réussir un premier geste. L’offre d’abonnement mettait l’apprentissage en avant, avec DJ School. Chaque étape a été testée séparément, et chacune a confirmé le parti pris.

Sur Beat Maker Pro, le fil était un morceau que l’on reconnaît : présent dans les screenshots, il revenait dans l’onboarding. Sur Color Pop, l’icône comme la vidéo du store partaient d’un coloriage en cours, pour montrer le dessin avant le crayon. Trois produits, une même règle : la promesse de l’image se retrouve dans le premier geste.

Cette continuité ne se décide pas depuis le seul marketing. Sur Beat Maker Pro, la nouvelle série de screenshots, l’onboarding et le paywall ont été construits avec l’équipe produit : ce que le store montre doit exister dans l’application, au même endroit, avec le même vocabulaire.

Expliquer, mais à quel moment

Quand une conversion déçoit, le réflexe est d’ajouter du texte pour rassurer. Sur Flow, une application de méditation sonore, j’ai conçu une variante de paywall qui détaillait davantage la période d’essai gratuite. Testée, elle n’a pas amélioré la conversion de façon significative.

Sur Muzi, une application de pratique créative sur un marché très niche, le résultat allait dans l’autre sens. Le benchmark de sept applications de créativité avait fixé ce que les screenshots devaient rendre visible : des messages explicatifs, une preuve sociale, le suivi des habitudes, la quantité de contenu. J’ai construit deux variations qui expliquent avant de montrer, et les deux ont gagné.

Ma lecture : ces deux résultats ne se contredisent pas. Sur le store, la personne ne sait pas encore ce que fait l’application, et l’explication lui manque. Devant le paywall, elle a déjà essayé ; un paragraphe de plus peut éloigner son attention du bouton. Je n’en tire pas une loi, plutôt un ordre de travail : vérifier ce que la personne sait déjà à cet instant, avant de faire parler l’écran davantage.

Les tests ont leurs angles morts. Un A/B test de screenshots désigne une variante gagnante sans dire pourquoi elle gagne, ni si la promesse a été comprise. Les entretiens ont le défaut inverse : Nielsen Norman Group rappelle qu’une personne séduite par une interface lui pardonne des difficultés et décrit volontiers ce qu’elle a aimé, alors qu’elle vient d’hésiter. Il faut comparer ce qu’elle dit à ce qu’elle fait.2 Un chiffre indique un déplacement ; la suite du parcours, de l’essai à l’abonnement, aide à comprendre ce qui l’a produit.

Quatre questions par écran

Pour faire tenir la forme et l’usage, quatre questions suffisent. Chaque écran doit y répondre sans explication extérieure.

Où suis-je ?Le titre, la navigation et l’état courant donnent une position nette.
Que puis-je faire ?L’action principale se distingue sans que tout l’écran réclame l’attention.
Que vient-il de se passer ?Le système confirme l’action, le chargement, la réussite ou l’échec.
Comment continuer ?La prochaine étape et le moyen de revenir en arrière restent visibles.

Les réponses passent par la mise en page, les mots, les contrastes et le mouvement. Elles demandent rarement plus d’éléments ; elles demandent de choisir ce qui domine et ce qui peut attendre.

La direction artistique continue jusque dans les états que personne ne montre en présentation : un champ en erreur, une liste vide, un réseau lent, un focus clavier. Les WCAG 2.2 fixent des critères sur la visibilité du focus et sur la taille minimale de certaines cibles.3 Un contour de focus dessiné avec la même exigence que le reste appartient au langage graphique au lieu de le contredire.

Avant de livrer une série de screenshots, un contrôle simple : poser chaque image à côté de l’écran de l’application qu’elle annonce. Si l’écran ne tient pas la promesse, il faut corriger l’un des deux avant la mise en ligne, pas après le premier test.

Sources

Sources consultées le 12 mars 2026.