Taille de l’icône App Store : Exigences de fichier, conseils de conception et meilleures pratiques

Quelle est la bonne taille d’icône App Store ? Que devez-vous représenter dans votre icône ? Quelle différence cela fera-t-il ? Ce guide sur les icônes d’applications vous aidera à répondre à ces questions importantes, à offrir des conseils et à établir des liens vers des ressources.

Pourquoi les icônes d’applications sont importantes

La taille des icônes de l’App Store est minuscule. Lorsque les icônes apparaissent sur l’écran de votre smartphone, elles occupent chacune la largeur d’un pouce. Mais dans l’Apple App Store ou le Google Play Store, le design que vous emballez dans cette petite taille d’icône d’app store est tout.

Comme pour les couvertures de livres ou les images de listes de produits sur Amazon, les icônes d’applications mobiles aident vos clients potentiels à porter un jugement rapide en une fraction de seconde.

Avant de lire le titre ou la description de l’application, ils vont voir l’icône. L’icône de votre application mobile doit leur parler de votre application de manière attrayante, les incitant à en savoir plus. Une fois qu’une personne a cliqué sur votre icône, elle est plus susceptible d’installer votre application. Et c’est ce que vous voulez. En gros, l’icône de votre application est la porte d’entrée vers les installations.

C’est pourquoi il est crucial de bien faire les choses.

Une icône d’appli n’est pas un logo

Il pourrait sembler plus simple de simplement transférer le logo de votre marque sur votre icône d’appli et d’en rester là. Ne le faites pas. Une icône d’application n’est pas un logo. Un logo représente la marque derrière l’application, oui, mais l’icône d’application représente l’application elle-même.

De même que vous n’utiliseriez pas un logo à la place de l’image d’un produit sur une liste Amazon, vous ne devriez pas claquer un logo dans les exigences de taille de l’icône de la boutique d’applications et l’appeler une icône. Seules les méga-marques comme Starbucks ou Target peuvent s’en tirer avec cela.

Si vous êtes une marque décemment établie et bien connue, cependant, n’hésitez pas à ajouter votre logo à votre icône d’app d’une manière ou d’une autre, mais n’en faites pas le point central.

Dans l’exemple ci-dessous, le célèbre éditeur de livres de voyage Lonely Planet inclut son logo dans l’icône de l’appli Guides by Lonely Planet. Mais le logo n’est qu’un élément du design de l’appli. La bordure bleue apaisante fait ressortir le paysage urbain aux tons jaunes chauds, invitant le spectateur à sa prochaine aventure.

Le slogan indique que cette appli est une compilation de « guides de villes curatés », et l’icône de l’appli fait allusion à cette fonction.

Toute personne qui aime explorer de nouvelles villes et qui effectue une recherche en magasin sur les « guides de voyage » sera attirée par cette icône d’appli à la fois chaleureuse et excitante.

Comparez l’appli Lonely Planet à une autre appli de guide de voyage que vous trouverez sous la même recherche.

mTrip reprend le M de son logo, ajoute un fond vert et se donne le pouce pour poster l’icône sur l’App Store.

Mais l’icône ne dit rien sur ce que l’utilisateur obtient, et mTrip n’est pas assez connu pour être reconnaissable par une seule lettre. Netflix, ci-dessous, prend également la première lettre de son logo et l’utilise comme icône d’application, mais cette marque peut tirer son épingle du jeu parce que tout le monde sait ce qu’est Netflix et ce qu’il fait.

Maintenant que vous connaissez la différence entre un logo et une icône d’application, voyons les questions importantes que vous devez vous poser avant de commencer à concevoir.

Taille de l’icône d’app Store : 4 questions à se poser avant de créer une icône d’app

Il est vrai que l’icône de votre app doit attirer le plus de regards possible. Vous voulez qu’elle se démarque de toutes les icônes d’apps qui l’entourent, et dans un monde saturé d’apps, ce n’est pas une tâche facile.

Mais voici un secret : vous n’avez pas besoin de faire en sorte que l’icône de votre application plaise à tout le monde dans le monde. Au lieu de cela, concentrez-vous pour qu’elle plaise aux personnes de votre public cible.

Voici donc la première question à prendre en compte.

Question n°1 : quel est le public cible de cette appli ?

Votre appli est-elle destinée aux personnes qui aiment cuisiner ? Les parents avec de jeunes enfants ? Les amateurs de jeux comme Candy Crush et Angry Birds ? Les voyageurs ? Les musiciens en herbe ?

Puisque vous avez déjà construit l’appli, vous devriez connaître la réponse à cette question. Mais faites-en l’objet de la conception de l’icône de votre application, aussi.

Recherchez une phrase simple qui définit votre public cible.

Disons, par exemple, que votre appli apprend aux gens à jouer du piano. Une recherche pour « apprendre le piano » sur le Google Play store fait apparaître ces applications de premier plan.

Parmi les quatre icônes d’applications, sur laquelle cliqueriez-vous pour en savoir plus ?

Pour moi, un ancien pianiste qui aimerait réapprendre ce que je savais autrefois, celle-ci l’emporte. Sans hésiter.

Je ne trouve pas du tout l’icône de l’application Flowkey attrayante parce qu’elle ne me dit rien sur la façon de jouer du piano. (Encore une fois, c’est essentiellement un logo et rien de plus). Les deux autres présentent des touches de piano à l’intérieur de l’icône – attendu, peut-être, mais totalement bien.

Pour moi, Real Piano Teacher gagne car il montre des mains jouant du piano sur des touches étiquetées avec une feuille de musique devant la personne qui joue.

On ne peut pas apprendre à jouer du piano sans apprendre les notes, et apprendre à lire les notes de musique peut être aussi difficile qu’apprendre à lire une langue écrite. Rien que par son icône d’application, cette application promet d’aider les utilisateurs à apprendre à lire les notes, les accélérant ainsi vers la réalisation de leur rêve de jouer de belles mélodies par eux-mêmes.

Maintenant, voici le piège : vous, en tant que créateur d’application, devez vous demander ceci : comment puis-je rendre mon icône d’application encore meilleure que celle que je préfère (celle de Real Piano Teacher) ?

Concevez votre icône d’application pour qu’elle s’élève au-dessus de tous vos choix concurrentiels supérieurs.

Question n°2 : Quelles normes de conception actuelles dois-je suivre ?

Les tendances de conception changent tout le temps. Je suis là depuis assez longtemps pour me souvenir du plus récent changement de logo de Starbucks en 2011. Je me sentais un peu triste que la sirène se déplace, mais finalement, le design est redevenu synonyme de mon café préféré et je ne pouvais pas l’imaginer revenir à son design précédent.

Bien sûr, certaines personnes trouvent le nouveau logo trop dépouillé et plaisantent en disant qu’à terme, il ne sera plus qu’un point vert.

Blague à part, il est important de suivre les tendances actuelles en matière de design et comment elles se rapportent au design de votre application. Le Google Play Store et l’App Store publient tous deux des directives actualisées que vous pouvez (et devez) suivre.

Ces directives vous aident à créer une icône d’app avec la sensation la plus moderne et la plus accessible.

Le Material Design de Google offre un ensemble complet de lignes directrices qui couvrent les sujets suivants :

• Principes de conception, y compris l’expression de la marque et l’approche de la conception
• Formes de grille et de keyline
• Specs – une ventilation détaillée de l’anatomie des icônes d’app et des spécifications d’éclairage
• Traitements d’icônes : informations sur la couleur de l’app, la couche, le scoring, le chevauchement, l’accordéon et la distorsion

La conception matérielle vise à vous aider à créer une icône d’app avec une sensation tactile par le biais des pixels. C’est un truc complexe, mais ça vaut la peine de l’étudier.

Les directives d’interface humaine d’Apple se lisent d’une manière plus conviviale qui est également facile à suivre. Il offre dix conseils, tels que « Embrassez la simplicité » et « Testez votre icône contre différents fonds d’écran » ainsi que des instructions sur la façon de les suivre.

Après cela, Apple propose des informations sur la façon de :

• Formater les attributs de l’icône d’application
• Produire l’icône d’application dans plusieurs tailles différentes

• Présenter des icônes sélectionnables par l’utilisateur
• Créer des icônes de projecteurs, de paramètres et de notification pour iOS

Bien que les lignes directrices sur l’interface humaine soient plus courtes et à bien des égards plus simples que les lignes directrices sur le Material Design de Google, ces dernières offrent plus de conseils de conception.

Question #3 : Comment puis-je faire allusion à l’objectif de mon app ?

Comme nous l’avons vu dans le cas des applis pour apprendre à jouer du piano, communiquer l’objectif de votre app à votre public est d’une importance capitale.

Passons en revue un autre exemple. Disons que vous concevez une icône d’application pour une application qui aide les écrivains à organiser leurs pensées et leurs idées. Peut-être que votre appli fixe également des objectifs de nombre de mots et permet aux utilisateurs de suivre le temps d’écriture quotidien. En plus de cela, peut-être que votre application fournit des citations qui donnent un coup de fouet pour inciter les écrivains à écrire.

Alors, quel est votre public ?

Les écrivains, bien sûr. Les écrivains débutants. Romanciers. Indépendants. Journalistes. Chaque écrivain pourrait utiliser votre application!

Maintenant, jetez un coup d’œil à votre concurrence.

Sur l’App Store, cherchez « apps pour écrivains » et vous obtiendrez un éventail d’apps organisationnelles.

Focus sur les icônes des applications ici. D’abord, il y a une moustache avec un fond rouge. Si vous ne voyiez pas le titre, vous ne sauriez pas que cette app est même destinée aux écrivains. Même dans ce cas, on ne sait pas exactement ce que fait l’appli pour aider les écrivains à écrire.

L’icône d’appli suivante présente un fond blanc avec un… avion en papier rouge ? Une pointe de stylo ? Une tête de saumon ? Ce n’est pas super clair.

La dernière icône d’appli de notre petite étude présente un stylo ampoule sur un fond noir. Rien qu’en regardant l’icône, on a le sentiment que cette appli aidera les écrivains à formuler des idées et à maintenir cette inspiration jusqu’à ce qu’elle se transforme en livre, article ou poème.

Emulez cette icône, pas les deux premières. Faites allusion à la fonctionnalité qu’offre votre application.

Tenez compte du fait que l’allusion à la fonctionnalité doit avoir une apparence différente selon le type d’app.

Si vous avez créé une app utilitaire, par exemple – comme une calculatrice de pourboires ou une lampe de poche – l’icône de l’app doit donner à la personne qui navigue l’impression qu’elle utilise déjà l’app avant même de cliquer sur l’icône.

L’icône d’appli ci-dessous n’atteint pas cet objectif, et en plus, elle est encombrée et difficile à lire.

A l’inverse, l’icône de l’appli ci-dessous vous donne l’impression que vous pourriez accéder rapidement à cette calculatrice de pourboires car elle est pratiquement déjà ouverte.

Les icônes des jeux mobiles ont également besoin d’un traitement spécial. Votre objectif dans une icône d’application de jeu est de faire en sorte que le spectateur ait l’impression d’être déjà immergé dans le monde du jeu. Tout ce qu’ils doivent faire est de cliquer sur l’icône de l’application et ils obtiendront le rush de dopamine de jouer à quelque chose de nouveau, excitant et gratifiant.

Voici un excellent exemple d’une icône d’application qui accomplit cela:

Vous pouvez presque sentir le rush de descendre une colline bosselée juste en regardant cette icône d’application. Mais c’est un frisson délicieux, qui donne envie de jouer le jeu.

Un exemple pas si génial que ça ? Cette icône d’application pour un jeu de basket-ball.

Vous avez l’impression de… fixer un ballon de basket. Pas en train de jouer à un jeu. Ennuyeux!

Question #4 : Quelle est l’apparence de mon application ?

Bien que ce soit une bonne idée de faire preuve de créativité lors de la conception d’une icône d’application, vous ne voulez pas que l’interface de votre application et l’icône de l’application aient des textures différentes. Ils devraient fonctionner ensemble dans un système de conception sans faille.

Voici deux jeux de blocs de mots dont les icônes correspondent à l’aspect et à la sensation des jeux qu’ils représentent.

L’icône de Word Stacks présente les mêmes couleurs coucher de soleil et les mêmes blocs de mots trapus que le jeu lui-même.

L’icône d’application de Woody Block Puzzle est aussi boisée que le jeu lui-même.

Vous ne voulez pas amener votre public à penser que votre app est un type de jeu de bloc boisé mais révéler à la place un jeu de bloc de mots mousseux aux couleurs du coucher de soleil. Une image de marque incohérente est un mauvais design.

Comme l’écrit un blogueur sur 99designs, « si le design de votre appli est plat, votre icône doit l’être aussi. Si votre app contient du skeuomorphisme, votre icône devrait aussi avoir au moins un élément de skeuomorphisme. »

Faites en sorte que votre icône d’app reflète autant que possible les couleurs, les textures et la sensation de votre app.

Conseils à garder à l’esprit lors de la conception de l’icône de votre appli

Maintenant que vous avez répondu aux quatre questions essentielles de la conception d’une appli, il est temps de commencer à créer plusieurs variantes ou propositions de conception pour l’icône de votre appli. Commencez par une ébauche de conception de base, puis expérimentez avec différentes couleurs, bordures et graphiques.

Voici quelques conseils pour vous guider :

• Appuyez-vous sur seulement deux ou trois couleurs. Plus de trois et votre icône d’application commence à avoir l’air trop chargé.
• Évitez d’utiliser une vraie photographie. Vous pouvez toujours transformer une photographie en une illustration/image vectorielle, cependant.
• Pensez petit. L’icône de votre application peut vous sembler grande pendant que vous la concevez, mais elle est minuscule sur un écran d’iPhone ou d’Android. Assurez-vous que chaque élément est clair, même dans la plus petite forme de l’icône.
• Gardez les mots pour le titre et l’accroche. Une icône d’application est destinée à avoir un impact visuel. Vous pouvez dire ce que vous devez dire en mots sur le titre, l’accroche et la description de l’application.
• Respectez toujours les exigences et les directives d’Apple et de Google en matière de taille des icônes des app stores. Vous pouvez trouver les exigences de taille de Google Play ici et celles de l’App Store d’Apple ici. N’oubliez pas que vous devrez créer plusieurs versions de l’icône de votre application pour chaque magasin. Notez également que même si l’App Store de l’iPhone présente des coins arrondis, vous devez soumettre tous vos fichiers d’application sous forme carrée. Le système d’Apple arrondira les coins pour vous.

Une fois que vous avez deux ou trois icônes d’application potentielles parmi lesquelles choisir, il est temps de passer à l’étape la plus importante de votre parcours de création d’icônes d’application : le split-testing de vos icônes pour savoir ce que pense votre public cible.

Au delà de la taille des icônes de l’App Store : le split-testing des icônes d’app sur PickFu

La meilleure façon de savoir ce que votre public cible pense de votre icône d’app est de faire un split-test sur PickFu avant de publier réellement votre fiche d’app sur le Google Play Store ou l’App Store. Bien sûr, vous pourriez faire un test A/B in-app et lancer plusieurs variations sur le magasin lui-même, mais c’est un processus lent qui peut aspirer votre temps et votre argent.

En effectuant un test fractionné auprès d’un pool de répondants sur PickFu avant de publier votre icône d’application en direct, vous obtenez les commentaires dont vous avez besoin sans perdre d’argent dans le processus.

Il ne faut que quelques minutes pour mettre en place un sondage sur PickFu. Vous vous souvenez que j’ai dit que le ciblage de l’audience est crucial ? PickFu rend cela facile pour vous. Vous pouvez cibler les membres du public par appareil iOS ou Android, s’ils sont des joueurs mobiles, et combien ils ont dépensé dans l’App Store, parmi de nombreux autres traits utiles.

Un développeur d’applications a récemment pris PickFu pour tester entre deux icônes pour une application de rencontre.

La première icône montre le profil rose d’une femme tenant un téléphone, le titre de l’app en deux couleurs différentes, et un fond rougeâtre et orange. En tout, cette icône d’appli présente environ six couleurs différentes.

La deuxième option élimine la femme, conserve un fond rouge orangé plus épuré et laisse les mots, mais en blanc avec un petit cœur rentré dans le creux de la lettre M. Cette icône d’appli présente seulement trois couleurs.

Les répondants ont massivement voté en faveur de l’option B, plus simple et plus propre. Contrairement à un test A/B en direct traditionnel, les répondants de PickFu vous donnent des commentaires écrits détaillés. Nous pouvons donc voir exactement pourquoi l’option B a gagné.

Tout d’abord, les répondants ont apprécié l’aspect plus simple et plus professionnel de l’option B, en disant des choses comme :  » J’aime juste la simplicité de celle-ci et elle ne met pas en avant un seul sexe pour l’utilisation  » et  » Je n’aime vraiment pas la couleur violette/rose vive de l’option A – c’est vraiment dur pour les yeux. « 

Heureusement, le développeur de l’application a opté pour la deuxième icône d’application, qui est beaucoup plus susceptible d’attirer des utilisateurs potentiels que l’option A.