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

1. LA VISION ET SES IMPLICATIONS DANS LE DESIGN DE SITES WEB Une présentation #WDSTR By @Lamitransalpin
2. AVERTISSEMENT! Ce que je vais raconter est volontairement extrêmement (abusivement ?) simpliste.
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
4. LA MAUVAISE MÉTAPHORE DE LA CAMERA
5. LE PROBLÈME DE LA ROBE
6. LA PHYSIOLOGIE DE L'OEIL
7. ANATOMIE
8. FONCTIONNEMENT
9. LES PHOTORÉCEPTEURS (1/2)
10. LES PHOTORÉCEPTEURS (2/2)
11. LES SPÉCIALISATIONS DE LA VISION
12. LE CHAMP VISUEL
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)
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
15. UN TRAITEMENT COGNITIF À 2 VOIES
16. UNE VISION SÉMANTIQUE LENTE Temps de réaction : 190ms
17. UN SYSTÈME D'ALERTE RAPIDE Temps de réaction : 80ms
18. UN OEIL DE PRÉDATEUR
19. L'EXPLORATION VISUELLE
20. UN CHAMP DE PERCEPTION LIMITÉ...
21. ...COMPENSÉ PAR UNE EXPLORATION PERMANENTE
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
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
24. QUELQUES RECOMMANDATIONS
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
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.
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
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.
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
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.
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
34. MERCI! QUESTIONS?