OpeFlo: Automated UX Evaluation via Simulated Human Web Interaction with GUI Grounding

OpenFlo is een geautomatiseerd agent-systeem dat webgebruiksgemak evalueert door menselijk gedrag te simuleren en GUI-grounding te gebruiken in plaats van DOM-parsing, waardoor snelle, schaalbare en datagedreven bruikbaarheidstests mogelijk worden die leiden tot gestructureerde UX-rapporten.

De kern

Stel je voor dat je een nieuw restaurant opent. Je hebt de beste koks, het lekkerste eten en een prachtig interieur. Maar voordat je de deuren opent, wil je weten: Is het menu te moeilijk te lezen? Is de stoel comfortabel? Vindt de gast de wc zonder hulp?

Vroeger moest je hiervoor echte mensen uitnodigen, ze betalen, ze observeren en hun reacties analyseren. Dat kost tijd, geld en veel geduld. Voor start-ups of kleine teams is dit vaak onmogelijk.

OpenFlo is de oplossing voor dit probleem. Het is een slimme, digitale "proefpersoon" die je website bezoekt, net als een mens, en je vertelt precies wat er goed en fout gaat.

Hier is hoe het werkt, vertaald naar alledaagse taal:

1. De "Blinde" Robot vs. De "Sehende" Mens

De meeste oude software die websites test, werkt als een blinde robot. Die kijkt alleen naar de onderliggende code (zoals een lijst met ingrediënten), maar ziet niet hoe het eruitziet. Als een knopje mooi rood is, maar de code zegt "dit is een link", dan snapt de robot niet dat een mens misschien denkt: "Oh, dat is een knop, ik klik daarop."

OpenFlo is anders. Het heeft ogen.

• De Analogie: Stel je voor dat je een blinddoek draagt en iemand zegt: "Klik op de derde regel van de lijst." Dat is wat oude robots doen. OpenFlo draagt geen blinddoek. Het kijkt naar het scherm, ziet de knoppen, de kleuren en de tekst, en denkt: "Ah, die knop ziet eruit alsof ik erop moet klikken."
• Dit heet GUI Grounding: Het agentje "grondt" zijn acties in wat het echt ziet, niet alleen in wat de computercode zegt.

2. De "Denkende" Gast (Think Aloud)

Normaal gesproken kijken robots alleen naar wat er gebeurt: "Klik gedaan. Resultaat: Fout." Ze weten niet waarom het misging.

OpenFlo doet alsof het een mens is die hardop denkt (een techniek die UX-experts "Think Aloud" noemen).

• De Analogie: Stel je voor dat je een gast hebt die tijdens het eten hardop zegt: "Hmm, ik zie de 'Bestellen'-knop, maar die is grijs. Ik vraag me af of ik eerst mijn adres moet invullen. Oh wacht, ik zie een klein tekstje dat zegt 'adres verplicht'. Nu snap ik het."
• Door dit proces te simuleren, krijgt de ontwikkelaar niet alleen te horen dat het misging, maar ook waarom de gebruiker in de war raakte.

3. De Scorebord-Methode (SUS en SEQ)

Na het bezoek geeft OpenFlo niet zomaar een oordeel, maar een gedetailleerd rapport met cijfers, net zoals een schoolrapport.

• SEQ (De Stappen-Score): Na elke kleine actie (bijv. "klik op zoeken") geeft het een cijfer van 1 tot 7. "Was dit makkelijk of moeilijk?"
  • Voorbeeld: "Het vinden van de zoekbalk was een 7 (heel makkelijk), maar het invullen van het formulier was een 2 (heel lastig)."
• SUS (Het Eindcijfer): Aan het eind krijgt de hele website een eindcijfer (0-100), gebaseerd op een wereldwijd erkende test.
  • Voorbeeld: "Je website krijgt een 55/100. Dat is een 'D'. Het werkt, maar mensen vinden het lastig."

4. Een Praktijkvoorbeeld: De Vakantieplanner

In het paper testen ze een website voor het boeken van kampeervergunningen (Recreation.gov).

• Wat gebeurde er? De website zag er mooi uit, maar de knoppen reageerden niet goed.
• Wat zag OpenFlo? Het agentje dacht hardop: "Ik zie de knop, maar hij doet niets. Ik klik nog eens. Niets. Ik twijfel."
• Het resultaat: De "stappen-scores" vielen dramatisch in. Het rapport concludeerde: "De knop is visueel duidelijk, maar functioneel dood. Mensen zullen hier vastlopen."
• Zonder OpenFlo hadden de ontwikkelaars misschien gedacht: "Het ziet er goed uit, alles werkt wel," en hadden ze de fout gemist.

Waarom is dit geweldig?

Vroeger moest je wachten tot je product klaar was en dan dure tests doen. Met OpenFlo kan elke ontwikkelaar, zelfs een eenmanszaak, continu testen.

• Het is als een 24/7 kwaliteitscontroleur die nooit moe wordt.
• Het helpt om websites te bouwen die niet alleen werken, maar die ook leuk en makkelijk zijn om te gebruiken.

Kortom: OpenFlo is een digitale "proefpersoon" met ogen en een stem, die je website bezoekt, hardop nadenkt over wat hij ziet, en je een duidelijk rapport geeft over hoe je je product kunt verbeteren. Het maakt goede gebruikerservaring toegankelijk voor iedereen.

Technische samenvatting

Probleemstelling

De evaluatie van gebruikerservaring (UX) op websites vereist traditioneel tijdrovende gebruikersstudies en expertreviews. Dit vormt een knelpunt in de moderne softwareontwikkeling, vooral voor kleine teams en agile workflows waar iteratiesnelheid cruciaal is. De democratisering van softwareontwikkeling door AI-gestuurde tools heeft de snelheid van het bouwen van applicaties vergroot, maar de middelen voor rigoureuze gebruikersonderzoek ontbreken vaak.

Bestaande geautomatiseerde oplossingen hebben twee belangrijke tekortkomingen:

1. Gebrek aan visuele perceptie: Veel agents vertrouwen op DOM-parsing (Document Object Model), wat betekent dat ze de visuele lay-out, stijlen en layout-ambiguïteiten negeren. Dit leidt tot een onnauwkeurige simulatie van hoe een menselijke gebruiker daadwerkelijk met een interface omgaat.
2. Beperkte evaluatiemethoden: Bestaande agents voeren vaak alleen functionele tests uit of gebruiken statische screenshot-analyse, zonder de nuance van menselijk denken ("waarom" een gebruiker vastloopt) te kunnen vastleggen.

Methodologie: Het OpenFlo Framework

OpenFlo is een agent die menselijk webgedrag simuleert en gestandaardiseerde UX-rapporten genereert. Het bouwt voort op het Avenir-Web framework en introduceert een geavanceerde architectuur die bestaat uit drie kerncomponenten:

1. Visuele Perceptie en Grounding (GUI Grounding)
In plaats van puur op HTML-code te vertrouwen, gebruikt OpenFlo Multimodal Large Language Models (MLLMs) met een "Mixture of Grounding Experts" (MoGE) aanpak.

• De agent "ziet" de website via screenshots en overlapt interactieve elementen met numerieke tags op basis van coördinaten.
• Hierdoor kan de agent direct met pixels interageren, waardoor het obstakels zoals verwarrende HTML, verduisterde code of visuele rommel omzeilt die DOM-based agents tegenkomen.

2. Core Agent en Redenering
De agent werkt in een gesloten lus:

• Invoer: Een gegrounde screenshot en de huidige taakstatus.
• Redenering: De MLLM (bijv. Gemini-3-Pro) plant de volgende stap en vertaalt dit naar lage-niveau browseracties (bijv. click(x, y)).
• Geheugen: Een adaptief geheugenmodule en een dynamische checklist houden de context vast over lange takenreeksen, waardoor de agent fouten kan herstellen en cycli kan vermijden.

3. Evaluatie Pipeline (De "Synthetische Gebruiker")
Om een professionele UX-studie te simuleren, combineert OpenFlo drie methoden:

• Think Aloud Protocol: De agent verbaaliseert zijn gedachten in real-time voordat hij handelt (bijv. "Ik zie de knop, maar hij lijkt uitgeschakeld"). Dit levert kwalitatieve data op over verwarring en cognitieve last.
• Stap-voor-stap SEQ (Single Ease Question): Na elke interactiestap scoort de agent de moeilijkheidsgraad, efficiency, duidelijkheid en vertrouwen op een schaal van 1-7. Dit creëert een gedetailleerde "frictiekaart" van de gebruikersreis.
• SUS (System Usability Scale): Aan het einde van de taak vult de agent de standaard 10-vraag SUS-lijst in om een overkoepelende bruikbaarheidsscore te genereren.

4. Geautomatiseerde Analyse
Een aparte MLLM fungeert als UX-onderzoeker. Deze analyseert de interactielogboeken, de Think Aloud-transcripten en de kwantitatieve scores (SEQ en SUS) om de oorzaken van usability-problemen te diagnosticeren en een gestructureerd rapport met aanbevelingen te genereren.

Belangrijkste Bijdragen

1. OpenFlo Agent: Een open-source agent die end-to-end webtaken uitvoert voor UX-evaluatie, gebaseerd op visuele grounding in plaats van DOM-parsing.
2. Hybride Evaluatie Framework: Een innovatieve combinatie van gestandaardiseerde kwantitatieve metrics (SUS, SEQ) met kwalitatieve LLM-geanalyseerde "Think Aloud" redenering.
3. Visuele Grounding voor MLLMs: Het paper benadrukt dat visuele grounding essentieel is voor nauwkeurige evaluaties, omdat het de agent in staat stelt om dezelfde valkuilen te ervaren als een menselijke gebruiker.
4. Validatie via Case Studies: Het framework is getest op complexe scenario's (bijv. permitreservering op Recreation.gov en documentatie zoeken op Discogs) om de effectiviteit aan te tonen.

Resultaten

De paper presenteert twee case studies die de kracht van OpenFlo illustreren:

• Case Study 1: Recreation.gov (Permit Booking)

  • Situatie: De website leek visueel duidelijk, maar had functionele defecten (bijv. niet-reagerende knoppen).
  • Resultaat: De agent rapporteerde een SUS-score van 55/100 (Grade D).
  • Inzicht: De Think Aloud-logs en de scherpe daling in SEQ-scores tijdens specifieke stappen (zoals datumselectie en groepsgrootte configureren) onthulden dat de visuele duidelijkheid de functionele blokkades maskeerde. De agent kon precies identificeren waar de "frictie" ontstond.

• Case Study 2: Discogs (Documentatie zoeken)

  • Situatie: Een ongestructureerde zoektocht naar ondersteuningsinformatie in een omgeving met veel visuele ruis (advertenties, marktplaats).
  • Resultaat: De agent slaagde erin de juiste pagina te vinden in slechts 4 stappen met een gemiddelde SEQ-score van 6.0 en een SUS-score van 87.5 (Grade A+).
  • Inzicht: Dankzij de Experience-Imitation Planning (EIP) module (die externe kennis zoekt om menselijke expertstrategieën na te bootsen) en de visuele grounding, kon de agent de "Help"-sectie in de footer vinden, terwijl een traditionele agent waarschijnlijk vastliep in de commerciële content.

Betekenis en Toekomstperspectief

OpenFlo markeert een verschuiving in UX-evaluatie van statische, post-hoc analyses naar continue, data-gedreven en schaalbare testing die direct in de ontwikkelcyclus kan worden geïntegreerd.

• Schalbaarheid: Het stelt ontwikkelaars in staat om bij elke wijziging in de code direct feedback te krijgen over de gebruikerservaring, zonder de logistieke last van menselijke deelnemers.
• Diepgang: Door de combinatie van kwantitatieve scores en kwalitatieve redenering, biedt het niet alleen een score, maar ook een verklaring voor waarom een interface faalt of slaagt.
• Toekomst: De auteurs plannen uitbreidingen zoals continue agent-operaties (zonder pauzes), "free-roaming" autonomie voor exploratie, fijnafstemming van modellen specifiek voor UI-evaluatie, en het simuleren van diverse gebruikerspersonas (inclusief verschillende niveaus van digitale geletterdheid).

Kortom, OpenFlo vult de kloof tussen snelle softwareontwikkeling en trage UX-evaluatie door een synthetische, visueel onderbouwde gebruiker te creëren die de menselijke ervaring nauwkeurig nabootst.