![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 0 0 L 16 0 M 0 6 L 16 6 M 0 12 L 16 12" fill="transparent" height="12px" id="tOoTk1b7B" transform="translate(4 6)" width="16px"><path d="M 0 0 L 16 0 M 0 6 L 16 6 M 0 12 L 16 12" fill="transparent" height="12px" id="dx3OnzCPD" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="rgb(105, 78, 59)" width="16px"/></g></svg>)
interactieontwerp
ux
micro-animaties
complexe opdracht
afstudeeropdracht
Sofie
verlagen CO2-uitstoot
Inzicht krijgen in je persoonlijke CO2-uitstoot middels het inscannen van een supermarktbon.
Inleiding
Dit is een complex project geweest waarvan verschillende invalshoeken zijn verkend. Ik laat eerst het eindresultaat zien, daarna ga ik in op het totstandkomingsproces. Hierin worden de gemaakte keuzes duidelijk en hoe ik tot hier ben gekomen.
Ontwerpvraag
"Hoe kan ik het inscannen van een supermarktbon met AI zo ontwerpen dat hoogopgeleiden tussen de 24 en 30 jaar die zich verantwoordelijk voelen voor het klimaat de controle behouden over hun data?"
Onderzoek
Benchmarking
Ik zet benchmarking in om te kijken welke oplossingen er al ontworpen zijn voor het inscannen van een supermarktbon met AI.
Enkele onderzoeksvragen:
Welke manieren van een supermarktbon inscannen zijn er?
Welke manieren van een foto inscannen zijn er?
Hoe kan er vanuit een app een scan of foto worden gemaakt?
Co-creation
Om inspiratie te krijgen voor een oplossingsrichting door de verschillende perspectieven van stakeholders samen te brengen.
Deelgenomen stakeholders:
Doelgroep
IT/Development
Graphic Design
Resultaat onderzoek
De norm
De algemene flow van het inscannen van een supermarktbon is: foto/scan maken → beoordelen en bewerken → opslaan of delen
Gebruikers kunnen tekst corrigeren, handmatig of via (AI)-geautomatiseerde categorisatie
Foto’s kunnen in apps worden geïmporteerd via de standaard iOS- en Android-deelfuncties
De randen van het object worden automatisch gedetecteerd, bijgesneden en het werkt zo veel mogelijk schaduwen weg
De foto is bewerkbaar (helderheid, contrast, schaduwen, B&W, maar ook: tekst kunnen selecteren en aanpassen om fouten te verbeteren)
Scenario's
Uit de co-creatie en ander onderzoek zijn de volgende foutscenario's bij het inscannen van een supermarktbon gepinpoint:
Scenario 1: Er is iets met de bon: verkreukeld, kwijtgeraakt, slecht leesbaar, handgeschreven, onscherpe foto of donker licht, gescheurd.
Scenario 2: AI kan product niet herkennen: te weinig specifieke productinformatie.
Scenario 3: Externe factoren: de app crasht, er is geen wifi of bereik, telefoon is leeg of vergeten, camera kapot.
Ik werk scenario 3 niet uit, omdat dit externe factoren betreft en weinig te maken heeft met het functioneren van de AI.
Next steps
Scenario 2 gebruiken als centraal probleem dat het ontwerp gaat oplossen
De gangbare normen en patronen inzetten
Ontwerp
User Flow
Het inscannen van een supermarktbon met AI zo ontwerpen dat de gebruiker de controle behoudt over hun data, gaat erover dat de data die er wordt gebruikt om de gebruiker inzicht te geven in hun persoonlijke CO2-uitstoot betrouwbaar is. AI maakt nu eenmaal wel eens fouten en kent gebreken. Door de gebruiker de regie te geven over het verbeteren van deze fouten, blijft de data-input betrouwbaar.
Voor het inscannen van een supermarktbon heb ik een User Flow gemaakt, zodat ik de context van de flow begrijp.
User Flow: bon inscannen.
Interactie
Onderstaand ga ik dieper in op de interacties van het prototype. Bekijk de video's of probeer het prototype zelf uit. In het laatste geval wordt er een ProtoPie-bestand gedownload. Tip: de ervaring is het beste op de telefoon vanwege haptische feedback.
Controleren
Uit de scan van de supermarktbon komt een resultaat: een bon met producten die AI heeft geïdentificeerd. In dit geval is de AI niet zeker van 3 producten. Die producten kan de gebruiker in deze stap controleren.
Door de Tinder-achtige vormgeving kan de gebruiker in één oogopslag aangeven of het gepresenteerde product wel of niet klopt. Dit kan door een kaartje naar links en rechts swipen óf door op de knoppen te tikken. In beide gevallen voelt de gebruiker een lichte trilling en kleurt de desbetreffende knop rood of groen. Als de gebruiker bij het swipen op dit moment loslaat, animeert het kaartje uit het scherm gecombineerd met een bevestigende trilling. Door de Tinder-achtige vormgeving wordt het controleren van de data niet alleen snel, maar ook leuk gemaakt.
Verbeteren
Nadat de artikelen goed of fout zijn gemarkeerd, vergelijkt de gebruiker de fout gemarkeerde artikelen met vergelijkbare artikelen van dezelfde supermarkt en kiest daaruit de juiste. Indien het juiste artikel er niet tussen staat, is er de mogelijkheid om de pro-ductbarcode te scannen.
De gebruiker scrollt door de artikelen heen en selecteert het juiste artikel. Bij het naar beneden scrollen klapt het bovenste (eerder actieve) kaartje in, waardoor de actieve knop verdwijnt en dit kaartje kleiner wordt. Tegelijkertijd wordt het volgende kaartje actief. Als de gebruiker loslaat, springt dit kaartje op zijn plek, gecombineerd met een lichte trilling (feedback). Zo selecteert de gebruiker het juiste artikel of, als deze er niet tussen staat, scant de gebruiker de productbarcode of slaat deze stap over.
Totstandkomingsproces
Onderstaand ga ik in op het chronologische totstandkomingsproces van dit project. Hierdoor zal de context duidelijker worden.
Stakeholders
Proces
Conclusie
Antwoord ontwerpvraag
“Door opties te geven (alternatieve producten) behoud ik de controle over wat ik kies, dat bepaalt AI niet.”
“Als het een fout maakt en ik dat niet zou kunnen controleren en corrigeren, dan weet ik wel van mezelf dat ik heel snel klaar ben met de app, dan denk ik wat een [onzin]-app.”
De terugblik
Opgedane skills
Dit was veruit de meest complexe opdracht die ik heb gedaan, vanwege de onduidelijke richting en vele mogelijkheden. Het werken aan dit project heeft mij de volgende skills laten inzetten:
Meer showcases
Geraadpleegde bronnen
Croonen, J., & Luesink, L. (2025). Duwtje in de juiste richting: ontdek de wereld van gedragsverandering met 16 bewezen technieken (3de editie). Duwtje BV. "Een saaie of vervelende taak kan aantrekkelijk worden door hem leuker te maken."
Lokker, M. (2020, 13 mei). Gamification en nudging: dé ingrediënten voor blijvende gedragsverandering. Frankwatching. https://www.frankwatching.com/archive/2020/02/07/behavioural-insights-gamification-nudging-gedragsverandering/