architecture et design d'information

Architecture d’informationOrganisation des grands contenus, arborescences, maquettes

Friday, May 27, 2011

Organisation des contenus


1. Audit du contenu


1. Audit du contenu

Contenu existant Objec0f de contenu futur

Tests d’u0lisateurs


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)


1. Audit du contenu


Organiser le chaos


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


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”


Triage de carte


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


1. Audit du contenu : Triage de carte


★ 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


À garder en tête


àObjec0f de la marque Objec0f du client

Objec0f de l’u0lisateur

À garder en tête


Arborescence


Arborescence principale


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



★ Organiser le contenu principale

★ S’addresser au 80% des utilisateurs

★ Avoir un objectif principale


Web site : Accueil

Groupe d’informa0on A Groupe d’informa0on B Groupe d’informa0on C Groupe d’informa0on D

Recherche


★ Orienter l’utilisateur rapidement

★ Offrir les services de l’entreprise de façon claire

★ Regrouper stratégiquement le contenu sous les bonnes sections


Objectif de l’arborescence principale


Arborescence secondaire


★ 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


2. Arborescence secondaire


Dessiner l’espace


La page comme espace d’information

3. Dessiner l’espace


640 pixels

1000 pixels

3.1. Périmètres de l’affichage par défaut


★ 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


Comment chercher?

3.3. Objectif premier : Trouver de l’information


En-tête

3.4. Où sommes-nous?


Menu principal

3.5. Entrée directe, visite libre


Il y a une profondeur à l’information

3.6. Piquer la curiosité de l’utilisateur


Gabarits


Dissection de l’information selon un type de gabarit

pour une page d’accueil


Navigation principale

Navigation de bas de page

4. Gabarits


Sec0on de services et offres à mePre de l’avant

Sec0on de droite de promo0on

Sec0on de nouvelles

4. Gabarits


Colonne de droite: auto-‐promo0on et informa0on secondaire

Texte

Images

Liens u0les

4. Gabarits : Favoriser le contenu principal


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


Structure et architecture


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é?


4. Gabarits : Page de produit

★ Montrer le produit à l’utilisateur

★ Se différencier par la marque

★ Présenter des liens vers des produits similaires


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


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


Wireframe


5. Wireframe


5.1 Grille


5.2 Design et grille


5.3 “960 Grids”


5.4 Wireframe pour La Chambre des notaires


La forme et le contenuÉtude sur la hiérarchie du contenu et

son impact sur l’utilisateur


La forme: le contenant


1. La largeur souhaitée d’un texte

640 pixels

1000 pixels

˜600 pixels


2. S’adapter au contenant variable

+1000 pixels

le text doit s’adapter aux différentes échelles


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 :


4. Pourquoi seulement 45 à 70 caractères?

v

30 cm de l’écran


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


4.2 Une composition trop large est décorative


La forme: le contenu


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)


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

>>


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.


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


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


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 !


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 ...)


Avoir à coeur l’utilisateur


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.


À 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.
