De meeste productteams schetsen AI-citaten als nette kleine blauwe nummertjes die netjes naast de gegenereerde tekst staan. Ze koppelen ze eenmalig aan een snelle verbinding, zien de preview in een halve seconde verschijnen en gaan weer door. Dat werkt in de staging-omgeving. Maar het overleeft zelden het contact met het openbare internet.
Bronnen verouderen. Bedrijven verwijderen blogposts. Overheidsportalen reorganiseren hun URL's zonder redirects. Paywalls worden ingevoerd. CDN's vertonen haperingen. Het document dat een AI drie maanden geleden heeft gescand, kan gisteren zijn herschreven. Als je citatiecomponent alleen weet hoe hij er goed uit moet zien wanneer alles goed gaat, zal hij liegen tegen je gebruikers wanneer er iets misgaat. Erger nog, het zal hen in verwarring achterlaten over de vraag of het bewijs überhaupt ooit heeft bestaan.
Een betrouwbaar citatiesysteem moet de status communiceren. Niet alleen een hyperlink. Niet alleen een tooltip. Het moet de lezer in realtime vertellen wat er met het bewijs aan de hand is.
Ontwerp voor vier reële statussen
Beschouw een citatie als een kleine statusmachine. Elke bron die je AI naar boven haalt, kan in een van de vier condities terechtkomen, en je interface moet elke conditie eerlijk afhandelen.
Laden. De gebruiker klikt op het superscript-nummer en het systeem haalt een preview, een fragment of de originele pagina op. Laat tijdens die tussenperiode zien dat er iets gebeurt. Een skeleton-placeholder, een pulserend kader voor het fragment of zelfs gewone tekst met "Bron ophalen..." is beter dan stilte. Stilte zorgt ervoor dat mensen zich afvragen of de klik is gelukt. In een streaming-interface waar bronnen binnenkomen terwijl het model nadenkt, geven laadstatussen je ook de tijd om links op te lossen zonder de tekstgeneratie te blokkeren.
Beschikbaar. Dit is de status waar iedereen voor ontwerpt. De link werkt, de tekst komt nog steeds overeen met wat het model zag, en de gebruiker krijgt een duidelijk fragment plus een directe link. Maar stop niet bij het dumpen van een ruwe URL. Toon de titel, het domein en het relevante tekstfragment. Geef de lezer genoeg context om te beslissen of ze de pagina willen verlaten. Een ruwe href tussen haakjes is technisch gezien een citatie, maar het is geen goede gebruikerservaring.
Gewijzigd. Deze doet pijn. De pagina laadt, maar de inhoud bevat niet langer het citaat of de statistiek die de AI eraan toeschreef. Misschien heeft de uitgever het artikel bijgewerkt. Misschien heeft de snapshot van de AI-training een koptekst gevangen die later is veranderd. Je component moet deze discrepantie aangeven in plaats van te doen alsof alles klopt. Een klein berichtje als "Deze bron is bijgewerkt sinds de indexering" voorkomt dat de gebruiker tien minuten verspilt aan het zoeken naar een zin die niet meer bestaat. Het behoudt ook het vertrouwen. Als je de mismatch verbergt, zal de gebruiker uiteindelijk aannemen dat je product dingen verzint.
Ontbrekend. De 404. De timeout. De paywall. De server die een 200-statuscode terugstuurt maar een generieke "Inhoud verwijderd"-pagina serveert. Laat de link niet daar in het blauw hangen alsof hij werkt. Vervang het door duidelijke taal: "Pagina verwijderd", "Link niet langer beschikbaar" of "Bron offline". Als je weet waarom het mislukte, zeg het dan. Als het Internet Archive of een gecachte kopie bestaat, bied deze dan aan. Het doel is om de cirkel rond te maken, niet om de lezer in de steek te laten.
Toegankelijkheid is niet onderhandelbaar
Citatiecomponenten bevinden zich in drukke, cruciale delen van de UI. Ze verdienen dezelfde nauwkeurigheid als een betaalformulier of een proces voor het boeken van een vlucht.
Gebruik tekst om de status aan te geven. Kleurenblinden kunnen niet alleen vertrouwen op een groene stip of een rode rand. Koppel je indicatoren aan woorden: "Beschikbaar", "Gewijzigd", "Niet beschikbaar". Dat kleine label helpt ook elke ziende gebruiker, omdat statuskleuren zelden hetzelfde betekenen in verschillende culturen of producten.
Schrijf beschrijvende namen voor schermlezers. Label je links zodat iemand die een schermlezer gebruikt iets nuttigs hoort. In plaats van een generieke "Link", lees je "Bron 3: Bewaarbeleid auditlogs" voor. Dit vertelt de luisteraar precies wat hij kan verwachten voordat hij besluit de link te openen.
Bescherm de flow. Het klikken op een citatie mag het door AI gegenereerde antwoord niet doen verdwijnen. Gebruik een paneel, een modal of een inline uitbreiding. De lezer heeft de bron geopend om een specifieke bewering te verifiëren. Als je interface de bewering die ze net aan het lezen waren wegvaagt, dwing je hen om de tekst in het werkgeheugen te houden terwijl ze naar bewijs zoeken. Dat is onnodige cognitieve belasting.
Beheer de focus bewust. Wanneer een gebruiker een citatie opent, verplaats de toetsenbordfocus dan naar het nieuwe paneel of de popup. Wanneer ze deze sluiten, stuur de focus dan terug naar de trigger. Kap de focus niet op terwijl de stream nog bronnen naar de pagina schrijft. Laat de gebruiker de controle houden.
Ga voorzichtig om met streaming. Als je generatieve interface citaten toevoegt terwijl ze binnenkomen, overlaad schermlezergebruikers dan niet met een aankondiging voor elk nieuw superscriptnummer. Bundel ze. Wanneer er twee of drie zijn opgestapeld, kondig dan een beleefde samenvatting aan zoals "Twee bronnen toegevoegd". Constante onderbrekingen maken de output onleesbaar voor gebruikers van ondersteunende technologie.
Onthoud wat een citaat bewijst
Dit punt kan niet vaak genoeg worden herhaald. Een citaat toont de herkomst. Het toont niet de waarheid.
Wanneer een AI een bron citeert, zegt het eigenlijk: "Ik heb deze bewoording hier gevonden." Het zegt niet: "Deze expert heeft gelijk." Het zegt niet: "Dit onderzoek is goed uitgevoerd." Het zegt zelfs niet: "Ik heb de context correct begrepen." Een citaat is een kaart terug naar het oorspronkelijke bewijs. De lezer moet nog steeds dat pad bewandelen en beslissen of het bewijs standhoudt.
Je ontwerp moet dat onderscheid duidelijk maken. Gebruik fragmenten waarmee de gebruiker de relevante regels kan scannen. Toon de publicatiedatum zodat de lezer weet hoe actueel het bewijs is. Als de bron een forum, een persbericht of een primair onderzoek is, breng die context dan naar voren zodat de lezer deze op de juiste manier kan afwegen. Bouw de interface om menselijk oordeelsvermogen te ondersteunen, niet om het te vervangen.
Test tegen de realiteit
Een citaatcomponent die een visuele controle doorstaat, is pas voor de helft klaar. Je hebt