L'organisation des pages

Nous verrons :

• La position des informations dans la page
• Les titres
• Les sous titres
• Les légendes
• Le pied de page
• La date de mise à jour
• Le format de la page
• La disposition spatiale
• La densité d'information

La position des informations dans la page

• Donnez l'information principale en tout premier. Cela permet au visiteur de savoir si oui ou non il a trouvé l'information et si cela vaut la peine de poursuivre. S'il en veut plus il poursuivra. S'il a obtenu l'information, il quittera peut-être le site, mais il sera content, il vous en sera gré ...il en parlera autour de lui, et il reviendra.
• Présentez les items dans un ordre précis qui correspond à l'ordre probable de recherche ou de préoccupation et d'intéret des visiteurs. Testez cet ordre.

Les titres

• Le titre , les intertitres, les chapeaux, les accroches ne s'écrivent qu'à la fin du travail de rédaction.
  • Le titre = la vitrine du magasin
  • Le chapeau = la bande annonce
• Le titre de chaque page du site doit permettre à l'utilisateur de se faire une idée du contenu de la page. Le titre permet d'établir le contexte du document
• Il doit être explicite, informatif, spécifique à chaque page, concis, compréhensible et représentatif du contenu de la page afin d'aider les utilisateurs à se repérer. Le titre de la page est le seul moyen pour l'utilisateur de vérifier qu'il se trouve bien dans la page qui l'intéresse.
• Donnez aux pages le titre figurant dans les intitulés du menu, ne les modifiez pas.
• Toute page doit pouvoir être déterminée de manière univoque tant par le visiteur que par les moteurs de recherche externe. Ce titre doit non seulement être identifiant mais aussi représentatif du contenu informationnel.
• Les titres doivent se détacher nettement du texte.Ils doivent être composés en caractères plus gros, dans un style contrastant avec celui du texte et peuvent même être composés avec une police différente de celle du texte.
• Evitez les longs titres composés en majuscules. Les lettres en majuscules conviennent aux titres très courts.
• Evitez de centrer les titres qui occupent plus d'une ligne.Les titres longs et centrés ralentissent la lecture car le lecteur doit rechercher le début de chaque ligne.

Conseils de rEdaCtion du titre

• Court : 4 à 10 mots
• informatif/explicite
• contenant les mots clés
• attractif
• visible - cecntral - en gros caractère

Les sous-titres

• Les sous-titres ressortent lorsqu'ils sont composés dans une police de caractère différente de celle du texte, s'ils sont composés en caractères gras ou italiques.
• Les sous-titres peuvent être centrés, alignés à gauche ou alignés à droite

Les légendes

• Le visiteur reste toujours soucieux de parcourir une page le plus vite possible pour trouver l'information qu'il veut. Découper le contenu informationnel en agrégats, en catégories étiquettées par un libellé.
• Les titres et les légendes sont souvent les seuls éléments lus dans un document. Utilisez les légendes pour résumer les points importants du texte.
• La largeur de la légende doit être établie en fonction de la largeur de l'illustration
• Les sous-titres, les légendes les en-têtes accélérent le temps de lecture des informations.
  

Le pied de page

• Le pied de page de chaque page-écran doit contenir :
  • la barre de navigation,
  • le nom de l'auteur;
  • l' adresse d'un contact ( e-mail),
  • l' identification de l'organisme,
  • la date de mise à jour

La date de mise à jour

• Si la connaissance de la date de mise à jour est indispensable aux données, si la "fraîcheur" des informations est essentielle pour le lecteur (par exemple pour des 'informations financières ou d' actualité), la date de mise à jour est à placer en haut de la page et la périodicité de rafraîchissement est alors aussi mentionnée. Dans les autres cas on se contentera de placer la date en bas de page.
  

Format de la page

• Il n'existe pas un format unique de page, c'est l' homogénéité des pages entre elles et les outils de navigation qui rendent un site plus ou moins fonctionnel. L'utilisation d'un modèle pour un ensemble de pages est par contre vivement recommandé car il augmente la convivialité du site.
  
  Il est très agréable de naviguer à travers une collection d'information organisée de telle manière que l'on puisse prévoir la structure et les déplacements possibles, sans avoir recours à une aide quelconque et sans être obligé de réapprendre où trouver les informations à chaque nouvelle page.
• Adoptez un format de présentation et tenez vous y !!!!!
• Créez des espaces identifiables et mémorisables.
• Utilisez de l'espacement blanc comme alinéa. Préférez une ligne blanche plutôt que l ’indentation de la première ligne de chaque paragraphe.
• Indiquez que la page continue
• Un utilisateur peut " entrer " sur un site en venant de n'importe où, il peut ne pas comprendre une page si des données dépendent de ce qu'on doit lire sur une autre page. Evitez d'introduire une page en écrivant "  Comme nous avons pu le constater par ailleurs... ".
• En cas de changement d'adresse, indiquez la nouvelle adresse, et invitez l'utilisateur à changer ses signets et à mettre à jour ses liens.

La disposition spatiale

• L''école de la Gestalt-therorie énonce trois lois fondamentales de l'acte perceptif visuel. Ces lois agissent en même temps et sont parfois contradictoires.

  • la loi de proximité: l'oeil regroupe les éléments physiquement proches les uns des autres pour leur donner la même valeur sémantique.
    
    Le visiteur considérera qu'un lien existe entre des éléments d'autant plus assurément que ces éléments sont rapprochés physiquement.
    
    Un des principes majeurs de la conception visuelle concerne cette loi de proximité : créez des espaces identifiables et mémorisables.

Loi de proximité: d'après Gestalt_ley_de_proximidad.png? (712 × 298 pixels, taille du fichier : 845 o, type MIME : image/png)

• la loi de similitude: l'oeil est capable de regrouper des éléments distants les uns des autres dans son champ visuel mais qui présentent des similitudes de forme, de taille et de luminance.
  
  La vision regroupe instinctivement les objets vus selon leur similitude graphique, leur proximité relative et leur régularité spatiale. Si la distance ne permet pas de regrouper les points, nous nous attacherons ensuite à repérer les plus similaires entre eux pour percevoir une forme.

Loi de similitude

• la loi de clôture une forme fermée est plus facilement identifiée comme une figure (ou comme une forme) qu'une forme ouverte. http://fr.wikipedia.org/wiki/Psychologie_de_la_forme

Loi de clôture

La densité d'information

Quelle est la densité informative que l'on doit retenir ? Dans un écran doit-on y placer le plus d'information possible ou doit-on au contraire y intégrer de nombreux espace vide ?
Faites en sorte de structurer les textes de manière à donner un rythme à la lecture.

• L'espace blanc doit-être largement utilisé sur l' écran .
• La quantité d'espace blanc nécessaire sur un document papier est de 25 à 40 %. Sur un écran cet espace est de 40 à 60 %. Le temps nécessaire pour retrouver une information augmente quand la densité d'information s'accroît.
• Sur de grands écrans, si le texte n'est pas justifié à droite, le texte peut être agencé en 2 ou 3 colonnes de 30 à 45 caractères avec au moins 8 caractères d'espace entre les colonnes
• Dans le cas ou le texte est justifié 3 - 4 blancs suffisent.
• Il n'est alors pas nécessaire de séparer les colonnes par des lignes
• L'espace entre les mots doit être inférieur à celui entre les lignes.
• L'espace entre les lettres doit être d'au moins un pixel. L'espace entre les lignes doit être proportionnel à la largeur des colonnes. Il doit être supérieur ou égal à deux pixels