Anatomie d’une page WebÉtude sur le contenant, le contenu et l’utilité d’un site Web

La page comme espace d’information

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

640 pixels640 pixels

1000 pixels1000 pixels

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 chercher

2.1 Objectif premier: Trouver de l’information

Comment chercher?Comment chercher?

2.2 Où sommes-nous?

En-têteEn-tête

2.3 Entrée directe, visite libre

Menu principalMenu principal

2.4 Piquer la curiosité de l’utilisateur

Il y a une profondeur à Il y a une profondeur à l’informationl’information

Dissection de l’information selon un type de gabarit pour une page d’accueil

1. Structures de baseNavigation principaleNavigation principale

Navigation deNavigation de bas de page bas de page

3. Les objectifs du menu principal

★ Orienter l’utilisateur rapidement

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

★ Regrouper stratégiquement le contenu sous les bonnes sections

4. Les objectifs du menu de bas de page

★ Trouver l’information clé à travers tout le site

★ Contenir des sections cachées (les mettre de l’avant)

★ Créer des liens vers les sites partenaires (ou des sites externes)

5. Les sections d’information

Section de services et offres à Section de services et offres à mettre de l’avantmettre de l’avant

Section de Section de droite de droite de

promotionpromotion

Section de Section de nouvellesnouvelles

5.1. Favoriser le contenu principal

Colonne de Colonne de droite: auto-droite: auto-promotion et promotion et information information secondairesecondaire

TexteTexte

ImagesImages

Liens utilesLiens utiles

5.2. Favoriser le contenu médiatique

Section de visionnementSection de visionnement

Informations par rapport au Informations par rapport au contenu visionnécontenu visionné

Contenu 1Contenu 1 Contenu 2Contenu 2 Contenu 3Contenu 3

Mots clés et liens utilesMots clés et liens utiles

Structure et architecture

1. L’arborescence d’un site webWeb site : Accueil

Groupe d’information A Groupe d’information B Groupe d’information C Groupe d’information D

Sous-groupe A1 Sous-groupe A2

Section A2

Section B1 Section C1

Section B2 Section C2

Sous-groupe D1 Sous-groupe D2

Section D1

Section D1’

Section C3

Recherche

Thèmes communs

Thèmes 1

Thèmes 2

Thèmes 3

Thèmes 4

Communauté Forum de conversation UGC

1.2. Comment les pages sont-elles connectées?

Section de services et Section de services et offres à mettre de l’avantoffres à mettre de l’avant

Section de Section de droite de droite de

promotionpromotion

Section de nouvellesSection de nouvellesColonne de droite: Colonne de droite:

auto-promotion auto-promotion et information et information

secondairesecondaire

TexteTexte

ImagesImages

Liens utilesLiens utiles

Section de visionnementSection de visionnement

Informations par rapport Informations par rapport au contenu visionnéau contenu visionné

Contenu 1Contenu 1 Contenu 2Contenu 2 Contenu 3Contenu 3

Mots clés et liens utilesMots clés et liens utiles

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 pixels640 pixels

1000 pixels1000 pixels

˜600 pixels˜600 pixels

2. S’adapter au contenant variable

+1000 pixels+1000 pixels

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

3. Le nombre de caractères par colonne

45 à 70 caractères 45 à 70 caractères maximummaximum par colonne 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 :Cela dépend des éléments suivants :

4. Pourquoi seulement 45 à 70 caractères?

v

30 cm de l’écran30 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 Écran lumineux et résolution basseré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 Titre

NotesNotes

Image Image

Liens Liens

Sous-titreSous-titre

>>>> Page suivantePage suivante

2.1 Les points de références

Résumé explicatifRésumé explicatif

>>>>

2.2 Faciliter la tâche de “scanner” l’information

Résumé explicatifRé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 tincidunt 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 tristique erat. Curabitur pharetra vulputate eros sit amet dapibus.

Aenean ornare tempus vulputate. Suspendisse id eros in dui lobortis bibendum vel eget urna. Duis vestibulum tempor iaculis. Pellentesque habitant morbi tristique 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 venenatis sem tristique sed. Aenean ornare tempus vulputate. Suspendisse id eros in dui lobortis bibendum vel eget urna. Duis vestibulum tempor iaculis. Pellentesque habitant morbi tristique 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 venenatis sem tristique sed. Aenean ornare tempus vulputate. Suspendisse id eros in dui lobortis bibendum vel eget urna. Duis vestibulum tempor iaculis. Pellentesque habitant morbi tristique 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 venenatis sem tristique sed.

Maecenas rutrum arcu facilisis metus tincidunt 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 tristique erat. Curabitur pharetra vulputate eros sit amet dapibus.

1.1. Sous-titre 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★ Utiliser l’italique lorsque vous citez

un livre ou un article... mais n’écrivez pas tout en italique, car cela défit l’objectif de mettre l’accent sur une partie du texte!

★ Mettre du texte en Gras pour attirer l’attention sur certains termes. Attention de ne pas tout écrire en Gras!

★ Ne pas souligner le texte sur le Web pour mettre de l’emphase; car les utilisateurs peuvent penser que c’est un lien.

★ Ne pas utiliser des couleurs dans le texte pour mettre de l’emphase; car les utilisateurs peuvent penser que c’est un message d’erreur ou un lien vers une autre page.

À utiliser avec modération !À 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.