UX: Designing A Trust-Calibrated Arabic RAG Assistant
A citation-bound assistant can still mislead if its interface looks more certain than its evidence. Ask Zico's launched UX is designed to reveal the system boundary: what it searched, which sources support the response, and what the visitor can do when generation is unavailable.
The previous article covers the evaluation gates behind these states.
The launched interface at ask-zico.php.
Watch the short public UI demo on YouTube.
Set expectations before input
The page explains in Arabic that answers come from Madraset El Shamamsa material and that sources should be checked. This copy matters because the visual grammar of chat normally promises broad conversation. Ask Zico instead promises bounded assistance.
The input experience supports Arabic direction, readable line length, and examples that teach the expected question style without suggesting that every topic is covered.
One request, several honest outcomes
stateDiagram-v2
[*] --> Ready
Ready --> Loading: Send question
Loading --> Answer: Grounded response
Loading --> Handoff: Broad discovery request
Loading --> Sources: Generation unavailable but evidence found
Loading --> Search: Evidence insufficient
Loading --> Quota: Capacity unavailable
Loading --> Error: Request failed
Answer --> Feedback
Handoff --> SiteSearch
Sources --> FollowSource
Search --> SiteSearch
Quota --> RetryLater
These are first-class interface states, not variants of a generic error message:
- Grounded answer: concise Arabic prose followed by validated source cards.
- Discovery handoff: a broad request is directed to the site search or relevant library links instead of being presented as a synthesized, authoritative answer.
- Sources only: useful evidence remains available even when no model answer is returned.
- Search fallback: the site search becomes the safer next action when retrieval confidence is weak.
- Quota state: generation is temporarily unavailable without implying that the question itself was wrong.
- Technical error: the visitor can retry without losing the product's evidence promise.
Citations are actions
A citation should help a visitor inspect the source, not merely add a scholarly-looking marker. Ask Zico maps validated citation IDs to source cards with a readable title and public link. The answer and source area are visually connected, while the original site remains the final reading destination.
flowchart LR
claim["Answer claim"] --> marker["Validated citation marker"]
marker --> card["Readable source card"]
card --> public["Original public page"]
public --> verify["Visitor verifies context"]
The application does not render a model-supplied URL. It renders metadata resolved by the Worker from a known chunk ID. That technical choice directly improves the UX: every clickable source has passed the same identity check as the answer.
Follow-ups keep a visible boundary
Conversation makes follow-ups convenient, but it can obscure where evidence came from. Ask Zico uses prior cited chunks only as recoverable context and retrieves fresh evidence for the new question. The UI keeps each response source cards attached to that response instead of presenting the conversation as one accumulating body of truth.
Auto-scrolling also respects reading. New content becomes visible without repeatedly pulling the reader away from a source card or a long Arabic answer. On mobile, the composer, response text, and cards must remain reachable without horizontal scrolling.
Feedback is intentionally lightweight
Visitors can signal whether a response helped. The feedback control is tied to the returned message ID, which lets operators join it to retrieval and failure metadata privately. The public UI does not ask for sensitive details or expose observability data.
A future free-text reason could create more diagnostic value, but it would also create a new privacy and moderation surface. It is therefore not presented as current functionality.
Accessibility and RTL are release criteria
The interface needs more than dir="rtl":
- logical spacing and alignment must work in right-to-left layout;
- focus order must follow the visual interaction order;
- loading and result changes need perceivable status text;
- buttons and source links need accessible names and keyboard focus;
- contrast cannot depend on color alone;
- Arabic line height and wrapping must remain comfortable at narrow widths.
flowchart TD
state["New response state"] --> announce["Announce status"]
state --> focus["Preserve sensible focus"]
state --> layout["Fit RTL mobile layout"]
state --> action["Expose a clear next action"]
The screenshot demonstrates the shipped surface, while desktop/mobile review verifies behavior that a single image cannot prove.
What the UX deliberately avoids
Ask Zico does not replace site search, claim universal knowledge, hide refusals behind a spinner, or use a floating assistant on every page. The dedicated public route gives the product room to explain its boundaries and keeps source reading central.
The broader lesson is that trust is calibrated through state design. A safe backend paired with an overconfident interface is still an unsafe product.
Next: the operational signals behind those user-visible states.