SlideShare uma empresa Scribd logo
1 de 29
Architecture
de l’information
Benoît Drouillat
janvier 2011
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).
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.
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.
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)
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
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 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
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
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
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
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 ?
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
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 / 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...
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’autres
contextes que le web : logiciels
L’architecture de l’information dans d’autres
contextes que le web : mobiles
L’architecture de l’information dans d’autres
contextes 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

Mais conteúdo relacionado

Semelhante a L'architecture de l'information

Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3Synerg'hetic
 
Le cycle projet (support de formation)
Le cycle projet (support de formation)Le cycle projet (support de formation)
Le cycle projet (support de formation)iafactory
 
SID LEE | Fanzine Interactif FR
SID LEE | Fanzine Interactif FRSID LEE | Fanzine Interactif FR
SID LEE | Fanzine Interactif FRSid Lee
 
OnMap Visual Design pour modéliser les processus
OnMap Visual Design pour modéliser les processusOnMap Visual Design pour modéliser les processus
OnMap Visual Design pour modéliser les processusNomia
 
Aeliapedia : un Intranet pour le business
Aeliapedia : un Intranet pour le businessAeliapedia : un Intranet pour le business
Aeliapedia : un Intranet pour le businessXWiki
 
L'importance du design dans l'efficacité de votre site web
L'importance du design dans l'efficacité de votre site webL'importance du design dans l'efficacité de votre site web
L'importance du design dans l'efficacité de votre site webJulien Dereumaux
 
Iafactory presentation 2019-v1.0
Iafactory presentation 2019-v1.0Iafactory presentation 2019-v1.0
Iafactory presentation 2019-v1.0iafactory
 
2015 cours-projet web-infonum-part2
2015 cours-projet web-infonum-part22015 cours-projet web-infonum-part2
2015 cours-projet web-infonum-part2Eric Giraudin
 
Présentation Cross Agency
Présentation Cross AgencyPrésentation Cross Agency
Présentation Cross AgencyCross Agency
 
Plaquette Appels d'Offres Artbeating
Plaquette Appels d'Offres ArtbeatingPlaquette Appels d'Offres Artbeating
Plaquette Appels d'Offres ArtbeatingArtbeating
 
Valtech jamespot-social business
Valtech jamespot-social businessValtech jamespot-social business
Valtech jamespot-social businessAlain GARNIER
 
Valtech jamespot-social business
Valtech jamespot-social businessValtech jamespot-social business
Valtech jamespot-social businessAlain GARNIER
 
Développement d'un site web pour la promotion de pme 2012 mentor cld vallée...
Développement d'un site web pour la promotion de pme 2012   mentor cld vallée...Développement d'un site web pour la promotion de pme 2012   mentor cld vallée...
Développement d'un site web pour la promotion de pme 2012 mentor cld vallée...MXO | agence totale
 
Process design à Ouest-France Multimédia
Process design à Ouest-France MultimédiaProcess design à Ouest-France Multimédia
Process design à Ouest-France MultimédiaPierre Bernat
 
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...Flupa
 
Gestion Documentaire Enrichie pour SharePoint 2010 : Capture, Recherche et Co...
Gestion Documentaire Enrichie pour SharePoint 2010 : Capture, Recherche et Co...Gestion Documentaire Enrichie pour SharePoint 2010 : Capture, Recherche et Co...
Gestion Documentaire Enrichie pour SharePoint 2010 : Capture, Recherche et Co...Microsoft Technet France
 

Semelhante a L'architecture de l'information (20)

Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3
 
Le cycle projet (support de formation)
Le cycle projet (support de formation)Le cycle projet (support de formation)
Le cycle projet (support de formation)
 
Presentation karinico
Presentation karinicoPresentation karinico
Presentation karinico
 
Offre dseeder 2012
Offre dseeder 2012Offre dseeder 2012
Offre dseeder 2012
 
SID LEE | Fanzine Interactif FR
SID LEE | Fanzine Interactif FRSID LEE | Fanzine Interactif FR
SID LEE | Fanzine Interactif FR
 
Blue Acacia
Blue AcaciaBlue Acacia
Blue Acacia
 
OnMap Visual Design pour modéliser les processus
OnMap Visual Design pour modéliser les processusOnMap Visual Design pour modéliser les processus
OnMap Visual Design pour modéliser les processus
 
Aeliapedia : un Intranet pour le business
Aeliapedia : un Intranet pour le businessAeliapedia : un Intranet pour le business
Aeliapedia : un Intranet pour le business
 
L'importance du design dans l'efficacité de votre site web
L'importance du design dans l'efficacité de votre site webL'importance du design dans l'efficacité de votre site web
L'importance du design dans l'efficacité de votre site web
 
Iafactory presentation 2019-v1.0
Iafactory presentation 2019-v1.0Iafactory presentation 2019-v1.0
Iafactory presentation 2019-v1.0
 
2015 cours-projet web-infonum-part2
2015 cours-projet web-infonum-part22015 cours-projet web-infonum-part2
2015 cours-projet web-infonum-part2
 
Présentation Cross Agency
Présentation Cross AgencyPrésentation Cross Agency
Présentation Cross Agency
 
Metiers Design Numerique 2009
Metiers Design Numerique 2009Metiers Design Numerique 2009
Metiers Design Numerique 2009
 
Plaquette Appels d'Offres Artbeating
Plaquette Appels d'Offres ArtbeatingPlaquette Appels d'Offres Artbeating
Plaquette Appels d'Offres Artbeating
 
Valtech jamespot-social business
Valtech jamespot-social businessValtech jamespot-social business
Valtech jamespot-social business
 
Valtech jamespot-social business
Valtech jamespot-social businessValtech jamespot-social business
Valtech jamespot-social business
 
Développement d'un site web pour la promotion de pme 2012 mentor cld vallée...
Développement d'un site web pour la promotion de pme 2012   mentor cld vallée...Développement d'un site web pour la promotion de pme 2012   mentor cld vallée...
Développement d'un site web pour la promotion de pme 2012 mentor cld vallée...
 
Process design à Ouest-France Multimédia
Process design à Ouest-France MultimédiaProcess design à Ouest-France Multimédia
Process design à Ouest-France Multimédia
 
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
 
Gestion Documentaire Enrichie pour SharePoint 2010 : Capture, Recherche et Co...
Gestion Documentaire Enrichie pour SharePoint 2010 : Capture, Recherche et Co...Gestion Documentaire Enrichie pour SharePoint 2010 : Capture, Recherche et Co...
Gestion Documentaire Enrichie pour SharePoint 2010 : Capture, Recherche et Co...
 

Mais de France

Design d’interaction : un panorama des réalisations françaises 2015
Design d’interaction : un panorama des réalisations françaises 2015Design d’interaction : un panorama des réalisations françaises 2015
Design d’interaction : un panorama des réalisations françaises 2015France
 
Étude Deloitte sur les usages Mobile des Français en 2014
Étude Deloitte sur les usages Mobile des Français en 2014Étude Deloitte sur les usages Mobile des Français en 2014
Étude Deloitte sur les usages Mobile des Français en 2014France
 
Sondage salaires-2014
Sondage salaires-2014Sondage salaires-2014
Sondage salaires-2014France
 
Sondage salaires-2013
Sondage salaires-2013Sondage salaires-2013
Sondage salaires-2013France
 
Les salaires des métiers du design interactif, édition 2012
Les salaires des métiers du design interactif, édition 2012Les salaires des métiers du design interactif, édition 2012
Les salaires des métiers du design interactif, édition 2012France
 
Les applications iPad des médias
Les applications iPad des médias Les applications iPad des médias
Les applications iPad des médias France
 
Le design de l’information en ligne
Le design de l’information en ligne Le design de l’information en ligne
Le design de l’information en ligne France
 
Présentation des métiers du design numérique à l'ESSEC - mai 2009
Présentation des métiers du design numérique à l'ESSEC - mai 2009Présentation des métiers du design numérique à l'ESSEC - mai 2009
Présentation des métiers du design numérique à l'ESSEC - mai 2009France
 
Benchmark Presse En Ligne
Benchmark Presse En LigneBenchmark Presse En Ligne
Benchmark Presse En LigneFrance
 

Mais de France (9)

Design d’interaction : un panorama des réalisations françaises 2015
Design d’interaction : un panorama des réalisations françaises 2015Design d’interaction : un panorama des réalisations françaises 2015
Design d’interaction : un panorama des réalisations françaises 2015
 
Étude Deloitte sur les usages Mobile des Français en 2014
Étude Deloitte sur les usages Mobile des Français en 2014Étude Deloitte sur les usages Mobile des Français en 2014
Étude Deloitte sur les usages Mobile des Français en 2014
 
Sondage salaires-2014
Sondage salaires-2014Sondage salaires-2014
Sondage salaires-2014
 
Sondage salaires-2013
Sondage salaires-2013Sondage salaires-2013
Sondage salaires-2013
 
Les salaires des métiers du design interactif, édition 2012
Les salaires des métiers du design interactif, édition 2012Les salaires des métiers du design interactif, édition 2012
Les salaires des métiers du design interactif, édition 2012
 
Les applications iPad des médias
Les applications iPad des médias Les applications iPad des médias
Les applications iPad des médias
 
Le design de l’information en ligne
Le design de l’information en ligne Le design de l’information en ligne
Le design de l’information en ligne
 
Présentation des métiers du design numérique à l'ESSEC - mai 2009
Présentation des métiers du design numérique à l'ESSEC - mai 2009Présentation des métiers du design numérique à l'ESSEC - mai 2009
Présentation des métiers du design numérique à l'ESSEC - mai 2009
 
Benchmark Presse En Ligne
Benchmark Presse En LigneBenchmark Presse En Ligne
Benchmark Presse En Ligne
 

L'architecture de l'information

  • 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