Exercise Home List UI Concept

KIDEX-S01_exercise_home_list_UI_CONCEPT

Global Context

• Feature: KID LMS Exercise.
• Screen ID: KIDEX-S01.
• Lane: exercise.
• State: success-first list.
• Source anchors: [SRC-001] KID_LMS_Exercise_00_Overview, [SRC-002] KID_LMS_Exercise_Home, [SRC-003] KID_LMS_Exercise_Flow, [SRC-004] KID_LMS_Course_Management_Flow, [SRC-005] KID_LMS_Home.

Product & User Goal

• Product summary: Đây là màn list trung gian giữa Course Detail và Exercise Detail, giúp user nhìn được toàn bộ exercise của khóa trước khi chọn bài cụ thể. [SRC-002] [SRC-003]
• User job-to-be-done: Chọn đúng bài cần làm tiếp và biết mình đang ở đâu trong lane exercise. [SRC-002]
• Business outcome: tăng exercise open -> start và giảm rơi rụng do user không biết bài nào đang dở hay đã có điểm. [SRC-002] [SRC-003]

Screen Context In Flow

• Entry: User đi từ Course Detail > Overview / Learn / Practice hoặc từ LMS Home qua Course List và Course Detail. [SRC-003] [SRC-004] [SRC-005]
• Exit: User mở Exercise Detail, quay lại Course Detail, hoặc tiếp tục bài đang dở. [SRC-002] [SRC-003]
• Back behavior: quay về Course Detail đúng tab đã vào trước đó. [SRC-003] [SRC-004]

Core Question

• Trong khóa này, bài nào mình nên làm ngay bây giờ?

Information Hierarchy

• Exercise Header
  • tên khóa,
  • lesson/unit context nếu có,
  • back CTA về Course Detail.
• Progress Summary
  • đã xong bao nhiêu bài,
  • còn bao nhiêu bài,
  • score summary gọn.
• Priority Row
  • tối đa 1-2 bài ưu tiên: cần làm ngay hoặc đang làm dở.
• Exercise List
  • list đầy đủ theo thứ tự ưu tiên.

Component Tree

• Top app bar + course context
• Summary card
• Priority card row
• Exercise list cards
• Sticky action footer chỉ khi cần CTA quay lại khóa

Exercise Card Rules

• Card luôn có:
  • title,
  • lesson context,
  • estimated time,
  • state chip,
  • score chip nếu đã xong,
  • 1 CTA chính.
• CTA map theo state:
  • not_started -> Bắt đầu
  • in_progress -> Làm tiếp
  • done_has_score -> Xem điểm
  • done_reviewable -> Làm lại

Interaction Rules

• Nếu user vào từ homework của lesson:
  • bài đó được highlight ở top list.
• Nếu có bài in_progress:
  • card này đứng trên các bài not_started không bắt buộc.
• Nếu có bài đã xong:
  • score phải nhìn thấy ngay trên card, không bắt user mở detail mới biết điểm. [SRC-002]
• Không có filter/search/sort phức tạp trong baseline. [SRC-002]

States

• loading
  • skeleton cho summary card + 3 card đầu list.
• empty
  • message ngắn Khóa này chưa có bài tập, CTA quay lại Course Detail.
• error
  • thông báo ngắn + CTA Thử lại.
• success
  • render full list + summary.

Visual Direction

• Tone: sáng, thân thiện, có nhịp học tập rõ.
• Layout: list-first, card lớn, nhiều khoảng thở.
• Priority block dùng accent nhẹ để nhấn bài nên làm tiếp, không dùng dashboard KPI nặng.
• Không dùng pattern bank/search/filter kiểu English. [SRC-001] [SRC-002]

Copy & CTA

• Title gợi ý: Bài tập của khóa này
• Primary CTA trên card: Bắt đầu, Làm tiếp, Xem điểm, Làm lại
• Summary copy: ngắn, đọc được cho phụ huynh lẫn trẻ

Constraints

• Không biến màn này thành exercise bank.
• Không thêm secondary CTA dày đặc trên từng card.
• Không dùng bảng hoặc density kiểu vận hành.
• Không push user sang hub khác sau khi chọn bài.

Success Criteria

• User nhìn list đầu tiên là biết:
  • bài nào đang dở,
  • bài nào cần làm ngay,
  • bài nào đã có điểm.
• User mở đúng Exercise Detail trong 1 lần chạm từ card ưu tiên.

Appendix: Facts & Constraints

• Fact: Exercise Home là list screen bắt buộc trước Exercise Detail. [SRC-003]
• Fact: score của bài đã xong phải nhìn thấy ngay trên list. [SRC-002]
• Constraint: progress update sau khi xong bài phải phản ánh lại ở list và course detail. [SRC-002] [SRC-003] [SRC-004]