Le guide complet de l'architecture de l'information

Écoutez la version audio de cet article

Dans le cadre du processus UX, les concepteurs créent une architecture de l'information lors de la création de produits. Définissant chaque avenue et chaque chemin que les utilisateurs peuvent emprunter via une application ou un site Web, l'architecture de l'information est bien plus qu'un simple plan du site pour montrer quelle page mène où.

Semblable aux architectes du bâtiment utilisant un plan pour construire chaque partie d'une maison, des structures physiques aux travaux internes plus complexes comme l'électricité et la plomberie, l'architecture de l'information décrit la hiérarchie, la navigation, les fonctionnalités et les interactions d'un site Web ou d'une application. Et tout comme les plans sont le document le plus précieux qu'un architecte puisse utiliser dans la construction d'un bâtiment, l'architecture de l'information peut être l'outil le plus puissant de l'arsenal d'un concepteur.

Cependant, en développer une n'est pas aussi simple que de rassembler une liste de fonctionnalités et de cartographier leur fonctionnement - examinons le processus.

Qu'est-ce que l'architecture de l'information et pourquoi est-ce important ?

L'architecture de l'information (IA) est, comme un plan directeur, une représentation visuelle de l'infrastructure, des fonctionnalités et de la hiérarchie du produit. Le niveau de détail dépend du concepteur, de sorte que l'IA peut également inclure la navigation, les fonctions et les comportements de l'application, le contenu et les flux. Il n'y a pas de limite à la taille ou à la forme de l'IA ; néanmoins, il devrait englober la structure générale du produit afin que quiconque (théoriquement) soit capable de le lire et de comprendre comment le produit fonctionne.

Nous utiliserons souvent la référence du plan car le but des deux documents est presque identique. Tout comme un plan directeur, IA fournit aux concepteurs (ainsi qu'aux équipes de développement de produits et d'ingénierie) une vue d'ensemble de l'ensemble du produit. Avoir un document unique qui offre une représentation simple et compréhensible du fonctionnement de l'application ou du site Web est essentiel pour développer de nouvelles fonctionnalités, mettre à jour celles existantes et voir ce qui est possible compte tenu du produit existant.

Avec IA disponible, il devient beaucoup plus facile de prendre des décisions clés pour les nouvelles fonctionnalités et implémentations, de comprendre les délais de modification des produits et de suivre le comportement des utilisateurs à travers plusieurs processus.

Plongeons-nous dans une vidéo de base pour voir comment une IA est construite.

Comment concevoir l'architecture de l'information

Dans le cadre du processus UX, la conception IA suit des modèles très similaires à l'organigramme : ajoutez des formes et connectez-les avec des lignes de manière organisée à un seul document. Le défi lors de la création d'IA consiste à comprendre comment votre application ou votre site Web fonctionne réellement du point de vue de l'utilisateur et comment organiser ces informations dans un format lisible et lisible.

Il existe deux exigences principales pour construire réellement IA : l'organiser via une hiérarchie visuelle (c'est-à-dire une hiérarchie de fonctionnalités, de fonctions et de comportements) et créer une légende pour afficher différents types de fonctionnalités, d'interactions et de flux. Avec un organigramme standard, les formes suivent des exigences spécifiques (les rectangles sont des processus, les losanges sont des points de décision, etc.) ; cependant, suivre cette nomenclature n'est pas une exigence.

En d'autres termes, les facteurs les plus importants pour la construction de votre IA sont l'endroit où les composants individuels de l'architecture sont placés (hiérarchiquement) et la façon dont ils sont étiquetés et affichés.

Comprendre et afficher la hiérarchie visuelle

L'aspect le plus difficile de la création d'une nouvelle architecture de l'information est presque toujours sa construction hiérarchique. C'est une idée fausse courante que l'intelligence artificielle doit être construite « du haut vers le bas ». C'est presque toujours plus difficile à faire à moins qu'il ne s'agisse d'un produit existant, comme dans la vidéo ci-dessus.

Lorsque vous construisez IA à partir de zéro, à moins que votre site Web ou votre application ne suive un format standard, il est très difficile de dessiner quoi que ce soit après le niveau supérieur. C'est comme demander à un mécanicien de construire une voiture de haut en bas plutôt que par pièces. Chaque pièce doit être construite à l'avance avec sa propre recherche, son temps de conception et de développement. Il en est de même avec IA.

L'affichage de la hiérarchie visuelle est un atout précieux pour IA, non seulement parce qu'il fournit un meilleur contexte pour le lecteur, mais généralise également les régions clés du produit. Si la fonctionnalité la plus importante de votre application est la commande d'un trajet (à la Uber ou Lyft) qui peut être effectuée à partir de la page d'accueil, cette page aura le plus de points de contact et la plus grande valeur pour le produit. Il en sera de même pour la hiérarchie visuelle.

Les plans de site sont utiles pour comprendre la hiérarchie car ils organisent les pages numériquement (comme 1.0 Accueil, 2.0 Paiement, 2.1 Ajouter une méthode de paiement, etc.). Ou considérez l'exemple dans l'image ci-dessous pour le site Web de la bibliothèque de Duke University, où la navigation supérieure n'est pas seulement en haut, mais également mise en surbrillance pour être visible dans toute l'application.

Hiérarchie des formes, couleurs et autres éléments visuels

Outre la hiérarchie, l'architecture ci-dessus fait bien autre chose : elle affiche chaque point d'engagement de manière unique, selon les besoins, à travers une simple légende et quelques phrases clés. La légende indique la page et le type de contenu, et elle signifie les variations entre les couleurs des formes. Ceci est important car, bien que le site de Duke semble assez simple, l'IA ne va que sur trois niveaux. Chaque rectangle jaune indique une application, donc les processus dans chacune de ces cases ne sont pas inclus dans ce document !

Même sans ces parties disponibles, la structure est telle que nous pouvons comprendre comment naviguer sur le site Web uniquement via l'IA. Cela s'arrête lorsque nous atteignons une application sur le site Web - ce n'est pas nécessaire.

L'IA ci-dessous est pour un jeu. En utilisant quatre formes, aucune couleur et des extraits de texte placés intelligemment, chaque interaction majeure est compréhensible sans prototypes et, plus important encore, elle peut être comprise par quiconque y travaille.

Ce modèle n'est pas parfait, mais il organise clairement la hiérarchie des applications et délimite ce que l'utilisateur voit ou fait à un moment donné.

Les meilleurs outils d'architecture de l'information

Il existe de nombreuses applications logicielles permettant de créer une IA, mais peu sont suffisamment simples et rapides pour rendre l'expérience agréable. Ou à tout le moins, facile à gérer.

Draw.io, utilisé dans la vidéo ci-dessus, est entièrement gratuit pour un usage personnel et professionnel et se connecte automatiquement à Google Drive. Il a également des intégrations avec Confluence et JIRA, qui sont payantes. Draw.io est excellent pour la création d'organigrammes, la création de flux d'utilisateurs et l'architecture des informations, et avec la fonctionnalité Drive, plusieurs personnes peuvent travailler sur le même document et voir les modifications en direct. Il existe également une version hors ligne gratuite.

Lucidchart est un autre excellent outil qui offre une expérience légèrement meilleure que Draw.io et offre des avantages supplémentaires tels que des modèles prédéfinis, de nombreuses autres intégrations, une application mobile (évaluée à 2,5 étoiles sur l'App Store) et un support pour les entreprises.

Omnigraffle et Visio sont des piliers de longue date de l'industrie et fonctionnent parfaitement pour créer et maintenir une conception IA, bien que Visio soit uniquement en ligne (l'ancienne version hors ligne est uniquement Windows) alors qu'Omnigraffle est uniquement Mac et nécessite des achats séparés pour MacOS et iOS. versions. OmniGraffle présente un avantage par rapport aux principaux concurrents en ce sens qu'il fournit l'automatisation JavaScript et AppleScript, ce qui peut être inutile pour la plupart des concepteurs, mais généralement, les architectes d'informations à temps plein l'apprécient.

Tous les outils répertoriés ci-dessus sont conçus pour être rapides et faciles à utiliser, en particulier autour de l'organigramme, qui suit des principes presque identiques à l'architecture de l'information. D'autres applications telles que Balsamiq, MindMeister, MindManager ou XMind offrent toutes un comportement de style similaire, mais sont conçues à d'autres fins majeures, telles que le prototypage ou la cartographie mentale.

Meilleures pratiques d'architecture de l'information

Bien qu'il existe peu de règles définies pour ce qui constitue l'architecture de l'information, lors du processus, tenez compte des points suivants :

Ne vous concentrez pas sur la hiérarchie, concentrez-vous sur la structure

La hiérarchie est ajustable. La page d'accueil sera toujours la page d'accueil, mais où elle mène, comment les utilisateurs accèdent à ces endroits, et tout ce qui se trouve entre et au-delà est déterminé plus tard.

Tous les processus doivent être logiques

Même si l'IA dans le processus UX est destinée aux interactions avec les utilisateurs, chaque étape du processus doit avoir un sens. Les écrans d'enregistrement ne doivent pas conduire à des paramètres, une fonction de caméra ne doit pas passer à une vue de carte… la liste est longue.

Rappelez-vous le processus UX

Une erreur courante consiste à se contenter de faire de l'IA, sans ressources, recherche ou autres actifs ou travail. C'est comme dire à un auteur d'écrire un livre sans plan, ou à un programmeur de coder une application sans prototypes.

Vous êtes le cartographe

Les cartographes tiennent compte de tout ce qui concerne une carte, des chaînes de montagnes aux frontières des États. Tout comme les créateurs de cartes, les concepteurs déterminent ce qui entre dans la conception IA. Pages individuelles, comportements spécifiques des utilisateurs, contexte des points de décision… et ainsi de suite.

En fin de compte, le cartographe décide de ce qui se passe sur la carte en fonction des besoins de l'utilisateur. Il en va de même pour les concepteurs, alors construisez l'IA pour l'utilisateur final, à savoir les équipes de développement et de conception de produits.

L'architecture de l'information change et évolue constamment

Pour enfoncer le clou une fois de plus, tous les IA sont conçus pour le changement. Les produits évoluent, les conceptions changent, les utilisateurs s'adaptent et le cycle continue, encore et encore. Ne le prenez pas trop au sérieux et sachez qu'il y aura toujours place à l'amélioration. Ne visez pas la perfection ; construire une IA simple et adaptable.

Mon architecture d'information est terminée… Et maintenant ?

C'est une conception courante que tout travail de conception n'est jamais vraiment terminé, et c'est certainement le cas avec l'architecture de l'information. Ils grandissent, rétrécissent et changent au même rythme que nos produits. Contrairement à un plan pour un bâtiment, IA évoluera toujours en fonction de tout, des besoins des utilisateurs aux nouvelles fonctionnalités ou à la refonte du produit. Une grande partie de la structure peut rester la même et assurer la cohérence entre les versions afin que les utilisateurs ne soient pas confus.

Et c'est une bonne chose. Savoir que l'IA est un document fluide, susceptible de changer toutes les semaines, voire parfois tous les jours, est un moyen puissant de maintenir la structure globale de votre application ou de votre site Web sans jamais toucher au code ni créer de nouveaux prototypes. Plus toute l'équipe de développement de produits connaîtra l'IA, plus vite tout le monde saura ce qui est possible et ce qui ne l'est pas, et à quel point tout soi-disant « travail facile » est vraiment sérieux.

Ce qui nous amène à la vraie beauté de l'architecture de l'information : il n'y a pas de point de départ prédéfini. Alors que le processus de conception UX traditionnel dicte que l'IA est construite après avoir terminé suffisamment de flux d'utilisateurs ; armé de nombreuses recherches sur les utilisateurs et la concurrence, cela peut aussi être la première chose à faire… ou la dernière. Le processus de prototypage apporte souvent des informations sur la façon dont certains comportements ou actions devraient se produire qui seraient difficiles à imaginer à partir d'une intelligence artificielle logique ou sans imagination.

En tant que pratique en constante évolution, la conception IA est un art autant qu'une compétence, ce qui explique en partie pourquoi les grandes entreprises ont des postes d'architecte de l'information. Ces concepteurs sont les gardiens de systèmes massifs et, grâce à leur compréhension de la croissance des produits au fil du temps, ils aident les équipes de produits, de conception et d'ingénierie à prendre les bonnes décisions au fil des années . Cette échelle d'organisation n'est pas pour tous les concepteurs, mais chaque concepteur peut construire une architecture d'information simple et compréhensible.

• • •

Lectures recommandées sur l'architecture de l'information

IA pour le Web et au-delà

Comment donner un sens à n'importe quel gâchis : architecture de l'information pour tout le monde

Bases de l'architecture de l'information

La différence entre l'architecture de l'information et la conception UX

• • •

Pour en savoir plus sur le blog Toptal Design :

• eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
• L'importance de la conception centrée sur l'humain dans la conception de produits
• Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
• Principes heuristiques pour les interfaces mobiles
• Conception anticipative : comment créer des expériences utilisateur magiques