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 ».
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)

15. 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

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

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

21. Story-board versus design visuel

22. Un vocabulaire visuel de conception :les design patterns
https://docs.google.com/templatesq=%23wit&sort=hottest&view=public

23. Un vocabulaire visuel de conception :les design patterns
http://developer.yahoo.com/ypatterns/about/stencils/ : différents formats

24. Un vocabulaire visuel de conception :les design patterns
http://keynotopia.com : pour Keynote et PowerPoint

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

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

27. L’architecture de l’information dans d’autrescontextes 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