User has loaded source text but hasn't clicked any word yet. The right panel is idle, prompting the user to interact.
The empty state uses a friendly icon + text prompt rather than leaving the panel blank. This teaches the click-to-lookup interaction on first visit.
Every word in the left panel is individually clickable. Hovering shows a subtle yellow highlight to signal interactivity before the user commits to clicking.
Usability test Task 1: Can users discover the click-to-lookup pattern without instruction? Measure time to first click.
User hovers over a word in the source text. The word gets a yellow background highlight to signal that it's clickable. Cursor changes to pointer.
Yellow highlight on hover signals clickability. This is the primary affordance that teaches users the interaction model. Without it, users may not realize words are interactive.
Test hover highlight color (yellow vs. light blue vs. underline-only) and trigger (hover vs. hover+delay). Measure first-click discovery rate.
User has clicked a word. The word is now selected (indigo pill). The right panel shows skeleton loaders while the federated query fans out to dictionaries, TM, and web sources.
Results populate progressively as each federated source responds. Dictionary results may arrive in 200ms while the AI summary takes 1-2s. Show what's ready immediately.
The search bar auto-populates with the clicked word and the language direction auto-detects from script analysis. Zero user configuration required.
The default landing view after a lookup. Shows the RAG-generated contextual translation at the top, followed by ranked alternative translations with source attribution.
The AI-synthesized view is the default because it provides the most actionable answer. Raw sources are one tab away for verification. This hierarchy was determined by card sorting and co-design workshops.
Each translation option cites its sources (dictionaries, TM matches, web). This builds trust — the user can see why the AI recommends "resilience" over "toughness."
Test whether the AI summary should be fully expanded or truncated to 3 lines with "show more." Measure read rate and translation confidence.
Raw, unprocessed dictionary entries from each federated source. No AI interpretation — just the data. Users come here to verify or challenge the AI summary.
This tab shows dictionary entries exactly as received from each source. No ranking, no context-aware filtering. It's the "trust but verify" layer.
Users may group "dictionary" and "TM" together as "reference sources" vs. "AI opinion." The card sort in Phase 2 validates whether this separation works.
Shows the user's own translation history for this term and related terms. Each entry includes the source sentence, target sentence, timestamp, and language pair.
This is effectively a personal translation memory. Shows how the user has translated this term (and semantically related terms) before, preserving the original sentence context.
Translators value consistency. Seeing that they previously used "resilience" for 韧性 helps them maintain consistent terminology across documents.
Web, news, and academic results showing the term used in real-world context. Highlighted occurrences help users see how the word is used across domains.
Color-coded badges (NEWS, ACADEMIC, WEB, PRESS) help users quickly assess source type and credibility. Academic sources may carry more weight for technical translations.
The searched term is highlighted in yellow within result snippets so users can quickly scan how it's used in context across different sources and domains.
User clicks "+ LEXICON" on a translation option. A toast notification confirms the term has been saved to their personal glossary. This is the output action that closes the loop.
The button changes from "+ LEXICON" to "✓ ADDED" with green styling. A toast notification at the bottom provides secondary confirmation. Both are reversible.
The toast should include an "Undo" link. Heuristic: User Control and Freedom — users should be able to reverse accidental saves without hunting for lexicon management.
Term pair (韧性→resilience), source sentence context, timestamp, language direction, and the definition text. This feeds future TM lookups.
On screens below 1024px, the split panel stacks vertically. The source text panel collapses to ~40% height with a "scroll for more" affordance. The lookup panel takes the remaining 60%.
Below 1024px, the side-by-side panels stack vertically. The source text collapses to a preview with expand/collapse toggle. Tab labels abbreviate to fit narrow screens.
Translators primarily work on desktop. Mobile is secondary — reference use (checking a term on the go). Don't over-invest in mobile parity with desktop.
The end-to-end interaction sequence from loading text to saving a term. Each box represents a screen state, arrows show transitions and triggers.
The ideal flow is: click word → read AI summary → add to lexicon. Three actions, no navigation required. The tabs exist for users who want to go deeper, but the default path is designed to be complete in itself.
Additional wireframes needed: no results found, API timeout, word not recognized, network error. Each needs its own empty/error state in the right panel.
Each step maps to a funnel stage from the metrics plan. Screen 1→2 = "Click a Word" rate. Screen 4 = "View AI Summary." Screen 8 = "Add to Lexicon" conversion.