Le document analyse l'anatomie d'une page web, en se concentrant sur l'interaction entre le contenant et le contenu pour améliorer l'expérience utilisateur. Il traite de l'importance de la navigation, de la hiérarchie du contenu et des principes de conception visuelle pour garantir une lisibilité optimale. Des recommandations sont offertes sur la structure, la forme et la clarté du contenu pour faciliter le parcours de l'utilisateur sur le site.

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

2. La page comme espace d’information

3. 1. Périmètres de l’affichage par défaut 640 pixels 1000 pixels

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

5. 2.1 Objectif premier: Trouver de l’information Comment chercher?

6. 2.2 Où sommes-nous? En-tête

7. 2.3 Entrée directe, visite libre Menu principal

8. 2.4 Piquer la curiosité de l’utilisateur Il y a une profondeur à l’information

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

10. 1. Structures de base Navigation principale Navigation de bas de page

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

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

13. 5. Les sections d’information Section de services et offres à mettre de l’avant Section de droite de promotion Section de nouvelles

14. 5.1. Favoriser le contenu principal Colonne de droite: auto-promotion et information secondaire Texte Images Liens utiles

15. 5.2. Favoriser le contenu médiatique Section de visionnement Informations par rapport au contenu visionné Contenu 1 Contenu 2 Contenu 3 Mots clés et liens utiles

16. Structure et architecture

17. 1. L’arborescence d’un site web Web 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

18. 1.2. Comment les pages sont-elles connectées? Section de services et offres à mettre de l’avant Section de droite de promotion Section de nouvelles Colonne de droite: auto-promotion et information secondaire Texte Images Liens utiles Section de visionnement Informations par rapport au contenu visionné Contenu 1 Contenu 2 Contenu 3 Mots clés et liens utiles

19. La forme et le contenu Étude sur la hiérarchie du contenu et son impact sur l’utilisateur

20. La forme: le contenant

21. 1. La largeur souhaitée d’un texte 640 pixels 1000 pixels ˜600 pixels

22. 2. S’adapter au contenant variable +1000 pixels le text doit s’adapter aux différentes échelles

23. 3. Le nombre de caractères par colonne Taille de la typo (min 11 - 12 pix) Espace entre les lignes (min 14 pix) Nombres de paragraphes 45 à 70 caractères maximum par colonne Cela dépend des éléments suivants :

24. 4. Pourquoi seulement 45 à 70 caractères? v 30 cm de l’écran

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

26. 4.2 Une composition trop large est décorative

27. La forme: le contenu

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

29. 2. Les points de références Titre Notes Image Liens Sous-titre >> Page suivante

30. 2.1 Les points de références Résumé explicatif >>

31. 2.2 Faciliter la tâche de “scanner” l’information 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. Résumé explicatif >>

32. 2.3 Un exemple concret : 90% Texte Titre de ce document 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 dictums t”. 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

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

34. 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 !

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

36. Avoir à coeur l’utilisateur

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

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