Anatomie d'une page Web
Upcoming SlideShare
Loading in...5
×
 

Anatomie d'une page Web

on

  • 4,316 views

 

Statistics

Views

Total Views
4,316
Views on SlideShare
3,808
Embed Views
508

Actions

Likes
4
Downloads
79
Comments
0

4 Embeds 508

http://www.celinecelines.com 498
http://www.pinterest.com 6
http://www.linkedin.com 3
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Anatomie d'une page Web Anatomie d'une page Web Presentation Transcript

  • 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 pixels 1000 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?
  • 2.2 Où sommes-nous? En-tête
  • 2.3 Entrée directe, visite libre Menu principal
  • 2.4 Piquer la curiosité de l’utilisateur Il y a une profondeur à l’information
  • Dissection de l’information selon un type de gabarit pour une page d’accueil
  • 1. Structures de base Navigation principale Navigation de 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 à mettre de l’avant Section de droite de promotion Section de nouvelles
  • 5.1. Favoriser le contenu principal Colonne de droite: auto-promotion et information secondaire Texte Images Liens utiles
  • 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
  • Structure et architecture
  • 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
  • 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
  • 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
    • 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 :
  • 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 suivante
  • 2.1 Les points de références Résumé explicatif >>
  • 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 >>
  • 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
  • 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 !
  • 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.