L’architecture de l’information : définition, apports, méthodologies.

(1 raters, 4 scores, average: 4,00 out of 5)

Architecture de l’information en tant qu’acteur du processus de la conception Web

Comment vous organisez-vous lorsque vous concevez un site Web ? La première étape consiste généralement à recueillir vos informations à partir du client (ou vous-même si vous faites votre propre site web). La partie suivante du processus consiste à examiner, analyser et organiser l’information que vous avez recueillies. Cette partie du processus de conception web relève de la »Architecture de l’information ».

View more presentations from Designers Interactifs by Benoît Drouillat 2011

L’architecture de l’information — Presentation Transcript

1. Architecture de l’information Benoît Drouillat 

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 deconception de sites web. Ils publient l’ouvrage de référence surle sujet, Information Architecture for the World Wide Web(O’Reilly, 1998).

3. Une définition Information Architecture

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 diffé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 (content inventory)
  • Arborescence Zoning (sitemap)
  • Story-board (wireframe) 
  • Modèle conceptuel (conceptual model) 
  • Scénarios d’usage (use cases)
  • Analyse des tâches (task analysis grid)
  • Personas (personas)

6. La place de l’architecture de l’information dans un projet

Lancement 
définition du projet & objectifs
cahier des charges
brief…  

Cadrage 
Analyse de l’existant  (stats, etc.) 
Recueil des besoins  
Contexte  :  technologie, contraintes, culture de l’entreprise,  parties prenantes
Attentes et usages des cibles

Design 
Architecture  de l’information 
Design visuel de l’interface
Tests utilisateur  

Production 
Intégration HTML 
Développement  back-end 
Production éditoriale  
Tests et mise en ligne 

Vie du site
Mise à jour des contenus
ajouts  
Évolutions de  l’architecture, de la navigation, de  l’organisation des pages…   

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 diffé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 efficient à l’information
Réduire l’effort d’apprentissage des utilisateurs
Augmenter la satisfaction des utilisateurs

Impact économique
Diffé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
( É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)

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
diffé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 différents niveaux hiérarchiques
– l’arborescence montre les étapes par lesquelles l’internaute devra passerpour 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)

L'architecture de l'information - arborescence simple 2 niveaux

L'architecture de l'information - arborescence simple 2 niveaux

15. Arborescence profonde (4 niveaux)

L'architecture de l'information - arborescence profonde 4 niveaux

L'architecture de l'information - arborescence profonde 4 niveaux

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

L'architecture de l'information - zoning

L'architecture de l'information - zoning

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

L'architecture de l'information - storyboard haute et basse fidelite

L'architecture de l'information - storyboard haute et basse fidelite

19. Le story-board (wireframe)

Haute fidélité
Les Plus

  • Ecrans à l’échelle 1:1  
  • La disposition des éléments est la même et l’ergonomie définie avant 
  • Permet de gérer très en amont les soucis de mise en page/nav.
  • Le client visualise mieux ce que sera son projet

Les Moins

  • La direction artistique / le design d’interface se borne à un travail d’exécution par le D.A. 
  • Temps de formalisation + important 
  • Nécessité de travailler avec les textes définitifs

Basse fidélité
Les Plus

  • pour “dégrossir” le travail très en amont
  • Ne nécessite pas forcément de logiciel (papier/crayon)
  • Redonne une place à la direction artistique de l’interface

Les Moins

  • L’ergonomie n’est pas prise en compte
  • incompréhension fréquente du client lors du passage en créa (“ce n’est pas ce que j’ai validé”)

20. Story-board versus design visuel

L'architecture de l'information-storyboard versus design visuel

L'architecture de l'information-storyboard versus design visuel

21. Story-board versus design visuel

L'architecture de l'information-storyboard versus design visuel

L'architecture de l'information-storyboard versus design visuel

22. Un vocabulaire visuel de conception :les design patterns

https://docs.google.com/templatesq=%23wit&sort=hottest&view=public

L'architecture de l'information-vocabulaire visuel de conception - design patterns

L'architecture de l'information-vocabulaire visuel de conception - design patterns

23. Un vocabulaire visuel de conception :les design patterns

http://developer.yahoo.com/ypatterns/about/stencils/ : différents formats

L'architecture de l'information-vocabulaire visuel de conception - design patterns

L'architecture de l'information-vocabulaire visuel de conception - design patterns

24. Un vocabulaire visuel de conception :les design patterns

http://keynotopia.com : pour Keynote et PowerPoint

L'architecture de l'information-vocabulaire visuel de conception - design patterns

L'architecture de l'information-vocabulaire visuel de conception - design patterns

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

L'architecture de l'information-logiciels

L'architecture de l'information- logiciels

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

L'architecture de l'information-mobiles

L'architecture de l'information - mobiles

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

L'architecture de l'information - vie reelle

L'architecture de l'information - 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

Franck Scandolera - Consultant Expert Independant Digital Analytics

Expert Indépendant Digital Analytics (data implementation, manipulation, analysis et data visualisation). Ma petite entreprise webAnalyste se développe grâce à vos avis, alors n'hésitez pas à recommander mes compétences sur LindedIn et à partager mon profil à vos clients, collègues, amis et autres que vous jugez intéressés par mon expertise. Merci !