Vocab v2 – Session Recap Logic (UX Only)

Hardening Note (SoT precedence): Tài liệu này tuân theo ../Core Logic/VOCV2_Product_Spec_Hardening_v1.md. Nếu có mâu thuẫn, ưu tiên SoT hardening.

Tài liệu này định nghĩa các yếu tố logic và luồng tương tác cần thiết cho quy trình Recap sau phiên học, tập trung vào mục tiêu Motivation (Động lực) và Correction (Sửa sai).

1. Mục tiêu UX (UX Goals)

• Confirmation: Xác nhận phiên học đã kết thúc và kết quả đã được ghi nhận.
• Sense of Progress: Cho người dùng thấy sự tiến bộ cụ thể (không chỉ là điểm số, mà là sự lớn lên của vốn từ).
• Closing the Loop: Xử lý ngay các từ làm sai để không tạo lỗ hổng kiến thức.

2. Các nhóm thông tin cần thiết (Information Elements)

2. Cấu trúc Layout & Nhóm thông tin (Layout Structure)

Trang Recap được chia thành 2 vùng chính theo chiều dọc (Vertical Layout):

Vùng 1: Tổng quan Phiên học (Region 1: Session Overview)

Đây là vùng “Head”, cung cấp cái nhìn tổng quát nhất về thành quả ngay lập tức.

• Primary Stats:
  • Accuracy: Độ chính xác (%).
  • Volume: Số lượng từ đã học.
  • Duration: Thời gian đã học (VD: 10:05).
• Fluency Overview (Tổng quan Level Up):
  • Thay vì liệt kê dài dòng, hiển thị tóm tắt số lượng từ chuyển trạng thái.
  • Ví dụ: “+5 Sprouts 🌱”, “+2 Saplings 🌿”.
  • Mục đích: Cho thấy sự tiến bộ về “chất” bên cạnh “lượng”.

Vùng 2: Hồ sơ chi tiết (Region 2: Detailed Learning Record)

Danh sách chi tiết các từ vừa tương tác, được phân nhóm để dễ theo dõi (Grouped List).

• Phân loại (Filter by Level Up):
  • 🌱 New Sprouts: Nhóm từ mới bắt đầu học (Seed -> Sprout).
  • 🌿 Growing Strong: Nhóm từ có sự tăng trưởng level (Sprout -> Sapling…).
  • ⚠️ Needs Care: Nhóm từ bị fail/rớt hạng (giữ lại để user biết, nhưng không tách tab riêng).
• Yêu cầu tương tác (Interaction):
  • Xem lại nghĩa/ví dụ (Flashcard View).
  • Nghe lại Audio (nếu cần).

D. Tiến độ tích lũy (Cumulative Progress) - Secondary Info

Đặt phiên học này vào bức tranh lớn hơn, nhưng hiển thị tinh tế (không chiếm spotlight).

• Vị trí: Góc nhỏ hoặc footer, không tranh chấp với kết quả phiên.
• Thông tin: Streak (Chuỗi ngày), Daily Goal.
• Mục đích: Nhắc nhở nhẹ nhàng để user duy trì thói quen.

---

3. Luồng tương tác & Liên kết (Interaction Flow)

Flow Xem Chi Tiết (Review Detail Flow)

• Trigger: User tương tác với một từ trong danh sách.
• Action:
  • Mở Modal/Side-panel hiển thị chi tiết từ vựng.
  • Cho phép nghe Audio, xem ví dụ ngữ cảnh.

Flow Điều hướng (Navigation)

Sau khi xem kết quả, user cần đi đâu?

1. Tiếp đà (Momentum): Action “Học tiếp” (Start New Session).
   • Logic: Mở ngay một phiên mới vối cấu hình tương tự (Timed/Untimed) để tận dụng sự tập trung đang có.
2. Hoàn thành (Done): Action “Về trang chủ”.
   • Logic: Reset trạng thái phiên, cập nhật lại Dashboard chính với số liệu mới nhất.

---

4. Chi tiết UX Mechanics & Micro-interactions

A. Âm thanh & Hiệu ứng (Sensory Feedback)

• Welcome Sound: Âm thanh chiến thắng (Success Chime) phát ngay khi trang Recap hiện ra nếu Accuracy cao. Âm thanh nhẹ nhàng hơn nếu Accuracy thấp.
• Count-up Animation: Các con số (Số từ, Accuracy) chạy từ 0 đến giá trị thực tế trong 1.5s đầu tiên để tạo cảm giác “Tổng kết”.

B. Logic Ưu tiên hiển thị (Priority Logic)

• Default View: Hiển thị All Words hoặc nhóm “New Sprouts” đầu tiên để tạo cảm giác khởi đầu mới mẻ.
• No “Fail Focus”: Không tự động focus vào từ sai. User muốn xem thì tự filter.
• Closing Loop CTA (bắt buộc): Thêm CTA nhẹ nhàng
  • “Sửa nhanh 3 từ cần chăm sóc (2 phút)”.
  • Mở mini-session chỉ gồm Needs Care với Learning Card + EASY/MEDIUM.
  • Không dùng visual trừng phạt (no shame), nhưng luôn mở đường sửa sai ngay sau phiên.

C. Gamification Triggers

• New Badge: Nếu phiên học này giúp user đạt mốc (VD: 100 từ vựng), hiển thị Popup chúc mừng Badge mới đè lên trang Recap, sau đó user tắt đi mới xem Recap.
• Streak Freeze: Nếu user bị lỡ ngày hôm qua nhưng hôm nay học bù và dùng “Streak Freeze”, hiển thị thông báo “Streak Saved!”.

D. Xử lý Edge Cases (Trường hợp đặc biệt)

• Zero Progress: User vào phiên nhưng không làm gì hoặc sai hết → Message: “Don’t give up! Every start is hard.” (Không hiện pháo hoa).
• Network Error: Nếu không lưu được kết quả → Hiện nút “Retry Save” thay vì nút “Home”. Cache kết quả ở LocalStorage.