LikeThis! Empowering App Users to Submit UI Improvement Suggestions Instead of Complaints

L'article présente LikeThis!, une approche basée sur l'IA générative qui transforme les retours utilisateurs vagues en suggestions d'amélioration d'interface concrètes et actionnables en générant des alternatives visuelles à partir de captures d'écran, validées par des études de benchmark et une évaluation utilisateur démontrant une meilleure collaboration entre utilisateurs et développeurs.

L'essentiel

📱 LikeThis ! : Quand votre mécontentement devient un plan de rénovation

Imaginez que vous êtes dans un restaurant et que votre plat est froid.

• L'ancienne façon de faire : Vous appelez le serveur en criant : "C'est froid ! C'est nul !" Le chef en cuisine entend votre plainte, mais il ne sait pas exactement ce que vous voulez. Est-ce qu'il doit le réchauffer ? Le changer ? Mettre plus de sauce ? Il doit deviner.
• La nouvelle façon (avec LikeThis !) : Vous ne vous contentez pas de vous plaindre. Vous sortez votre téléphone, vous prenez une photo du plat, et une intelligence artificielle (IA) vous propose immédiatement trois solutions visuelles : "Voici à quoi cela ressemblerait si on le réchauffait", "Voici si on changeait l'assiette", ou "Voici si on ajoutait un coulis". Vous choisissez la solution qui vous plaît, et vous l'envoyez au chef.

C'est exactement ce que fait l'application LikeThis ! pour les applications mobiles (apps).

🎨 Le problème : Les plaintes floues

Aujourd'hui, quand une application ne fonctionne pas bien (un bouton trop petit, un texte illisible), les utilisateurs laissent souvent des avis négatifs vagues comme "C'est moche" ou "Ça ne marche pas".
Pour les développeurs (les "architectes" de l'application), c'est comme recevoir une carte postale sans adresse. Ils savent qu'il y a un problème, mais ils ne savent pas où ni comment le réparer.

🤖 La solution : LikeThis !

Les chercheurs de l'Université de Hambourg ont créé LikeThis !, un outil qui transforme une plainte vague en un plan de rénovation précis.

Voici comment ça marche, étape par étape :

1. La photo et le mot : Vous repérez un problème dans l'application (par exemple, un bouton qui est trop près d'un autre). Vous prenez une capture d'écran et vous écrivez une petite phrase : "Je clique sur le mauvais bouton par erreur."
2. Le chef cuisinier IA (Génération de suggestions) : L'IA lit votre phrase et regarde la photo. Au lieu de juste dire "OK", elle imagine trois façons différentes de réparer le problème.
   • Suggestion A : Déplacer le bouton.
   • Suggestion B : Changer la couleur du bouton.
   • Suggestion C : Ajouter une confirmation avant l'action.
3. Le choix du client : L'IA vous montre ces trois nouvelles versions de l'écran. Vous choisissez celle qui correspond le mieux à votre idée.
4. Le message au développeur : Vous envoyez le tout au développeur. Au lieu de recevoir une plainte, il reçoit un devis visuel : "Voici le problème, et voici exactement comment nous aimerions qu'il soit réparé."

🧪 Les tests : Est-ce que ça marche ?

Les chercheurs ont fait deux grands tests pour vérifier si leur invention était bonne :

• Le test des robots (Benchmark) : Ils ont demandé à plusieurs IA de réparer des écrans d'applications. Résultat : L'IA GPT-Image-1 était la meilleure. Elle réussissait à réparer le problème sans casser le reste de l'application (comme un bon artisan qui répare une fuite sans abîmer le carrelage).
• Le test des humains (Étude utilisateurs) : Ils ont demandé à 15 personnes d'utiliser l'outil sur de vraies applications.
  • Côté utilisateurs : 85 % ont trouvé que les suggestions étaient très précises. L'un d'eux a dit : "C'est exactement ce que je pensais, mais mieux expliqué !".
  • Côté développeurs : Quand ils ont reçu les rapports avec les nouvelles images, ils ont compris beaucoup plus vite ce qu'il fallait faire. Les rapports étaient plus "actionnables" (plus faciles à transformer en travail réel).

💡 Les leçons apprises

• Le secret du succès : L'IA ne doit pas essayer de réparer l'image directement tout de suite. Elle doit d'abord écrire un "plan" (une description textuelle de la solution) avant de dessiner la nouvelle image. C'est comme dessiner un croquis avant de construire une maison.
• Les limites : Parfois, l'IA propose des choses qui sont jolies mais qui ne respectent pas les règles de sécurité ou de design de l'entreprise. Les développeurs doivent donc toujours vérifier le travail avant de l'appliquer.

🚀 L'avenir

À l'avenir, les chercheurs espèrent que cet outil permettra aux utilisateurs et aux développeurs de travailler en équipe, comme des co-pilotes. Au lieu de se plaindre, les utilisateurs pourraient même proposer des "patchs" (des petites corrections de code) directement.

En résumé : LikeThis ! ne vous demande pas d'être un expert en informatique. Il vous donne un crayon magique pour dessiner la solution, transformant votre frustration en une idée constructive que n'importe quel développeur peut comprendre et réaliser.

Résumé technique

Voici un résumé technique détaillé de l'article de recherche « LikeThis! Empowering App Users to Submit UI Improvement Suggestions Instead of Complaints », présenté à la conférence ICSE '26.

1. Problématique

Dans l'écosystème des applications mobiles, le retour utilisateur (feedback) est crucial pour l'évolution du logiciel. Cependant, les utilisateurs fournissent souvent des commentaires vagues, destructeurs ou non informatifs (ex: « C'est moche », « Ça ne marche pas »).

• Limites actuelles : Les outils de feedback traditionnels (avis textuels + étoiles) souffrent de barrières linguistiques et d'un manque de vocabulaire technique chez les utilisateurs.
• Défi de la visualisation : Bien que les maquettes visuelles soient plus précises, les outils de design (Figma, Sketch) sont trop complexes pour l'utilisateur moyen.
• Écart de la recherche : Les approches récentes d'IA générative (GenAI) se concentrent sur la création de nouvelles interfaces ou de code, mais aucune n'a permis aux utilisateurs de modifier une interface existante directement à partir d'un rapport de problème in situ.

2. Méthodologie : L'approche LikeThis!

Les auteurs proposent LikeThis!, une approche basée sur l'IA générative multimodale (MLLM) et la génération d'images, conçue pour transformer une plainte vague en une suggestion d'amélioration concrète.

Flux de travail (Workflow)

Le processus se déroule en deux étapes principales :

1. Saisie de l'utilisateur : L'utilisateur fournit un commentaire textuel et une capture d'écran de l'application (avec option de masquer la zone problématique).
2. Étape 1 : Génération de spécifications (« Suggestion Generation ») : Un modèle de langage multimodal (ex: GPT-4o) analyse la capture et le texte pour générer $n$ spécifications textuelles détaillées décrivant comment résoudre le problème (ex: « Augmenter la taille de la police », « Ajouter une fenêtre de confirmation »).
3. Étape 2 : Édition de l'interface (« UI Editing ») : Un modèle de génération d'images (ex: GPT-Image-1) utilise ces spécifications textuelles pour modifier la capture d'écran originale et produire $n$ variantes visuelles de l'interface corrigée.
4. Sélection et soumission : L'utilisateur choisit la variante qui correspond le mieux à son attente et la soumet aux développeurs.

Implémentation

Un prototype iOS a été développé en SwiftUI, intégrant GPT-4o pour la génération de suggestions et GPT-Image-1 pour l'édition visuelle.

3. Contributions Clés

• Première approche GenAI permettant aux utilisateurs non-experts de soumettre des suggestions d'amélioration UI concrètes et visuelles plutôt que de simples plaintes.
• Validation d'un pipeline en deux étapes : Démonstration que générer d'abord une spécification textuelle avant de modifier l'image est crucial pour la qualité du résultat.
• Étude comparative de modèles : Benchmarking de quatre modèles de pointe (GPT-Image-1, Flux, Gemini, Bagel) sur des tâches d'édition d'UI.
• Étude utilisateur et développeur : Évaluation de l'impact de l'outil sur la qualité perçue du feedback par les deux parties prenantes.

4. Résultats Expérimentaux

A. Étude de Benchmarking (RQ1)

Sur un jeu de données de 300 captures d'écran critiques (UICrit) :

• Performance des modèles : GPT-Image-1 a significativement surpassé les autres modèles (Flux, Gemini, Bagel) en termes de préférence utilisateur, de résolution du problème et de robustesse (peu de nouveaux bugs introduits).
• Impact du masquage (Masking) : L'utilisation d'un masque pour indiquer la zone à modifier est bénéfique pour les petites zones (<20% de l'écran), améliorant la fidélité. Pour les grandes zones, le masquage dégrade souvent la fidélité de l'image globale.
• Importance de l'étape intermédiaire : L'ablation study a prouvé que l'étape de « Génération de spécifications » est essentielle. Sans elle, les modèles génèrent des modifications incomplètes ou non pertinentes.

B. Étude Utilisateurs et Développeurs (RQ2)

• Participants : 15 utilisateurs (profils non-techniques) testant 10 applications réelles, et 5 développeurs expérimentés.
• Précision perçue (Utilisateurs) : 85,5% des suggestions générées ont été jugées « très » ou « plutôt » précises par les utilisateurs. Les utilisateurs ont estimé que l'outil traduisait mieux leurs problèmes en termes compréhensibles par les développeurs.
• Compréhensibilité et Actionnabilité (Développeurs) :
  • La compréhension des problèmes est passée de 70,6% (feedback seul) à une amélioration significative lorsque les suggestions visuelles étaient ajoutées.
  • L'actionnabilité (capacité à implémenter un changement) a augmenté de 58,8% à 70,6% grâce aux suggestions générées.
  • Les développeurs ont noté que les suggestions clarifiaient les rapports vagues, bien qu'ils aient émis des réserves sur la nécessité de valider la faisabilité technique et l'impact sur le parcours utilisateur global.

5. Signification et Perspectives

• Changement de paradigme : LikeThis! transforme la dynamique de collaboration utilisateur-développeur en passant d'une relation de « plainte » à une « co-création » assistée par l'IA.
• Qualité du feedback : L'approche permet de surmonter les barrières linguistiques et techniques, fournissant aux développeurs des spécifications visuelles actionnables.
• Défis futurs :
  • Vitesse : Réduire le temps de génération (actuellement ~1 min) pour une expérience fluide.
  • Contexte multi-écran : Étendre l'approche au-delà d'un seul écran pour couvrir des parcours utilisateurs complets.
  • Génération de code : Passer des maquettes visuelles à la génération de correctifs de code (patches) directement déployables.

En conclusion, LikeThis! démontre que l'intégration de l'IA générative dans les boucles de feedback utilisateur peut considérablement améliorer la qualité, la précision et l'utilité des rapports de problèmes, facilitant ainsi l'évolution logicielle.