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

25955dee7f34390404b925af267ecb4b?s=128

Antonio Capobianco

October 06, 2015
Tweet

Transcript

  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.
  27. None
  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
  29. None
  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?