La vision et ses implications dans le design de sites web

Présentation du 06 octobre 2015 dans le cadre des soirées #WDSTR - Webdesigners Strasbourg

Transcript

1. LA VISION
   ET SES IMPLICATIONS DANS LE DESIGN DE
   SITES WEB
   Une présentation #WDSTR
   By @Lamitransalpin
   

   View Slide

2. AVERTISSEMENT!
   Ce que je vais raconter est volontairement
   extrêmement (abusivement ?) simpliste.
   

   View Slide

3. CE DONT JE VAIS PARLER:
   1. La physiologie de l'oeil
   2. Les spécialisations de la vision
   3. L'exploration visuelle
   4. Retour sur quelques recommandations
   

   View Slide

4. LA MAUVAISE MÉTAPHORE DE LA CAMERA
   

   View Slide

5. LE PROBLÈME DE LA ROBE
   

   View Slide

6. LA PHYSIOLOGIE DE
   L'OEIL
   

   View Slide

7. ANATOMIE
   

   View Slide

8. FONCTIONNEMENT
   

   View Slide

9. LES PHOTORÉCEPTEURS (1/2)
   

   View Slide

10. LES PHOTORÉCEPTEURS (2/2)
    

    View Slide

11. LES SPÉCIALISATIONS DE
    LA VISION
    

    View Slide

12. LE CHAMP VISUEL
    

    View Slide

13. VISION FOVÉALE
    Bonne sensibilité à la couleur
    Précise
    Faible sensibilité à la lumière
    SPÉCIALISÉE DANS LA VISION SÉMANTIQUE ET LA VISION DE
    JOUR
    (FOV = un disque de 3cm de rayon à 60cm de distance)
    

    View Slide

14. VISION PRÉPHÉRIQUE
    Insensible à la couleur
    Forte sensibilité à la lumière (et aux variations lumineuses)
    Faible précision
    SPÉCIALISÉE DANS LA PERCEPTION DES MOUVEMENTS ET LA
    VISION DE NUIT
    

    View Slide

15. UN TRAITEMENT COGNITIF À 2 VOIES
    

    View Slide

16. UNE VISION SÉMANTIQUE LENTE
    Temps de réaction : 190ms
    

    View Slide

17. UN SYSTÈME D'ALERTE RAPIDE
    Temps de réaction : 80ms
    

    View Slide

18. UN OEIL DE PRÉDATEUR
    

    View Slide

19. L'EXPLORATION VISUELLE
    

    View Slide

20. UN CHAMP DE PERCEPTION LIMITÉ...
    

    View Slide

21. ...COMPENSÉ PAR UNE EXPLORATION
    PERMANENTE
    

    View Slide

22. LA SACCADE OCULAIRE
    Indispensable à la vision
    400 à 800° d'amplitude par seconde
    Durée inférieure à 50ms
    En moyenne 3 saccades par seconde
    Peut faire l'objet d'un contrôle attentionnel
    

    View Slide

23. LA SACCADE PEUT ÊTRE CONTRÔLÉE
    La localisation mémorisée d'une cible dans l'espace
    Les informations présentes en vision périphérique
    L'objectif courant de l'utilisateur
    Une stratégie de parcours
    

    View Slide

24. QUELQUES
    RECOMMANDATIONS
    

    View Slide

25. 2 VISIONS → 2 CONTENUS
    Il faut penser son site à 2 niveaux :
    Concevoir le niveau sémantique pour la vision fovéale
    Concevoir la navigation pour la vision périphérique
    

    View Slide

26. EXPLOITER LA VISION PÉRIPHÉRIQUE POUR
    L'EXPLORATION
    LE CONSTAT : Les éléments de navigation sont situés en vision
    périphérique et permettent de guider la saccade oculaire.
    RECOMMANDATION : Les éléments d'intéret ne doivent pas se baser sur
    la teinte ou le détail mais sur le contraste et le mouvement.
    

    View Slide

27. View Slide

28. EXPLOITER LE VIDE
    LE CONSTAT : Des informations de détail sont difficiles à distinguer en
    vision périphérique.
    RECOMMANDATION : Bien séparer les différents éléments de la page par
    des espaces vides pour en faciliter le repérage en vision
    périphérique et aider à la planification de la saccade oculaire.
     White space in web design
    

    View Slide

29. View Slide

30. LIMITER LES ANIMATIONS
    LE CONSTAT : Les animations en vision périphérique sont traitées
    prioritairement.
    RECOMMANDATION : Limiter les animations.
    Les réserver pour des alertes ou des informations utiles.
    

    View Slide

31. EXPLOITER LE CONTRASTE EN VISION
    FOVÉALE
    LE CONSTAT : La vision centrale, bien que précise, est peu sensible au
    contraste.
    RECOMMANDATION : De forts constrastes permettent une extraction
    sémantique plus rapide.
     Contrast rebellion
    

    View Slide

32. MÉFIEZ VOUS DU BLEU
    LE CONSTAT : Nous avons une mauvaise sensibilité au bleu (nombre
    de cônes réduits).
    RECOMMANDATION : Eviter d'utiliser cette couleur pour du texte ou des
    éléments de détail.
    En revanche, fonctionne très bien en vision périphérique pour
    localiser des éléments.
    

    View Slide

33. FACILITER LES STRATÉGIES D'EXPLORATION
    POUR LA LECTURE
    LE CONSTAT : Les stratégies d'exploration visuelle pour la lecture sont
    complexes. Lorsqu'elles sont mauvaises, elles peuvent être à
    l'origine de problèmes de lecture (dyspraxie visuo-spatiale).
    RECOMMANDATION : Augmenter l'interlignage pour faciliter la lecture
    (entre 1.2em et 1.6em), jouer sur des alternances de couleurs,
    etc.
     Sur la lisibilité des sites web
    

    View Slide

34. MERCI!
    QUESTIONS?
    

    View Slide