Upgrade to Pro — share decks privately, control downloads, hide ads and more …

La vision et ses implications dans le design de sites web

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

Antonio Capobianco

October 06, 2015
Tweet

More Decks by Antonio Capobianco

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size 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 full-size slide

  4. LA MAUVAISE MÉTAPHORE DE LA CAMERA

    View full-size slide

  5. LE PROBLÈME DE LA ROBE

    View full-size slide

  6. LA PHYSIOLOGIE DE
    L'OEIL

    View full-size slide

  7. FONCTIONNEMENT

    View full-size slide

  8. LES PHOTORÉCEPTEURS (1/2)

    View full-size slide

  9. LES PHOTORÉCEPTEURS (2/2)

    View full-size slide

  10. LES SPÉCIALISATIONS DE
    LA VISION

    View full-size slide

  11. LE CHAMP VISUEL

    View full-size slide

  12. 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 full-size slide

  13. 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 full-size slide

  14. UN TRAITEMENT COGNITIF À 2 VOIES

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. UN OEIL DE PRÉDATEUR

    View full-size slide

  18. L'EXPLORATION VISUELLE

    View full-size slide

  19. UN CHAMP DE PERCEPTION LIMITÉ...

    View full-size slide

  20. ...COMPENSÉ PAR UNE EXPLORATION
    PERMANENTE

    View full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

  23. QUELQUES
    RECOMMANDATIONS

    View full-size slide

  24. 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 full-size slide

  25. 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 full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

  31. MERCI!
    QUESTIONS?

    View full-size slide