22Deep Learning · Transfer Learning · UX · Lecture 11 min

Comparer deux interfaces avec du transfer learning : adapter ResNet50 à la perception UX

J’ai transformé un réseau pré-entraîné pour estimer des dimensions UX et étudié une question plus utile que la valeur exacte du score : le modèle préserve-t-il le classement humain entre deux pages ?

EN UNE PHRASE

Pour comparer deux pages, un modèle utile doit d’abord préserver l’ordre des évaluations humaines ; une faible erreur absolue ne suffit pas si le classement est incorrect.

CONTEXTE

DeepUX est né d’une question de recherche appliquée : peut-on utiliser une capture d’écran pour comparer la perception de deux interfaces sur l’esthétique, l’utilisabilité ou la confiance ? J’ai travaillé à partir du Web Design Prototypicality Dataset, qui associe des captures de pages web à des évaluations humaines sur six dimensions perceptives.

RÉSUMÉ

J’ai commencé par un réseau convolutionnel inspiré d’AlexNet entraîné depuis zéro, puis adapté ResNet50 pré-entraîné sur ImageNet à une tâche de régression. Le protocole sépare l’extraction de caractéristiques, l’apprentissage d’une nouvelle tête et le fine-tuning partiel. L’évaluation combine erreur absolue, R² et corrélations de Pearson et de Spearman. Pour l’usage visé — choisir laquelle de deux pages obtient le meilleur score — les corrélations mesurent mieux la préservation du classement humain que la seule MAE.

Schéma clé

Du backbone ImageNet à la comparaison paire à paire de deux interfaces

01 · ENTRÉES

PAGE AInterface 01

PAGE BInterface 02

→MÊMES POIDS

02 · TRANSFER LEARNINGResNet50ImageNet · include_top=False

Backbone gelé → fine-tuning partiel

→RÉGRESSION

03 · SCORES UX

A0.62

B0.41

Δ = +0.21 → A

04 · ÉVALUER LE CLASSEMENT

MAE

calibration

Pearson

variation commune

Spearman

ordre relatif

Chaque capture passe par le même ResNet50 adapté à la régression. Les scores sont comparés ; la corrélation évalue si le modèle préserve globalement l’ordre des jugements humains.

Article de vulgarisation fondé sur les ressources de recherche indiquées. Les formulations simplifient certains mécanismes sans modifier les conclusions générales.

Choix de métriques22

Pour comparer deux interfaces, faut-il optimiser la note exacte ou leur ordre relatif ?

J’ai traité chaque capture avec le même modèle de régression, puis évalué si les prédictions évoluaient dans le même sens que les jugements humains. La MAE contrôle la calibration ; Pearson et Spearman indiquent si le modèle conserve le signal relatif utile à la comparaison A/B.

À vérifier

Corrélations de Pearson et Spearman

Accuracy paire à paire par dimension

MAE, calibration et intervalles de confiance

À retenir

Le transfer learning fournit un bon point de départ lorsque les données UX sont limitées, mais l’architecture ne résout pas tout : la cible humaine reste bruitée, le domaine ImageNet diffère des interfaces et le fine-tuning peut dégrader la généralisation.

01 — La vraie tâche

Comparer deux pages demande de préserver un ordre, pas seulement de prédire une note.

DeepUX ne cherche pas à déclarer qu’une interface vaut exactement 6,8 sur 10. Son usage initial consiste à recevoir deux captures A et B, choisir une dimension — esthétique, utilisabilité ou confiance — puis indiquer laquelle est la mieux évaluée par le modèle. La sortie finale dépend donc du signe de l’écart entre deux prédictions.

Cette formulation change la métrique principale. La Mean Absolute Error (MAE), ou erreur absolue moyenne, mesure la distance entre notes prédites et notes humaines. La corrélation de Pearson mesure si les valeurs évoluent ensemble ; la corrélation de Spearman vérifie surtout si leur ordre est similaire. Un modèle peut être mal calibré en valeur absolue tout en classant correctement les pages — ou afficher une MAE acceptable tout en écrasant les écarts et en classant mal les exemples.

02 — Première architecture

Un CNN entraîné from scratch fournit une baseline, mais doit apprendre toute la vision depuis peu de données.

J’ai d’abord construit un réseau convolutionnel inspiré d’AlexNet : trois blocs de convolution, pooling et normalisation, puis deux couches denses avec dropout. La sortie linéaire transforme le problème de classification d’images en régression d’un score UX continu. Cette architecture permet de contrôler toute la chaîne et d’observer directement le surapprentissage.

Le protocole conservé porte sur environ 3 145 captures valides, réparties en 2 516 exemples d’entraînement et 629 de validation dans une première expérience. L’augmentation des données, l’early stopping et le suivi des courbes réduisent certains risques, mais le réseau doit encore apprendre simultanément les contours, la composition, les textures et leur relation avec une cible perceptive bruitée.

03 — Transfer learning

ResNet50 apporte des représentations visuelles pré-entraînées, puis une tête apprend la régression UX.

J’ai chargé ResNet50 sans sa couche de classification, avec les poids appris sur ImageNet. Un Global Average Pooling résume les cartes d’activation ; une tête dense avec dropout et une sortie linéaire produit ensuite le score continu. Dans la première phase, toutes les couches du backbone sont gelées : seules les nouvelles couches apprennent la correspondance entre représentations visuelles et évaluations UX.

Cette stratégie réduit le nombre de paramètres à adapter et rend l’apprentissage plus stable sur un petit jeu de données. Elle transfère toutefois des connaissances apprises sur des objets naturels vers des captures d’interfaces. Les motifs utiles peuvent se recouper — contraste, densité, alignement, hiérarchie visuelle — sans que le domaine source contienne les conventions propres au design web.

04 — Fine-tuning

Dégeler les derniers blocs avec un learning rate plus faible ne garantit pas une meilleure comparaison.

Après l’apprentissage de la tête, j’ai dégelé les dernières couches de ResNet50 et réduit le learning rate de 10⁻⁴ à 10⁻⁵. L’objectif était d’adapter les représentations de haut niveau aux formes spécifiques des interfaces sans effacer brutalement les caractéristiques pré-entraînées.

Les traces conservées montrent pourquoi cette phase doit être évaluée et non supposée bénéfique. Avec le backbone gelé, la meilleure MAE de validation observée dans cette exécution descend autour de 0,53. Au début du fine-tuning, elle remonte avant de redescendre, et l’exécution s’interrompt avant une convergence complète. Davantage de couches entraînables augmentent la capacité du modèle, mais aussi le risque de surapprentissage et d’instabilité.

05 — Évaluation

MAE, R² et corrélations répondent à des questions différentes.

J’ai suivi la MAE pour la calibration, le R² pour la variance expliquée et les corrélations de Pearson et de Spearman pour la structure relative des prédictions. Les expérimentations utilisent aussi des folds et une baseline qui prédit la moyenne de l’ensemble d’entraînement. Le modèle doit battre cette référence, mais surtout produire des écarts cohérents entre pages jamais vues.

Dans une exécution conservée sur la confiance perçue, l’agrégation des prédictions après la seconde étape atteint une corrélation de Pearson d’environ 0,26 entre vérité terrain et prédiction. Le signal est positif mais modeste : il justifie un prototype de comparaison, pas un verdict autonome sur la qualité UX. Une évaluation paire à paire explicite — proportion de couples dont l’ordre est correctement prédit, avec intervalle de confiance — serait la métrique produit la plus directe à ajouter.

06 — Ce que j’en retiens

Le modèle apprend un signal visuel relatif ; il ne mesure pas l’expérience vécue.

Une capture peut contenir des indices associés à la première impression : densité, équilibre, contraste, organisation ou conventions graphiques. Elle ne contient ni la fluidité de l’interaction, ni la compréhension après usage, ni la réussite de la tâche. DeepUX doit donc servir à présélectionner ou comparer des variantes avant une analyse experte et une étude utilisateur.

La suite méthodologique serait de séparer les sites par domaine lors de la validation, comparer explicitement le CNN from scratch, le backbone gelé et plusieurs profondeurs de fine-tuning, puis calculer une accuracy paire à paire par dimension UX. J’ajouterais enfin des intervalles de confiance, une calibration des sorties et une analyse des cas où le modèle et les évaluateurs humains divergent.

Source principale

Notebooks de recherche et prototype DeepUX

Synthèse de mes expérimentations sur le Web Design Prototypicality Dataset : CNN entraîné from scratch, ResNet50 pré-entraîné, gel du backbone, fine-tuning partiel et évaluation par erreur et corrélation.

Repères bibliographiques

He et al. (2016) — Deep Residual Learning for Image Recognition
Miniukovich & Figl (2024) — Web Design Prototypicality Dataset
ImageNet pre-training
Pearson, Spearman, MAE et R²