Organisation visuelle

1 705 vues

Publié le

cours Web design, Master Arts et Création Numérique, UVHC, 2010

Publié dans : Formation
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 705
Sur SlideShare
0
Issues des intégrations
0
Intégrations
39
Actions
Partages
0
Téléchargements
23
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Organisation visuelle

  1. 1. 12 règles pour optimiser lergonomie de votre siteChapitre 05 - Les bases et critères de lergonomie web» Règle n°1. Architecture : le site est bien rangé» Règle n°2. Organisation visuelle : la page est bien rangée» Règle n°3. Cohérence : le site capitalise sur l’apprentissage interne» Règle n°4. Conventions : le site capitalise sur l’apprentissage externe» Règle n°5. Information : le site informe l’internaute et lui répond» Règle n°6. Compréhension : les mots et symboles sont choisis minutieusement» Règle n°7. Assistance : le site aide et dirige l’internaute» Règle n°8. Gestion des erreurs : le site prévoit que l’internaute se trompe» Règle n°9. Rapidité : l’internaute ne perd pas son temps» Règle n°10. Liberté : c’est l’internaute qui commande» Règle n°11. Accessibilité : un site facile d’accès pour tous» Règle n°12. Satisfaire votre internaute» En bref : 12 règles à utiliser à bon escienthttp://www.ergonomie-sites-web.com/
  2. 2. Règle 2 Organisation visuelle : la page est bien rangéeLibérer l’esprit de votre internaute, enlimitant la charge mentale liée autraitement de ce qu’il voit à l’écran
  3. 3. Rappels sur le système visuelLes photorécepteurs de la rétine captent les longueurs dondes etles transforment en influx nerveux, qui via le nerf optique seratraité par le thalamus, puis par le cortex. Où ? Quoi ? - voie dorsale (lobe pariétal) responsable de la discrimination spatiale : localisation et mouvement - voie ventrale (lobe temporal) opère à la discrimination dobjets : dirige vers les zones du langage
  4. 4. Recommandations à suivre :● Éviter le trop-plein d’informations● Diviser la quantité de mots par deux● Nafficher que les principaux éléments de navigation et dinteraction● Afficher les éléments optionnels seulement si nécessaire● Supprimer les éléments dinteraction inutiles● Nafficher que les éléments dinteraction les plus utiles● Différencier les quantités dinformation réelles et perçues● Lhétérogénéité visuelle augmente la charge informationnelle● Les images de fond augmentent la charge informationnelle● Les animations augmentent la charge informationnelle
  5. 5. 1 - Éviter le trop-plein d’informations Supprimer linformation inutile bruit visuel : tout élément graphique qui ne transmet pas dinformation, surcharge la présentation, ou entre en compétition avec linformation. Il est évident quil vaut mieux se passer de ce genre de nuisance sur une page web.
  6. 6. 2 - Diviser la quantité de mots par deux● Conseil récurrent, constat empirique● Valable pour les pages navigantes non pour les pages de contenu● Tout particulièrement pour les éléments de navigation (barre, menu)
  7. 7. Trois types de lecture selon le contexte dutilisation, lexpertise de linternaute ● Repérage : survol ● Balayage : survol + synthèse, « scan visuel » ● Lecture en profondeur : décortication, « mot à mot »J. Nielsen → grands principes pour lécriture Web * concision : nous lisons 25 % plus lentement à lécran. * balayabilité : quand nous lisons, nous "scannons", nous lisons « en diagonale »79 % balaient les textes.16% lisent mot à mot tout le contenu qui leur est présenté. * morcellement des pages : les internautes nutilisent pas systématiquementlascenseur vertical, cela milite donc pour des pages plutôt courtes, et un positionnementdes informations importantes en haut de la page.
  8. 8. ● On peut supprimer texte Cliquez sur les puces rouges pour faire apparaître les caractéristiques détaillées du centre de votre choix ou pour obtenir un plan d’accès● Composition : difficulté à trouver stabilité horizontale● Site actuel : http://www.unepieceenplus.com/ ● page daccueil enrichie ● grille 3 colonnes
  9. 9. 3 - Différencier les quantités dinformation réelles et perçues La quantité d’informations seule ne peut suffire à définir la charge Informationnelle de votre site. Cette dernière peut paraître plus Importante pour l’internaute en fonction des animations, images de fond et de l’hétérogénéité visuelle. (p102)● Hétérogénéité : plus il y a de typographies et de couleurs différentes plus la charge informationnelle de la page augmente alors que la quantité dinformations calculée en pixels ne change pas● Théorie du traitement de linformation : la charge cognitive
  10. 10. Approche STI – Système de traitement de linformation
  11. 11. ● Confort visuel : combinaison de sensation et dinformation éblouissement gênant : perte de lisibilité éblouissement inconfortable : gêne visuelle, fatigue
  12. 12. ● Les images de fond augmentent la charge informationnelleLes éléments de navigation primordiaux sont presque invisibles : Genre, Recherche,Catalogue (au centre)
  13. 13. La lisibilitéOptimiser deux aspects :● legibility pour désigner la lisibilité matérielle, visuelle dun texte. Onréfère donc au niveau perceptif●readability pour désigner la lisibilité cognitive, la façon dont un textepeut être intégré au niveau cognitif et compris par lutilisateur. Quelques recommandations ● mettre en valeur les informations importantes, les mots-clés : utiliser des enrichissements typographiques, gras ou litalique (moins lisible quun style classique) ● jouer sur les tailles de caractères ● bien distinguer les mots-clés des liens (ne pas utiliser le même format)
  14. 14. ● Ecrire en minuscules plutôt quen majuscules(les mots écrits en lettres minuscules sont plus faciles àlire que ceux écrits en lettres capitales). On peuttoutefois se permettre décrire en majuscules pour desinformations brèves (intitulé dun bouton, titre de page,titre de rubrique, etc.).● Contre-exemple http://www.gaite-lyrique.net/ Cf diapo suivante● Séparer le texte en parties significatives, leur attribuer des titres et sous- titres, fournir un sommaire pour les longs textes Catégoriser les informations et faire ressortir cette catégorisation, soit par la localisation physique des éléments (on sépare ce qui ne se ressemble pas), soit par le format (on présente dans un format différent les éléments qui sont différents), soit par la couleur● Employer la voix active, rédigez le plus possible au présent de lindicatif Des lignes de texte ni trop longues ni trop courtes, environ 80 caractères
  15. 15. Le droit décrire long● Dès que le contenu recherché est identifié, le processus de lecture nest plus de type "scan" et le parcours oculaire revient à la normale. 75% du texte est alors lu et non parcouru. ( Fournir un format imprimable )● Découper le texte en plusieurs pages ? discutable● a priori, il est plus facile de lire des pages courtes, sans avoir besoin de scroller pour lire la suite dun texte. Cependant, la nature même du web fait que le découpage dun texte en plusieurs pages nécessite le chargement successif de ces pages. Cette façon de présenter linformation nuit à une lecture continue du texte, puisque normalement, loeil passe inconsciemment dune ligne à lautre de manière non séquentielle.● de plus, la lecture est une activité cognitive très contextuelle. On a souvent besoin de "remonter" de quelques paragraphes pour comprendre ce que nous sommes en train de lire. En effet, on ne lit pas des mots isolés, mais on met en relation les mots et phrases les uns avec les autres.
  16. 16. Couleurs● Cf. Pdf Cédric Dumas● tester contraste de couleur selon déficience http://www.vischeck.com/vischeck/vischeckURL.php● tester palette de couleur de votre page http://www.checkmycolours.com/● générer une palette de couleur à partir photo http://bighugelabs.com/colors.php
  17. 17. Page daccueil : Tout se joue en 50 ms !● Mettre un minimum de contenu textuel : 2 ou 3 § (indexation et positionnement correct)● Evitez le logo occupant une grande partie de la page sans autre commentaire● Proposer un outil de recherche● Des liens utiles : plan, contact - adresse, choix de langue, annonce, actualités, nouveauté● Permettez linterruption de lanimation dintro.● La page daccueil doit être appréhendée demblée, dun seul coup dœil : pas dascenseur
  18. 18. ● scinder en plusieurs ensembles les menus trop longs (supérieur à 10 rubriques, MCT : Miller 7+/- 2 items)● les informations les plus importantes qui sont contenues dans le site doivent pouvoir être accessibles rapidement en deux ou trois étapes maximum.● pas trop « dense » (page tunnel à éviter).● Les liens vers " Quoi de neuf ? ", " News", " Nouveautés" sont insuffisants.● date de création, ainsi que la date de mise à jour et éventuellement la périodicité● Attention au message "page en construction" (discrédit du site). Quand la date de mise à disposition est connue, précisez-la et respectez la.● URL courtes, faciles à retenir (moins de 10,12 lettres, pas de tirets)
  19. 19. La mise en page● Le titre > attractif, court : 4 à 10 mots > informatif/explicite > contenant les mots clés > visible - central - en gros caractère● Les sous-titresIls ressortent lorsquils sont composés dans une police decaractère différente de celle du texte, sils sont composés encaractères gras ou italiques.Les sous-titres peuvent être centrés, alignés à gauche ou alignés àdroite
  20. 20. ● Les légendesLes titres et les légendes sont souvent les seuls éléments lus dansun document. Utilisez les légendes pour résumer les pointsimportants du texte.La largeur de la légende doit être établie en fonction de la largeurde lillustrationLes sous-titres, les légendes les en-têtes accélèrent le tempsde lecture● Le pied de page de chaque page-écran doit contenir : > la barre de navigation, > le nom de lauteur; > l adresse dun contact ( e-mail), > l identification de lorganisme, > la date de mise à jour
  21. 21. Macrotypographie Cf le pdf en ligne

×