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

Dit paper introduceert LikeThis!, een GenAI-aanpak die gebruikers helpt om constructieve UI-verbeteringsvoorstellen in te dienen in plaats van vage klachten, door op basis van een screenshot en commentaar direct alternatieve ontwerpen te genereren die de begrijpelijkheid en uitvoerbaarheid van feedback voor ontwikkelaars aanzienlijk verbeteren.

De kern

Stel je voor dat je een app op je telefoon gebruikt en er iets mis is. Misschien is een knop te klein, staat de tekst onleesbaar dicht op elkaar, of werkt een menu niet zoals je verwacht. Je wilt het melden aan de ontwikkelaars, maar hoe doe je dat?

Meestal typ je een boze opmerking: "Dit werkt niet!" of "Wat een rotapp!" De ontwikkelaar leest dit, schudt met zijn hoofd en denkt: "Oké, maar wat is er precies mis? En hoe zou het dan wél moeten?"

Dit is het probleem dat de onderzoekers van de Universiteit van Hamburg in hun paper LikeThis! proberen op te lossen. Ze hebben een slimme manier bedacht om gebruikers te helpen om niet alleen te klagen, maar om concrete oplossingen voor te stellen.

Hier is hoe het werkt, vertaald in een simpel verhaal:

🎨 De "Magische Schilder" (GenAI)

Stel je voor dat je een schilderij hebt (de app-scherm) waar een vlek op zit. In plaats van alleen te zeggen "Die vlek is lelijk", laat je een magische AI (een soort super-schilder) drie nieuwe versies van dat schilderij maken.

• Versie 1: De vlek is weggepoetst en de kleuren zijn helderder.
• Versie 2: De vlek is vervangen door een mooi nieuw frame.
• Versie 3: De hele compositie is iets verschoven zodat het rustiger oogt.

Jij, als gebruiker, kijkt naar deze drie opties en zegt: "Ah, versie 2 is precies wat ik bedoelde!" Je klikt op die versie en stuurt die samen met je opmerking naar de ontwikkelaar.

Hoe werkt "LikeThis!" in de praktijk?

Het proces ziet eruit als een gesprek tussen jou en de AI:

1. Je maakt een foto: Je ziet een probleem in de app, maakt een screenshot en zegt kort: "Deze tekst is te klein om te lezen."
2. De AI denkt na: De computer (die een beetje een 'ontwerper' is) bedenkt drie manieren om die tekst groter te maken, zonder de rest van de app te verpesten.
3. Jij kiest: De app toont je drie nieuwe schermen. Jij kiest de beste.
4. Jij stuurt het: De ontwikkelaar krijgt niet alleen je klacht, maar ook een visueel voorbeeld van hoe het moet zijn.

Wat hebben ze ontdekt? (De proefjes)

De onderzoekers hebben dit systeem getest op twee manieren:

1. De "Schilderswedstrijd" (Model Benchmarking)
Ze hebben verschillende AI-schilders laten strijden. Welke AI maakt de beste verbetering?

• Het bleek dat GPT-Image-1 de winnaar was. Deze AI kon het probleem oplossen zonder dat de rest van de app er raar uitzag.
• Een belangrijke les: Als je het probleemgebied klein markeert (bijvoorbeeld alleen die ene knop), werkt de AI veel beter. Als je het hele scherm markeert, raakt de AI de draai kwijt en maakt hij rare dingen.
• De "Tussenstap" is cruciaal: De AI werkt het beste als hij eerst een beschrijving bedenkt van de oplossing (bijv. "Maak de letters groter en verplaats de knop") voordat hij de foto aanpast. Zonder die tussenstap maakt hij vaak onzin.

2. De "Gebruikers- en Ontwikkelaars-test"
Ze lieten 15 mensen (van tandartsen tot bouwvakkers) de app gebruiken en 5 echte ontwikkelaars de feedback beoordelen.

• Gebruikers: Ze vonden het geweldig. Veel mensen zeiden: "Ik wist niet hoe ik het moest uitleggen, maar nu zie ik precies wat ik bedoelde!" Het voelde alsof de AI hun gedachten vertaalde naar een taal die ontwikkelaars begrijpen.
• Ontwikkelaars: Zij vonden de feedback veel duidelijker en makkelijker op te lossen. In plaats van te raden, zagen ze direct een voorbeeld. Ze zeiden: "Dit is veel actiebaarder." Echter, ze waarschuwden ook: "Kijk goed na of dit ook echt technisch haalbaar is, want soms is een oplossing mooi maar onmogelijk om te bouwen."

Waarom is dit belangrijk?

Vroeger was feedback geven als het sturen van een brief zonder adres: "Ik ben boos op de deur, doe er iets aan!" De ontvanger weet niet welke deur je bedoelt.

Met LikeThis! stuur je een brief met een foto van de deur en drie voorbeelden van hoe je hem zou willen schilderen. Het maakt de communicatie tussen de gebruiker (die vaak geen tech-expert is) en de ontwikkelaar (die wel een expert is) veel soepeler.

Kortom:
Deze technologie helpt ons om van "boze klagers" te veranderen in "constructieve ontwerpers". Het geeft ons de tools om onze ideeën visueel te maken, zodat ontwikkelaars niet hoeven te gissen, maar direct kunnen zien wat we nodig hebben. Het is alsof we allemaal even een dagje ontwerper spelen om onze apps beter te maken!

Technische samenvatting

Hier is een gedetailleerde technische samenvatting van het paper "LikeThis! Empowering App Users to Submit UI Improvement Suggestions Instead of Complaints", geschreven in het Nederlands.

Probleemstelling

In de huidige mobiele app-markt is gebruikersfeedback cruciaal voor de evolutie van software. Echter, onderzoek toont aan dat gebruikers vaak onduidelijke, vaag geformuleerde of destructieve feedback geven (bijvoorbeeld "dit werkt niet" of "dit is lelijk").

• Tekstuele beperkingen: Gebruikers hebben vaak geen technische woordenschat om hun problemen nauwkeurig te beschrijven, wat leidt tot misverstanden tussen gebruikers en ontwikkelaars.
• Moeilijkheid van visuele feedback: Hoewel visuele mockups effectiever zijn, zijn professionele ontwerptools (zoals Figma) te complex voor de gemiddelde gebruiker.
• Huidige AI-grens: Bestaande AI4SE (AI for Software Engineering) benaderingen focussen voornamelijk op het genereren van code of het maken van nieuwe UI's vanuit tekst, maar niet op het bewerken van bestaande UI's op basis van specifieke gebruikersklachten.

Er is een gat in de literatuur voor een systeem dat gebruikers in staat stelt om bestaande UI-problemen direct te corrigeren met concrete, visuele suggesties in plaats van alleen maar te klagen.

Methodologie: LikeThis!

De auteurs stellen LikeThis! voor, een GenAI-gebaseerde aanpak die multimodale Large Language Models (MLLMs) en beeldgeneratiemodellen combineert. Het systeem werkt via een tweestaps-pijplijn:

1. Input: De gebruiker levert een tekstuele opmerking over een probleem en een screenshot van het scherm. Optioneel kan de gebruiker een specifiek probleemgebied markeren (maskeren).
2. Stap 1: Suggestiegeneratie (Suggestion Generation):
   • Een MLLM (bijv. GPT-4o) analyseert de screenshot en de feedback.
   • Het genereert $n$ tekstuele "oplossingspecificaties" (beschrijvingen van hoe het UI-probleem opgelost kan worden, zonder animaties of dynamisch gedrag).
   • Dit is een cruciale tussenstap om de intentie van de gebruiker te vertalen naar een technische specificatie voor het beeldmodel.
3. Stap 2: UI-bewerking (UI Editing):
   • Een beeldgeneratiemodel (bijv. GPT-Image-1) gebruikt de originele screenshot, de tekstuele specificatie en eventueel een masker om de UI visueel aan te passen.
   • Het systeem genereert meerdere alternatieve ontwerpen (bijv. 3 opties) die het probleem oplossen.
4. Selectie en Inzending: De gebruiker kiest de beste suggestie uit de gegenereerde opties en dient deze in bij de ontwikkelaars, samen met de oorspronkelijke feedback.

Implementatie: Een prototype is gebouwd voor iOS (SwiftUI) dat gebruikmaakt van Apple Shortcuts voor het snel vastleggen van screenshots en het initiëren van het feedbackproces.

Belangrijkste Bijdragen en Evaluatie

De auteurs hebben twee uitgebreide studies uitgevoerd om de effectiviteit te valideren:

1. Model Benchmarking Studie (RQ1)

• Dataset: Gebruik van 300 UI-schermen en critiques uit het publieke UICrit-dataset.
• Vergelijking: Vier state-of-the-art modellen werden getest: GPT-Image-1, Flux, Gemini en Bagel.
• Resultaten:
  • GPT-Image-1 presteerde significant beter dan de andere modellen op alle metrieken: voorkeur van gebruikers, oplossen van het probleem, trouw aan het origineel (fidelity) en robuustheid (geen nieuwe bugs introduceren).
  • Maskering: Het gebruik van een masker (het markeren van het probleemgebied) was zeer effectief voor kleine wijzigingen (<20% van het scherm), maar had een negatief effect op de kwaliteit bij grote wijzigingen.
  • Ablatie-studie: De tussenstap "Suggestion Generation" (tekstuele specificatie genereren voordat het beeld wordt aangepast) bleek essentieel. Zonder deze stap daalde de kwaliteit van de gegenereerde UI's drastisch.

2. Gebruikers- en Ontwikkelaarsstudie (RQ2)

• Opzet: 15 gebruikers testten 10 productie-apps en gebruikten LikeThis! om feedback te geven. De ontwikkelaars van deze apps evalueerden de feedback.
• Gebruikersresultaten:
  • 85,5% van de gegenereerde suggesties werd door gebruikers als "grotendeels" of "zeer accuraat" beoordeeld.
  • Gebruikers vonden het systeem nuttig omdat het hun vaagheid vertaalde naar concrete, technische suggesties die ontwikkelaars beter begrijpen.
• Ontwikkelaarsresultaten:
  • Feedback met gegenereerde suggesties werd significant beter begrepen en als actiebaarder beoordeeld dan feedback zonder suggesties.
  • Ontwikkelaars vonden de suggesties vaak inspirerend, maar benadrukten dat ze nog steeds kritisch moeten zijn op haalbaarheid, platformregels en de bredere context van de app (niet alleen één scherm).

Resultaten en Conclusies

• Kwaliteitsverbetering: LikeThis! transformeert vage klachten in concrete, visuele verbeteringsvoorstellen.
• Beste Model: GPT-Image-1 is momenteel het meest geschikte model voor UI-bewerking, vooral in combinatie met een tekstuele tussenstap.
• Mens-AI Interactie: De aanpak vermindert de cognitieve last voor gebruikers en verhoogt de kwaliteit van de input voor ontwikkelaars, wat leidt tot een efficiëntere samenwerking.

Significantie en Toekomstperspectief

Dit paper is significant omdat het de rol van de gebruiker in het softwareontwikkelingsproces verandert: van passieve klager naar actieve co-ontwerper.

• Toekomstige richtingen:
  • Snelheid: Huidige generatietijden (~1 minuut) zijn te lang voor snelle feedback; snellere, gespecialiseerde modellen zijn nodig.
  • Context: Uitbreiding van enkel-scherm feedback naar feedback over meerdere schermen en de volledige gebruikersreis.
  • Code-generatie: Potentieel om niet alleen visuele mockups, maar ook daadwerkelijke code-patches te genereren die direct kunnen worden geïmplementeerd.
  • Vertrouwen: Het is belangrijk om transparantie te bieden over hoe AI-feedback wordt verwerkt en om gebruikers te beschermen (bijv. door invoer te vervagen).

Samenvattend biedt LikeThis! een bewezen raamwerk om de kwaliteit van gebruikersfeedback drastisch te verbeteren door GenAI in te zetten als een vertaler tussen de intenties van de gebruiker en de technische realiteit van de ontwikkelaar.