Architecture et design d'information

3 506 vues

Publié le

Ce sont les slides du classe que j'ai donné à l'École d'été de l'Université de Montréal dans le cadre du cours Architecture d'Information.

Publié dans : Design, Formation, Business
0 commentaire
5 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 506
Sur SlideShare
0
Issues des intégrations
0
Intégrations
913
Actions
Partages
0
Téléchargements
56
Commentaires
0
J’aime
5
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Architecture et design d'information

  1. 1. Architecture d’information Organisation des grands contenus, arborescences, maquettesFriday, May 27, 2011
  2. 2. Organisation des contenusFriday, May 27, 2011
  3. 3. 1. Audit du contenuFriday, May 27, 2011
  4. 4. 1. Audit du contenu Contenu  existant Objec0f  de  contenu  futur Tests  d’u0lisateursFriday, May 27, 2011
  5. 5. 1. Audit du contenu ★ Inventaire du contenu existant et sommaire ★ Documentation par sections ★ Organisation par type de contenu (vidéos, textes, nouvelles, résumés, images, sons, ...) ★ Indication des mises à jour (dynamique, automatique, éditorial)Friday, May 27, 2011
  6. 6. 1. Audit du contenuFriday, May 27, 2011
  7. 7. Organiser le chaosFriday, May 27, 2011
  8. 8. 1. Audit du contenu ★ Arborescence principale : Accueil, Société, musique, ... ★ Arborescence secondaire correspondant ★ Détail du contenu (type, mise à jour) ★ Détail des éléments répétitifs ou confondantsFriday, May 27, 2011
  9. 9. 1. Audit du contenu L’objectif de cet exercice : ★ Connaître le contenu ★ Créer des liens entre différentes sections ★ Comprendre la dynamique du site ★ Comprendre comment ce site ce construit ★ Regroupement des grands contenus ★ “Card sorting”Friday, May 27, 2011
  10. 10. Triage de carteFriday, May 27, 2011
  11. 11. 1. Audit du contenu : Triage de carte Comment s’y prendre : ★ Grouper l’information par sujet (type d’information) ★ Définir chaque groupe et bien les différenciers (parfois regrouper des sections similaires) ★ Identifier les objectifs de chacun des groupesFriday, May 27, 2011
  12. 12. 1. Audit du contenu : Triage de carte L’objectif de cet exercice : ★ Augmenter la trouvabilité des éléments du site (l’information facile à trouver) ★ Créer un système solide et fiable ★ Créer des “patterns” familier pour l’utilisateurFriday, May 27, 2011
  13. 13. À garder en têteFriday, May 27, 2011
  14. 14. À garder en tête Objec0f  de  la  marque Objec0f  du  client à Objec0f  de  l’u0lisateurFriday, May 27, 2011
  15. 15. ArborescenceFriday, May 27, 2011
  16. 16. Arborescence principaleFriday, May 27, 2011
  17. 17. 2. Arborescence principale Web  site  :  Accueil Recherche Groupe  d’informa0on  A Groupe  d’informa0on  B Groupe  d’informa0on  C Groupe  d’informa0on  D Sec0on  B1 Sec0on  C1 Thèmes  communs Sous-­‐groupe  A1 Sous-­‐groupe  A2 Sous-­‐groupe  D1 Sous-­‐groupe  D2 Thèmes  1 Sec0on  B2 Sec0on  C2 Thèmes  2 Sec0on  A2 Sec0on  D1 Thèmes  3 Sec0on  C3 Sec0on  D1’ Thèmes  4 Forum  de   Communauté UGC conversa0onFriday, May 27, 2011
  18. 18. 2. Arborescence principale L’objectif de cet exercice : ★ Organiser le contenu principale ★ S’addresser au 80% des utilisateurs ★ Avoir un objectif principale Web  site  :  Accueil Recherche Groupe  d’informa0on  A Groupe  d’informa0on  B Groupe  d’informa0on  C Groupe  d’informa0on  DFriday, May 27, 2011
  19. 19. 2. Arborescence principale Objectif de l’arborescence principale ★ Orienter l’utilisateur rapidement ★ Offrir les services de l’entreprise de façon claire ★ Regrouper stratégiquement le contenu sous les bonnes sectionsFriday, May 27, 2011
  20. 20. 2. Arborescence principaleFriday, May 27, 2011
  21. 21. 2. Arborescence principaleFriday, May 27, 2011
  22. 22. Arborescence secondaireFriday, May 27, 2011
  23. 23. 2. Arborescence secondaire Objectif de l’arborescence principale ★ Trouver  l’informa0on  clé  à  travers  tout  le  site ★ Contenir  des  sec0ons  cachées  (les  mePre  de  l’avant) ★ Créer  des  liens  vers  les  sites  partenaires  (ou  des  sites  externes)Friday, May 27, 2011
  24. 24. 2. Arborescence secondaireFriday, May 27, 2011
  25. 25. 2. Arborescence secondaireFriday, May 27, 2011
  26. 26. Dessiner l’espaceFriday, May 27, 2011
  27. 27. 3. Dessiner l’espace La page comme espace d’informationFriday, May 27, 2011
  28. 28. 3.1. Périmètres de l’affichage par défaut 640 pixels 1000 pixelsFriday, May 27, 2011
  29. 29. 3.2. L’information du contenant à l’arrivée ★ L’utilisateur sait où il se trouve ★ L’utilisateur a des options de navigation ★ L’utilisateur est guidé ★ Le site offre d’emblée les services que l’utilisateur est venu chercherFriday, May 27, 2011
  30. 30. 3.3. Objectif premier : Trouver de l’information Comment chercher?Friday, May 27, 2011
  31. 31. 3.4. Où sommes-nous? En-têteFriday, May 27, 2011
  32. 32. 3.5. Entrée directe, visite libre Menu principalFriday, May 27, 2011
  33. 33. 3.6. Piquer la curiosité de l’utilisateur Il y a une profondeur à l’informationFriday, May 27, 2011
  34. 34. GabaritsFriday, May 27, 2011
  35. 35. Dissection de l’information selon un type de gabarit pour une page d’accueilFriday, May 27, 2011
  36. 36. 4. Gabarits Navigation principale Navigation de bas de pageFriday, May 27, 2011
  37. 37. 4. Gabarits Sec0on  de   Sec0on  de   nouvelles droite  de   promo0on Sec0on  de  services  et  offres  à   mePre  de  l’avantFriday, May 27, 2011
  38. 38. 4. Gabarits : Favoriser le contenu principal Texte Colonne  de   droite:  auto-­‐ promo0on  et   informa0on   secondaire Images Liens  u0lesFriday, May 27, 2011
  39. 39. 4. Gabarits : Favoriser le contenu médiatique Sec0on  de  visionnement Informa0ons  par  rapport  au   contenu  visionné Contenu  1 Contenu  2 Contenu  3 Mots  clés  et  liens  u0lesFriday, May 27, 2011
  40. 40. Structure et architectureFriday, May 27, 2011
  41. 41. 4. Gabarits : Comment le contenu est-il inter-relié? Sec0on  de  nouvelles Sec0on  de   Texte Colonne  de  droite:   droite  de   auto-­‐promo0on  et   promo0on informa0on   secondaire Sec0on  de  visionnement Images Informa0ons  par  rapport   au  contenu  visionné Contenu  1 Contenu  2 Contenu  3 Liens  u0les Sec0on  de  services  et   offres  à  mePre  de  l’avant Mots  clés  et  liens  u0lesFriday, May 27, 2011
  42. 42. 4. Gabarits : Page de produit ★ Montrer le produit à l’utilisateur ★ Se différencier par la marque ★ Présenter des liens vers des produits similairesFriday, May 27, 2011
  43. 43. 4. Gabarits : “Auto-Complete” ★ Sert à éviter les confusions ★ L’élément entré est facilement détecté ★ Offre toutes les possibilités avec les éléments entrés ★ La rapidité de trouver des éléments est un objectif ★ La précision de la recherche est un objectifFriday, May 27, 2011
  44. 44. 4. Gabarits : Liste d’article ★ Utilisé pour attirer l’attention de l’utilisateur sur le contenu qui pourrait l’intéresser ★ Si le contenu est une histoire, une nouvelle, un article ★ Permet à l’utilisateur de rapidement parcourir les thèmes présentés ★ Une longue liste permet de rapidement parcourir plusieurs articlesFriday, May 27, 2011
  45. 45. WireframeFriday, May 27, 2011
  46. 46. 5. WireframeFriday, May 27, 2011
  47. 47. 5.1 GrilleFriday, May 27, 2011
  48. 48. 5.2 Design et grilleFriday, May 27, 2011
  49. 49. 5.3 “960 Grids”Friday, May 27, 2011
  50. 50. 5.4 Wireframe pour La Chambre des notairesFriday, May 27, 2011
  51. 51. La forme et le contenu Étude sur la hiérarchie du contenu et son impact sur l’utilisateurFriday, May 27, 2011
  52. 52. La forme: le contenantFriday, May 27, 2011
  53. 53. 1. La largeur souhaitée d’un texte 640 pixels ˜600 pixels 1000 pixelsFriday, May 27, 2011
  54. 54. 2. S’adapter au contenant variable le text doit s’adapter aux différentes échelles +1000 pixelsFriday, May 27, 2011
  55. 55. 3. Le nombre de caractères par colonne 45 à 70 caractères maximum par colonne Cela dépend des éléments suivants : ★ Taille de la typo (min 11 - 12 pix) ★ Espace entre les lignes (min 14 pix) ★ Nombres de paragraphesFriday, May 27, 2011
  56. 56. 4. Pourquoi seulement 45 à 70 caractères? v 30 cm de l’écranFriday, May 27, 2011
  57. 57. 4.1 La résolution de l’écran n’est pas le même que celui du papier v Écran lumineux et résolution basseFriday, May 27, 2011
  58. 58. 4.2 Une composition trop large est décorativeFriday, May 27, 2011
  59. 59. La forme: le contenuFriday, May 27, 2011
  60. 60. 1. Une bonne lisibilité du texte ★ Utiliser des couleurs à grands contrastes (texte noir sur fond blanc; texte blanc sur fond noir) ★ Le fond doit toujours être de couleur unie (ou avec des dessins très légers et subtils) ★ Le texte doit se tenir seul sans ornements ★ Justifier à gauche les textes pour suivre l’oeil occidental (de gauche à droite) ★ Ne pas utiliser des petites majuscules pour tout le texte ★ Utiliser de façon justifiée les styles Gras et Italique (pour permettre que ces éléments soient mis de l’avant)Friday, May 27, 2011
  61. 61. 2. Les points de références Titre Notes Image Sous-titre Liens >> Page suivanteFriday, May 27, 2011
  62. 62. 2.1 Les points de références Résumé explicatif >>Friday, May 27, 2011
  63. 63. 2.2 Faciliter la tâche de “scanner” l’information Résumé explicatif ★ Utiliser des conventions claires telles : Titre, descriptions du document en 250 caractères, texte intégral, système de pagination, notes de bas de page, liens utiles. >>Friday, May 27, 2011
  64. 64. 2.3 Un exemple concret : 90% Texte Titre  de  ce  document Maecenas  rutrum  arcu  facilisis  metus  0ncidunt  feugiat.  Donec   Maecenas  rutrum  arcu  facilisis  metus   sollicitudin  ultrices  elit  quis  aliquam.  Curabitur  id  eros  quam.   0ncidunt  feugiat.  Donec  sollicitudin   “Aliquam  ut  nunc  vitae  magna  porta  volutpat.  In  hac  habitasse   ultrices  elit  quis  aliquam.  Curabitur  id   eros  quam.  Aliquam  ut  nunc  vitae   platea  dictumst”.  Sed  vel  mi  ipsum,  non  tris0que  erat.   magna  porta  volutpat.  In  hac  habitasse   Curabitur  pharetra  vulputate  eros  sit  amet  dapibus.   platea  dictumst.  Sed  vel  mi  ipsum,  non   tris0que  erat.  Curabitur  pharetra   vulputate  eros  sit  amet  dapibus.   Aenean  ornare  tempus  vulputate.  Suspendisse  id  eros  in  dui   lobor0s  bibendum  vel  eget  urna.  Duis  ves0bulum  tempor   iaculis.  Pellentesque  habitant  morbi  tris0que  senectus  et  netus   et  malesuada  fames  ac  turpis  egestas.  Nullam  hendrerit   fermentum  mi  lacinia  vehicula.  Ut  scelerisque  metus  vel  nisi   facilisis  malesuada.  In  gravida  dui  quis  nisl  laoreet  viverra.   Phasellus  non  quam  tortor,  in  dictum  lorem.  Sed  pharetra   mollis  nisi,  sed  venena0s  sem  tris0que  sed.  Aenean  ornare   tempus  vulputate.  Suspendisse  id  eros  in  dui  lobor0s  bibendum   vel  eget  urna.  Duis  ves0bulum  tempor  iaculis.  Pellentesque   habitant  morbi  tris0que  senectus  et  netus  et  malesuada  fames   ac  turpis  egestas.  Nullam  hendrerit  fermentum  mi  lacinia   vehicula.   1.1.  Sous-­‐8tre  de  ce  document Ut  scelerisque  metus  vel  nisi  facilisis  malesuada.  In  gravida  dui   quis  nisl  laoreet  viverra.  Phasellus  non  quam  tortor,  in  dictum  Friday, May 27, 2011 lorem.  Sed  pharetra  mollis  nisi,  sed  venena0s  sem  tris0que  sed.  
  65. 65. 3. Les espaces vides sont aussi importants que les espaces pleins ★ Les espaces vides sur une page web ne peuvent être trop grands, car l’utilisateur est ralenti au fait de “scanner” l’information rapidement ★ Un espace vide justifié et équilibré permet d’être utilisé afin de séparer naturellement le contenu sur une pageFriday, May 27, 2011
  66. 66. 4. Emphases ★ U9liser  l’italique  lorsque  vous  citez  un  livre   ou  un  ar9cle...  mais  n’écrivez  pas  tout  en   italique,  car  cela  défit  l’objec9f  de  meAre   l’accent  sur  une  par9e  du  texte! ★ Me:re  du  texte  en  Gras  pour  a>rer   l’a:en8on  sur  certains  termes.  A:en8on   de  ne  pas  tout  écrire  en  Gras! ★ Ne  pas  souligner  le  texte  sur  le  Web  pour   mePre  de  l’emphase;  car  les  u0lisateurs   peuvent  penser  que  c’est  un  lien. ★ Ne  pas  u0liser  des  couleurs  dans  le  texte   pour  mePre  de  l’emphase;  car  les   u0lisateurs  peuvent  penser  que  c’est  un   message  d’erreur  ou  un  lien  vers  une  autre   page. À utiliser avec modération !Friday, May 27, 2011
  67. 67. 5. Cohérence ★ Créer une structure stable, mais malléable dans laquelle le texte s’inscrit. ★ Garger la même structure tout au long des pages du site afin de permettre aux lecteurs de s’y retrouver. ★ Décider d’un réglage continu et consistant tout au long des pages du site (police de caractère, taille, couleurs, liens ...)Friday, May 27, 2011
  68. 68. Avoir à coeur l’utilisateurFriday, May 27, 2011
  69. 69. Faire du contenu pour le Web ★ Contenu court, parcourable rapidement. ★ Contenu allant droit au but (clair, épuré, éloquant) ★ Contenu répondant rapidement aux questions des utilisateurs. ★ Utiliser un language approprié à celui du lecteur en bout de ligne.Friday, May 27, 2011
  70. 70. À retenir ★ Faciliter la tâche de “scanner” l’information rapidement. Donc en priorisant la lisibilité. ★ Utiliser des conventions cohérentes tout au long des pages du site web. ★ Construire une structure stable et malléable pour contenir l’information de façon à suivre les standards Web et de servir aux utilisateurs. ★ Construire le contenu de façon à ce que l’information soit priorisée sur la forme. La forme aide à la lecture du contenu et non l’inverse. ★ Mettre en évidence ce qui est un lien vers une autre page.Friday, May 27, 2011

×