Article original : What is Information Architecture? How to Create Userflows and Sitemaps for UX Design
À un moment donné dans votre carrière de designer, vous pourriez entendre parler d'Architecture de l'Information (ou IA). Vous pourriez même devoir créer un userflow ou un sitemap.
Maintenant, cet article vise à vous aider à revenir aux bases et à vous rappeler la signification et l'importance de l'IA. Donc, si vous ne comprenez pas vraiment le concept d'Architecture de l'Information, c'est le meilleur endroit pour être.
Nous explorerons également comment faire un userflow et un sitemap plus tard dans l'article. Commençons !
Qu'est-ce que l'Architecture de l'Information ?
L'Architecture de l'Information (IA) est le processus de planification et de conception de l'organisation de l'information dans les sites web et les applications. Elle se concentre sur la satisfaction des besoins des utilisateurs et des objectifs commerciaux en créant une structure d'information logique et conviviale.
L'Architecture de l'Information est principalement utilisée par les designers pour structurer la disposition de leurs designs, surtout pendant la phase de croquis/maquette basse fidélité.
Importance de l'Architecture de l'Information
Je ne peux pas trop insister sur l'importance de l'Architecture de l'Information. Ci-dessous, je vais partager quelques raisons pour lesquelles chaque UX Designer devrait apprendre ce que signifie l'IA et comment la mettre en œuvre efficacement :
- Organisation et Structure : L'Architecture de l'Information fournit un cadre pour organiser et structurer l'information. Elle vous aide à vous assurer que vos designs sont logiquement regroupés et catégorisés.
- Priorisation du Contenu et Hiérarchie : La hiérarchie est l'un des principes de base du design, et l'IA vous aide à l'atteindre. Elle permet aux designers de mettre en évidence les informations clés et d'organiser le contenu en fonction de sa pertinence et de son importance pour les utilisateurs.
- Design Centré sur l'Utilisateur : L'Architecture de l'Information aide les designers à penser à leurs utilisateurs pendant le processus de design, en considérant comment les utilisateurs pensent, se comportent et recherchent généralement des informations. Tout le monde a des modèles mentaux, y compris les utilisateurs, et l'IA aide à s'assurer que l'information est présentée de manière à correspondre aux modèles mentaux de vos utilisateurs existants/cibles.
- Navigation : L'Architecture de l'Information fournit un moyen clair de naviguer dans un design. Elle permet aux utilisateurs de comprendre intuitivement où ils se trouvent dans un site et comment se déplacer entre différentes sections d'un design.
- Objectifs Commerciaux : L'Architecture de l'Information aide à s'assurer que la présentation de l'information de votre design est alignée sur les objectifs et les buts de l'entreprise/firme/société.
Types et Formes d'Architecture de l'Information
Il existe de nombreux types et formes d'Architecture de l'Information, surtout depuis qu'elle est utilisée dans de nombreux domaines. Mais ici, nous allons examiner les Userflows et les Sitemaps, qui sont les plus courants en design.
Qu'est-ce qu'un Userflow ?
Un userflow fait référence à un diagramme qui montre le parcours étape par étape d'un utilisateur à travers un site web, une application ou un système.
Imaginez essayer de commander de la nourriture en ligne. Certaines étapes que vous pourriez suivre incluent : ouvrir l'application de commande de nourriture sur votre téléphone, vous inscrire/vous connecter, choisir parmi la liste des aliments disponibles, choisir combien de portions vous souhaitez, et enfin payer en ligne.
C'est un exemple typique de la façon dont un userflow pourrait être structuré.
Les userflows illustrent les chemins, les interactions et les points de décision que les utilisateurs rencontrent lorsqu'ils naviguent et accomplissent des tâches ou des objectifs spécifiques. Ils aident les designers et les parties prenantes à comprendre et à optimiser le parcours utilisateur.
Un exemple de Userflow
Qu'est-ce qu'un Sitemap ?
Les sitemaps sont des diagrammes qui affichent la disposition et l'organisation du contenu au sein d'un site web ou d'une application.
Imaginez un appartement de 2 chambres. L'appartement pourrait contenir un salon, une cuisine, 2 chambres, une salle de bain et une salle à manger. Le sitemap nous indique simplement comment nous pouvons accéder à la cuisine depuis le salon/la chambre/n'importe quel endroit dans l'appartement.
En design, les sitemaps fournissent un aperçu des pages, des menus et des sous-pages, nous aidant à planifier et à visualiser l'architecture de l'information et l'expérience utilisateur du système. Ils aident à la planification du contenu, à la conception de la navigation et au développement de sites web.
Un exemple de Sitemap
Différences Entre les Userflows et les Sitemaps
- Focus et Perspective : Les userflows se concentrent principalement sur les actions et interactions étape par étape qu'un utilisateur effectue au sein d'une application ou d'un site web, pour accomplir une tâche ou un objectif. Les sitemaps se concentrent sur la structure globale et l'organisation d'un site web ou d'une application, représentant la relation hiérarchique entre différentes pages ou sections.
- Niveau de Détail : Les userflows fournissent des informations plus détaillées sur chaque étape du parcours de l'utilisateur, y compris des actions spécifiques, des décisions et des résultats possibles à chaque étape. Les sitemaps fournissent un aperçu de haut niveau de la structure de l'application ou du site web, montrant les pages ou sections principales, sans entrer dans les interactions spécifiques au sein de chaque page.
- Centré sur l'Utilisateur vs Architectural : Les userflows sont centrés sur l'utilisateur et représentent principalement la perspective et les actions de l'utilisateur au sein de l'application ou du site web. Les sitemaps sont plus architecturaux par nature, représentant la structure globale et l'organisation d'une application ou d'un site web depuis un point de vue de haut niveau.
- Interactivité et Points de Décision : Les userflows mettent en évidence les éléments interactifs au sein de l'application ou du site web, illustrant les choix et options disponibles pour l'utilisateur à chaque étape. Les sitemaps ne montrent pas explicitement l'interactivité ou les points de décision.
Quand Utiliser l'Architecture de l'Information
Vous pourriez vous demander quand les connaissances sur l'Architecture de l'Information seront utiles.
Vous pouvez utiliser l'Architecture de l'Information dans n'importe quelle situation, vraiment – comme la conception d'une application mobile, d'un site web, d'un pitch deck, et plus encore. L'Architecture de l'Information est toujours utile car elle vous aide à décider quel contenu/information vient en premier, ce qui suit et comment, et ainsi de suite.
Typiquement, vous réfléchirez à l'Architecture de l'Information après avoir mené des recherches utilisateurs. Cela est dû au fait que la recherche peut vous aider à comprendre les objectifs et les besoins de vos utilisateurs, et ce qu'ils feraient probablement lorsqu'ils essaient d'accomplir un objectif sur votre site.
De plus, les userflows viennent généralement avant les sitemaps, car vous devez comprendre comment un utilisateur typique parcourrait votre site, avant de décider comment la disposition ou l'organisation de ce site devrait être.
Comment Créer des Userflows et des Sitemaps
Vous pouvez utiliser les mêmes méthodes et outils pour créer des userflows et des sitemaps. Vous devez simplement comprendre les différences entre eux et garder à l'esprit que le but de chacun est différent.
Comment Créer un Userflow
Étape 1 : Définir vos Objectifs et Identifier les Tâches
La première étape consiste à définir vos objectifs et vos buts pour le projet, en indiquant quel type d'Architecture de l'Information vous essayez de créer (un userflow ou un sitemap). Vous pouvez simplement écrire cela sur papier avant de le numériser.
Par exemple : Je travaille sur une application de commande de nourriture, et j'aimerais créer un userflow montrant comment un utilisateur typique commanderait de la nourriture en utilisant l'application.
J'écrirais les étapes typiques/possibles que l'utilisateur devrait suivre pour accomplir la tâche de commander de la nourriture. Ces étapes pourraient être :
- L'utilisateur ouvre l'application sur son téléphone.
- L'utilisateur s'inscrit ou se connecte à l'application.
- L'utilisateur va à la page d'accueil.
- L'utilisateur choisit parmi les restaurants proches de lui.
- L'utilisateur sélectionne dans le menu et ajoute de la nourriture au panier.
- L'utilisateur paie la nourriture et attend la livraison.
- L'utilisateur quitte l'application.
Étape 2 : Choisir un Outil
L'étape suivante consiste à choisir un outil que vous souhaitez utiliser pour créer votre userflow. Il existe de nombreux outils disponibles pour cela, comme Figjam, Miro, Whimsical, et d'autres. J'utilise Figjam car il est si facile à comprendre.
Voici à quoi cela ressemble :
Interface de Figjam
Étape 3 : Esquisser votre design
La prochaine chose à faire est d'esquisser votre flux réel sur Figjam. Avant cela, vous devez noter que chaque forme pour un userflow a une signification spécifiée. Vous pouvez voir certaines formes, flux et associations, et leurs significations ci-dessous.
Formes, flux et associations pour un userflow.
La Première Forme (Rectangle à bord arrondi) : Cette forme représente le début/la fin d'un userflow. Elle est typiquement utilisée lorsque vous souhaitez commencer ou terminer un userflow. Si vous remarquez, il y a aussi une balise de fin avec une forme similaire dans l'image ci-dessus. Certaines personnes utilisent aussi un cercle pour représenter cela.
La Deuxième Forme (Losange) : Cette forme représente une décision. Elle est utilisée pour montrer quand un utilisateur doit prendre une décision comme "se connecter", "s'inscrire", et ainsi de suite.
La Troisième Forme (Rectangle avec lignes pointillées) : Cela représente un groupe. Un groupe dans un userflow peut contenir des processus et des données, montrant qu'une action a été soumise à la base de données, et qu'elle attend un retour du site.
La Quatrième Forme (Parallélogramme) : Cette forme montre quand l'utilisateur doit faire une entrée, comme "choisir combien de portions de nourriture ils veulent commander, et ainsi de suite.
La Cinquième Forme (Rectangle avec lignes pleines) : Cette forme montre le processus de l'utilisateur parcourant l'application ou le site web. Elle peut aussi inclure les écrans que l'utilisateur doit traverser pour atteindre son objectif.
La Sixième Forme (Cylindre) : cette forme représente les données circulant dans le système, dont un retour est requis.
Maintenant que vous connaissez les différentes formes et leurs utilisations, vous devrez d'abord dessiner la forme pour 'début' :
Choisir une Forme
Ensuite, vous voudrez redimensionner la forme si nécessaire, et entrer votre texte.
Redimensionner la forme et ajouter du texte
Ensuite, vous devrez ajouter une autre forme et dessiner un connecteur. Pour ajouter un connecteur, vous pouvez soit cliquer sur le bord de la forme précédente et faire glisser, soit dessiner le connecteur directement depuis les outils de Figjam.
Dessiner un connecteur vers la forme suivante.
Dessiner un Connecteur depuis les outils de Figjam
Lorsque vous faites cela, vous entrez ensuite votre texte. (N'oubliez pas de noter les significations/rôles de chaque forme particulière).
Vous continuez ainsi jusqu'à ce que vous ayez terminé d'ajouter toutes les étapes de votre diagramme de userflow.
Exemple de diagramme de userflow avec plusieurs étapes
Étape 4 : Valider et finaliser
Une fois que vous avez terminé votre userflow, la prochaine chose à faire est de valider le diagramme. Cela signifie simplement passer en revue le userflow pour s'assurer qu'il est précis, utilisable et aligné sur les besoins des utilisateurs.
En gros, parcourez simplement le diagramme et considérez s'il représente le parcours utilisateur prévu, et si toutes les étapes et points de décision nécessaires sont inclus.
Comment Créer un Sitemap
Plus tôt dans l'article, j'ai mentionné que les processus de création d'un sitemap et d'un userflow sont similaires. La différence réside dans le but des deux diagrammes. Nous allons explorer comment créer un sitemap en utilisant Miro, un outil de diagramme.
Étape 1 : Ouvrir l'outil
La première étape, évidemment, est d'ouvrir votre outil. Si vous n'avez pas déjà de compte, inscrivez-vous sur Miro et il devrait afficher votre tableau de bord.
Tableau de bord de Miro
Ensuite, cliquez sur "Nouveau Tableau" pour ouvrir une toile vierge.
Étape 2 : Commencer à dessiner le sitemap
Ensuite, vous commencez à dessiner votre sitemap. Vous devriez déjà savoir quels écrans vous allez concevoir, et comment ces écrans se connectent les uns aux autres. Votre userflow pourrait aider à informer cela.
Cliquez sur l'outil Formes dans la barre d'outils sur le côté gauche de votre écran, pour faire apparaître toutes les formes disponibles.
Notez que, contrairement aux Userflows où chaque forme a une signification, vous pouvez utiliser n'importe quelle forme pour vos sitemaps. La plupart des designers utilisent des rectangles lorsqu'ils font des sitemaps. C'est très facile à construire et à empiler, surtout lorsque vous avez beaucoup de pages à représenter.
Choisir une forme
Une icône plus apparaîtra, et vous devrez simplement faire glisser jusqu'à ce que la forme soit à votre satisfaction.
Étape 3 : éditer les formes
Ensuite, vous éditez la forme pour ajouter de la couleur et votre texte. Cela pourrait être "Page d'accueil", "Connexion", "Inscription", et ainsi de suite – peu importe quel est le premier écran de votre design.
Lorsque vous cliquez sur le bouton, un sous-menu apparaît. Ici, vous pouvez changer le type de forme, modifier la police et la taille du texte, ajouter une couleur de texte, l'aligner, ajouter une bordure ou une couleur de remplissage pour la forme, et plus encore.
Taper à l'intérieur d'une forme
Éditer une forme
Étape 4 : ajouter des formes pour les prochains écrans
Ensuite, vous devez dessiner des formes pour les prochains écrans auxquels la page d'accueil se ramifie. Cela pourrait être des éléments majeurs de la barre de navigation, où vous devez cliquer sur des CTA (Call To Actions) pour les ouvrir.
Pour dessiner la forme suivante, vous pouvez simplement cliquer sur les bords de la première, et le contour de la forme sera affiché.
Esquisser la forme suivante
Cliquez sur le contour pour indiquer que vous voulez que la forme reste, et éditez-la comme vous l'avez fait pour la première.
Éditer la deuxième forme
Ensuite, vous devez ajouter d'autres formes qui représentent les sous-pages auxquelles la page d'accueil se ramifie. Cliquez simplement sur la première forme comme vous l'avez fait lors de la création de la première forme de sous-page.
Ajouter d'autres sous-pages
Vous pouvez également changer leurs couleurs pour les différencier de la page d'accueil et montrer la hiérarchie.
Étape 5 : dessiner plus de pages
Ensuite, vous dessinez des formes pour les pages sous le premier ensemble de sous-pages.
Vous continuez ainsi jusqu'à ce que vous ayez terminé votre sitemap, et que tous les écrans que vous souhaitez concevoir y soient représentés.
Lorsque vous avez terminé de créer votre userflow et vos sitemaps, vous pouvez passer à vos wireframes basse fidélité ou à votre design principal. L'IA que vous avez faite informe votre prochaine étape et décide quels écrans vous devez concevoir en particulier.
Conclusion
L'Architecture de l'Information est très importante pour vous permettre d'organiser les dispositions de vos designs et de les arranger. Cela est utile car cela peut vraiment aider à améliorer la qualité de vos designs.
Il existe même des modèles sur certains logiciels qui pourraient vous aider à faire vos diagrammes d'Architecture de l'Information. N'oubliez pas de pratiquer aussi souvent que possible.
Merci d'avoir lu !