L'architecture de l'information (IA) est l'art et la science d'organiser l'information sur les sites web et applications pour aider les utilisateurs à trouver des informations. Elle comprend la création de livrables tels que les arborescences, les story-boards et les systèmes de navigation, et implique diverses parties prenantes. L'IA vise à améliorer l'expérience utilisateur, optimiser la recherche d'information et renforcer la compétitivité des entreprises.

1. Architecture
de l’information
Benoît Drouillat
janvier 2011

2. L’origine
Information Architecture (Acronyme : IA)
▪ Terme employé pour la première fois par l’architecture
américain Richard Saul Wurman en 1976 pour répondre à
« l’explosion des données créées », selon ses termes.
▪ En 1996, alors que le terme n’est plus employé, il émerge à
nouveau à travers les travaux de Lou Rosenfeld et de Peter
Morville, qui se l’approprient pour l’appliquer au processus de
conception de sites web. Ils publient l’ouvrage de référence sur
le sujet, Information Architecture for the World Wide Web
(O’Reilly, 1998).

3. Une définition
Information Architecture (Acronyme : IA)
▪ L’architecture de l’information est l’art et la science d’organiser
l’information des sites web, des intranets et des applications
logicielles pour aider les utilisateurs à combler leurs besoins en
information et en faciliter l’usage.
▪ C’est également une pratique qui permet de formaliser les
différents livrables du modèle d’un site, notamment :
arborescence, zoning, story-board (interface filaire ou
wireframe en anglais) et système de navigation.

4. Une analogie avec la discipline de l’architecture :
▪ Une métaphore de l’architecture physique des bâtiments
▪ Une référence aux « fondations de l’interface »
▪ Elle fonctionne comme les indicateurs physiques permettant de se déplacer
dans l’espace (notion de signalétique)
▪ Fixe des repères dans l’interface : savoir où l’on se trouve (navigation, fil
d’Ariane), où l’on peut naviguer etc.

5. Les livrables
Inventaire de contenu Arborescence Zoning / Story-board Modèle conceptuel
(content inventory) (sitemap) (wireframe) (conceptual model)
Scénarios d’usage Analyse des tâches Personas
(use cases) (task analysis grid) (personas)

6. Architecture de l’information : place dans un projet
Lancement Cadrage Design Production Vie du site
•Définition du projet •Analyse de l’existant • Architecture de • intégration HTML • Mise à jour des contenus
& objectifs (stats, etc.) l’information
• Développement • Ajouts
•cahier des charges • Recueil des besoins • Design visuel de back-end
l’interface • Évolutions de l’architecture,
•brief... • Contexte : • Production de la navigation, de
technologie, • Tests utilisateurs éditoriale l’organisation des pages
contraintes, culture
de l’entreprise, • Tests et mise en
parties prenantes ligne
• Attentes et usages
des cibles

7. Qui prend en charge l’architecture de l’information ?
En fonction du contexte et du projet :
¶ le chef de projet
¶ l’architecte de l’information
¶ l’ergonome web
¶ le designer

8. Les objectifs
Créer des scénarios d’usage à partir de l’observation des besoins, des
aspirations et des comportements des personnes
¶ Organiser les contenus des principaux gabarits
¶ Les décrire clairement (étiquettes, métadonnées)
¶ Proposer un parcours de navigation
¶ Concevoir des systèmes de recherche
¶ Imaginer et documenter les fonctions du site web
¶ Prototyper l’interface du produit ou du service
¶ ... Et réussir à concilier des logiques divergentes :
• Les contenus peuvent être organisés de façons multiples (ambiguité)
• Les gens ont des besoins distincts
• Les gens ont une représentation variable de la façon d’organiser les choses
• Les niveaux d’expérience des gens sont hétérogènes

9. Les apports de l’architecture de l’information
Conception
¶ Réduire le risque de mauvaise interprétation dans la conception
¶ Explorer différentes pistes sans aller trop loin dans la formalisation
¶ Maîtriser le coût de conception et de développement d’un site
¶ Maîtriser les coûts de maintenance d’un produit ou d’un service
Usages
¶ Maîtriser le coût de la recherche d’information
¶ Réduire le coût de la recherche infructueuse d’information
¶ Rendre accessible l’information (aux sens « findability » + W3C)
¶ Améliorer la productivité par un accès efficient à l’information
¶ Réduire l’effort d’apprentissage des utilisateurs
¶ Augmenter la satisfaction des utilisateurs
Impact économique
¶ Différencier ses produits et services
¶ Contribuer au processus d’innovation
¶ Améliorer la compétitivité et l’image de l’entreprise

10. Les apports du design dans l’entreprise
Attirer des collaborateurs de talent 27,4
Mieux anticiper le changement 30,2
Accéder à de nouveaux marchés 59,4
Orienter la R&D vers la valeur client 46,2
Favoriser la com° en interne et la coopéra° 25,5
Améliorer votre compétitivité 55,7
Rendre l’entreprise + créative 67,9
Augmenter la satisfaction client 74,5
Favoriser la com° et coopéra° en externe 38,7
Mieux différencier vos produits & services 67,9
0 10 20 30 40 50 60 70 80 90 100
Étude sur l’économie du design, menée à la demande du ministère de l’Industrie par l’APCI, la Cité du design de
Saint-Étienne et l’Institut français de la mode, 2010
« Le design est un vecteur d’innovation porteur de
compétitivité pour les entreprises » – OSEO

11. Les composantes de l’architecture de l’information
Organisation des contenus
¶ lister tous les contenus (existants, besoins des utilisateurs, exigences marketing...)
¶ catégoriser les contenus (grouper thématiquement l’information)
¶ structurer les groupes de contenus (hiérarchisation, liens entre eux, raccourcis)
Système de navigation
¶ organisation visuelle et interactive des contenus, définition de l’emplacement des menus
¶ différents niveaux de navigation (globale/locale, transversale, contextuelle)
¶ capitalisation sur l’apprentissage des utilisateurs sur d’autres sites, les conventions externes
(processus d’inscription, gestion d’un panier etc.)
Terminologie
¶chaque élément de l’interface porte un nom qui doit être explicite et exclusif
¶ la formulation des intitulés des boutons, titres de page, libellés de liens, contenus internes
doivent être nommés de manière cohérente

12. Les composantes de l’architecture de l’information
Système de recherche
¶ le fonctionnement du moteur de recherche : quels contenus indexer, quels critères de
recherche proposer ?
¶ la présentation des fonctions de recherche : où placer le moteur, comment présenter les
résultats de recherche, comment les trier ?

13. L’arborescence
Définition
¶ l’arborescence est une représentation visuelle de la structure d’un site web
¶ métaphore de la relation à l’espace
¶ elle illustre les relations (sémantiques) entre les pages de différents
niveaux hiérarchiques
¶ l’arborescence montre les étapes par lesquelles l’internaute devra passer
pour accéder à un contenu donné
¶ à distinguer du “plan du site” (= index des pages du site)
¶ un langage visuel commun : elles ressemblent à un organigramme

14. Arborescence simple (2 niveaux)
Accueil
L’association Magazine Emploi Ressources Annuaire Espace
Derniers
A propos Actualité CDI Guides Accès réservé
Actualité CDI Guides inscrits
Actualité CDI Guides
Devenir S’inscrire dans
membre l’annuaire
Interviews CDI Guides
Interviews CDI Guides
Interviews CDD Disciplines
Agences de
Contact Agences de
design de
Agences
design
design
Agenda CDI Guides
Agenda CDI Guides
Agenda Freelance Métiers
Agences de
Agences de
design
Agences
design
interactives
Publications CDI Guides
Publications CDI Guides
Publications Stages Etudes de cas
Agences de
Agences de
design
design
Freelances
Soumettre Publier une
une actu offre Guides
Guides
Livres
Agences de
Agences de
design
design
Ecoles
Guides
Guides
Boîte à outils

15. Arborescence profonde (4 niveaux)
Home
Rubrique n-1 Rubrique n-1 Rubrique n-1 Rubrique n-1 Rubrique n-1 Rubrique n-1 Rubrique n-1
Rubrique n-2 Rubrique n-2 Rubrique n-2 Rubrique n-2 Rubrique n-2 Rubrique n-2 Rubrique n-2
Rubrique n-3 Rubrique n-3 Rubrique n-3 Rubrique n-3 Rubrique n-2 Rubrique n-3 Rubrique n-3
Page n-4 Page n-4
Rubrique n-3 Rubrique n-3 Rubrique n-2 Rubrique n-2 Rubrique n-2
Page n-4 Page n-4
Page n-4 Page n-4
Page n-4 Rubrique n-2 Rubrique n-3 Rubrique n-2 Rubrique n-3 Rubrique n-3
Rubrique n-2
Page n-4
Rubrique n-3
Rubrique n-2 Rubrique n-2 Rubrique n-3 Rubrique n-3
Page n-4
Rubrique n-2
Page n-4 Page n-4
Page n-4
Rubrique n-3 Rubrique n-3
Page n-4 Rubrique n-2
Page n-4
Rubrique n-3 Rubrique n-3
Page n-4
Page n-4 Page n-4 Page n-4
Page n-4
Page n-4 Page n-4 Rubrique n-2 Page n-4
Rubrique n-3 Rubrique n-2
Page n-4 Page n-4 Page n-4
Rubrique n-2
Page n-4

16. Le story-board / zoning / wireframe
Définition
¶ story-board = structure + contenu + comportement
Objectifs
¶ Représenter de façon schématique au niveau d’une page : les unités
d’information, les éléments de l’interface (boutons, menus, etc.), leur
hiérarchie, leur organisation
¶ Faciliter des itérations rapides sur les principes de conception de
l’interface
¶ Cette étape de conception intervient avant la définition du style graphique
de l’interface. Elle n’est pas censée traduire l’identité graphique.
¶ Ainsi, les interfaces filaires sont dépourvues de tout élément de style
comme la couleur, le traitement typographique, les images...

17. Zoning
Outils / méta-navigation Hiérarchie visuelle
Logo
+ 100 %
Navigation principale
80 %
Mise en avant principale 50 %
30 %
-
Mise en avant Mise en avant
Auto-promotion
secondaire secondaire
Pied de page

18. Story-board haute fidélité versus basse fidélité

19. Le story-board (wireframe)
Haute fidélité Basse fidélité
Ecrans à l’échelle 1:1 pour “dégrossir” le travail très en amont
+ La disposition des éléments est la
même et l’ergonomie définie avt
Ne nécessite pas forcément de logiciel
(papier/crayon)
Permet de gérer très en amont les Redonne une place à la direction
soucis de mise en page/nav. artistique de l’interface
Le client visualise mieux ce que sera
son projet
La direction artistique / le design
d’interface se borne à un travail L’ergonomie n’est pas prise en compte
d’exécution par le D.A.
- Temps de formalisation + important
incompréhension fréquente du client lors
du passage en créa
Nécessité de travailler avec les textes
(“ce n’est pas ce que j’ai validé”)
définitifs

20. Story-board versus design visuel
*designers interactifs*
http://www.designersinteractifs.org
x

21. Story-board versus design visuel
LʼÉcole Multimédia LʼÉcole Multimédia
http://www.url.com
x http://www.url.com
x

22. Un vocabulaire visuel de conception :
les design patterns
¶https://docs.google.com/templates?q=%23wit&sort=hottest&view=public

23. Un vocabulaire visuel de conception :
les design patterns
¶http://developer.yahoo.com/ypatterns/about/stencils/ : différents formats
Container Title Goes Here < July 2007 >
Su Mo Tu We Th Fr Sa
1 2 3 4 5 6 7
1 2 3 8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
Item Title 1 Item Title 2 Item Title 3 29 30 31 1 2 3 4
Subtitle 1 Subtitle 2 Subtitle 3
5 6 7 8 9 10 11
>> View all
August 2007
Su Mo Tu We Th Fr Sa
29 30 31 1 2 3 4
Tab 1 5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
Tab 2 26 27 28 29 30 31 1
2 3 4 5 6 7 8
Tab 3
Primary Secondary
Primary Secondary
Subtext Subtext

24. Un vocabulaire visuel de conception :
les design patterns
¶ http://keynotopia.com : pour Keynote et PowerPoint
Date Accordion Item Option 1

July 2010
Option 1
Sun Mon Tue Wed Thu Fri Sat
1 2 3 4 Option 2
5 6 7 8 9 10 11
✓ Option 3
12 13 14 15 16 17 18
Option 4
19 20 21 22 23 24 25
26 27 28 30 31 Option 5
Accordion Item
Accordion Item
Accordion Item
Accordion Item
Warning
Warning text goes here.
1
No Yes

25. L’architecture de l’information dans d’autres
contextes que le web : logiciels

26. L’architecture de l’information dans d’autres
contextes que le web : mobiles

27. L’architecture de l’information dans d’autres
contextes que le web : la vie réelle

28. Bibliographie
¶ Rosenfeld, Louis, Morville, Peter, Information
Architecture for the World Wide Web: Designing
Large-Scale Web Sites, O’Reilly, 2006
¶Brown, Dan, Communicating Design: Developing
Web Site Documentation for Design and Planning,
New Riders Press, 2006
¶ Wodtke, Christina, Information Architecture:
Blueprints for the Web, New Riders Press, 2002

29. Ressources
¶http://wireframes.linowski.ca
¶http://iainstitute.org/tools
¶www.uxmag.com
¶www.uxmatters.com
¶www.informationdesign.org