Vocabulary - Home Page Structure

Sổ từ vựng – Page Structure (Home)

Purpose

• Trang Home (max-width 1144px) giúp bắt đầu học nhanh, quản lý list, theo dõi tiến độ, và khám phá list cộng đồng.

Constraints & Principles

• Không deadline cứng; học khi muốn (policy-based gợi ý).
• Tabbar môn tại My Lists và Community; Home mặc định hiển thị All.
• Community chỉ hiển thị list đã duyệt (không cần Verified badge).
• Tiến độ item theo 6 mức Hạt giống → Nở Hoa (derive từ F_now).
• Các khu vực tổng quan dùng 3 bucket: Chưa học · Đang ôn · Thành thạo.
• Có Weekly Goal; phân trang khi danh sách dài.
• Layout tối giản, đơn giản cho người dùng.

1. Hero Zone (Chào + Streak + Mục tiêu tuần)

• Hiển thị
  • Greeting + avatar + “Hôm nay đã học: X item/kiến thức”.
  • Streak 7 ngày (Thứ 2–CN).
  • Weekly goal: mục tiêu/tuần, tiến độ, “Còn N item/kiến thức để hoàn thành tuần này”.
• Thao tác
  • Nút “Đặt/đổi mục tiêu tuần” (modal thiết lập).
  • Link “Xem lịch sử streak”.
• Dữ liệu & Logic
  • “Hôm nay đã học” tăng khi hoàn tất thẻ hợp lệ (xem quy tắc đếm item/kiến thức).
  • Box “Mục tiêu tuần” hiển thị tổng (All); xem chi tiết theo từng môn trong popup “Chi tiết mục tiêu tuần”.
  • Streak khi số mục hợp lệ trong ngày > 0; Weekly goal reset theo tuần.
• Trạng thái
  • Loading: skeleton 3 khối. Empty: gợi ý “Bắt đầu ôn 10 item/kiến thức”.

2. Subnav (scroll nhanh)

• Hiển thị
  • Anchor: Hero • My Lists • Community • Progress • Archived
• Logic
  • Smooth scroll; highlight mục đang xem (intersection observer)

3. Action Hub (Quick Actions)

• Hiển thị
  • 1 nút chính “Bắt đầu học” (Start learning).
  • (Tuỳ chọn) chip nhỏ hiển thị chế độ phiên hiện tại: “15 phút”, “20 phút” hoặc “Không giới hạn”.
  • (Tuỳ chọn) trạng thái phiên gần nhất: số item mới/ôn được.
• Thao tác & Logic
  • User chỉ cần bấm “Bắt đầu học”; hệ thống tự chọn item cần ôn/học mới theo SRS, không phải chọn Học mới/Ôn cũ hay chọn List.
  • Chế độ phiên chọn trong Settings hoặc quick menu cạnh nút: có giới hạn thời gian (10/15/20 phút) hoặc không giới hạn.
  • Khi bật giới hạn thời gian: có thanh đếm ngược; hết thời gian tự động kết thúc và hiển thị tóm tắt.
  • Khi không giới hạn: hệ thống chia queue thành các nhóm item nhỏ (ví dụ 5–10 item); sau mỗi nhóm hiển thị mini-summary, user có thể dừng hoặc tiếp tục nhóm tiếp theo.
  • Nếu user bấm lại “Bắt đầu học” → mở phiên mới với hàng đợi được tính lại (có thể khác danh sách item).
• Trạng thái
  • Nếu có phiên dở (user thoát giữa chừng) → “Bắt đầu học” tiếp tục từ nhóm và queue hiện tại trước khi tính phiên mới.

4. My Vocabulary Lists (Tabbar môn + List/Group view + Phân trang)

• Control Bar (nằm trong section này)
  • Search (tên list/keyword); Create (Thủ công | Import CSV/clipboard); Group filter: All + group cá nhân.
  • Toggle view: List view | Group view (đặt cạnh Subject Tabbar; nhớ lựa chọn của user)
• Hiển thị
  • Tabbar môn: All | IELTS | SAT | Math | Physics | Chemistry | …
  • Danh sách theo bộ lọc (môn, group, search) + phân trang (vd 20/trang).

4.1 List view (Grid/Table)

• View
  • Grid hoặc Table; toggle và nhớ lựa chọn.
• Card/List nội dung
  • Tên list + môn.
  • Mini-stats: Tổng, Chưa học, Đang ôn, Thành thạo (gộp từ 6 mức).
  • Thanh tiến độ (Thành thạo/Tổng).
• Thao tác
  • Review (chọn batch → session), Open, Rename (User list), Archive.
• Logic

  • Sort mặc định “Hoạt động gần đây” (tùy chọn A–Z/Tạo gần đây/Tiến độ).

  • Ghi nhớ lựa chọn layout (Grid/Table) và bộ lọc qua local/URL state.

4.2 Group view (nhóm list + Ungrouped)

• View

  • Hiển thị theo từng group (có bucket “Ungrouped” cho list chưa thuộc group).
  • Bên trong mỗi group: toggle Grid | Table cho các list; nhớ lựa chọn riêng.
  • Hỗ trợ collapse/expand từng group; nhớ trạng thái mở/đóng theo user.

• Thao tác

  • Toggle Reorder mode: bật/tắt “Sắp xếp” để chuyển UI sang kéo-thả và chọn nhiều. Mặc định OFF; tooltip: “Bật để sắp xếp và xoá nhiều”.
  • Trong Reorder mode (mỗi group):
    • Select all | Deselect all.
    • Delete (hiển thị số lượng được chọn, active khi ≥1). Mặc định xoá khỏi group (không xoá list khỏi thư viện). Tùy chọn Archive hàng loạt (xác nhận 2 bước).
  • Thao tác list đơn lẻ (khi không ở Reorder mode): Review, Open, Rename (User list), Archive, Remove from group.

• Phản hồi

  • Sau bulk remove/archive: hiển thị snackbar “Đã xử lý N list” kèm nút Undo (10s) để khôi phục.

• Logic

  • DnD reorder chỉ khả dụng khi bật Reorder mode; thoát chế độ để lưu thứ tự.
  • Reorder mode reset về OFF khi rời trang hoặc reload.
  • Ghi nhớ trạng thái collapse/expand và layout Grid/Table theo group.
  • Dedupe hiển thị rõ bucket “Ungrouped”.

• Trạng thái

  • Nhiều list → phân trang; Empty theo môn → gợi ý Tạo list mới hoặc Thêm từ Community (môn đó).

5. Community Highlights (Phổ biến từ cộng đồng)

• Hiển thị
  • Tabbar môn riêng (All | IELTS | SAT | Math | Physics | Chemistry …).
  • Sort: “Được học nhiều”, “Được thêm nhiều”, “Được xem nhiều”.
  • Card ngắn: Tên • Môn • người chia sẻ • Số người học (vd “12k studies”) • trạng thái “Đã trong thư viện” (nếu đã thêm).
• Thao tác
  • Icon xem (preview ngắn 5–10 mục) | Add to My Lists (Quick Add). Nếu đã có → hiển thị “Đã thêm” + CTA Mở học ngay.
• Logic
  • Chỉ hiển thị list đã duyệt; Add tạo bản sao vào thư viện user (giữ nguyên môn).
  • Sau khi Add: toast + CTA “Mở để học ngay”.
  • Dedupe với My Lists: ẩn nút Add, hiển thị nhãn “Đã trong thư viện”.
  • Không phân trang mặc định 6 item một môn.
  • Persist state: bộ lọc Subject/Sort/Timeframe lưu vào URL; shareable và khôi phục khi reload.

6. Progress Overview (Progress Lite)

• Mục tiêu

  • Cung cấp thống kê gọn nhẹ để người dùng tự theo dõi hoặc coi như achievement nhỏ. Không phân tích chuyên sâu, không “freshness”, không biểu đồ phức tạp.

• Nội dung hiển thị

  • 4 thẻ số lớn (big counters)
    • Mastered (lifetime): tổng số item ở mức Trưởng thành hoặc Nở Hoa.
    • Learned (tuần này): số item lần đầu được học hoặc tăng mức (6 mức) trong tuần hiện hành.
    • Items added (30 ngày): số item/kiến thức mới đã thêm vào thư viện (Add từ Community, Import, tạo thủ công) trong 30 ngày gần nhất.
    • Active lists (14 ngày): số list có hoạt động học trong 14 ngày gần đây.
  • Thanh 3 bucket (toàn hệ): Chưa học · Đang ôn · Thành thạo (gộp từ 6 mức).
  • Subject pills (lọc đơn giản): All | IELTS | SAT | Math | Physics | Chemistry … (bộ lọc áp dụng cho cả counters và thanh 3 bucket). Mặc định All; nhớ lựa chọn.
  • Achievement chips (nhỏ, tuỳ chọn): các mốc đạt được, ví dụ: 50 Mastered · 100 Mastered · Hoàn thành 5 List · Hoàn thành Goal tuần. Không có bảng xếp hạng/so sánh cộng đồng.

• Quy tắc tính

• Loại trừ: Archived không được tính vào counters và thanh 3 bucket.

• Learned (tuần này): đếm item lần đầu rời Hạt giống hoặc tăng mức trong tuần; mỗi item chỉ tính 1 lần/tuần.

• Items added (30 ngày): đếm KnowledgeItem mới được thêm vào bất kỳ User List nào trong 30 ngày; bao gồm Add từ Community, Import, tạo thủ công. Không đếm mục hệ thống chưa Add vào thư viện cá nhân.

• Active lists (14 ngày): list có ít nhất 1 sự kiện học/ôn hoặc thêm/sửa mục trong 14 ngày.

• Thanh 3 bucket: Chưa học (Hạt giống) · Đang ôn (Nảy mầm → Cây non) · Thành thạo (Trưởng thành → Nở Hoa).

• Hoàn thành List (để hiển thị achievement): một List được coi là “hoàn thành” khi ≥ 80% mục ở Trưởng thành hoặc Nở Hoa.

• Hành vi

  • Chỉ có 1 liên kết duy nhất “Xem chi tiết” → đưa tới My Lists với bộ lọc Subject hiện tại. Phần Progress Lite không mở các drill-down phức tạp.
  • Subject pills ghi nhớ lựa chọn lần cuối của user.
  • Achievement chips xuất hiện khi đạt mốc; click vào chip mở modal nhỏ mô tả mốc (không có social/leaderboard).

• Trạng thái

• Loading: skeleton cho 4 thẻ số và thanh 3 bucket.

  • Empty (user mới): counters = 0; hiển thị 1 dòng gợi ý nhẹ “Thêm list hoặc bắt đầu ôn 10 mục”.
  • Error: thông báo ngắn + nút thử lại (không chặn phần khác trên Home).

• Vị trí & style

  • Nằm sau Community và trước Groups (theo Home vNext).

• Bố cục 2 hàng: Hàng 1 = 4 thẻ số (grid 2×2 trên mobile, 4 cột trên desktop); Hàng 2 = thanh 3 bucket + hàng chip achievement.

  • Phong cách hiện đại, thoáng: số lớn, nhãn ngắn, spacing rộng; không dùng biểu đồ phức tạp.

7. Archived (Kho lưu trữ)

• Hiển thị
  • Link “Xem Archived Lists”. Danh sách: Tên | Môn | Ngày archive | Restore | (Xóa hẳn nếu policy cho phép).
• Logic
  • Restore trả list về My Lists, giữ nguyên môn và stats; Xóa hẳn xác nhận 2 bước.
• Trạng thái
  • Phân trang; bộ lọc môn.

8. Logic phiên ôn tập (áp dụng từ mọi entry)

• Nguồn khởi tạo: chủ yếu từ Action Hub (“Bắt đầu học”); ngoài ra có thể từ card/row của List hoặc toast sau khi Add list Community.
• Xây hàng đợi (queue): ưu tiên item cần ôn (lâu ngày/chưa vững theo SRS) → bổ sung item mới từ các List phù hợp nếu còn thời gian.
• Chia nhóm: trong một phiên, queue được chia thành các nhóm item nhỏ (ví dụ 5–10 item) chạy tuần tự; sau mỗi nhóm hiển thị mini-summary để user quyết định dừng/tiếp tục.
• Trong session: mỗi thẻ cho phép Tôi nhớ / Tôi chưa nhớ / Bỏ qua; sai được chèn lại sau vài thẻ để ôn tiếp, đúng thì giãn khoảng cách ôn.
• Thời lượng
  • Phiên có giới hạn thời gian: hết thời gian sẽ kết thúc ở cuối nhóm hiện tại và hiển thị tóm tắt (bao nhiêu item mới/ôn, stage hiện tại).
  • Phiên không giới hạn: user dừng chủ động (thoát/đóng) hoặc khi kết thúc nhóm.
• Quy tắc đếm Hero/Goal: ghi nhận khi hoàn tất thẻ hoặc nâng giai đoạn; chống đếm trùng (1–2 điểm/item/ngày tuỳ quy tắc).

9. Settings & Preferences

• Weekly Goal: đặt mục tiêu item/kiến thức/tuần; chọn ngày bắt đầu tuần (mặc định Thứ 2).
• Session settings:
  • Thời lượng gợi ý: 10/15/20 phút hoặc Không giới hạn.
  • Kích thước nhóm trong phiên: 5/10/15/20 item (áp dụng cho cả phiên có/không giới hạn).
• My Lists view: nhớ Grid/Table; nhớ môn lần xem cuối ở Tabbar My Lists & Community (tuỳ chọn).

10. System & Performance

• Phân trang server-side My Lists & Community (mặc định 20/trang); giữ bộ lọc khi chuyển trang.
• Loading độc lập từng section (Hero, My Lists, Community…).

Layout & Accessibility

• Max width: 1144px (centered), responsive theo DOL DS; keyboard navigation cho Action Hub, Lists, Groups.
• Style: hiện đại, spacing rộng rãi, hierarchy rõ (typography scale, section spacing lớn)
• A11y: màu stage luôn kèm nhãn/tỉ lệ; không chỉ dùng màu để mã hoá thông tin.

Analytics (rút gọn)

• vocab_home_viewed (người dùng mở trang Home)
• vocab_home_quick_action_clicked (người dùng bấm vào nút hành động nhanh)
• community_list_clicked (người dùng bấm xem/preview list cộng đồng) - code: community_list_clicked
• community_list_added (người dùng thêm list cộng đồng vào thư viện) - code: community_list_added
• list_progress_viewed; global_progress_viewed.
• progress_tab_viewed; progress_card_cta_clicked; progress_nba_clicked; progress_subject_cell_clicked; progress_list_health_action_clicked.