L'expérience utilisateur (UX) est primordiale lorsqu'on développe une application web ou mobile. Il existe différents moyens pour l'optimiser et le designer. Le design d'une interface utilisateur (UI) pertinente en fait partie. Vous pouvez par exemple utiliser des images ou des icônes. Il arrive toutefois que vous ne disposiez pas d'image dans votre base de données. Dans cet article, nous allons voir comment remplacer les images par des icônes dans AppSheet.
Lorsqu’on conçoit une application mobile ou web, il faut bien distinguer le développement du design à proprement parler.
La phase de design intervient bien en amont. Au cours de celle-ci, on aborde l’UX (User Experience ou Expérience Utilisateur) qui intègre l’UI (User Interface ou Interface Utilisateur).
Le design de l’UX a pour but de concevoir ou d’offrir la meilleure expérience à l’utilisateur.
Il se déroule en 3 temps:
- l’Analyse,
- la Conception
- et l’Evaluation.
L’étape de l’analyse consiste à découvrir la problématique des utilisateurs du produit. Pour cela, il existe différentes méthodes: sondages, questionnaires, interviews…Cette étape est plus connue sous le nom de User Research. A la fin de cette étape, on définit quelques hypothèses et on imagine différentes fonctionnalités pour apporter des solutions aux problèmes.
La conception est l’étape qui consiste à définir les interfaces de l’expérience digitale. C’est la phase au cours de laquelle on réalise des maquettes pour répondre aux besoins identifiés dans la première étape.
Enfin l’évaluation permet de vérifier auprès de véritables utilisateurs les hypothèses qui ont été formulées. Pour y parvenir, on procède à des tests utilisateurs. On y recueille leurs avis afin d’améliorer la compréhension du problème et affiner les fonctionnalités de l’application.
Ces trois étapes vont être réalisées de manière itérative tout au long du cycle de vie du produit.
Designer l'UX dans AppSheet
Google AppSheet vous permet de créer des applications mobiles et desktop sans écrire des lignes de codes. C’est une plateforme no-code dédiée à la conception de différents types d’interfaces utilisateurs à partir de toutes sortes de données (Google Sheets, Excel, Mysql, Airtable…). Elle permet en outre de mettre en place différentes tâches automatisées.
Il est vrai que la conception d’une application avec AppSheet est relativement simple et rapide. Toutefois, il est important de respecter les phases d’analyse des besoins et de conception.
L’analyse à proprement parlée se fait en dehors d’AppSheet. Ensuite AppSheet vous offre tous les outils pour concevoir et créer l’interface utilisateur (UI) de votre application.
Il est à noter que contrairement à d’autres plateformes no-codes telles que Bubble ou Adalo, AppSheet ne fonctionne pas avec du Drag-and-Drop (Glisser-Déposer). AppSheet propose toutefois des types de vue prédéfinis. Vous pouvez personnaliser ces vues en jouant sur des paramètres présents dans l’espace de développement.
Pour cela, vous devez tout d’abord vous connecter à votre espace personnel. Il faut ensuite vous rendre dans « UX » puis cliquer sur « Views ».
Dans cet espace, vous pourrez:
- Créer de nouvelles vues
- Modifier des vues existantes
- Choisir l’emplacement des vues (Barre des menus, Menu, Référence)
- Visualiser les vues systèmes
Le rôle des Icônes dans l'UX
Les icônes jouent un rôle essentiel dans le design UX (expérience utilisateur) d’une application, offrant une valeur ajoutée significative en améliorant la convivialité et l’efficacité de l’interface.
Ces petites images visuelles sont bien plus que de simples éléments décoratifs. Elles renforcent l’expérience de l’utilisateur de plusieurs manières.
Tout d’abord, les icônes simplifient la communication. Elles transcendent les barrières linguistiques en offrant des représentations visuelles compréhensibles universellement.
Par exemple, un symbole de loupe est instantanément associé à la recherche, tandis qu’un logo de panier d’achat évoque le processus d’achat en ligne.
Ensuite, dans un monde où les écrans sont de plus en plus petits, chaque pixel compte. Les icônes permettent alors d’optimiser l’utilisation de l’espace à l’écran et de condenser des informations importantes dans un espace restreint, ce qui améliore l’efficacité de l’interface utilisateur.
Une conception visuellement attrayante peut en outre susciter un sentiment positif et renforcer la rétention de l’utilisateur.
Les icônes facilitent la navigation. Elles servent de repères visuels pour guider les utilisateurs à travers l’application. Cela a pour effet de réduire le temps nécessaire pour se familiariser avec l’interface.
Enfin, les icônes renforcent la mémorabilité. Les utilisateurs sont plus susceptibles de se souvenir d’une application avec des icônes distinctives et bien conçues.
Cette mémorabilité peut encourager les utilisateurs à revenir régulièrement sur l’application.
Générer des Icônes dans une vue AppSheet
Comme vous l’avez vu auparavant, les icônes sont des éléments essentiels du design UX d’une application, apportant une valeur ajoutée considérable. Un design d’icônes réfléchi et efficace peut véritablement améliorer l’expérience utilisateur, en rendant l’application plus intuitive, attrayante et facile à utiliser.
Prenons le cas d’une vue de type Table dans une application de suivi marketing.
Comment faire si nous voulons retrouver facilement les tâches par membre de l’équipe mais que nous n’avons pas leurs photos?
La réponse est: « nous pouvons utiliser leurs initales par exemple ».
La première solution serait d’aller dans UX et de modifier « View Options ». Puis, vous pouvez faire « group by » « OWNER » « Ascending ». Vous obtenez alors des groupes de tâches par membre. Les groupes sont représentés par une bande grisée dans l’UX.
Cette solution est simple à mettre en place et améliore déjà la visibilité de notre vue « Projets ».
Mais vous avez une seconde solution, qui consiste à utiliser les expressions INITIALS () et TEXT_ICON (). Voyons comment le faire.
Dans un premier temps, nous allons créer dans notre table « Projets » une colonne virtuelle qu’on va appeler « Initiales Owner ». Puis, nous allons ajouter l’expression suivante dans App formula.
INITIALS([OWNER])
Ici on prend le contenu de la colonne « Owner » et on demande à AppSheet d’extraire les premières lettres de chaque mot.
Ensuite, nous allons créer une seconde colonne virtuelle « Icônes Owner » avec l’expression suivante:
TEXT_ICON([Initiales Owner])
Avec cette expression, on demande à AppSheet de créer une image ou une miniature (Thumbnail) à partir de la colonne « Initiales Owner » que nous avons extraite précédemment.
Après cela, retournez dans UX pour faire les modifications suivantes:
Vous obtenez alors l’interface suivante pour la même vue, avec des initiales sous forme d’icônes dans la première colonne.
Par la suite, vous pouvez personnaliser les icônes à l’aide des Format Rules. Vous pourrez notamment modifier la couleur des initiales, les mettre en gras, ajuster la couleur de l’arrière-plan etc…
Conclusion
L’intégration d’icônes personnalisées au sein de vos vues AppSheet est bien plus qu’un simple ajustement esthétique. C’est un levier UX fondamental pour rendre votre application mobile intuitive, scannable et agréable à utiliser au quotidien. En guidant visuellement vos collaborateurs à travers leurs processus métier, vous facilitez l’adoption de l’outil et réduisez les erreurs de saisie. Ne sous-estimez pas le pouvoir de ces petits détails visuels : ils font toute la différence entre une application brute et un outil professionnel parfaitement fini.
FAQ : Personnalisation des icônes dans AppSheet
Les icônes système sont des pictogrammes statiques que vous choisissez manuellement dans les paramètres de la vue (onglet Display). À l’inverse, une icône générée par une formule (comme TEXT_ICON()) est dynamique : elle change automatiquement selon la valeur d’une cellule, comme les initiales d’un utilisateur ou une catégorie de projet.
Directement dans la formule, non. Toutefois, vous pouvez utiliser les Format Rules (règles de mise en forme) dans l’onglet UX. En créant une règle qui cible votre colonne d’icônes, vous pouvez définir une couleur spécifique (par exemple, rouge pour « Retard », vert pour « Terminé ») afin de rendre votre interface encore plus intuitive.
L’utilisation de colonnes virtuelles permet de ne pas surcharger votre source de données (Google Sheets ou Excel) avec des informations purement visuelles. Ces calculs sont effectués en temps réel par AppSheet, ce qui garantit que vos icônes sont toujours à jour sans modifier la structure de votre tableur d’origine.
La méthode présentée (initiales et icônes textuelles) est particulièrement efficace pour les vues de type Table, Deck et Gallery. Elle permet de remplacer une colonne de texte un peu « lourde » par un indicateur visuel compact, optimisant ainsi l’espace sur l’écran d’un smartphone.
Oui, l’expression INITIALS() est intelligente. Si votre colonne contient « Jean-Pierre Martin », elle extraira automatiquement « JM ». C’est un excellent moyen de créer des avatars d’utilisateurs personnalisés en quelques secondes sans avoir à gérer des fichiers images.
➡️ Retrouvez tous nos articles dans la catégorie AppSheet ⬅️
