• Save
L'architecture de l'information
Upcoming SlideShare
Loading in...5
×
 

L'architecture de l'information

on

  • 11,495 vues

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

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

Statistics

Vues

Total Views
11,495
Views on SlideShare
4,323
Embed Views
7,172

Actions

Likes
31
Downloads
0
Comments
0

24 Ajouts 7,172

http://www.drouillat.com 4831
http://www.optimisation-conversion.com 1200
http://magazine.designersinteractifs.org 391
http://www.scoop.it 308
http://claudesuper.com 157
http://infgov.net 105
http://desordre.fr 43
http://invit.me 42
http://info.cloud.xwiki.com 21
https://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 19
http://lo-z.tumblr.com 11
http://www.invit.me 9
http://www.slideshare.net 7
http://www.weboptimizer.fr 6
url_unknown 6
http://translate.googleusercontent.com 5
http://webcache.googleusercontent.com 3
http://eablog.churchill.fr 2
http://cdelamer.netii.net 1
http://www.blogduwebdesign.com 1
https://twitter.com 1
http://www.alertize.com 1
http://churchill-dev2.ecritel.net 1
http://www.linkedin.com 1
Plus...

Accessibilité

Catégories

Détails de l'import

Uploaded via as Adobe PDF

Droits d'utilisation

© Tous droits réservés

Report content

Signalé comme inapproprié Signaler comme inapproprié
Signaler comme inapproprié

Indiquez la raison pour laquelle vous avez signalé cette présentation comme n'étant pas appropriée.

Annuler
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Votre message apparaîtra ici
    Processing...
Poster un commentaire
Modifier votre commentaire

L'architecture de l'information L'architecture de l'information Presentation Transcript

  • Architecturede l’informationBenoît Drouillatjanvier 2011
  • L’origineInformation Architecture (Acronyme : IA)▪ Terme employé pour la première fois par l’architectureamé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 PeterMorville, 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).
  • Une définitionInformation Architecture (Acronyme : IA)▪ L’architecture de l’information est l’art et la science d’organiserl’information des sites web, des intranets et des applicationslogicielles pour aider les utilisateurs à combler leurs besoins eninformation et en faciliter l’usage.▪ C’est également une pratique qui permet de formaliser lesdifférents livrables du modèle d’un site, notamment :arborescence, zoning, story-board (interface filaire ouwireframe en anglais) et système de navigation.
  • 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éplacerdans l’espace (notion de signalétique)▪ Fixe des repères dans l’interface : savoir où l’on se trouve (navigation, fild’Ariane), où l’on peut naviguer etc.
  • Les livrablesInventaire 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)
  • La place de l’architecture de l’information dans unprojet Lancement Cadrage Design Production Vie du siteDéfinition du projet & Analyse de l’existant Architecture de Intégration HTML Mise à jour desobjectifs, cahier des (stats, etc.) l’information contenus, ajoutscharges, brief... Recueil des besoins Design visuel Développement Évolutions de (PSD, JPG) back-end l’architecture, de la Contexte : navigation, de technologie, l’organisation des contraintes, culture pages... de l’entreprise, parties prenantes Tests utilisateur Production éditoriale Attentes et usages Tests et mise en ligne des cibles
  • 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
  • Les objectifsCréer des scénarios d’usage à partir de l’observation des besoins, desaspirations 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
  • Les apports de l’architecture de l’informationConception¶ 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 serviceUsages¶ 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 utilisateursImpact économique¶ Différencier ses produits et services¶ Contribuer au processus d’innovation¶ Améliorer la compétitivité et l’image de l’entreprise
  • 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,2Favoriser 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,7Mieux 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
  • Les composantes de l’architecture de l’informationOrganisation 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
  • Les composantes de l’architecture de l’informationSystè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 ?
  • L’arborescenceDé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érentsniveaux 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
  • 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
  • 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
  • Le story-board / zoning / wireframeDéfinition¶ story-board = structure + contenu + comportementObjectifs¶ Représenter de façon schématique au niveau d’une page : les unitésd’information, les éléments de l’interface (boutons, menus, etc.), leurhiérarchie, leur organisation¶ Faciliter des itérations rapides sur les principes de conception del’interface¶ Cette étape de conception intervient avant la définition du style graphiquede l’interface. Elle n’est pas censée traduire l’identité graphique.¶ Ainsi, les interfaces filaires sont dépourvues de tout élément de stylecomme la couleur, le traitement typographique, les images...
  • 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
  • Story-board haute fidélité versus basse fidélité
  • 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
  • Story-board versus design visuel *designers interactifs* http://www.designersinteractifs.org x
  • Story-board versus design visuel LʼÉcole Multimédia LʼÉcole Multimédia http://www.url.com x http://www.url.com x
  • Un vocabulaire visuel de conception :les design patterns¶https://docs.google.com/templates?q=%23wit&sort=hottest&view=public
  • 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
  • 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
  • L’architecture de l’information dans d’autrescontextes que le web : logiciels
  • L’architecture de l’information dans d’autrescontextes que le web : mobiles
  • L’architecture de l’information dans d’autrescontextes que le web : la vie réelle
  • 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
  • Ressources¶http://wireframes.linowski.ca¶http://iainstitute.org/tools¶www.uxmag.com¶www.uxmatters.com¶www.informationdesign.org