Audit d’un tutoriel en ligne

L’audit a été demandé avant la mise en ligne du tutoriel DORANUM conçu  par plusieurs instituts liés au CNRS (experts en information scientifique et technique et en formation) pour les doctorants et enseignants chercheurs sur les données de la recherche.

1/ Questionnaire communication

Pour analyser l’identité du site, j’ai sollicité plusieurs types de testeurs, ils se sont enregistrés sur Articulate Replay (screencast + webcam) une quinzaine de minutes. J’ai  ensuite analysé leur navigation.

La consigne : Découvrez le site et  répondez librement en ayant en tête les questions et les grilles de la communication

 

  • OU : Le déroulé des parcours est-il défini ? Quelles sont les différentes entrées ?
  • QUI : Quels sont les prérequis ?
  • QUOI : Y  a-t-il des objectifs, des consignes, un mode d’emploi ?
  • POURQUOI : Y a-t-il des liens entre la présentation du sujet et les tutoriels ?
  • COMMENT : Compréhension de l‘environnement d’apprentissage (lecteur des présentations, blocs, liens,  texte), comment sont-ils intégrés par rapport à une vue d’ensemble ?

 

2/ Analyse ergonomie d'une interface

Ensuite j’ai travaillé sur les critères ergonomiques de Bastien et Scapin sur les interfaces utilisateurs et plus largement sur les sites web :

  •  La visibilité : savoir on l’on est, et où l’on va (menu principal, sous- menu, fil d’Ariane, titre, accroche, ..)
  • La rapidité et l’efficacité (temps de recherche du clic suivant, temps d’affichage) (compréhension des contenus à l’aide de la structure de la page)
  • Le contrôle (revenir facilement sur les résultats antérieurs ou sur la page visitée suite à un clic, reprise ou changement de parcours- maitriser les médias)
  • La cohérence (règles identiques pour les mêmes actions, relation sémantique entre les objets ou les liens et les contenus)

3/ Analyse graphique des contenus pédagogiques

Que j’ai croisé avec des critères graphiques d’ergonomie  utilisés pour l’analyse des contenus pédagogiques multimédia

Pour cette partie, j’ai demandé l’avis d’un illustrateur, non spécialisé dans le web qui m’a aidé à analyser le rapport entre les pages présentant les contenus (les pictos, le liens en image, les catégories, etc) et leurs contenus.

  • Couleurs: respect d’une palette chromatique (analogue, complémentaire, monochromatique)
  • Contraste: dissociation des éléments pour diriger les yeux
    • Entre les objets
    • Entre la taille des titres, des chapeaux, des sous titres, des contenus, des liens, des boutons
    • Entre les motifs et les aplats
    • Entre les variations d’intensité
  • Harmonie et Contextualisation: répétition des éléments du design dans une page et entre les types de page (images, icones, lecteurs embarqués, boutons, titres, sous titres, liens)
  • Alignement des objets dans une grille
  • Équilibre : répartition de la charge visuelle avec la position respective des objets, l’évaluation de la couleur, la valeur et texture des objets, l’animation de blocs (horizontal/vertical)
  • Style: correspondance du style avec le sujet et les types d’utilisateurs (illustrations et textes)

4/ Conclusion

Le tutoriel a été réalisé par plusieurs organismes,  l’analyse  a été aussi utile  pour harmoniser les contenus et explorer le code html (titre, sous-titre, alt, liens, etc…)

On va au delà des critères standards que l’on trouve pour les sites commerciaux, ils correspondent bien à un site avec des contenus très riches avec une valeur ajoutée comme peut l’être un tutoriel.

Épurer et donner de la signification à  l’environnement pour améliorer l’apprentissage des contenus pédagogiques.

  • Mener une analyse croisée au travers de ces 5 choix : 

    • Communication
    • Utilisabilité
    • Design graphique
    • Design web
    • Technique SeO

@import url(https://mariondhauteville.fr/wp-content/plugins/siteorigin-panels/css/front-flex.min.css); #pgc-1277-0-0 , #pgc-1277-1-0 , #pgc-1277-3-0 , #pgc-1277-5-0 , #pgc-1277-7-0 { width:100%;width:calc(100% – ( 0 * 30px ) ) } #pl-1277 #panel-1277-0-0-0 , #pl-1277 #panel-1277-1-0-0 , #pl-1277 #panel-1277-2-0-0 , #pl-1277 #panel-1277-2-1-0 , #pl-1277 #panel-1277-3-0-0 , #pl-1277 #panel-1277-4-0-0 , #pl-1277 #panel-1277-4-1-0 , #pl-1277 #panel-1277-5-0-0 , #pl-1277 #panel-1277-6-0-0 , #pl-1277 #panel-1277-6-1-0 , #pl-1277 #panel-1277-7-0-0 , #pl-1277 #panel-1277-8-0-0 , #pl-1277 #panel-1277-8-1-0 { } #pg-1277-0 , #pg-1277-1 , #pg-1277-2 , #pg-1277-3 , #pg-1277-4 , #pg-1277-5 , #pg-1277-6 , #pg-1277-7 , #pl-1277 .so-panel { margin-bottom:30px } #pgc-1277-2-0 , #pgc-1277-4-0 , #pgc-1277-6-0 , #pgc-1277-8-0 { width:61.8034%;width:calc(61.8034% – ( 0.38196600790794 * 30px ) ) } #pgc-1277-2-1 , #pgc-1277-4-1 , #pgc-1277-6-1 , #pgc-1277-8-1 { width:38.1966%;width:calc(38.1966% – ( 0.61803399209206 * 30px ) ) } #pl-1277 .so-panel:last-child { margin-bottom:0px } #pg-1277-1.panel-no-style, #pg-1277-1.panel-has-style > .panel-row-style , #pg-1277-2.panel-no-style, #pg-1277-2.panel-has-style > .panel-row-style , #pg-1277-3.panel-no-style, #pg-1277-3.panel-has-style > .panel-row-style , #pg-1277-4.panel-no-style, #pg-1277-4.panel-has-style > .panel-row-style , #pg-1277-5.panel-no-style, #pg-1277-5.panel-has-style > .panel-row-style , #pg-1277-6.panel-no-style, #pg-1277-6.panel-has-style > .panel-row-style , #pg-1277-8.panel-no-style, #pg-1277-8.panel-has-style > .panel-row-style { -webkit-align-items:flex-start;align-items:flex-start } #pgc-1277-2-0 , #pgc-1277-2-1 , #pgc-1277-4-0 , #pgc-1277-4-1 , #pgc-1277-6-0 , #pgc-1277-6-1 , #pgc-1277-8-0 , #pgc-1277-8-1 { align-self:auto } #panel-1277-2-0-0> .panel-widget-style , #panel-1277-4-0-0> .panel-widget-style , #panel-1277-6-0-0> .panel-widget-style , #panel-1277-8-0-0> .panel-widget-style { background-color:#7f7f7f } #panel-1277-6-1-0> .panel-widget-style { background-image:url(https://mariondhauteville.fr/wp-content/uploads/2018/01/Hierarchisation-e1515863046333.png);background-position:center center;background-repeat:no-repeat } #panel-1277-8-1-0> .panel-widget-style { background-image:url(https://mariondhauteville.fr/wp-content/uploads/2018/01/Programme-Developpeur-Web-e1515863408753.jpg);background-position:center center;background-repeat:no-repeat } @media (max-width:780px){ #pg-1277-0.panel-no-style, #pg-1277-0.panel-has-style > .panel-row-style , #pg-1277-1.panel-no-style, #pg-1277-1.panel-has-style > .panel-row-style , #pg-1277-2.panel-no-style, #pg-1277-2.panel-has-style > .panel-row-style , #pg-1277-3.panel-no-style, #pg-1277-3.panel-has-style > .panel-row-style , #pg-1277-4.panel-no-style, #pg-1277-4.panel-has-style > .panel-row-style , #pg-1277-5.panel-no-style, #pg-1277-5.panel-has-style > .panel-row-style , #pg-1277-6.panel-no-style, #pg-1277-6.panel-has-style > .panel-row-style , #pg-1277-7.panel-no-style, #pg-1277-7.panel-has-style > .panel-row-style , #pg-1277-8.panel-no-style, #pg-1277-8.panel-has-style > .panel-row-style { -webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column } #pg-1277-0 .panel-grid-cell , #pg-1277-1 .panel-grid-cell , #pg-1277-2 .panel-grid-cell , #pg-1277-3 .panel-grid-cell , #pg-1277-4 .panel-grid-cell , #pg-1277-5 .panel-grid-cell , #pg-1277-6 .panel-grid-cell , #pg-1277-7 .panel-grid-cell , #pg-1277-8 .panel-grid-cell { margin-right:0 } #pg-1277-0 .panel-grid-cell , #pg-1277-1 .panel-grid-cell , #pg-1277-2 .panel-grid-cell , #pg-1277-3 .panel-grid-cell , #pg-1277-4 .panel-grid-cell , #pg-1277-5 .panel-grid-cell , #pg-1277-6 .panel-grid-cell , #pg-1277-7 .panel-grid-cell , #pg-1277-8 .panel-grid-cell { width:100% } #pgc-1277-2-0 , #pgc-1277-4-0 , #pgc-1277-6-0 , #pgc-1277-8-0 { margin-bottom:30px } #pl-1277 .panel-grid-cell { padding:0 } #pl-1277 .panel-grid .panel-grid-cell-empty { display:none } #pl-1277 .panel-grid .panel-grid-cell-mobile-last { margin-bottom:0px } }