architecture et design d'information
DESCRIPTION
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.TRANSCRIPT
![Page 1: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/1.jpg)
Architecture d’informationOrganisation des grands contenus, arborescences, maquettes
Friday, May 27, 2011
![Page 2: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/2.jpg)
Organisation des contenus
Friday, May 27, 2011
![Page 3: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/3.jpg)
1. Audit du contenu
Friday, May 27, 2011
![Page 4: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/4.jpg)
1. Audit du contenu
Contenu existant Objec0f de contenu futur
Tests d’u0lisateurs
Friday, May 27, 2011
![Page 5: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/5.jpg)
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
![Page 6: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/6.jpg)
1. Audit du contenu
Friday, May 27, 2011
![Page 7: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/7.jpg)
Organiser le chaos
Friday, May 27, 2011
![Page 8: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/8.jpg)
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 confondants
Friday, May 27, 2011
![Page 9: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/9.jpg)
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
![Page 10: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/10.jpg)
Triage de carte
Friday, May 27, 2011
![Page 11: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/11.jpg)
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 groupes
Friday, May 27, 2011
![Page 12: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/12.jpg)
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’utilisateur
Friday, May 27, 2011
![Page 13: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/13.jpg)
À garder en tête
Friday, May 27, 2011
![Page 14: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/14.jpg)
àObjec0f de la marque Objec0f du client
Objec0f de l’u0lisateur
À garder en tête
Friday, May 27, 2011
![Page 15: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/15.jpg)
Arborescence
Friday, May 27, 2011
![Page 16: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/16.jpg)
Arborescence principale
Friday, May 27, 2011
![Page 17: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/17.jpg)
2. Arborescence principale
Web site : Accueil
Groupe d’informa0on A Groupe d’informa0on B Groupe d’informa0on C Groupe d’informa0on D
Sous-‐groupe A1 Sous-‐groupe A2
Sec0on A2
Sec0on B1 Sec0on C1
Sec0on B2 Sec0on C2
Sous-‐groupe D1 Sous-‐groupe D2
Sec0on D1
Sec0on D1’
Sec0on C3
Recherche
Thèmes communs
Thèmes 1
Thèmes 2
Thèmes 3
Thèmes 4
CommunautéForum de
conversa0onUGC
Friday, May 27, 2011
![Page 18: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/18.jpg)
L’objectif de cet exercice :
★ Organiser le contenu principale
★ S’addresser au 80% des utilisateurs
★ Avoir un objectif principale
2. Arborescence principale
Web site : Accueil
Groupe d’informa0on A Groupe d’informa0on B Groupe d’informa0on C Groupe d’informa0on D
Recherche
Friday, May 27, 2011
![Page 19: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/19.jpg)
★ Orienter l’utilisateur rapidement
★ Offrir les services de l’entreprise de façon claire
★ Regrouper stratégiquement le contenu sous les bonnes sections
2. Arborescence principale
Objectif de l’arborescence principale
Friday, May 27, 2011
![Page 20: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/20.jpg)
2. Arborescence principale
Friday, May 27, 2011
![Page 21: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/21.jpg)
2. Arborescence principale
Friday, May 27, 2011
![Page 22: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/22.jpg)
Arborescence secondaire
Friday, May 27, 2011
![Page 23: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/23.jpg)
★ 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)
2. Arborescence secondaire
Objectif de l’arborescence principale
Friday, May 27, 2011
![Page 24: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/24.jpg)
2. Arborescence secondaire
Friday, May 27, 2011
![Page 25: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/25.jpg)
2. Arborescence secondaire
Friday, May 27, 2011
![Page 26: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/26.jpg)
Dessiner l’espace
Friday, May 27, 2011
![Page 27: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/27.jpg)
La page comme espace d’information
3. Dessiner l’espace
Friday, May 27, 2011
![Page 28: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/28.jpg)
640 pixels
1000 pixels
3.1. Périmètres de l’affichage par défaut
Friday, May 27, 2011
![Page 29: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/29.jpg)
★ 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 chercher
3.2. L’information du contenant à l’arrivée
Friday, May 27, 2011
![Page 30: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/30.jpg)
Comment chercher?
3.3. Objectif premier : Trouver de l’information
Friday, May 27, 2011
![Page 31: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/31.jpg)
En-tête
3.4. Où sommes-nous?
Friday, May 27, 2011
![Page 32: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/32.jpg)
Menu principal
3.5. Entrée directe, visite libre
Friday, May 27, 2011
![Page 33: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/33.jpg)
Il y a une profondeur à l’information
3.6. Piquer la curiosité de l’utilisateur
Friday, May 27, 2011
![Page 34: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/34.jpg)
Gabarits
Friday, May 27, 2011
![Page 35: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/35.jpg)
Dissection de l’information selon un type de gabarit
pour une page d’accueil
Friday, May 27, 2011
![Page 36: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/36.jpg)
Navigation principale
Navigation de bas de page
4. Gabarits
Friday, May 27, 2011
![Page 37: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/37.jpg)
Sec0on de services et offres à mePre de l’avant
Sec0on de droite de promo0on
Sec0on de nouvelles
4. Gabarits
Friday, May 27, 2011
![Page 38: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/38.jpg)
Colonne de droite: auto-‐promo0on et informa0on secondaire
Texte
Images
Liens u0les
4. Gabarits : Favoriser le contenu principal
Friday, May 27, 2011
![Page 39: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/39.jpg)
Sec0on de visionnement
Informa0ons par rapport au contenu visionné
Contenu 1 Contenu 2 Contenu 3
Mots clés et liens u0les
4. Gabarits : Favoriser le contenu médiatique
Friday, May 27, 2011
![Page 40: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/40.jpg)
Structure et architecture
Friday, May 27, 2011
![Page 41: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/41.jpg)
Sec0on de services et offres à mePre de l’avant
Sec0on de droite de promo0on
Sec0on de nouvellesColonne de droite: auto-‐promo0on et
informa0on secondaire
Texte
Images
Liens u0les
Sec0on de visionnement
Informa0ons par rapport au contenu visionné
Contenu 1 Contenu 2 Contenu 3
Mots clés et liens u0les
4. Gabarits : Comment le contenu est-il inter-relié?
Friday, May 27, 2011
![Page 42: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/42.jpg)
4. Gabarits : Page de produit
★ Montrer le produit à l’utilisateur
★ Se différencier par la marque
★ Présenter des liens vers des produits similaires
Friday, May 27, 2011
![Page 43: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/43.jpg)
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 objectif
Friday, May 27, 2011
![Page 44: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/44.jpg)
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 articles
Friday, May 27, 2011
![Page 45: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/45.jpg)
Wireframe
Friday, May 27, 2011
![Page 46: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/46.jpg)
5. Wireframe
Friday, May 27, 2011
![Page 47: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/47.jpg)
5.1 Grille
Friday, May 27, 2011
![Page 48: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/48.jpg)
5.2 Design et grille
Friday, May 27, 2011
![Page 49: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/49.jpg)
5.3 “960 Grids”
Friday, May 27, 2011
![Page 50: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/50.jpg)
5.4 Wireframe pour La Chambre des notaires
Friday, May 27, 2011
![Page 51: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/51.jpg)
La forme et le contenuÉtude sur la hiérarchie du contenu et
son impact sur l’utilisateur
Friday, May 27, 2011
![Page 52: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/52.jpg)
La forme: le contenant
Friday, May 27, 2011
![Page 53: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/53.jpg)
1. La largeur souhaitée d’un texte
640 pixels
1000 pixels
˜600 pixels
Friday, May 27, 2011
![Page 54: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/54.jpg)
2. S’adapter au contenant variable
+1000 pixels
le text doit s’adapter aux différentes échelles
Friday, May 27, 2011
![Page 55: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/55.jpg)
3. Le nombre de caractères par colonne
45 à 70 caractères maximum par colonne
★ Taille de la typo (min 11 - 12 pix)
★ Espace entre les lignes (min 14 pix)
★ Nombres de paragraphes
Cela dépend des éléments suivants :
Friday, May 27, 2011
![Page 56: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/56.jpg)
4. Pourquoi seulement 45 à 70 caractères?
v
30 cm de l’écran
Friday, May 27, 2011
![Page 57: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/57.jpg)
4.1 La résolution de l’écran n’est pas le même que celui du papier
v
Écran lumineux et résolution basse
Friday, May 27, 2011
![Page 58: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/58.jpg)
4.2 Une composition trop large est décorative
Friday, May 27, 2011
![Page 59: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/59.jpg)
La forme: le contenu
Friday, May 27, 2011
![Page 60: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/60.jpg)
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
![Page 61: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/61.jpg)
2. Les points de références
Titre
Notes
Image
Liens
Sous-titre
>> Page suivanteFriday, May 27, 2011
![Page 62: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/62.jpg)
2.1 Les points de références
Résumé explicatif
>>
Friday, May 27, 2011
![Page 63: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/63.jpg)
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
![Page 64: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/64.jpg)
2.3 Un exemple concret : 90% Texte
Titre de ce documentMaecenas rutrum arcu facilisis metus 0ncidunt feugiat. Donec sollicitudin ultrices elit quis aliquam. Curabitur id eros quam. “Aliquam ut nunc vitae magna porta volutpat. In hac habitasse 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.
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. 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.
Maecenas rutrum arcu facilisis metus 0ncidunt feugiat. Donec sollicitudin ultrices elit quis aliquam. Curabitur id eros quam. Aliquam ut nunc vitae magna porta volutpat. In hac habitasse platea dictumst. Sed vel mi ipsum, non tris0que erat. Curabitur pharetra vulputate eros sit amet dapibus.
1.1. Sous-‐8tre de ce document
Friday, May 27, 2011
![Page 65: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/65.jpg)
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 page
Friday, May 27, 2011
![Page 66: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/66.jpg)
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
![Page 67: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/67.jpg)
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
![Page 68: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/68.jpg)
Avoir à coeur l’utilisateur
Friday, May 27, 2011
![Page 69: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/69.jpg)
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
![Page 70: Architecture et design d'information](https://reader034.vdocuments.net/reader034/viewer/2022051412/5484b7755806b5cc588b467a/html5/thumbnails/70.jpg)
À 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