Widget-UX die niet stoort (maar wel adviseert)

Widget-UX die niet stoort: producthulp op het juiste moment

Een AI-widget kan een bezoeker helpen kiezen, vergelijken en twijfels wegnemen. Hij kan ook precies het tegenovergestelde doen: een productfoto bedekken, een filter blokkeren, een mobiele duimroute verstoren of te vroeg aandacht opeisen. Goede widget-UX gaat daarom niet om zoveel mogelijk chatstarts. Het gaat om hulp beschikbaar maken op het moment dat een bezoeker er baat bij heeft, zonder de winkelervaring over te nemen.

Fynd is een AI-productadviseur voor webshops. De widget kan een eigen persona, themakleuren, welkomsttekst en suggested prompts krijgen. Die mogelijkheden zijn waardevol als ze de context van de pagina respecteren. Hieronder staat een praktische aanpak voor plaatsing, open versus gesloten gedrag, mobiel ontwerp, toegankelijkheid en een veilige livegang.

Gebruik pagina-intentie als uitgangspunt

Een homepage, product overzichtspagina en product detail page hebben elk een andere taak. De widget hoort die taak te ondersteunen, niet te herhalen.

Op een overzichtspagina probeert een bezoeker meestal de ruimte kleiner te maken: categorie kiezen, filters toepassen, producten scannen en eventueel vergelijken. Hier is Fynd vooral nuttig als zoek- en keuzehulp. Een gesloten widget met een rustige, korte hint werkt vaak beter dan een automatisch geopende chat. Denk aan “Hulp nodig bij kiezen?” of een prompt die aansluit bij de categorie: “Welke maat of variant past bij mij?”

Op een PDP is de intentie specifieker. De bezoeker heeft al een product gevonden en zoekt bevestiging: past het, werkt het samen met iets anders, wat is het verschil met een alternatief? Hier mag de widget zichtbaarder zijn, zolang hij niet de koopknop, prijs, afbeeldingen of variantkeuze bedekt. Suggested prompts kunnen veel concreter zijn:

• “Past dit bij mijn situatie?”
• “Vergelijk met een alternatief”
• “Welke maat heb ik nodig?”
• “Wat heb ik er nog bij nodig?”

De chat moet niet hetzelfde doen als een bestaande, goed zichtbare maattabel of specificatietab. Hij kan die informatie wel uitleggen en helpen vertalen naar een keuze.

Kies bewust tussen open en gesloten

Een open widget vraagt direct om aandacht. Een gesloten widget wacht tot de bezoeker besluit dat hulp nodig is. Geen van beide is altijd juist.

Gebruik een gesloten widget als:

• de pagina veel primaire interactie bevat, zoals filters, configurators of een checkout;
• de bezoeker nog aan het oriënteren is;
• de widget op mobiel weinig ruimte heeft;
• je nog leert welke prompts en plaatsing werken;
• het aanbod visueel of inhoudelijk al veel uitleg geeft.

Een gesloten staat kan nog steeds uitnodigend zijn. Gebruik een duidelijk label, een herkenbaar pictogram en eventueel één korte contextuele zin. Vermijd pulserende animaties, automatische geluidsmeldingen en herhaald openen. Dat zijn onderbrekingen, geen hulp.

Overweeg een open widget alleen wanneer de pagina of route een duidelijke adviesvraag oproept: een gift finder, een complexe categorie, een campagne met weinig producten, of een dedicated adviespagina. Open hem bij voorkeur na een bewuste actie, zoals “Vind mijn match”, in plaats van direct bij page load. Als je toch automatisch opent, doe dit maximaal één keer per sessie, vertraagd en alleen wanneer de chat geen kerncontent bedekt.

Respecteer altijd een sluitactie. Als iemand de widget sluit, laat hem niet bij de volgende pagina vanzelf terug openklappen. Bewaar die keuze minstens gedurende de sessie.

Houd het zwevende element uit de weg

De standaardhoek rechtsonder is vertrouwd, maar niet automatisch veilig. Controleer elke template en breakpoint. Cookiebanners, chatwidgets, sticky add-to-cart-balken, kortingsknoppen en mobiele navigatie concurreren vaak om dezelfde plek.

Maak een eenvoudige kaart van vaste elementen per paginatype. Vraag bij ieder element: is het essentieel, tijdelijk of wegklikbaar? De Fynd-knop moet geen essentiële bediening bedekken. Vooral op PDP’s kan een sticky add-to-cart-balk verschijnen zodra een bezoeker scrolt. Verplaats de widget dan omhoog, laat hem boven de balk zweven, of kies een andere hoek waar dat binnen je layout logisch is.

Houd ook afstand van:

• productcarrousels met pijlen;
• filter- en sorteerknoppen;
• consent banners;
• invoervelden en checkoutnavigatie;
• systeemknoppen van iOS of Android;
• content die alleen zichtbaar is op een klein scherm.

Test met echte productnamen en badges. Een knop die op een lege stagingpagina goed staat, kan op een PDP met “sale”, voorraadmelding en sticky CTA alsnog iets kritieks afdekken.

Ontwerp eerst voor de mobiele duimzone

Mobiele bezoekers vormen vaak de grootste groep, maar een desktopwidget simpelweg verkleinen is onvoldoende. De onderrand is makkelijk bereikbaar met een duim, maar wordt ook druk bezet door browserbediening, safe areas en sticky navigatie. Plaats de trigger binnen bereik zonder hem tegen de rand te drukken.

Praktische mobiele regels:

• houd een ruime tikzone aan, niet alleen een klein pictogram;
• respecteer de safe-area-inset op toestellen met een home indicator;
• vermijd de plek van een sticky add-to-cart- of bottom-nav-balk;
• laat het chatvenster geen volledige viewport innemen zonder duidelijke sluitknop;
• zorg dat toetsenbord, invoerveld en verzendknop tegelijk bruikbaar blijven;
• voorkom horizontaal scrollen en tekst die achter de invoerbalk verdwijnt.

Open de widget op mobiel als een rustig, goed begrensd paneel. Laat de productpagina zichtbaar blijven als dat mogelijk is, zodat iemand details kan controleren terwijl hij een vraag typt. Bij langere gesprekken kan een groter scherm logisch zijn, maar toon dan altijd een duidelijke terug- of sluitactie en herstel de scrollpositie van de pagina na sluiten.

Suggested prompts zijn op mobiel bijzonder belangrijk: typen kost meer moeite. Toon er niet acht tegelijk. Begin met twee of drie korte keuzes die bij het scherm horen, bijvoorbeeld “Welke maat?” en “Vergelijk opties”. Maak ze groot genoeg om aan te tikken en zorg dat de tekst niet halverwege wordt afgesneden.

Maak de eerste boodschap contextueel

Een algemene “Hoe kan ik helpen?” is veilig, maar benut niet waarom de widget op die pagina staat. Stem welkom en prompts af op locatie en persona, zonder te doen alsof je persoonlijke informatie kent.

Een algemene shopbot op een overzichtspagina kan zeggen: “Ik help je de juiste optie te vinden.” Op een PDP kan dezelfde bot zeggen: “Vragen over dit product? Ik kan helpen met maat, gebruik en alternatieven.” Een B2B-persona op een onderdelenpagina kan vragen: “Zoek je op model, aansluiting of onderdeelnummer?”

Gebruik geen opdringerige taal zoals “Wacht! Heb je hulp nodig?” en vermijd nep-schaarste of claims dat de bot een oplossing ziet voordat er een vraag is gesteld. De welkomsttekst moet toestemming vragen om te helpen, niet aandacht opeisen.

Laat kleur het merk ondersteunen, niet de bediening vervangen

Themakleuren maken Fynd herkenbaar binnen een webshop of specifieke brand line. Kies een primaire accentkleur die aansluit bij het merk, maar behoud conventionele signalen voor openen, sluiten, versturen en focus. Een groen vinkje, een klein kruisje of een alleen-icoon is niet voor iedereen duidelijk; combineer het met tekst of een toegankelijke naam.

Controleer minimaal:

• voldoende contrast tussen tekst en achtergrond;
• voldoende contrast voor randen en focusstaten;
• leesbare promptknoppen in normale, hover- en geselecteerde toestand;
• een consistente kleur voor links en acties;
• geen betekenis die uitsluitend door kleur wordt gegeven.

Een rustige gesloten widget kan de merkaccentkleur dragen. Een open chatpaneel hoeft niet volledig in die kleur te zijn. Neutrale achtergronden verminderen visuele belasting en maken productlinks, prijzen en vergelijkingstabellen leesbaar.

Toegankelijkheid is onderdeel van conversatie-UX

Een widget is een interactieve applicatie bovenop je shop. Behandel hem daarom als een volwaardig toegankelijk interface-element.

De trigger heeft een toegankelijke naam nodig, bijvoorbeeld “Open productadvies”. Hij moet met toetsenbord bereikbaar zijn en een zichtbare focusring hebben. Wanneer het paneel opent, moet de focus logisch naar een titel, welkomstbericht of invoerveld gaan. Wanneer het sluit, moet focus terugkeren naar de knop die het opende.

Controleer daarnaast:

• kan Escape een dialoog of paneel sluiten?
• is de leesvolgorde logisch voor screenreaders?
• hebben iconen tekstalternatieven?
• worden nieuwe antwoorden aangekondigd zonder de gebruiker uit zijn invoerveld te trekken?
• zijn prompts echte knoppen en niet alleen klikbare tekst?
• is tekst zoom- en reflowbestendig?

Gebruik geen automatisch bewegende aandachtseffecten die niet te stoppen zijn. Geef voldoende tijd om antwoorden te lezen. Als de bot een link naar een product of beleid aanbiedt, maak duidelijk waar die heen leidt.

Koppel pagina en botpersona

Als Fynd meerdere bots in één shop ondersteunt, laat de widget dan niet willekeurig wisselen. Selecteer een persona op basis van storefront, collectie, merk of route, maar toon één primaire widget tegelijk. Een skincare-PDP kan een merkexpert krijgen; een algemene categoriepagina kan de algemene shopadviseur behouden.

De persona moet zichtbaar zijn in naam en welkom, niet alleen in kleur. De bot kan andere suggested prompts gebruiken en, wanneer nodig, met geïsoleerde kennis werken. Dat voorkomt dat een specialist producten uit een andere brand line adviseert. Zorg wel dat basale servicekennis zoals retouren en levering beschikbaar blijft als die relevant is voor de beslissing.

Wissel niet onverwacht midden in een chat wanneer een bezoeker van pagina verandert. Behoud de sessiecontext of leg uit dat de hulp nu naar een bredere shopadviseur gaat. De ervaring moet voelen als een doorlopende winkelroute, niet als een doorverbinding zonder uitleg.

Controleer in de playground vóór je live gaat

De Fynd-playground is de plaats om inhoud en interactie samen te beoordelen voordat bezoekers de widget zien. Test niet alleen de antwoorden, maar ook de route ernaartoe.

Maak een kleine testmatrix voor desktop en mobiel:

• open en sluit de widget op homepage, overzichtspagina en PDP;
• probeer een productvergelijking en een vraag over maat of compatibiliteit;
• test elke suggested prompt op relevantie en lengte;
• vul een lange productnaam en een lange vraag in;
• open de widget met toetsenbord en screenreader;
• test met sticky banners, cookie consent en add-to-cart actief;
• vraag iets buiten de kennis en controleer de eerlijke hand-off;
• wissel taal of storefront als je NL en EN ondersteunt.

Vraag ook iemand die de configuratie niet kent om een taak te voltooien. Zij zien sneller dat een knop te veel op een cookie-icoon lijkt, dat de chat de prijs afdekt of dat een prompt niet begrijpelijk is.

Launch checklist

Voor livegang kun je deze checklist doorlopen:

• staat er maximaal één Fynd-trigger tegelijk op het scherm?
• bedekt de gesloten of open widget geen CTA, filter, productfoto of formulier?
• is open gedrag bewust gekozen en niet telkens opnieuw automatisch?
• passen welkom en suggested prompts bij de huidige pagina en persona?
• zijn de knoppen comfortabel bereikbaar in de mobiele duimzone?
• werken sluitactie, focus, toetsenbord en screenreader logisch?
• voldoen kleur, tekst en focusranden aan voldoende contrast?
• wijst de bot naar de juiste producten en markt- of merkinformatie?
• is de configuratie getest in de playground op mobiel én desktop?
• weet je welke signalen je na launch volgt, zoals herhaalde vragen en afhaken?

Hulp die niet om aandacht hoeft te vechten

Een goede Fynd-widget is beschikbaar zonder dominant te zijn. Op listings helpt hij oriënteren; op PDP’s helpt hij beslissen. Op mobiel respecteert hij de duimzone en de beperkte ruimte. In elke context gebruikt hij kleur en een persona om duidelijk te maken wie helpt, terwijl bediening en toegankelijkheid consistent blijven.

Begin gesloten, maak prompts pagina-specifiek en open alleen wanneer de bezoeker daar duidelijk om vraagt of de route erom vraagt. Test de complete ervaring in de playground voordat je live gaat. Zo voelt productadvies als een natuurlijke vervolgstap in de shop, niet als een onderbreking.