Upload
celinecelines-semaan-vernon
View
2.721
Download
1
Embed Size (px)
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.
Citation preview
Architecture d’informationOrganisation des grands contenus, arborescences, maquettes
Friday, May 27, 2011
Organisation des contenus
Friday, May 27, 2011
1. Audit du contenu
Friday, May 27, 2011
1. Audit du contenu
Contenu existant Objec0f de contenu futur
Tests d’u0lisateurs
Friday, May 27, 2011
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
1. Audit du contenu
Friday, May 27, 2011
Organiser le chaos
Friday, May 27, 2011
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
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
Triage de carte
Friday, May 27, 2011
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
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
À garder en tête
Friday, May 27, 2011
àObjec0f de la marque Objec0f du client
Objec0f de l’u0lisateur
À garder en tête
Friday, May 27, 2011
Arborescence
Friday, May 27, 2011
Arborescence principale
Friday, May 27, 2011
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
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
★ 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
2. Arborescence principale
Friday, May 27, 2011
2. Arborescence principale
Friday, May 27, 2011
Arborescence secondaire
Friday, May 27, 2011
★ 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
2. Arborescence secondaire
Friday, May 27, 2011
2. Arborescence secondaire
Friday, May 27, 2011
Dessiner l’espace
Friday, May 27, 2011
La page comme espace d’information
3. Dessiner l’espace
Friday, May 27, 2011
640 pixels
1000 pixels
3.1. Périmètres de l’affichage par défaut
Friday, May 27, 2011
★ 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
Comment chercher?
3.3. Objectif premier : Trouver de l’information
Friday, May 27, 2011
En-tête
3.4. Où sommes-nous?
Friday, May 27, 2011
Menu principal
3.5. Entrée directe, visite libre
Friday, May 27, 2011
Il y a une profondeur à l’information
3.6. Piquer la curiosité de l’utilisateur
Friday, May 27, 2011
Gabarits
Friday, May 27, 2011
Dissection de l’information selon un type de gabarit
pour une page d’accueil
Friday, May 27, 2011
Navigation principale
Navigation de bas de page
4. Gabarits
Friday, May 27, 2011
Sec0on de services et offres à mePre de l’avant
Sec0on de droite de promo0on
Sec0on de nouvelles
4. Gabarits
Friday, May 27, 2011
Colonne de droite: auto-‐promo0on et informa0on secondaire
Texte
Images
Liens u0les
4. Gabarits : Favoriser le contenu principal
Friday, May 27, 2011
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
Structure et architecture
Friday, May 27, 2011
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
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
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
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
Wireframe
Friday, May 27, 2011
5. Wireframe
Friday, May 27, 2011
5.1 Grille
Friday, May 27, 2011
5.2 Design et grille
Friday, May 27, 2011
5.3 “960 Grids”
Friday, May 27, 2011
5.4 Wireframe pour La Chambre des notaires
Friday, May 27, 2011
La forme et le contenuÉtude sur la hiérarchie du contenu et
son impact sur l’utilisateur
Friday, May 27, 2011
La forme: le contenant
Friday, May 27, 2011
1. La largeur souhaitée d’un texte
640 pixels
1000 pixels
˜600 pixels
Friday, May 27, 2011
2. S’adapter au contenant variable
+1000 pixels
le text doit s’adapter aux différentes échelles
Friday, May 27, 2011
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
4. Pourquoi seulement 45 à 70 caractères?
v
30 cm de l’écran
Friday, May 27, 2011
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
4.2 Une composition trop large est décorative
Friday, May 27, 2011
La forme: le contenu
Friday, May 27, 2011
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
2. Les points de références
Titre
Notes
Image
Liens
Sous-titre
>> Page suivanteFriday, May 27, 2011
2.1 Les points de références
Résumé explicatif
>>
Friday, May 27, 2011
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
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
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
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
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
Avoir à coeur l’utilisateur
Friday, May 27, 2011
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
À 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