L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
4 façons d'utiliser de manière créative les icônes dans vos applications mobiles
L'utilisation d'icônes dans les applications mobiles n'a rien de nouveau. De l'icône de l'écran d'accueil au menu de navigation, ils font à peu près partie des applications que les concepteurs créent.
Ils présentent également de grands avantages:
- distractions minimisées,
- UI plus attrayantes,
- ] Autonomisation des utilisateurs à interagir facilement avec l'application,
- Élimination des barrières linguistiques,
- Amélioration de la reconnaissance de la marque.
Mais utilisons-nous les icônes du mieux possible ou existe-t-il des moyens d'améliorer l'UX mobile même plus loin avec l'iconographie? Aujourd'hui, je souhaite examiner différentes manières d'ajouter de manière créative des icônes ou des éléments semblables à des icônes à vos applications et leur apporter plus de vie (et d'engagement).
Tirer le meilleur parti des icônes
Les icônes sont des éléments de conception très utiles pour les interfaces mobiles. Bien que nous devions être prudents avec les icônes (comme nous assurer que les icônes de navigation sont toujours associées au texte et ne pas en utiliser autant que l'interface devient comme un casse-tête à résoudre), il y a quelques cas d'utilisation supplémentaires que je veux que vous preniez en compte :
1. Afficher des indices d'icônes de marque dans toute l'application
Les utilisateurs auront d'abord un aperçu de l'icône du logo de marque d'une application depuis l'App Store. Une fois installée, cette icône deviendra une présence persistante sur l'appareil intelligent de l'utilisateur, ce qui favorisera une plus grande notoriété de l'application.
Ce que j'ai remarqué avec de nombreuses applications, c'est que l'icône de la marque n'apparaît pas souvent au-delà ce point. Dans certains cas, c'est tout à fait logique. Une application ne ressemble pas à un site Web qui a besoin de cette ancre de logo stable afin que les utilisateurs puissent toujours accéder rapidement à "Domicile". Mais…
Je ne peux m'empêcher de penser que de petits éléments de marque partout pourraient ajouter une touche unique à l'expérience. Ils ne nuireaient pas à l’expérience. Au lieu de cela, ils apparaissaient en petits morceaux qui ajoutaient quelque chose en plus à l'expérience.
Un exemple que j'aime beaucoup est l'application CheapOair . Il s'agit du logo qui apparaît lorsqu'un utilisateur l'ouvre pour la première fois. C'est le même qui apparaît en haut du site Web correspondant:
Maintenant, si vous regardez la page de l'App Store pour CheapOair ou comment elle apparaît sur l'écran d'accueil d'un utilisateur, vous Je verrais que le logo complet n'est pas utilisé. À la place, les utilisateurs voient l'icône en forme de «O» en forme de bagage:
CheapOair dans l'App Store d'Apple ) ( Grand aperçu )C'est unique. C’est mémorable. Et cela fonctionne bien dans de petits espaces, comme le favicon de bureau ou sur des écrans mobiles plus petits.
Désormais, pour une application comme CheapOair qui regroupe les listes de voyages de différentes compagnies aériennes, hôtels, agences de location de voitures, etc. attendez-vous à un certain temps d'attente lorsque les utilisateurs se déplacent dans l'application. Et tandis que les concepteurs auraient pu utiliser une icône de chargement plus traditionnelle (comme le rouet ou la barre de progression), il utilise plutôt son icône de marque:
Lorsque les utilisateurs se déplacent entre les écrans ou recherchent des réservations de voyage, l'icône «O» leur tient compagnie. C'est une si petite chose, mais je pense que cela ajoute quelque chose en plus à cette expérience qui la rend plus mémorable pour les utilisateurs.
Un autre exemple que j'aime est ce que Hotels.com fait pour ses membres récompensés. .
L'icône Hotels.com «H» n'est pas vraiment présente lorsqu'un utilisateur est dans l'application, à l'exception de ses écrans de chargement (elle fait la même chose que CheapOair). Et c’est bien. Cela aide certainement à créer une interface plus sans distraction en cas de besoin tout en sauvegardant cette zone d'en-tête pour des informations plus utiles, comme le fil d'Ariane.
Cela dit, Hotels.com inclut une autre de ses icônes de marque dans l'application, mais c'est réservé aux membres récompenses.
Il s'agit de l'onglet «Récompenses» où les utilisateurs suivent le nombre de timbres qu'ils ont gagnés pour une nuit gratuite:
Les timbres ont la forme d'une lune. Cela ne fait pas officiellement partie de l'image de marque de Hotels.com, mais c'est une icône très reconnaissable pour ses membres de récompenses.
En raison de cette reconnaissance, son emplacement dans les pages de résultats de recherche d'hôtels est utile car il permet aux utilisateurs de faire défiler rapidement et de voir quels hôtels ils peuvent gagner un autre tampon avec:
Les utilisateurs prennent en compte de nombreux facteurs lors de la réservation d'une chambre d'hôtel, notamment le prix, la distance, la note moyenne des utilisateurs et bientôt. Mais plutôt que d'engloutir la liste principale avec ce détail supplémentaire qui ne concerne que les membres de récompenses, l'utilisation de l'icône et de son emplacement dans le coin inférieur gauche de l'image pour les hôtels éligibles est un bon choix.
Donc, même si vous n'avez pas envie d'utiliser le logo de la marque dans l'application (ou ne trouvez aucune raison de le faire), cet exemple prouve qu'il existe d'autres façons d'utiliser l'iconographie adjacente à la marque pour améliorer l'expérience.
2. Utiliser des icônes pour encourager plus de gestes et d'actions
L'une des clés pour fidéliser davantage d'utilisateurs d'applications est de leur donner une raison de s'y engager régulièrement. Et si vos utilisateurs ne se souviennent pas des gestes à utiliser lorsqu'ils sont dans l'application ou s'ils trouvent que l'interaction avec celle-ci est ennuyeuse, cela peut être une raison suffisante pour qu'ils cherchent des applications qui font un meilleur travail de attirer leur attention.
Même si vos utilisateurs n'ont aucun problème avec la façon dont les éléments attrayants leur sont présentés, que se passe-t-il si quelqu'un qu'ils connaissent suggère une application qu'ils préfèrent? Et ils voient à quel point ils aiment la présentation des différents éléments?
Quoi qu'il en soit, vous ne voulez pas leur donner une raison de se désintéresser ou de rechercher des pâturages plus verts. Et je pense que les icônes ajoutées aux gestes et aux cibles cliquables peuvent y contribuer.
Voici, par exemple, l'application Boomerang pour Gmail :
J'avais besoin d'un moyen de «mettre en pause» ma boîte de réception Gmail pendant la journée de travail (pour éviter les distractions) ainsi que dans mes heures de repos (pour m'empêcher de travailler). Bien qu'il existe un certain nombre d'outils de blocage des distractions disponibles, j'ai adoré la simplicité et l'élégance de celui-ci. J'ai particulièrement apprécié ce geste de tri.
Il n'est pas nécessaire d'ouvrir le message et d'utiliser la barre d'options pour sélectionner la bonne option. Lorsque des messages apparaissent dans ma boîte de réception, il ne faut pas plus d'une seconde pour balayer vers la gauche et agir en raison de la clarté de leur libellé. Et comme j'utilise cette application tous les jours, mon doigt sait automatiquement sur quelle icône faire feuilleter le message: archiver, marquer comme lu, Boomerang (pour un autre jour / heure), déplacer ou supprimer.
Encore une fois, si vous pouvez rendre engageant avec une application plus fluide – ce que, dans ce cas, j'attribue au geste complexe simplifié par des icônes reconnaissables – vous constaterez que les utilisateurs sont plus susceptibles de l'utiliser.
Votre application n'a pas besoin de faire glisser des gestes dans afin de jouer avec un design d'icône engageant. Duolingo par exemple, a donné vie à ses modules de langage grâce à ces icônes animées:
Lorsqu'un utilisateur clique sur un nouveau module, les détails du module et le bouton "Démarrer" ne sont pas la seule chose qu'il voit. L'icône qu'ils touchent prend vie pendant une seconde, comme l'homme qui court ou le seau rempli de peinture.
Dans ce cas, je pense que l'icône animée rend la leçon à venir moins intimidante. Cela donne le ton selon lequel, lorsque vous cliquez sur ce bouton, vous êtes sur le point de vivre une expérience agréable.
3. Donnez vie aux indicateurs de progression avec des icônes
Lorsque vous demandez aux utilisateurs d'effectuer des tâches dans votre application, vous voulez qu'ils se sentent motivés pour progresser à chaque étape ou étape.
Mais nous l'avons vu maintes et maintes fois avec des formulaires qui semblent prendre trop de temps à remplir ou qui en demandent trop aux utilisateurs. Si vous repoussez les limites de vos utilisateurs sans être transparent sur ce qui est impliqué ou combien de temps cela prendra, ils abandonneront complètement l'expérience.
Ainsi, lorsque vous avez des activités comme celles-ci dans votre application, vous attendez de certains utilisateurs pourraient trouver fastidieux, ennuyeux ou insurmontable, montrez-leur un indicateur de progrès pour les aider. Ce que j'aimerais vous suggérer, c'est d'aller plus loin et d'y ajouter une icône animée.
Vous en trouverez un exemple amusant dans le jeu Plants vs. Zombies : [19659060] Lorsque vous jouez à Plants vs. Zombies, la tête de zombie en haut indique la progression de l'utilisateur. (Source: Plants vs. Zombies )
Les joueurs ne se concentrent pas uniquement sur la pose de plantes pour lutter contre les zombies et défendre leur maison. Ils seraient également avisés de regarder l'indicateur de progression en haut. Au fur et à mesure que de nouvelles vagues de zombies atteignent leur pelouse, la tête de zombie se déplace de plus en plus.
Ce n'est pas tellement grave dans les premiers niveaux du jeu, mais il est utile d'avoir ce zombie tête en haut pour toujours leur rappeler
Les icônes de progression animées ne sont toutefois pas seulement utiles pour les jeux. Prenez l'application de santé mentale Sanvello par exemple:
Les utilisateurs de l'application définissent leurs propres objectifs de santé mentale et physique dans cet onglet. Chaque jour, ils sont chargés d’entrer et de noter leurs progrès sur chacun d’entre eux. S'ils peuvent tous les faire passer au vert, ils verront l'icône du cœur en haut non seulement se remplir de couleur verte, mais aussi briller.
C'est un petit changement dans l'interface utilisateur, mais c'est certainement celui qui, je pense, encouragerait votre utilisateurs à se connecter et à en faire plus avec votre application.
4. Transformez les éléments non-icône en icônes
Lorsque nous utilisons l'iconographie dans les applications, nous pensons presque immédiatement aux icônes standard que nous voyons d'une application à l'autre. Le menu hamburger. L'engrenage de réglages. La loupe de recherche. Même des icônes comme celles que nous avons vues ci-dessus sont à prévoir.
Bien que je reconnaisse que nous ne voulons pas en faire trop avec des icônes, car elles peuvent facilement encombrer un espace, qu'en est-il des applications surchargées de contenu? Les yeux et le cerveau de nos utilisateurs ne peuvent pas en prendre beaucoup avant d’abandonner la lecture et de commencer à parcourir la page.
C’est là que je pense que la transformation d’éléments sans icônes en icônes pourrait vraiment aider. Considérez-les comme des coupures visuelles au milieu de tout ce contenu. Ce n’est pas différent de ce que nous ferions pour mettre en forme une page sur un site Web, en donnant aux visiteurs quelque chose d’attrayant à regarder avant de se remettre à la lecture. Dans le cas des applications mobiles, je pense que cela peut également améliorer la compréhension de ce qui les attend.
Regardons quelques exemples, en commençant par BuzzFeed :
Avez-vous déjà lu quelque chose en ligne qui était si bon (ou peut-être même si mauvais) que vous aviez ] pour savoir qui l'a écrit? Pour la plupart, les publications en ligne mettent simplement une signature en haut et une courte biographie sous le message. BuzzFeed, cependant, donne à son auteur plus qu'une simple reconnaissance de nom. Il associe leur signature à un portrait iconisé.
C'est une excellente touche. Il indique aux lecteurs dès le départ qu'ils ont de vrais écrivains derrière cette pièce et leur permet de se connecter à l'écrivain à un niveau plus personnel.
Il est également trop facile pour ce détail de se perdre sur une page à cause du titre , sous-titres, minutes de lecture et autres métadonnées que les publications placent en haut. Je dirais qu'en termes de rendre un article plus attrayant et accueillant, même cette petite icône aide à préparer le terrain pour une expérience de lecture agréable.
Les applications de restauration pourraient probablement également en bénéficier. Seulement, dans ce cas, ce seraient des produits alimentaires et des produits iconisés. Comme ce que fait l'application SONIC Drive-in :
Il y avait une étude réalisée par l'Université de Durham sur le lien entre les images et la satisfaction avec une commande de nourriture. L'étude a examiné un certain nombre de variables, mais celle-ci est particulièrement pertinente par rapport à ce que nous examinons dans l'application SONIC:
«Notre recherche a révélé que si un restaurant souhaite utiliser des images et des invites visuelles sur son menu , cela doit être combiné avec des noms d'aliments couramment utilisés et «précis» pour accroître le pouvoir de commercialisation . Bien que cela puisse sembler une approche basique, les photos peuvent agir comme un renforcement positif pour les clients qui ont établi une connexion visuelle qui reflète le nom de ce plat. »
C'est exactement ce que fait SONIC dans ce qui précède exemple. Plutôt que de montrer une de leurs tasses remplie de boisson gazeuse ou de ne montrer aucune photo, il affiche les logos de la marque sous forme d'icônes à côté de chacun.
Ces marques sont si profondément ancrées dans la conscience du consommateur que cela facilitera le processus de commande beaucoup plus facile. Cela devrait également conduire à une plus grande satisfaction globale car il n'y a pas de surprise quant à ce qu'ils obtiennent.
Ensuite, il y a le cas d'utilisation pour les marchés, comme Rakuten :
Cette application ebates aide les utilisateurs à gagner de l'argent grâce à leurs achats en ligne.
Imaginez maintenant si cette application n'était qu'un texte -seulement la liste des offres. Bien sûr, il serait toujours utilisable et utile … mais les utilisateurs recourraient probablement à la barre de recherche pour trouver des offres plutôt que de lire ce qui est disponible. Et si vos utilisateurs ne peuvent trouver que ce qu'ils veulent grâce à la recherche, il y a quelque chose qui ne va pas – surtout si vous leur présentez les offres ou les produits les plus populaires du jour.
J'ai regardé autour de moi et je n'ai trouvé aucun marché de commerce électronique qui le fasse. quelque chose comme ça – associer un produit ou traiter avec une icône de marque – que je trouve surprenant. Bien que je réalise que les utilisateurs peuvent trier les listes par nom de marque, un logo de marque iconisé n'aiderait-il pas les utilisateurs à localiser plus facilement les articles qu'ils souhaitent acheter à partir des résultats de recherche?
Je suppose que le principal argument contre cela serait que les marchés poussent le leur produits (comme le fait Amazon). En affichant une icône de marque dans les résultats de recherche ou sur la page d'un produit, cela peut dissuader les utilisateurs d'acheter l'article s'il provient d'une marque moins connue et méconnaissable.
Pour des concepts comme Rakuten, cependant, cela fonctionne totalement et je ' Je vous conseille vivement de l'utiliser quand vous le pouvez.
Conclusion
Comme vous pouvez le voir par ces exemples, vous n'allez pas complètement réorganiser l'apparence de votre application mobile avec des icônes. Au lieu de cela, en ajoutant des touches très subtiles ici et là – que les utilisateurs sont tenus de remarquer – vous les impressionnerez par votre attention aux détails tout en rendant l'expérience globale plus agréable. Ceci, à son tour, peut conduire à des niveaux d'engagement plus élevés et des taux plus élevés de rétention des utilisateurs.
Lectures complémentaires sur SmashingMag:
(ra, il) Source link