Concevoir les fondations, de l’idée à l’interface

Bonjour, je m’appelle Majo, de l’équipe Design Evangelism. Pour vous expliquer l’évangélisme, je passe mon temps à aider les concepteurs et les développeurs à créer de meilleures apps pour les plates-formes Apple. Et ce que j’ai appris, c’est que nous connaissons tous ce sentiment lorsqu’une app fonctionne et quand elle ne fonctionne pas. Vous saisissez la différence en tant qu’utilisateur ? C’est facile. Mais pour créer cette expérience fluide en tant que designer ? C’est plus délicat. C’est ce que nous faisons ensemble aujourd’hui. Je vais vous expliquer mes pensées, mes questionnements et comment je gère l’étape chaotique, lorsque rien ne va. Nous commencerons par la structure : Comment organiser les informations et définir ce qu’est l’app et ce qu’elle fait. Nous explorerons la navigation : comment concevoir des déplacements clairs dans l’app pour que les utilisateurs se sentent en confiance et en contrôle. Puis, nous nous concentrerons sur le contenu et la façon de l’organiser pour en améliorer le sens, le présenter clairement et guider l’action.

Enfin, en matière de design, nous verrons comment le style peut façonner le caractère et le ton de votre app sans sacrifier la facilité d’utilisation. Commençons par la structure. Chaque app repose sur des bases qui façonnent tout le reste : Comment les gens naviguent, ce qui en ressort et comment l’expérience est perçue. Quand c’est bien fait, tout s’imbrique à merveille. Sinon, eh bien, nous sommes tous passés par là.

Pour étayer cela, je vais vous montrer une app fictive que j’ai créée. Elle aide les mélomanes à suivre leurs collections grandissantes de vinyles. Les utilisateurs peuvent faire défiler leur collection, à la recherche d’inspiration. Ils peuvent regrouper les disques dans des caisses, en ajouter, suivre leurs échanges et enregistrer ceux qu’ils pourraient vouloir plus tard. Quelle est votre première impression ? Quelque chose n’est pas clair ? Qu’est-ce qui fonctionne et qu’est-ce qui semble un peu bizarre ?

Lorsque je regarde une app, elle doit être claire pour m’attirer et m’inspirer confiance.

Déjà, je dois comprendre où je suis. L’app doit donner clairement cette information. Je ne dois pas me demander où je suis ni comment je suis arrivée là. Puis vient la question suivante : « Que puis-je faire ? ». Je ne devrais pas avoir à deviner, les actions doivent faciles à comprendre. Et enfin, je demande : « Où puis-je aller à partir d’ici ? ». Une sensation de clarté des étapes qui suivent maintient le flux et m’évite les hésitations ou les doutes. Lorsqu’il est facile de répondre à ces questions, l’app est attrayante et fluide. C’est généralement le signe d’une base solide. À première vue, cette app a l’air plutôt bien. Parfois, cela peut être trompeur parce que je suppose que cela fonctionne tout aussi bien. Voyons comment l’app répond à ces questions, en commençant par le haut de l’écran. Je m’attends à savoir où je suis, mais la première chose que je trouve est un menu. Ce n’est pas idéal. Les menus peuvent être vagues et imprévisibles, et pour commencer, j’ai surtout besoin d’un peu de contexte. Ensuite, il y a un titre, mais il ressemble plutôt à une marque. C’est bien joli, mais peu utile. J’ai presque envie de l’ignorer, ce qui pourrait bien me faire manquer le contenu recommandé par l’app, même s’il semble utile.

En continuant à faire défiler, je trouve quelques albums, mais je ne peux que naviguer, donc je ne sais toujours pas vraiment où je suis ni ce que je suis censée faire ici. Tout en bas de l’écran, je vois que je me trouve dans l’onglet Disques, mais il arrive un peu trop tard. Résultat ? L’écran ne m’a pas guidée, j’ai dû comprendre par moi-même. Nous avons vu ce qui se passe lorsque la structure n’est pas limpide, les utilisateurs le ressentent : comme une hésitation, de la confusion, parfois même jusqu’à l’abandon. Peut-être que s’il se passait moins de choses, l’app semblerait plus simple dès l’ouverture. C’est l’objectif de l’architecture de l’information. Il s’agit du processus d’organisation et de hiérarchisation des informations afin que les personnes trouvent facilement ce dont elles ont besoin, quand elles en ont besoin. Je commence toujours par écrire tout ce que fait l’app, les fonctionnalités, les flux de travail et même ce qui serait bien sans être indispensable. À ce stade, je n’essaie pas de juger ni de supprimer quoi que ce soit. Puis, j’essaie d’imaginer comment d’autres pourraient utiliser l’app. Quand et où ils l’utiliseraient ? Comment cela s’intègrerait dans leur routine ? Ce qui les aide réellement, et ce qui semble les gêner ? Et j’ajoute ces réponses à ma liste. Une fois que j’ai compris, je fais du ménage en supprimant les fonctionnalités qui ne sont pas essentielles, en renommant ce qui n’est pas clair et en regroupant ce qui va naturellement ensemble. Après cela, il est clair pour moi que si je ne saisis pas ce qui est essentiel, je ne pourrai pas le communiquer dans l’app. La simplification m’aide à affiner l’objectif de l’app. Cela me donne également un point de départ clair sur la façon dont les gens trouveront les fonctionnalités et quand ils les utiliseront. Explorons cela plus en détail dans la navigation. C’est-à-dire la manière dont les gens se déplacent dans l’app et on ne parle pas d’une errance digitale. Je veux qu’ils se sentent orientés et confiants. Pour ce faire, je vais utiliser ce que j’ai appris de l’architecture d’informations pour accéder aux principales fonctionnalités, soit le composant barre d’onglets dans iOS. Elle permet de naviguer entre les sections d’une app et elle est toujours visible pour rester facilement accessible à tout moment. La simplification est importante, car chaque onglet supplémentaire est une décision à prendre pour celles et ceux qui l’utilisent, ce qui peut rendre l’app plus complexe qu’elle ne l’est vraiment. Alors, je m’arrête et me demande : Qu’est-ce qui est vraiment essentiel ? Qu’est-ce qui mérite un onglet ? Un exemple de ce qui n’en a pas besoin ? Les caisses. C’est juste un écran pour regrouper les disques. Alors, je les fusionne. Pas besoin des deux. Ensuite, il y a Ajouter, il est ici dans la barre d’onglets, car c’est l’action principale de l’app. Mais je commence à me demander si c’est le meilleur emplacement. Lorsque je ne sais pas quand ou comment utiliser correctement un composant, je reviens toujours aux Directives d’interface humaine. Et bien sûr : les onglets servent à la navigation, pas à l’action. Je vais donc déplacer Ajouter dans Disques, là où l’option sera la plus utile. Désormais, la barre d’onglets présente trois sections bien distinctes. Et comme je travaille à la rendre plus prévisible, je pense que je peux améliorer le nom de ces onglets. Je veux que les étiquettes et les icônes aident à deviner à quoi sert chaque onglet afin d’éviter que les gens les utilisent pour le découvrir, ou qu’ils finissent par les ignorer faute d’information. Je vais renommer Échanges et Favoris de manière plus directe. Et modifier leurs icônes pour clarifier chaque onglet. Je tiens à une cohérence visuelle, donc plutôt que d’en concevoir, ce que je trouve vraiment difficile, J’utilise SF Symbols, la bibliothèque d’iconographie d’Apple. Ces symboles sont déjà connus des utilisateurs de plates-formes Apple, ce qui rend les onglets reconnaissables. Grâce à une architecture simplifiée, à des icônes familières et à des étiquettes explicites, l’objectif de l’app est évident, et la barre d’onglets semble plus accessible. En raison des efforts réalisés dans l’architecture de l’information, certaines choses ont bougé, rendant le contenu un peu déroutant. Commençons donc par clarifier cela avec une barre d’outils. C’est un excellent moyen d’orienter les utilisateurs dans votre interface. Remarquez comment cela résout les deux problèmes que j’avais au début : Où suis-je et que puis-je faire ? En effet, la barre d’outils comprend : Un titre avec le nom de l’écran plutôt qu’un menu ou une marque, comme auparavant. Elle définit les attentes concernant le contenu de l’écran et aide les gens à garder le cap lorsqu’ils naviguent et font défiler du contenu. Elle offre également un emplacement idéal pour les actions à l’écran les plus courantes, évitant d’utiliser la barre d’onglets. Comme l’espace est limité, je n’inclurais que l’essentiel en utilisant SF Symbols pour que chaque action soit facile à reconnaître. Maintenant, je peux répondre aux questions suivantes : où suis-je, que puis-je faire et qu’est-ce qui est possible dans l’app ? Les utilisateurs profitent ainsi d’une meilleure expérience dès le départ. Tout cela grâce au travail effectué sur sa structure et à l’utilisation intentionnelle des composants de navigation. Avec le recul, je me rends compte que je n’ai pas réussi du premier coup. Mais cela fait partie du processus. Chaque cycle d’itération rend le design plus précis, prévisible et facile à parcourir. Maintenant que les bases à explorer sont établies, zoomons sur ce qui est réellement à l’écran. Le contenu de votre app doit être organisé pour guider les utilisateurs vers ce qui compte le plus et ce qu’ils s’attendent à trouver en premier. Pour le moment, j’ai travaillé sur les parties importantes de l’app, mais qu’en est-il du contenu ? Il est désordonné parce qu’il y a deux types de contenu mélangés : Les Groupes et les Disques. Je vais donc essayer de faire simple : je divise les deux sections. Je trouve que c’est un bon début, au moins il y a un titre signifiant le contenu, mais à moins de faire défiler, je ne peux pas voir le reste de l’écran. Et si je ne montrais que quelques groupes et que je laissais les gens en découvrir d’autres au fur et à mesure ? Ce concept s’appelle la divulgation progressive. Il s’agit de ne montrer que ce qui est nécessaire à l’avance, juste assez pour commencer, puis d’en révéler plus à mesure des interactions. Vous verrez cela partout où une interface commence simplement et offre de plus en plus de détails ou des options avancées. Ainsi, le reste du contenu ne manque pas, il se trouve juste à un toucher sur le contrôle de divulgation à côté du titre, attendant le moment où il devient pertinent. Quand cet écran s’ouvre, je veux que le contenu soit organisé de la même manière. Il semble connecté à l’écran précédent, comme s’il s’étendait. Comme je l’ai expliqué dans la navigation, chaque écran doit fournir une orientation, alors n’oublions pas la barre d’outils cette fois-ci. Elle a des actions sur l’écran et le bouton de retour, il est donc facile de comprendre comment les gens sont arrivés ici et comment se déplacer. Dans ma conception initiale, il y avait des éléments de décoration ou sans but concret, ce qui compliquait la découverte de fonctionnalités importantes. Désormais, je veux faire des choix de conception plus intelligents en trouvant la façon la plus claire d’afficher le contenu dans le design. Décortiquons quelques exemples. La divulgation progressive était une bonne piste, mais la disposition de la grille ne semble pas tout à fait adaptée. Elle prend trop de place pour seulement deux articles. Et elle ne gère pas bien le texte plus long, ce qui rend le contenu peu clair. Voyons cela. Une liste fonctionne beaucoup mieux, c’est un moyen flexible, très maniable d’afficher des informations structurées et permet une analyse rapide. Elle occupe également moins d’espace vertical que les images, ainsi un plus grand nombre d’éléments tiennent à l’écran. Sachez que je ne l’ai pas conçu à partir de zéro, j’ai appris des composants comme la barre d’onglets et la barre d’outils que concevoir en donnant la priorité à la fonction est avantageux. J’utilise donc le modèle de liste de Apple Design Resources, que j’ai facilement adapté à mon contenu. On sent que le design est beaucoup plus intentionnel et prend en charge plus de fonctionnalités, comme une vraie app. Il est temps de voir comment fonctionne la dernière section. Lorsque je fais défiler, je trouve tous les disques qu’une personne a chargés sur l’app. Mon objectif était de tout rendre disponible en amont pour permettre une libre exploration. Mais à mesure que le choix se diversifie, l’effort de traitement augmente également. Je crains qu’au lieu de naviguer, les gens se sentent dépassés et quittent complètement l’app. Avant de trouver comment afficher une grande quantité de contenu, je devais l’organiser. Le regroupement en thèmes, comme dans l’architecture de l’information, m’a permis de me concentrer sur ce qui importe. Plusieurs thèmes sont utilisés par les apps pour maintenir leur organisation. Le regroupement du contenu par chronologie est l’un des moyens les plus courants : Pensez à l’utilité de retrouver vos fichiers récents ou de continuer à regarder une émission en streaming. Regrouper selon la saisonnalité et les évènements rend également l’expérience plus vivante et pertinente. Regrouper par progression aide les gens à reprendre là où ils s’étaient arrêtés, comme un brouillon d’e-mail ou une formation en cours. C’est un excellent moyen de rendre une app réactive à la réalité, car les gens finissent rarement tout d’une traite. Regrouper par thématique consiste à faire ressortir des relations, des choses qui vont ensemble, comme des produits connexes. La mise en évidence de thématiques transforme une navigation rapide en une exploration plus longue, car elle montre aux gens des connexions qu’ils ignoraient. Ces idées de regroupement ne se limitent pas à un seul type d’app. Même si le contenu n’est pas très visuel ou ne change pas souvent, cela permet de restreindre un choix trop large et de donner une longueur d’avance à l’app, comme si elle comprenait ce dont nous aurons besoin ensuite. Je sais que je vais certainement les utiliser. Et pour afficher un grand nombre d’images, comme j’en ai besoin, il est préférable d’envisager d’utiliser une collection. L’option est idéale pour montrer des groupes d’éléments tels que des photos, des vidéos ou des produits à faire défiler à l’écran. J’aime à quel point c’est dynamique. Pour y parvenir, j’ai un espacement cohérent entre les éléments et j’évite d’utiliser trop de texte dessus. J’ai créé des collections en utilisant les idées de regroupement d’avant. Voici, par chronologie : les disques parfaits pour l’été mis en avant, par progression : avec des ensembles complets ou des discographies, et par thématiques : Comme le style ou le genre. Lorsque le contenu est soigneusement organisé et mis en page à l’aide d’éléments de plate-forme familiers, il permet de trouver ce qui compte, sans effort, en créant un espace intuitif et invitant à y revenir encore et encore. Enfin, lorsque j’ouvre une app et qu’elle me plaît immédiatement, le design visuel joue pour beaucoup. Il transmet le caractère de l’app et façonne le ressenti de chacun. C’est l’utilisation réfléchie de la hiérarchie, de la typographie, des images et de la couleur, tout en soutenant la fonction. Pour améliorer le design visuel de l’app, je dois déterminer ce qui fonctionne et ce qui peut être amélioré. Je fais attention à la façon dont le type, la couleur et l’illustration se combinent. Quand je plisse les yeux, ils descendent directement sur la première collection, car elle est visuellement plus conséquente et colorée. Il manque la moitié du contenu et le sentiment d’appartenance. Ce qui manque ici, c’est une hiérarchie visuelle. Il s’agit de guider l’œil à travers l’écran, afin qu’il remarque les différents éléments de conception par ordre d’importance. Pour l’améliorer, je vais transformer cette suggestion en un point d’ancrage visuel en élargissant ou en augmentant le contraste de ce qui est le plus important, afin qu’il attire naturellement l’attention en premier. Visuellement, c’est réussi. Mais jusqu’à quel point ? Que se passe-t-il si le texte s’allonge, si la langue change ou si quelqu’un utilise une plus grande taille de texte ? Je me rends compte que je dois concevoir avec plus de flexibilité, surtout en ce qui concerne la typo. C’est là que les styles de texte système sont utiles. Ils permettent de créer facilement une hiérarchie claire et une lisibilité élevée, même dans différentes conditions d’écran. Ils offrent un style cohérent, des titres aux légendes, ce qui me permet de communiquer les différents niveaux d’importance de mon contenu, sans avoir à regarder la taille du texte ou à créer des styles personnalisés à partir de zéro. Je vais conserver le design à fond perdu, en déplaçant la couverture de l’album à l’arrière-plan. Cela donne au texte un espace persistant tandis que les trois styles de texte offrent des variations utiles de taille et de contraste, guidant l’œil avec succès. Les styles de texte prennent également en charge les polices dynamiques, ce qui permet de choisir une taille de texte qui lui convient et rend l’app plus inclusive et plus facile à utiliser pour tout le monde. Mais lorsque du texte se superpose à une image, la lisibilité peut rapidement devenir un problème, en particulier avec les visuels chargés ou à fort contraste. Dans ces cas, la clarté doit passer en premier.

Un moyen simple de résoudre ce problème consiste à ajouter un arrière-plan subtil derrière le texte, comme un dégradé ou un flou. Il améliore la lisibilité, tout en ajoutant de la dimension sans perturber le design. La dernière chose sur laquelle je veux me pencher est la façon dont les images et les couleurs peuvent aider à transmettre le caractère de l’app. En commençant par la liste. Je pense que je l’ai un peu trop simplifiée et qu’elle se perd parmi les composants. J’ajouterai donc des images pour représenter chaque groupe et rendre la liste plus facile à scanner. Mais toutes les images ne sont pas convaincantes. Elles sont toutes très différentes en couleur, en style. Je commence à voir que j’ai vraiment besoin d’un style visuel cohérent. Pour cela, je choisis une palette de couleurs et je fixe quelques règles simples pour l’utiliser. Espérons que cela créera une esthétique cohérente et donnera le bon ton. Je choisis quatre couleurs, quelques formes rétro, puis je les mélange et les assortis. Pour les groupes avec un titre, j’ai opté pour une police plus audacieuse et développée afin de les différencier du texte de la liste. J’aime beaucoup l’apparence, je pense que ces choix aiguisent la personnalité de l’app et facilitent la cohérence. Puisque je travaille avec les couleurs, je me demande où je peux les utiliser ailleurs dans l’app. Peut-être dans des arrière-plans, du texte, des icônes. Ils ont déjà de la couleur, mais d’un genre différent de celles que je choisis dans une palette. Ils ne sont ni noirs ni violets, ils ont des noms comme label ou secondarySystemBackground. Ce sont des couleurs sémantiques, nommées selon leur utilisation plutôt que leur apparence, parce qu’elles sont dynamiques. Elles changent automatiquement en fonction des paramètres de contraste, des environnements d’écran et des modes comme sombre et clair. Je peux utiliser une couleur d’accentuation ici et là, sur les boutons et les commandes, peut-être pour montrer ce qui est sélectionné. Mais je dois faire attention à ce que cela n’entrave pas les changements dynamiques, la lisibilité générale ou le confort des personnes. Je dirais donc que pour tout ce qui est dynamique, c’est essentiellement ma palette de couleurs système. Elles font également partie des Apple Design Resources et m’apportent un ensemble flexible d’options pour créer une hiérarchie visuelle qui s’adapte parfaitement au choix des personnes, sans travail supplémentaire. C’est un excellent moyen de s’entraîner à savoir quand s’appuyer sur le système et où ajouter du caractère. Il peut être tentant de traiter chacun de ces éléments de conception comme son propre projet, et à certains égards, c’est le cas et ils méritent réflexion et attention. Mais le véritable effet se produit lorsqu’ils travaillent ensemble, contribuant ainsi au sens général de l’interface. Le design avec lequel j’ai commencé a disparu depuis longtemps. J’ai simplifié sa structure et sa navigation, présenté son contenu avec du sens en aidant les gens à agir, le tout dans un espace que tout le monde peut utiliser et apprécier. Chaque élément de ce design s’appuie sur nos décisions passées, de la première sélection au dernier défilement. Le design n’est jamais vraiment terminé, et il n’y a pas de bonne réponse. Aujourd’hui, nous avons exploré les bases et vous pouvez pousser votre app encore plus loin avec la typographie, l’écriture UX et l’animation. Les possibilités sont infinies. Si vous êtes prêt à continuer, consultez les séances des années précédentes et découvrez le nouveau système de conception. Il y a encore tellement à explorer et à apprendre, alors restez curieux et continuez de créer. J’ai hâte de voir où vos idées vous mèneront !