ਜ਼ਿਆਦਾਤਰ ਪ੍ਰੋਡਕਟ ਟੀਮਾਂ AI citations ਨੂੰ ਤਿਆਰ ਕੀਤੇ ਗਏ ਟੈਕਸਟ ਦੇ ਨਾਲ ਸੁੰਦਰ ਨੰਬਰਾਂ ਵਜੋਂ ਦਿਖਾਉਂਦੀਆਂ ਹਨ। ਉਹ ਇੱਕ ਵਾਰ ਤੇਜ਼ ਕਨੈਕਸ਼ਨ 'ਤੇ ਇਸਨੂੰ ਸੈੱਟ ਕਰਦੇ ਹਨ, ਅੱਧੇ ਸੈਕਿੰਡ ਵਿੱਚ ਪ੍ਰੀਵਿਊ ਖੁੱਲ੍ਹਦੇ ਦੇਖਦੇ ਹਨ, ਅਤੇ ਅੱਗੇ ਵਧ ਜਾਂਦੇ ਹਨ। ਇਹ ਸਟੇਜਿੰਗ ਮਾਹੌਲ (staging environment) ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ। ਪਰ ਅਸਲ ਇੰਟਰਨੈੱਟ 'ਤੇ ਇਹ ਬਹੁਤ ਘੱਟ ਹੀ ਟਿਕ ਪਾਉਂਦਾ ਹੈ।

ਸਰੋਤ (Sources) ਖ਼ਤਮ ਹੋ ਜਾਂਦੇ ਹਨ। ਕੰਪਨੀਆਂ ਬਲੌਗ ਪੋਸਟਾਂ ਡਿਲੀਟ ਕਰ ਦਿੰਦੀਆਂ ਹਨ। ਸਰਕਾਰੀ ਪੋਰਟਲਾਂ ਬਿਨਾਂ ਰੀਡਾਇਰੈਕਟ (redirects) ਦੇ ਆਪਣੇ URL ਬਦਲ ਦਿੰਦੇ ਹਨ। ਪੇਅਵਾਲ (Paywalls) ਲੱਗ ਜਾਂਦੇ ਹਨ। CDNs ਵਿੱਚ ਸਮੱਸਿਆਵਾਂ ਆ ਜਾਂਦੀਆਂ ਹਨ। ਜਿਸ ਦਸਤਾਵੇਜ਼ ਨੂੰ AI ਨੇ ਤਿੰਨ ਮਹੀਨੇ ਪਹਿਲਾਂ ਸਕੈਨ ਕੀਤਾ ਸੀ, ਉਹ ਸ਼ਾਇਦ ਕੱਲ੍ਹ ਹੀ ਦੁਬਾਰਾ ਲਿਖਿਆ ਗਿਆ ਹੋਵੇ। ਜੇਕਰ ਤੁਹਾਡਾ citation component ਸਿਰਫ਼ ਉਦੋਂ ਹੀ ਵਧੀਆ ਦਿਖਣ ਲਈ ਬਣਾਇਆ ਗਿਆ ਹੈ ਜਦੋਂ ਸਭ ਕੁਝ ਸਹੀ ਚੱਲ ਰਿਹਾ ਹੋਵੇ, ਤਾਂ ਗਲਤ ਹੋਣ 'ਤੇ ਇਹ ਤੁਹਾਡੇ ਯੂਜ਼ਰਸ ਨੂੰ ਝੂਠ ਬੋਲੇਗਾ। ਇਸ ਤੋਂ ਵੀ ਮਾੜਾ, ਇਹ ਉਹਨਾਂ ਨੂੰ ਇਸ ਗੱਲ ਬਾਰੇ ਉਲਝਣ ਵਿੱਚ ਪਾ ਦੇਵੇਗਾ ਕਿ ਕੀ ਉਹ ਸਬੂਤ ਕਦੇ ਸੀ ਵੀ ਜਾਂ ਨਹੀਂ।

ਇੱਕ ਭਰੋਸੇਮੰਦ citation system ਨੂੰ ਸਥਿਤੀ (state) ਬਾਰੇ ਦੱਸਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਸਿਰਫ਼ ਇੱਕ ਹਾਈਪਰਲਿੰਕ ਨਹੀਂ। ਸਿਰਫ਼ ਇੱਕ ਟੂਲਟਿਪ (tooltip) ਨਹੀਂ। ਇਸਨੂੰ ਪਾਠਕ ਨੂੰ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਇਹ ਦੱਸਣ ਦੀ ਲੋੜ ਹੈ ਕਿ ਸਬੂਤ ਦੇ ਨਾਲ ਕੀ ਹੋ ਰਿਹਾ ਹੈ।

ਚਾਰ ਅਸਲ ਸਥਿਤੀਆਂ (states) ਲਈ ਡਿਜ਼ਾਈਨ ਕਰੋ

ਇੱਕ citation ਨੂੰ ਇੱਕ ਛੋਟੀ ਸਟੇਟਸ ਮਸ਼ੀਨ ਵਜੋਂ ਸਮਝੋ। ਤੁਹਾਡਾ AI ਜੋ ਵੀ ਸਰੋਤ ਪੇਸ਼ ਕਰਦਾ ਹੈ, ਉਹ ਚਾਰ ਵਿੱਚੋਂ ਕਿਸੇ ਇੱਕ ਸਥਿਤੀ ਵਿੱਚ ਹੋ ਸਕਦਾ ਹੈ, ਅਤੇ ਤੁਹਾਡੇ ਇੰਟਰਫੇਸ ਨੂੰ ਹਰ ਇੱਕ ਨੂੰ ਇਮਾਨਦਾਰੀ ਨਾਲ ਸੰਭਾਲਣਾ ਚਾਹੀਦਾ ਹੈ।

Loading. ਯੂਜ਼ਰ ਸੁਪਰਸਕ੍ਰਿਪਟ (superscript) ਨੰਬਰ 'ਤੇ ਕਲਿੱਕ ਕਰਦਾ ਹੈ, ਅਤੇ ਸਿਸਟਮ ਇੱਕ ਪ੍ਰੀਵਿਊ, ਇੱਕ ਸਨਿਪੇਟ (snippet), ਜਾਂ ਅਸਲ ਪੇਜ ਲੱਭਦਾ ਹੈ। ਉਸ ਦੌਰਾਨ, ਉਹਨਾਂ ਨੂੰ ਦਿਖਾਓ ਕਿ ਕੁਝ ਹੋ ਰਿਹਾ ਹੈ। ਇੱਕ skeleton placeholder, ਇੱਕ ਪਲਸਿੰਗ ਐਕਸਰਪਟ ਫਰੇਮ, ਜਾਂ ਸਿਰਫ਼ "Fetching source..." ਲਿਖਿਆ ਹੋਇਆ ਟੈਕਸਟ ਚੁੱਪ ਰਹਿਣ ਨਾਲੋਂ ਬਿਹਤਰ ਹੈ। ਚੁੱਪ ਰਹਿਣ ਨਾਲ ਲੋਕਾਂ ਨੂੰ ਲੱਗਦਾ ਹੈ ਕਿ ਕੀ ਕਲਿੱਕ ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ। ਇੱਕ streaming interface ਵਿੱਚ ਜਿੱਥੇ ਸਰੋਤ ਮਾਡਲ ਦੇ ਸੋਚਣ ਦੇ ਨਾਲ ਆਉਂਦੇ ਹਨ, loading states ਤੁਹਾਨੂੰ ਟੈਕਸਟ ਜਨਰੇਸ਼ਨ ਨੂੰ ਰੋਕੇ ਬਿਨਾਂ ਲਿੰਕਾਂ ਨੂੰ ਸੁਲਝਾਉਣ ਲਈ ਸਮਾਂ ਵੀ ਦਿੰਦੇ ਹਨ।

Available. ਇਹ ਉਹ ਸਥਿਤੀ ਹੈ ਜਿਸ ਲਈ ਹਰ ਕੋਈ ਡਿਜ਼ਾਈਨ ਕਰਦਾ ਹੈ। ਲਿੰਕ ਕੰਮ ਕਰਦਾ ਹੈ, ਟੈਕਸਟ ਅਜੇ ਵੀ ਉਸੇ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ ਜੋ ਮਾਡਲ ਨੇ ਦੇਖਿਆ ਸੀ, ਅਤੇ ਯੂਜ਼ਰ ਨੂੰ ਇੱਕ ਸਪਸ਼ਟ ਐਕਸਰਪਟ (excerpt) ਦੇ ਨਾਲ ਸਿੱਧਾ ਲਿੰਕ ਮਿਲਦਾ ਹੈ। ਪਰ ਸਿਰਫ਼ ਇੱਕ ਕੱਚਾ URL ਪਾ ਕੇ ਨਾ ਰੁਕੋ। ਸਿਰਫ਼ ਟਾਈਟਲ, ਡੋਮੇਨ, ਅਤੇ ਸੰਬੰਧਿਤ ਪੈਰਾਗ੍ਰਾਫ ਦਿਖਾਓ। ਪਾਠਕ ਨੂੰ ਇੰਨਾ ਸੰਦਰਭ (context) ਦਿਓ ਕਿ ਉਹ ਫੈਸਲਾ ਕਰ ਸਕੇ ਕਿ ਉਹ ਪੇਜ ਛੱਡਣਾ ਚਾਹੁੰਦੇ ਹਨ ਜਾਂ ਨਹੀਂ। ਬਰੈਕਟਾਂ ਵਿੱਚ ਇੱਕ ਕੱਚਾ href ਤਕਨੀਕੀ ਤੌਰ 'ਤੇ ਇੱਕ citation ਹੈ, ਪਰ ਇਹ ਇੱਕ ਚੰਗਾ ਯੂਜ਼ਰ ਐਕਸਪੀਰੀਅੰਸ (user experience) ਨਹੀਂ ਹੈ।

Changed. ਇਹ ਵਾਲਾ ਕਾਫੀ ਨਿਰਾਸ਼ਾਜਨਕ ਹੈ। ਪੇਜ ਲੋਡ ਹੁੰਦਾ ਹੈ, ਪਰ ਸਮੱਗਰੀ ਵਿੱਚ ਉਹ ਕੋਟ (quote) ਜਾਂ ਅੰਕੜਾ ਨਹੀਂ ਹੁੰਦਾ ਜਿਸਦਾ AI ਨੇ ਦਾਅਵਾ ਕੀਤਾ ਸੀ। ਸ਼ਾਇਦ ਪ੍ਰਕਾਸ਼ਕ ਨੇ ਲੇਖ ਨੂੰ ਅਪਡੇਟ ਕੀਤਾ ਹੋਵੇ। ਸ਼ਾਇਦ AI training snapshot ਨੇ ਅਜਿਹੀ ਹੈਡਲਾਈਨ ਫੜ ਲਈ ਸੀ ਜੋ ਬਾਅਦ ਵਿੱਚ ਬਦਲ ਗਈ। ਤੁਹਾਡੇ component ਨੂੰ ਸਭ ਕੁਝ ਸਹੀ ਦਿਖਾਉਣ ਦੀ ਬਜਾਏ ਇਸ ਅੰਤਰ ਨੂੰ ਦਰਸਾਉਣਾ ਚਾਹੀਦਾ ਹੈ। "This source has been updated since it was indexed" ਵਰਗੀ ਇੱਕ ਛੋਟੀ ਜਿਹੀ ਨੋਟ ਯੂਜ਼ਰ ਨੂੰ ਅਜਿਹੇ ਵਾਕ ਦੀ ਭਾਲ ਵਿੱਚ ਦਸ ਮਿੰਟ ਬਰਬਾਦ ਕਰਨ ਤੋਂ ਬਚਾਉਂਦੀ ਹੈ ਜੋ ਹੁਣ ਮੌਜੂਦ ਨਹੀਂ ਹੈ। ਇਹ ਭਰੋਸਾ ਵੀ ਬਣਾਈ ਰੱਖਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਅੰਤਰ ਨੂੰ ਲੁਕਾਉਂਦੇ ਹੋ, ਤਾਂ ਯੂਜ਼ਰ ਅੰਤ ਵਿੱਚ ਇਹ ਮੰਨ ਲਵੇਗਾ ਕਿ ਤੁਹਾਡਾ ਪ੍ਰੋਡਕਟ ਗੱਲਾਂ ਬਣਾਉਂਦਾ ਹੈ।

Missing. 404 ਐਰਰ। ਟਾਈਮਆਊਟ। ਪੇਅਵਾਲ। ਉਹ ਸਰਵਰ ਜੋ 200 status code ਤਾਂ ਭੇਜਦਾ ਹੈ ਪਰ ਇੱਕ ਆਮ "Content Removed" ਪੇਜ ਦਿਖਾਉਂਦਾ ਹੈ। ਲਿੰਕ ਨੂੰ ਉੱਥੇ ਨੀਲੇ ਰੰਗ ਵਿੱਚ ਇਹ ਦਿਖਾਉਣ ਲਈ ਨਾ ਛੱਡੋ ਕਿ ਇਹ ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ। ਇਸ ਨੂੰ ਸਧਾਰਨ ਭਾਸ਼ਾ ਨਾਲ ਬਦਲੋ: "Page removed," "Link no longer available," ਜਾਂ "Source offline." ਜੇਕਰ ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਇਹ ਕਿਉਂ ਫੇਲ ਹੋਇਆ, ਤਾਂ ਦੱਸੋ। ਜੇਕਰ Internet Archive ਜਾਂ ਕੋਈ cached ਕਾਪੀ ਮੌਜੂਦ ਹੈ, ਤਾਂ ਉਹ ਪੇਸ਼ ਕਰੋ। ਮਕਸਦ ਪਾਠਕ ਨੂੰ ਉਲਝਾਉਣਾ ਨਹੀਂ, ਸਗੋਂ ਮਦਦ ਕਰਨਾ ਹੈ।

Accessibility ਨਾਲ ਸਮਝੌਤਾ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ

Citation components UI ਦੇ ਉੱਚ-ਟ੍ਰੈਫਿਕ ਅਤੇ ਮਹੱਤਵਪੂਰਨ ਹਿੱਸਿਆਂ ਵਿੱਚ ਹੁੰਦੇ ਹਨ। ਉਹਨਾਂ ਨੂੰ ਉਨੀ ਹੀ ਸਖ਼ਤੀ ਦੀ ਲੋੜ ਹੈ ਜਿੰਨੀ ਇੱਕ ਚੈੱਕਆਊਟ ਫਾਰਮ ਜਾਂ ਫਲਾਈਟ ਬੁਕਿੰਗ ਪ੍ਰਕਿਰਿਆ ਦੀ ਹੁੰਦੀ ਹੈ।

ਸਥਿਤੀ ਦਿਖਾਉਣ ਲਈ ਟੈਕਸਟ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਰੰਗ ਅੰਨ੍ਹੇ (colorblind) ਯੂਜ਼ਰ ਸਿਰਫ਼ ਇੱਕ ਹਰੇ ਬਿੰਦੂ ਜਾਂ ਲਾਲ ਬਾਰਡਰ 'ਤੇ ਨਿਰਭਰ ਨਹੀਂ ਕਰ ਸਕਦੇ। ਆਪਣੇ ਸੰਕੇਤਾਂ (indicators) ਦੇ ਨਾਲ ਸ਼ਬਦਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ: "Available," "Modified," "Unavailable." ਉਹ ਛੋਟਾ ਜਿਹਾ ਲੇਬਲ ਹਰ ਦੇਖਣ ਵਾਲੇ ਯੂਜ਼ਰ ਦੀ ਵੀ ਮਦਦ ਕਰਦਾ ਹੈ, ਕਿਉਂਕਿ ਸਥਿਤੀ ਦੇ ਰੰਗ ਵੱਖ-ਵੱਖ ਸੱਭਿਆਚਾਰਾਂ ਜਾਂ ਪ੍ਰੋਡਕਟਾਂ ਵਿੱਚ ਸ਼ਾਇਦ ਇੱਕੋ ਜਿਹਾ ਮਤਲਬ ਨਹੀਂ ਰੱਖਦੇ।

ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਲਈ ਵਰਣਨਾਤਮਕ ਨਾਮ ਲਿਖੋ। ਆਪਣੇ ਲਿੰਕਾਂ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਲੇਬਲ ਕਰੋ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲਾ ਵਿਅਕਤੀ ਕੁਝ ਲਾਭਦਾਇਕ ਸੁਣ ਸਕੇ। ਇੱਕ ਆਮ "Link" ਦੀ ਬਜਾਏ, "Source 3: Audit-log retention policy" ਪੜ੍ਹ ਕੇ ਸੁਣਾਓ। ਇਹ ਸੁਣਨ ਵਾਲੇ ਨੂੰ ਬਿਲਕੁਲ ਦੱਸਦਾ ਹੈ ਕਿ ਉਹ ਖੋਲ੍ਹਣ ਦਾ ਫੈਸਲਾ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਕੀ ਪ੍ਰਾਪਤ ਕਰਨ ਜਾ ਰਿਹਾ ਹੈ।

ਫਲੋ (flow) ਨੂੰ ਬਚਾਓ। Citation 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਨਾਲ AI-ਜਨਰੇਟਡ ਜਵਾਬ ਗਾਇਬ ਨਹੀਂ ਹੋਣਾ ਚਾਹੀਦਾ। ਇੱਕ ਪੈਨਲ, ਮੋਡਲ (modal), ਜਾਂ ਇਨਲਾਈਨ ਐਕਸਪੈਂਸ਼ਨ (inline expansion) ਦੀ ਵਰਤੋਂ ਕਰੋ। ਪਾਠਕ ਨੇ ਇੱਕ ਖਾਸ ਦਾਅਵੇ ਦੀ ਪੁਸ਼ਟੀ ਕਰਨ ਲਈ ਸਰੋਤ ਖੋਲ੍ਹਿਆ ਸੀ। ਜੇਕਰ ਤੁਹਾਡਾ ਇੰਟਰਫੇਸ ਉਸ ਦਾਅਵੇ ਨੂੰ ਮਿਟਾ ਦਿੰਦਾ ਹੈ ਜੋ ਉਹ ਹੁਣੇ ਪੜ੍ਹ ਰਿਹਾ ਸੀ, ਤਾਂ ਤੁਸੀਂ ਉਸਨੂੰ ਸਬੂਤ ਲੱਭਣ ਦੌਰਾਨ ਟੈਕਸਟ ਨੂੰ ਯਾਦ ਰੱਖਣ ਲਈ ਮਜਬੂਰ ਕਰ ਦਿੱਤਾ ਹੈ। ਇਹ ਇੱਕ ਬੇਲੋੜਾ ਮਾਨਸਿਕ ਬੋਝ (cognitive load) ਹੈ।

ਫੋਕਸ ਨੂੰ ਸੋਚ-ਸਮਝ ਕੇ ਪ੍ਰਬੰਧਿਤ ਕਰੋ। ਜਦੋਂ ਕੋਈ ਯੂਜ਼ਰ citation ਖੋਲ੍ਹਦਾ ਹੈ, ਤਾਂ ਕੀਬੋਰਡ ਫੋਕਸ ਨੂੰ ਨਵੇਂ ਪੈਨਲ ਜਾਂ ਪੌਪਅੱਪ ਵਿੱਚ ਲੈ ਜਾਓ। ਜਦੋਂ ਉਹ ਇਸਨੂੰ ਬੰਦ ਕਰਦੇ ਹਨ, ਤਾਂ ਫੋਕਸ ਵਾਪਸ ਟ੍ਰਿਗਰ 'ਤੇ ਭੇਜ ਦਿਓ। ਜਦੋਂ ਸ

Handle streaming with care. If your generative interface is adding citations as they arrive, do not bombard screen-reader users with an announcement for every single new superscript number. Batch them. When two or three have accumulated, announce a polite summary like "Two sources added." Constant interruptions make the output unreadable for assistive technology users.

Remember what a citation proves

This point cannot be repeated often enough. A citation shows provenance. It does not show truth.

When an AI cites a source, it is saying, "I found this wording here." It is not saying, "This expert is correct." It is not saying, "This study was well-conducted." It is not even saying, "I understood the context correctly." A citation is a map back to the original evidence. The reader still has to walk that path and decide whether the evidence holds up.

Your design should make that distinction clear. Use excerpts that let the user scan the relevant lines. Show the publication date so the reader knows how fresh the evidence is. If the source is a forum, a press release, or a primary study, surface that context so the reader can weigh it appropriately. Build the interface to support human judgment, not replace it.

Test against reality

A citation component that passes a visual review is only halfway done. You need