Catégories
Plugin et site web

4 façons d'utiliser de manière créative les icônes dans vos applications mobiles – Smashing Magazine

A propos de l'auteur

Suzanne Scacca est une ancienne implémentatrice, formatrice et responsable d'agence WordPress qui travaille maintenant en tant que rédactrice indépendante. Elle se spécialise dans l'artisanat marketing, web…
Plus à propos
Suzanne
Scacca

Les icônes ont longtemps occupé une place importante dans la conception des applications mobiles. Mais au-delà de leur utilisation pour créer des cibles tactiles plus grandes et plus attrayantes, il existe d'autres moyens pour les concepteurs d'applications mobiles d'utiliser ces petits éléments pour rendre une application plus attrayante. Cet article explorera quatre façons de procéder.

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 intégrante des applications créées par les concepteurs.

Ils présentent également de grands avantages:

  • Distractions minimisées,
  • Des interfaces utilisateur plus attractives,
  • Autonomisation des utilisateurs pour 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 que nous pouvons ou existe-t-il des moyens d'améliorer encore plus l'UX mobile avec l'iconographie? Aujourd'hui, je souhaite examiner un certain nombre de façons dont vous pouvez ajouter de manière créative des icônes ou des éléments de type icône à vos applications et leur apporter plus de vie (et d'engagement) dans le processus.

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 (par exemple, nous assurer que les icônes de navigation sont toujours associées au texte et ne pas en utiliser autant que l'interface devienne 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 permanente 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, cependant, c'est que l'icône de la marque n'apparaît pas souvent au-delà de 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 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 de 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:

Écran de démarrage de l'application mobile CheapOair avec logo
Les utilisateurs qui ouvrent l'application CheapOair sont accueillis par ce logo et cet écran de démarrage. (Source de l'image: CheapOair) (Grand aperçu)

Maintenant, si vous regardiez la page de l'App Store pour CheapOair ou comment elle apparaît sur l'écran d'accueil d'un utilisateur, vous verrez que le logo complet n'est pas utilisé. À la place, les utilisateurs voient l'icône «O» en forme de bagage:

Liste de l'App Store d'Apple pour CheapOair
Liste des applications mobiles de CheapOair dans l'App Store d'Apple. (Source de l'image: CheapOair dans l'App Store d'Apple) (Grand aperçu)

C’est unique. C’est mémorable. Et cela fonctionne bien dans les petits espaces, comme le favicon de bureau ou sur les petits écrans mobiles.

Désormais, pour une application telle que CheapOair qui regroupe les listes de voyages de différentes compagnies aériennes, hôtels, agences de location de voitures, etc., il est naturel de s'attendre à un certain décalage lorsque les utilisateurs se déplacent dans l'application. Et si les concepteurs auraient pu utiliser une icône de chargement plus traditionnelle (comme la roue qui tourne ou la barre de progression), elle utilise plutôt son icône de marque:

Un aperçu de la façon dont l'icône «O» de CheapOair est devenue une partie de l'expérience in-app. (Paquet source: CheapOair)

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 de plus à cette expérience qui la rend plus mémorable pour les utilisateurs.

Un autre exemple que j'aime beaucoup est ce que fait Hotels.com pour ses membres récompensés.

L'icône Hotels.com «H» n'est pas vraiment présente lorsqu'un utilisateur se trouve 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 exempte de distraction en cas de besoin tout en enregistrant 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, uniquement réservée aux membres Rewards.

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:

Onglet «Récompenses» de l'application mobile Hotels.com avec des tampons de nuit d'hôtel
Les utilisateurs de l'application Hotels.com suivent leurs tampons accumulés dans l'onglet «Récompenses». (Source de l'image: Hotels.com) (Grand aperçu)

Les timbres ont la forme d'une lune. Cela ne fait pas officiellement partie de la marque Hotels.com, mais c'est une icône très reconnaissable pour ses membres 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 avec quels hôtels ils peuvent gagner un autre tampon:

Résultats Hotels.com pour les hôtels au Vermont - Les nuits de récompenses sont représentées par une petite icône de lune
Les utilisateurs de l'application Hotels.com voient une petite icône de lune lorsque les hôtels sont comptabilisés dans le total de leurs récompenses. (Source de l'image: Hotels.com) (Grand aperçu)

Lors de la réservation d'une chambre d'hôtel, les utilisateurs prennent en compte de nombreux facteurs différents, notamment le prix, la distance, la note moyenne des utilisateurs, etc. Mais plutôt que d'engloutir la liste principale avec ces détails supplémentaires qui ne concernent 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.

Ainsi, 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. Utilisez 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'engager régulièrement avec elle. 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 capter 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 une personne qu'ils connaissent leur suggère une application qu'ils préfèrent? Et ils voient à quel point ils aiment la présentation des différents éléments?

Dans tous les cas, 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:

Gestes de l'application Boomerang pour Gmail pour trier les e-mails
Un exemple de la façon dont Boomerang pour Gmail utilise des gestes avec des icônes dans l'application mobile. (Source de l'image: Boomerang pour Gmail) (Grand aperçu)

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 pendant mes heures creuses (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 parce que j'utilise cette application tous les jours, mon doigt sait automatiquement sur quelle icône envoyer le message: archiver, marquer comme lu, Boomerang (pour un autre jour / heure), déplacer ou supprimer.

Encore une fois, si vous pouvez rendre l'interaction 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 pour jouer avec un design d'icône attrayant. Duolingo, par exemple, a donné vie à ses modules de langage grâce à ces icônes animées:

L'application Duolingo utilise des icônes de module de langue animées. (Paquet source: Duolingo)

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 prendra 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 que, 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 reprises avec des formulaires qui semblent prendre trop de temps à remplir ou en demander 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 que vous pensez que certains utilisateurs pourraient trouver fastidieuses, ennuyeuses ou insurmontables, montrez-leur un indicateur de progression pour les aider. Ce que je voudrais suggérer, c'est que vous alliez plus loin et que vous y ajoutiez une icône animée.

Vous en trouverez un exemple amusant dans le jeu Plants vs. Zombies:

Lorsque vous jouez à Plants vs. Zombies, la tête de zombie en haut indique la progression de l'utilisateur. (Source: Plantes 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. Alors que de nouvelles vagues de zombies atteignent leur pelouse, la tête de zombie se déplace de plus en plus loin.

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 lui rappeler ce qui va se passer quand il se sent dépassé et se demande à quel point il doit encore faire face.

Les icônes de progression animées ne sont cependant pas seulement utiles pour les jeux. Prenons par exemple l'application de santé mentale Sanvello:

Les utilisateurs de Sanvello atteignent leurs objectifs et regardent l'icône du cœur se remplir. (Paquet source: Sanvello)

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 en forme de cœur en haut non seulement se remplir de couleur verte, mais briller.

Il s’agit d’une petite modification de l’interface utilisateur, mais c’est certainement une modification qui, je pense, encouragerait vos utilisateurs à se connecter et à en faire plus avec votre application.

4. Transformez les éléments non iconiques 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 les éléments non-icône transformés en icônes pourraient 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.

Examinons quelques exemples, en commençant par BuzzFeed:

L'application mobile BuzzFeed comprend l'icône de l'auteur en haut de l'article
BuzzFeed inclut une petite icône d'auteur en haut de chaque article. (Source de l'image: BuzzFeed) (Grand aperçu)

Avez-vous déjà lu quelque chose en ligne qui était si bon (ou peut-être même si mauvais) que vous eu 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 headshot iconisé.

C'est une excellente touche. Il dit 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, du sous-titre, des minutes de lecture et d'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 en bénéficier également. Seulement, dans ce cas, ce seraient des produits alimentaires et des produits iconisés. Comme ce que fait l'application SONIC Drive-in:

Application mobile SONIC - liste des boissons gazeuses à acheter
Les utilisateurs de l'application mobile SONIC voient une liste d'icônes de marque en plus des noms des boissons gazeuses disponibles. (Source de l'image: SONIC Drive-in) (Grand aperçu)

Une étude a été réalisée par l'Université de Durham sur le lien entre les images et la satisfaction à l'égard d'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:

"Nos recherches ont révélé que si un restaurant souhaite utiliser des images et des invites visuelles dans son menu, il doit être associé à des noms d'aliments couramment utilisés et" précis "pour augmenter le pouvoir marketing. 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 l'exemple ci-dessus. Plutôt que de montrer l'une de leurs tasses remplies 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 qu'elles faciliteront grandement le processus de commande. 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:

Application mobile Rakuten - Liste des offres de marque avec icône de marque
L'application mobile Rakuten associe chacun de ses magasins de remise en argent et propose des offres avec une icône de marque. (Source de l'image: Rakuten) (Grand aperçu)

Cette application ebates aide les utilisateurs à gagner de l'argent grâce à leurs achats en ligne.

Imaginez maintenant si cette application n'était qu'une liste d'offres en texte uniquement. 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 recherchent 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 fasse quelque chose comme ça – associer un produit ou traiter avec une icône de marque – ce que je trouve surprenant. Bien que je réalise que les utilisateurs peuvent trier les annonces par nom de marque, un logo de marque iconisé ne pourrait-il pas aider les utilisateurs à localiser plus facilement les articles qu'ils souhaitent acheter dans les résultats de recherche?

Je suppose que le principal argument contre cela serait que les marchés poussent leurs propres produits (comme le fait Amazon). L'affichage d'une icône de marque dans les résultats de recherche ou sur la page d'un produit 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 parfaitement et je vous exhorte à l'utiliser lorsque vous le pouvez.

Emballer

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 entraîner des niveaux d'engagement plus élevés et des taux de rétention des utilisateurs plus élevés.

Lectures complémentaires sur SmashingMag:

Éditorial fracassant(rail)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *