La vision et ses implications dans le design de sites web

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

LA MAUVAISE MÉTAPHORE DE LA CAMERA

Slide 5

Slide 5 text

LE PROBLÈME DE LA ROBE

Slide 6

Slide 6 text

LA PHYSIOLOGIE DE L'OEIL

Slide 7

Slide 7 text

ANATOMIE

Slide 8

Slide 8 text

FONCTIONNEMENT

Slide 9

Slide 9 text

LES PHOTORÉCEPTEURS (1/2)

Slide 10

Slide 10 text

LES PHOTORÉCEPTEURS (2/2)

Slide 11

Slide 11 text

LES SPÉCIALISATIONS DE LA VISION

Slide 12

Slide 12 text

LE CHAMP VISUEL

Slide 13

Slide 13 text

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)

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

UN TRAITEMENT COGNITIF À 2 VOIES

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

UN OEIL DE PRÉDATEUR

Slide 19

Slide 19 text

L'EXPLORATION VISUELLE

Slide 20

Slide 20 text

UN CHAMP DE PERCEPTION LIMITÉ...

Slide 21

Slide 21 text

...COMPENSÉ PAR UNE EXPLORATION PERMANENTE

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

QUELQUES RECOMMANDATIONS

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

MERCI! QUESTIONS?