Évaluation de pages Web par oculométrie Jean Caelen Évaluation de pages Web par oculométrie Clips Imag 11/11/2018

L’information sur le WEB Problèmes liés à l’information Accès (où, comment ?) Pertinence (abondance / pauvreté) Volatilité, évolutivité Fiabilité (contrefaçon, source non authentifiée, etc.) Clips Imag 11/11/2018

Information (contenu) Organisation (structure, liens) L’évaluation Information (contenu) Organisation (structure, liens) Présentation (surface) Ex. de produit : WebGarage (évaluateur technique : orthographe, liens, etc.) pour les webmasters http://www.e-qualite.com http://www.axance.com Clips Imag 11/11/2018

Les niveaux Point de vue institutionnel : - identité, image de marque, - offre, - bénéfice(s), - facteur différenciant vis-à-vis de la concurrence directe. Clips Imag 11/11/2018

Point de vue utilisateur : - navigation, - contenu. Les niveaux Point de vue utilisateur : - navigation, - contenu. la navigation : - articulation des différentes rubriques et facilité de repérage, - logique et facilité de navigation. Clips Imag 11/11/2018

Les niveaux le contenu : - pertinence des rubriques proposées par rapport à leur univers de référence, - rapidité d’affichage des informations, - niveau d’intérêt et d’utilité des rubriques, - contenu compris et imaginé des rubriques, - adéquation du contenu par rapport au positionnement et à l’image de marque. Clips Imag 11/11/2018

Précision Authentification Objectivité Qualité de l’information Précision Fiabilité, pertinence Authentification Auteur, sponsor, institution Objectivité Citations, notes, mises en garde Mise à jour Dates, Liens, périodicité de MAJ Couverture Largeur, profondeur   Clips Imag 11/11/2018

Les méthodes industrielles Test en phase de conception : pour valider ou modifier les choix de conception de maquettes ou prototypes Test en phase fonctionnelle : pour évaluer la qualité de l'expérience vécue par les utilisateurs d'un service en ligne fonctionnel Test en ligne : pour évaluer le taux de réussite à grande échelle, et valider de manière quantitative des hypothèses retenues en amont. Clips Imag 11/11/2018

7 pièges à éviter… Recommandations… aux chefs de projet Les effets de mode La surenchère technologique Le marketing Les effets de manche clinquants Le manque de démarche scientifique L’effet démo, le focus group L’ego et le rêve…   Source : http://www.veblog.com/ Clips Imag 11/11/2018

Inspection visuelle de sites WEB… …par oculométrie Clips Imag 11/11/2018

Sites Hypermedias et Inspection Visuelle Automatique 11/11/2018 Projet SHIVA Sites Hypermedias et Inspection Visuelle Automatique Dans le cadre de l’ISDN Région Rhône-Alpes Clips Imag 11/11/2018

Matériel Oculomètre Metrovision Partie optique Partie électronique 11/11/2018 Matériel Oculomètre Metrovision Partie optique caméra éclairage infrarouge mentonnière Partie électronique commande éclairage génération signaux traitement signal vidéo dialogue par liaison série génération signal vidéo de contrôle Clips Imag 11/11/2018

Casque Inconvénients poids sur la tête mise au point calibrage 11/11/2018 Casque Inconvénients poids sur la tête mise au point calibrage Clips Imag 11/11/2018

Les méthodes                                                                                                                                                                                                                                                                                       Méthode retenue Clips Imag 11/11/2018

Données générales sur les parcours visuels 11/11/2018 Données générales sur les parcours visuels En Z En spirale Hiérarchique Clips Imag 11/11/2018

Points de fixation fovéale 11/11/2018 Paramètres de mesure Trajectoire Points de fixation fovéale à 100 ms (perception) à 250 ms (cognition) Vision périphérique Densité des points Clips Imag 11/11/2018

Points de fixation fovéale 11/11/2018 Paramètres de mesure Trajectoire Points de fixation fovéale à 100 ms (perception) à 250 ms (cognition) Vision périphérique Densité des points Clips Imag 11/11/2018

Tracé de points de mesure 11/11/2018 Exemples   Tracé de points de mesure Clips Imag 11/11/2018

Densité points de fixation 11/11/2018 Exemples   But précis Voyage Prix Densité points de fixation Clips Imag 11/11/2018

Exemples Exploration d’images Focus d’intérêt Clips Imag 11/11/2018   Focus d’intérêt Clips Imag 11/11/2018

Analyse comparative de sites… Expérimentation 10 Agences de voyage 11/11/2018 Expérimentation Analyse comparative de sites… 10 Agences de voyage 24 Internautes Consignes : but précis ou butinage Analyse du regard Diagnostic comparatif   Clips Imag 11/11/2018

Stratégies des sites… Expérimentation Structure de la page : 11/11/2018 Expérimentation Stratégies des sites… Structure de la page : linéaire, grille, intégrée, escamot Graphisme : texte, image Approche : client, institution, mixte   Clips Imag 11/11/2018

Sites Structure hiérarchique Approche institution Clips Imag 11/11/2018 Sites   Structure hiérarchique Approche institution Clips Imag 11/11/2018

Sites Structure intégrée : outil de RI, boutons, texte 11/11/2018 Sites   Structure intégrée : outil de RI, boutons, texte Approche client / institution Clips Imag 11/11/2018

Sites Structure hiérarchique / grille Approche client Clips Imag 11/11/2018 Sites   Structure hiérarchique / grille Approche client Clips Imag 11/11/2018

Sites Structure grille Approche client Clips Imag 11/11/2018   Structure grille Approche client Clips Imag 11/11/2018

Sites Structure grille / escamot Approche client / institution 11/11/2018 Sites   Structure grille / escamot Approche client / institution Clips Imag 11/11/2018

Expérimentation : quelques résultats généraux 11/11/2018 Expérimentation : quelques résultats généraux   Exploration en spirale, sans but précis : arrêt sur points d’accroche, images, outil de recherche Clips Imag 11/11/2018

Expérimentation : quelques résultats généraux 11/11/2018 Expérimentation : quelques résultats généraux   But précis : recherche d’un point d’entrée pour information de voyage promotionnel Clips Imag 11/11/2018

Expérimentation : quelques résultats généraux 11/11/2018 Expérimentation : quelques résultats généraux   Présentation linéaire et lecture en Z… Clips Imag 11/11/2018

Expérimentation : quelques résultats généraux 11/11/2018 Expérimentation : quelques résultats généraux   Zones d’intérêt : le logo, le moteur de recherche Clips Imag 11/11/2018

Statistiques pour chaque zone d ’intérêt 11/11/2018 Les zones d’intérêt   Statistiques pour chaque zone d ’intérêt Clips Imag 11/11/2018

Les zones d’intérêt : résultats 11/11/2018 Les zones d’intérêt : résultats   5 zones d’intérêt mais 3 utiles Clips Imag 11/11/2018

Champ périphérique Tracé points de fixation - champ visuel à 1° et 5° 11/11/2018 Champ périphérique Tracé points de fixation - champ visuel à 1° et 5°   Les grandes trajectoires du regard pénalisent le temps de recherche Clips Imag 11/11/2018

Zone d’intérêt en vision périphérique 11/11/2018 Champ périphérique   Zone d’intérêt en vision périphérique Clips Imag 11/11/2018

Zone d’intérêt en vision périphérique 11/11/2018 Champ périphérique   Zone d’intérêt en vision périphérique Clips Imag 11/11/2018

Evolution du focus d’attention 11/11/2018 Evolution du focus d’attention   Emergence rapide du focus d’attention : la zone produit Clips Imag 11/11/2018

Evolution du focus d’attention 11/11/2018 Evolution du focus d’attention   Émergence lente du focus d’attention : la zone produit Clips Imag 11/11/2018

Evolution du focus d’attention 11/11/2018 Evolution du focus d’attention   Insistance de recherche : la zone FAQ Clips Imag 11/11/2018

Conclusion Si but atteint Alors page pertinente = argmin (pages) t 11/11/2018 Conclusion Le temps de parcours est un bon indicateur de qualité   Si but atteint Alors page pertinente = argmin (pages) t Finsi La meilleure page Clips Imag 11/11/2018

Conclusion De l’utilité des illustrations… attractives 11/11/2018 Conclusion Les images et animations   De l’utilité des illustrations… attractives risque d’ambiguïté lien ? information ? accroche ? identification site ? représentation ? argumentation ? Clips Imag 11/11/2018

Recommandations Approche client Disposition grille 11/11/2018 Recommandations Approche client Disposition grille   Du point de vue de l’internaute Les internautes recherchent des infos Le texte sert d’ancrage La légende ou le nom de l’image sont mieux mémorisés que l’image Il faut porter plus d’attention au texte qu’aux images Clips Imag 11/11/2018

Le tableau d’horreur Temps d’exploration maximum (330 ms) 11/11/2018 Le tableau d’horreur   Temps d’exploration maximum (330 ms) Approche institution Disposition hiérarchique Clips Imag 11/11/2018

Le tableau d’honneur Go voyages Carlson / Sélectour Dégriftour 11/11/2018 Le tableau d’honneur Go voyages Carlson / Sélectour Dégriftour   16 14 12 10 nbre de fixations 8 6 4 2 5 10 15 20 25 sujets Clips Imag 11/11/2018