SlideShare une entreprise Scribd logo
12 règles pour optimiser
         l'ergonomie de votre site
Chapitre 05 - Les bases et critères de l'ergonomie 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 escient



http://www.ergonomie-sites-web.com/
Règle 2
       Organisation visuelle :
      la page est bien rangée

Libérer l’esprit de votre internaute, en
limitant la charge mentale liée au
traitement de ce qu’il voit à l’écran
Rappels sur le système visuel
Les photorécepteurs de la rétine captent les longueurs d'ondes et
les transforment en influx nerveux, qui via le nerf optique sera
traité 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 d'objets : dirige vers
       les zones du langage
Recommandations à suivre :

●   Éviter le trop-plein d’informations
●   Diviser la quantité de mots par deux
●   N'afficher que les principaux éléments de navigation et
    d'interaction
●   Afficher les éléments optionnels seulement si nécessaire
●   Supprimer les éléments d'interaction inutiles
●   N'afficher que les éléments d'interaction les plus utiles
●   Différencier les quantités d'information réelles et perçues
●   L'hétérogénéité visuelle augmente la charge informationnelle
●   Les images de fond augmentent la charge informationnelle
●   Les animations augmentent la charge informationnelle
1 - Éviter le trop-plein d’informations

                   Supprimer l'information inutile


                   bruit visuel : tout élément
                   graphique qui ne transmet pas
                   d'information, surcharge la
                   présentation, ou entre en
                   compétition avec l'information.


                   Il est évident qu'il vaut mieux se
                   passer de ce genre de nuisance
                   sur une page web.
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)
Trois types de lecture
         selon le contexte d'utilisation, l'expertise de l'internaute

 ●   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 n'utilisent pas systématiquement
l'ascenseur vertical, cela milite donc pour des pages plutôt courtes, et un positionnement
des informations importantes en haut de la page.
●   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 d'accueil enrichie
     ●
         grille 3 colonnes
3 - Différencier les quantités
        d'information 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é d'informations calculée en pixels ne change pas
●   Théorie du traitement de l'information :
                           la charge cognitive
Approche STI – Système de traitement
          de l'information
●   Confort visuel : combinaison de sensation et d'information




       éblouissement gênant : perte de lisibilité
       éblouissement inconfortable : gêne visuelle, fatigue
●   Les images de fond augmentent la charge
       informationnelle




Les éléments de navigation primordiaux sont presque invisibles : Genre, Recherche,
Catalogue (au centre)
La lisibilité
Optimiser deux aspects :

● legibility pour désigner la lisibilité matérielle, visuelle d'un texte. On
réfère donc au niveau perceptif

●readability pour désigner la lisibilité cognitive, la façon dont un texte
peut être intégré au niveau cognitif et compris par l'utilisateur.


    Quelques recommandations
    ● mettre en valeur les informations importantes, les mots-clés : utiliser des
    enrichissements typographiques, gras ou l'italique (moins lisible qu'un style
    classique)
    ● jouer sur les tailles de caractères

    ● bien distinguer les mots-clés des liens (ne pas utiliser le même format)
●     Ecrire en minuscules plutôt qu'en majuscules
(les mots écrits en lettres minuscules sont plus faciles à
lire que ceux écrits en lettres capitales). On peut
toutefois se permettre d'écrire en majuscules pour des
informations brèves (intitulé d'un 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
    l'indicatif
    Des lignes de texte ni trop longues ni trop courtes, environ 80 caractères
Le droit d'écrire long
●   Dès que le contenu recherché est identifié, le processus de lecture n'est
    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 d'un texte. Cependant, la nature même du web fait
    que le découpage d'un texte en plusieurs pages nécessite le chargement
    successif de ces pages. Cette façon de présenter l'information nuit à une
    lecture continue du texte, puisque normalement, l'oeil passe
    inconsciemment d'une ligne à l'autre 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.
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
Page d'accueil : 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 l'interruption de l'animation d'intro.
●   La page d'accueil doit être appréhendée d'emblée, d'un seul coup
    d'œil : pas d'ascenseur
●   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)
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-titres
Ils 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
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
●   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
Macrotypographie




    Cf le pdf en ligne

Contenu connexe

En vedette

Necessitats analítiques del professorat en la presa de decisions de l’activit...
Necessitats analítiques del professorat en la presa de decisions de l’activit...Necessitats analítiques del professorat en la presa de decisions de l’activit...
Necessitats analítiques del professorat en la presa de decisions de l’activit...
César Pablo Córcoles Briongos
 
Presentación 1 valoracion
Presentación 1 valoracionPresentación 1 valoracion
Presentación 1 valoracion
Mabel Ordoñez
 
Novedades en electrofisiología cardiaca y arritmias
Novedades en electrofisiología cardiaca y arritmiasNovedades en electrofisiología cardiaca y arritmias
Novedades en electrofisiología cardiaca y arritmias
Carlos Andrés Guamán Valdivieso
 
Brassards iPhone
Brassards iPhoneBrassards iPhone
Brassards iPhone
darcidoir
 
Vidéo de science
Vidéo de scienceVidéo de science
Vidéo de sciencevinthi0155
 
Thyroid Suppléments
Thyroid SupplémentsThyroid Suppléments
Thyroid Suppléments
darcidoir
 
2011 03 17 Soyez présents sur le mobile de vos clients by competitic
2011 03 17 Soyez présents sur le mobile de vos clients by competitic2011 03 17 Soyez présents sur le mobile de vos clients by competitic
2011 03 17 Soyez présents sur le mobile de vos clients by competitic
COMPETITIC
 
Hey tu come sano...
Hey tu come sano...Hey tu come sano...
Hey tu come sano...
Paola Damis
 
Métamorphose
MétamorphoseMétamorphose
MétamorphoseStarbobor
 
Street Fashion Show La Redoute by Grazia
Street Fashion Show La Redoute by GraziaStreet Fashion Show La Redoute by Grazia
Street Fashion Show La Redoute by GraziaMondadori Publicité
 
script shoutbox parse html
script shoutbox parse htmlscript shoutbox parse html
script shoutbox parse htmlAlif Mahardika
 
Conference A. Jacquart
Conference A. JacquartConference A. Jacquart
Conference A. Jacquart
JCROLL
 
Hipertension
HipertensionHipertension
Hipertension
Erika31Sanchez
 
Hipertension arterial
Hipertension arterialHipertension arterial
Hipertension arterial
Erika31Sanchez
 
Linda catalina martínez duarte
Linda catalina martínez duarteLinda catalina martínez duarte
Linda catalina martínez duarte
Gomita Lovegood
 
Arnaud maes rencontre_e_tourisme_atelier_site_avis_5_04_2013
Arnaud maes rencontre_e_tourisme_atelier_site_avis_5_04_2013Arnaud maes rencontre_e_tourisme_atelier_site_avis_5_04_2013
Arnaud maes rencontre_e_tourisme_atelier_site_avis_5_04_2013Lozere Développement
 
Presentación psico
Presentación psicoPresentación psico
Presentación psico
InGrid Garcia CaStro
 
FEEL THE MUSIC
FEEL THE MUSICFEEL THE MUSIC
FEEL THE MUSIC
erickska
 
Mora-mora granada 2010
Mora-mora granada 2010Mora-mora granada 2010
Mora-mora granada 2010
Stéphane Raymond
 

En vedette (20)

Necessitats analítiques del professorat en la presa de decisions de l’activit...
Necessitats analítiques del professorat en la presa de decisions de l’activit...Necessitats analítiques del professorat en la presa de decisions de l’activit...
Necessitats analítiques del professorat en la presa de decisions de l’activit...
 
Presentación 1 valoracion
Presentación 1 valoracionPresentación 1 valoracion
Presentación 1 valoracion
 
Novedades en electrofisiología cardiaca y arritmias
Novedades en electrofisiología cardiaca y arritmiasNovedades en electrofisiología cardiaca y arritmias
Novedades en electrofisiología cardiaca y arritmias
 
Brassards iPhone
Brassards iPhoneBrassards iPhone
Brassards iPhone
 
Vidéo de science
Vidéo de scienceVidéo de science
Vidéo de science
 
Thyroid Suppléments
Thyroid SupplémentsThyroid Suppléments
Thyroid Suppléments
 
2011 03 17 Soyez présents sur le mobile de vos clients by competitic
2011 03 17 Soyez présents sur le mobile de vos clients by competitic2011 03 17 Soyez présents sur le mobile de vos clients by competitic
2011 03 17 Soyez présents sur le mobile de vos clients by competitic
 
Hey tu come sano...
Hey tu come sano...Hey tu come sano...
Hey tu come sano...
 
Métamorphose
MétamorphoseMétamorphose
Métamorphose
 
Street Fashion Show La Redoute by Grazia
Street Fashion Show La Redoute by GraziaStreet Fashion Show La Redoute by Grazia
Street Fashion Show La Redoute by Grazia
 
script shoutbox parse html
script shoutbox parse htmlscript shoutbox parse html
script shoutbox parse html
 
Conference A. Jacquart
Conference A. JacquartConference A. Jacquart
Conference A. Jacquart
 
Hipertension
HipertensionHipertension
Hipertension
 
Hipertension arterial
Hipertension arterialHipertension arterial
Hipertension arterial
 
Linda catalina martínez duarte
Linda catalina martínez duarteLinda catalina martínez duarte
Linda catalina martínez duarte
 
Arnaud maes rencontre_e_tourisme_atelier_site_avis_5_04_2013
Arnaud maes rencontre_e_tourisme_atelier_site_avis_5_04_2013Arnaud maes rencontre_e_tourisme_atelier_site_avis_5_04_2013
Arnaud maes rencontre_e_tourisme_atelier_site_avis_5_04_2013
 
Presentación psico
Presentación psicoPresentación psico
Presentación psico
 
FEEL THE MUSIC
FEEL THE MUSICFEEL THE MUSIC
FEEL THE MUSIC
 
Mora-mora granada 2010
Mora-mora granada 2010Mora-mora granada 2010
Mora-mora granada 2010
 
Quoi de neuf en 2011
Quoi de neuf en 2011Quoi de neuf en 2011
Quoi de neuf en 2011
 

Similaire à Organisation visuelle

UX design for web
UX design for webUX design for web
UX design for web
Virginie Colombel
 
Redaction web fiche pedagogique 2 structurer sa page
Redaction web fiche pedagogique 2 structurer sa pageRedaction web fiche pedagogique 2 structurer sa page
Redaction web fiche pedagogique 2 structurer sa page
Catherine Boudet
 
argonomie_web.pptx
argonomie_web.pptxargonomie_web.pptx
argonomie_web.pptx
3Dconsulting
 
Ergonomie Actengo
Ergonomie ActengoErgonomie Actengo
Ergonomie Actengo
tergra
 
A4 otamp enrichir_site_web
A4 otamp enrichir_site_webA4 otamp enrichir_site_web
A4 otamp enrichir_site_web
Office de tourisme Aunis Marais Poitevin
 
5. Grands principes de conception
5. Grands principes de conception5. Grands principes de conception
5. Grands principes de conception
Laurent Barbat
 
Stratégie de valorisation et d'éditorialisation des ressources documentaires
Stratégie de valorisation et d'éditorialisation des ressources documentairesStratégie de valorisation et d'éditorialisation des ressources documentaires
Stratégie de valorisation et d'éditorialisation des ressources documentaires
Renaud AIOUTZ
 
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Kate De Gourdon
 
Formation écriture pour le web
Formation écriture pour le webFormation écriture pour le web
Formation écriture pour le web
Voyelle Voyelle
 
Ecrire pour le web v3 cfj2012
Ecrire pour le web v3 cfj2012Ecrire pour le web v3 cfj2012
Ecrire pour le web v3 cfj2012Eric Mettout
 
Guide auto-formation pour écrire pour le web~Learning Cube
Guide auto-formation pour écrire pour le web~Learning CubeGuide auto-formation pour écrire pour le web~Learning Cube
Guide auto-formation pour écrire pour le web~Learning Cube
Laurent BOBY
 
Intervention de Laurent Pierre Gilliard d'Aquitaine Europe Communication
Intervention de Laurent Pierre Gilliard d'Aquitaine Europe CommunicationIntervention de Laurent Pierre Gilliard d'Aquitaine Europe Communication
Intervention de Laurent Pierre Gilliard d'Aquitaine Europe CommunicationMONA
 
Ergonomie des sites internet touristique
Ergonomie des sites internet touristiqueErgonomie des sites internet touristique
Ergonomie des sites internet touristique
UNITEC
 
Rédaction web : écrire pour être lu
Rédaction web : écrire pour être luRédaction web : écrire pour être lu
Rédaction web : écrire pour être lu
Fotso Fonkam
 
Créer son site_jimdo
Créer son site_jimdoCréer son site_jimdo
Créer son site_jimdo
Mélodie Ardèche-Olympique
 
Conception Web 2011
Conception Web 2011Conception Web 2011
Conception Web 2011
Bontempelli
 
2 tid conception-projet-cours5-briefing-tlt-publication
2 tid conception-projet-cours5-briefing-tlt-publication2 tid conception-projet-cours5-briefing-tlt-publication
2 tid conception-projet-cours5-briefing-tlt-publication
Alexandre Plennevaux
 
6 1-ergonomie du web
6 1-ergonomie du web6 1-ergonomie du web
6 1-ergonomie du webRYMAA
 
Introduction au cours d'écriture numérique
Introduction au cours d'écriture numériqueIntroduction au cours d'écriture numérique
Introduction au cours d'écriture numérique
Xavier Lambert
 
Un site Web de qualité
Un site Web de qualitéUn site Web de qualité
Un site Web de qualité
mastertic
 

Similaire à Organisation visuelle (20)

UX design for web
UX design for webUX design for web
UX design for web
 
Redaction web fiche pedagogique 2 structurer sa page
Redaction web fiche pedagogique 2 structurer sa pageRedaction web fiche pedagogique 2 structurer sa page
Redaction web fiche pedagogique 2 structurer sa page
 
argonomie_web.pptx
argonomie_web.pptxargonomie_web.pptx
argonomie_web.pptx
 
Ergonomie Actengo
Ergonomie ActengoErgonomie Actengo
Ergonomie Actengo
 
A4 otamp enrichir_site_web
A4 otamp enrichir_site_webA4 otamp enrichir_site_web
A4 otamp enrichir_site_web
 
5. Grands principes de conception
5. Grands principes de conception5. Grands principes de conception
5. Grands principes de conception
 
Stratégie de valorisation et d'éditorialisation des ressources documentaires
Stratégie de valorisation et d'éditorialisation des ressources documentairesStratégie de valorisation et d'éditorialisation des ressources documentaires
Stratégie de valorisation et d'éditorialisation des ressources documentaires
 
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
 
Formation écriture pour le web
Formation écriture pour le webFormation écriture pour le web
Formation écriture pour le web
 
Ecrire pour le web v3 cfj2012
Ecrire pour le web v3 cfj2012Ecrire pour le web v3 cfj2012
Ecrire pour le web v3 cfj2012
 
Guide auto-formation pour écrire pour le web~Learning Cube
Guide auto-formation pour écrire pour le web~Learning CubeGuide auto-formation pour écrire pour le web~Learning Cube
Guide auto-formation pour écrire pour le web~Learning Cube
 
Intervention de Laurent Pierre Gilliard d'Aquitaine Europe Communication
Intervention de Laurent Pierre Gilliard d'Aquitaine Europe CommunicationIntervention de Laurent Pierre Gilliard d'Aquitaine Europe Communication
Intervention de Laurent Pierre Gilliard d'Aquitaine Europe Communication
 
Ergonomie des sites internet touristique
Ergonomie des sites internet touristiqueErgonomie des sites internet touristique
Ergonomie des sites internet touristique
 
Rédaction web : écrire pour être lu
Rédaction web : écrire pour être luRédaction web : écrire pour être lu
Rédaction web : écrire pour être lu
 
Créer son site_jimdo
Créer son site_jimdoCréer son site_jimdo
Créer son site_jimdo
 
Conception Web 2011
Conception Web 2011Conception Web 2011
Conception Web 2011
 
2 tid conception-projet-cours5-briefing-tlt-publication
2 tid conception-projet-cours5-briefing-tlt-publication2 tid conception-projet-cours5-briefing-tlt-publication
2 tid conception-projet-cours5-briefing-tlt-publication
 
6 1-ergonomie du web
6 1-ergonomie du web6 1-ergonomie du web
6 1-ergonomie du web
 
Introduction au cours d'écriture numérique
Introduction au cours d'écriture numériqueIntroduction au cours d'écriture numérique
Introduction au cours d'écriture numérique
 
Un site Web de qualité
Un site Web de qualitéUn site Web de qualité
Un site Web de qualité
 

Plus de msk10

Web ergo3 : Comprendre l'internaute
Web ergo3 : Comprendre l'internauteWeb ergo3 : Comprendre l'internaute
Web ergo3 : Comprendre l'internaute
msk10
 
Tisseron Le bonheur dans l'image Chapitre 7 Ordinateurs et Jeux Vidéo
Tisseron Le bonheur dans l'image Chapitre 7 Ordinateurs et Jeux VidéoTisseron Le bonheur dans l'image Chapitre 7 Ordinateurs et Jeux Vidéo
Tisseron Le bonheur dans l'image Chapitre 7 Ordinateurs et Jeux Vidéo
msk10
 
Tisseron Le bonheur dans l'image Chapitres 4-5-6
Tisseron Le bonheur dans l'image Chapitres 4-5-6Tisseron Le bonheur dans l'image Chapitres 4-5-6
Tisseron Le bonheur dans l'image Chapitres 4-5-6
msk10
 
Wajcman - Partie 1
Wajcman -  Partie 1Wajcman -  Partie 1
Wajcman - Partie 1
msk10
 
Concepts methodes
Concepts methodesConcepts methodes
Concepts methodes
msk10
 
Kaplan La métamorphose des objets
Kaplan La métamorphose des objetsKaplan La métamorphose des objets
Kaplan La métamorphose des objets
msk10
 
Wajcman - Partie 2
Wajcman  - Partie 2Wajcman  - Partie 2
Wajcman - Partie 2
msk10
 
Tisseron Le bonheur dans l'image chapitre 1 manuscrit
Tisseron Le bonheur dans l'image chapitre 1 manuscritTisseron Le bonheur dans l'image chapitre 1 manuscrit
Tisseron Le bonheur dans l'image chapitre 1 manuscrit
msk10
 
Tisseron Le bonheur dans l'image chapitre 2 Pub
Tisseron Le bonheur dans l'image chapitre 2 PubTisseron Le bonheur dans l'image chapitre 2 Pub
Tisseron Le bonheur dans l'image chapitre 2 Pub
msk10
 
Tisseron Le bonheur dans l'image chapitre 3 BD
Tisseron Le bonheur dans l'image chapitre 3 BDTisseron Le bonheur dans l'image chapitre 3 BD
Tisseron Le bonheur dans l'image chapitre 3 BD
msk10
 

Plus de msk10 (10)

Web ergo3 : Comprendre l'internaute
Web ergo3 : Comprendre l'internauteWeb ergo3 : Comprendre l'internaute
Web ergo3 : Comprendre l'internaute
 
Tisseron Le bonheur dans l'image Chapitre 7 Ordinateurs et Jeux Vidéo
Tisseron Le bonheur dans l'image Chapitre 7 Ordinateurs et Jeux VidéoTisseron Le bonheur dans l'image Chapitre 7 Ordinateurs et Jeux Vidéo
Tisseron Le bonheur dans l'image Chapitre 7 Ordinateurs et Jeux Vidéo
 
Tisseron Le bonheur dans l'image Chapitres 4-5-6
Tisseron Le bonheur dans l'image Chapitres 4-5-6Tisseron Le bonheur dans l'image Chapitres 4-5-6
Tisseron Le bonheur dans l'image Chapitres 4-5-6
 
Wajcman - Partie 1
Wajcman -  Partie 1Wajcman -  Partie 1
Wajcman - Partie 1
 
Concepts methodes
Concepts methodesConcepts methodes
Concepts methodes
 
Kaplan La métamorphose des objets
Kaplan La métamorphose des objetsKaplan La métamorphose des objets
Kaplan La métamorphose des objets
 
Wajcman - Partie 2
Wajcman  - Partie 2Wajcman  - Partie 2
Wajcman - Partie 2
 
Tisseron Le bonheur dans l'image chapitre 1 manuscrit
Tisseron Le bonheur dans l'image chapitre 1 manuscritTisseron Le bonheur dans l'image chapitre 1 manuscrit
Tisseron Le bonheur dans l'image chapitre 1 manuscrit
 
Tisseron Le bonheur dans l'image chapitre 2 Pub
Tisseron Le bonheur dans l'image chapitre 2 PubTisseron Le bonheur dans l'image chapitre 2 Pub
Tisseron Le bonheur dans l'image chapitre 2 Pub
 
Tisseron Le bonheur dans l'image chapitre 3 BD
Tisseron Le bonheur dans l'image chapitre 3 BDTisseron Le bonheur dans l'image chapitre 3 BD
Tisseron Le bonheur dans l'image chapitre 3 BD
 

Dernier

Proyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de pazProyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de paz
Morzadec Cécile
 
Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union
 
BATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en FranceBATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en France
Txaruka
 
Veille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdfVeille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdf
frizzole
 
Iris van Herpen. pptx
Iris         van        Herpen.      pptxIris         van        Herpen.      pptx
Iris van Herpen. pptx
Txaruka
 
Textes de famille concernant les guerres V2.pdf
Textes de famille concernant les guerres V2.pdfTextes de famille concernant les guerres V2.pdf
Textes de famille concernant les guerres V2.pdf
Michel Bruley
 
cours-LasergrammetrieLe « LiDAR», de l’anglais « Light.pptx
cours-LasergrammetrieLe « LiDAR», de l’anglais « Light.pptxcours-LasergrammetrieLe « LiDAR», de l’anglais « Light.pptx
cours-LasergrammetrieLe « LiDAR», de l’anglais « Light.pptx
AbdessamadAmimi1
 

Dernier (7)

Proyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de pazProyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de paz
 
Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023
 
BATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en FranceBATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en France
 
Veille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdfVeille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdf
 
Iris van Herpen. pptx
Iris         van        Herpen.      pptxIris         van        Herpen.      pptx
Iris van Herpen. pptx
 
Textes de famille concernant les guerres V2.pdf
Textes de famille concernant les guerres V2.pdfTextes de famille concernant les guerres V2.pdf
Textes de famille concernant les guerres V2.pdf
 
cours-LasergrammetrieLe « LiDAR», de l’anglais « Light.pptx
cours-LasergrammetrieLe « LiDAR», de l’anglais « Light.pptxcours-LasergrammetrieLe « LiDAR», de l’anglais « Light.pptx
cours-LasergrammetrieLe « LiDAR», de l’anglais « Light.pptx
 

Organisation visuelle

  • 1. 12 règles pour optimiser l'ergonomie de votre site Chapitre 05 - Les bases et critères de l'ergonomie 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 escient http://www.ergonomie-sites-web.com/
  • 2. Règle 2 Organisation visuelle : la page est bien rangée Libérer l’esprit de votre internaute, en limitant la charge mentale liée au traitement de ce qu’il voit à l’écran
  • 3. Rappels sur le système visuel Les photorécepteurs de la rétine captent les longueurs d'ondes et les transforment en influx nerveux, qui via le nerf optique sera traité 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 d'objets : dirige vers les zones du langage
  • 4. Recommandations à suivre : ● Éviter le trop-plein d’informations ● Diviser la quantité de mots par deux ● N'afficher que les principaux éléments de navigation et d'interaction ● Afficher les éléments optionnels seulement si nécessaire ● Supprimer les éléments d'interaction inutiles ● N'afficher que les éléments d'interaction les plus utiles ● Différencier les quantités d'information réelles et perçues ● L'hétérogénéité visuelle augmente la charge informationnelle ● Les images de fond augmentent la charge informationnelle ● Les animations augmentent la charge informationnelle
  • 5. 1 - Éviter le trop-plein d’informations Supprimer l'information inutile bruit visuel : tout élément graphique qui ne transmet pas d'information, surcharge la présentation, ou entre en compétition avec l'information. Il est évident qu'il vaut mieux se passer de ce genre de nuisance sur une page web.
  • 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. Trois types de lecture selon le contexte d'utilisation, l'expertise de l'internaute ● 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 n'utilisent pas systématiquement l'ascenseur vertical, cela milite donc pour des pages plutôt courtes, et un positionnement des informations importantes en haut de la page.
  • 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 d'accueil enrichie ● grille 3 colonnes
  • 9. 3 - Différencier les quantités d'information 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é d'informations calculée en pixels ne change pas ● Théorie du traitement de l'information : la charge cognitive
  • 10. Approche STI – Système de traitement de l'information
  • 11. Confort visuel : combinaison de sensation et d'information éblouissement gênant : perte de lisibilité éblouissement inconfortable : gêne visuelle, fatigue
  • 12. Les images de fond augmentent la charge informationnelle Les éléments de navigation primordiaux sont presque invisibles : Genre, Recherche, Catalogue (au centre)
  • 13.
  • 14. La lisibilité Optimiser deux aspects : ● legibility pour désigner la lisibilité matérielle, visuelle d'un texte. On réfère donc au niveau perceptif ●readability pour désigner la lisibilité cognitive, la façon dont un texte peut être intégré au niveau cognitif et compris par l'utilisateur. Quelques recommandations ● mettre en valeur les informations importantes, les mots-clés : utiliser des enrichissements typographiques, gras ou l'italique (moins lisible qu'un style classique) ● jouer sur les tailles de caractères ● bien distinguer les mots-clés des liens (ne pas utiliser le même format)
  • 15. Ecrire en minuscules plutôt qu'en majuscules (les mots écrits en lettres minuscules sont plus faciles à lire que ceux écrits en lettres capitales). On peut toutefois se permettre d'écrire en majuscules pour des informations brèves (intitulé d'un 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 l'indicatif Des lignes de texte ni trop longues ni trop courtes, environ 80 caractères
  • 16.
  • 17. Le droit d'écrire long ● Dès que le contenu recherché est identifié, le processus de lecture n'est 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 d'un texte. Cependant, la nature même du web fait que le découpage d'un texte en plusieurs pages nécessite le chargement successif de ces pages. Cette façon de présenter l'information nuit à une lecture continue du texte, puisque normalement, l'oeil passe inconsciemment d'une ligne à l'autre 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.
  • 18. 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
  • 19. Page d'accueil : 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 l'interruption de l'animation d'intro. ● La page d'accueil doit être appréhendée d'emblée, d'un seul coup d'œil : pas d'ascenseur
  • 20. 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)
  • 21. 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-titres Ils 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
  • 22. Les légendes 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 ● 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
  • 23. Macrotypographie Cf le pdf en ligne