Lms Home Tab Shell UI Concept

KIDLMSH-S01_lms_home_tab_shell_UI_CONCEPT

Global Context

• Feature: KID LMS Home.
• Screen ID: KIDLMSH-S01.
• Lane: lms-home.
• State: overview-default tab shell.
• Source anchors: [SRC-001] KID_LMS_00_Overview, [SRC-002] KID_LMS_Home, [SRC-003] KID_LMS_Sitemap, [SRC-004] KID_UX_01_Overall_Domain_Flow, [SRC-005] KID_DS_Basic_Guideline, [SRC-006] KID_LMS_Home_Content_Allocation.

Product & User Goal

• Product summary: Đây là entry screen chính của KID LMS, dùng để định hướng user sang đúng bucket Khóa học / Kho đề / Lịch học / Thành tích, đồng thời giữ Learning Stats như một view phụ nhẹ. [SRC-001] [SRC-002] [SRC-003] [SRC-006]
• User job-to-be-done: Nhìn vào là biết nên học tiếp, tự luyện đề, xem lịch, hay nhìn thành tích ở đâu. [SRC-002] [SRC-003]
• Business outcome: tăng home -> course list, tránh trùng nội dung giữa các tab, và giữ LMS Home nhẹ đúng tinh thần KID DS. [SRC-002] [SRC-005] [SRC-006]

Screen Context In Flow

• Entry: User được handoff từ Parent Dashboard hoặc quay lại từ Course Detail / Exercise Home / Exercise Detail. [SRC-002] [SRC-003] [SRC-004]
• Exit: User đổi tab trong LMS Home, vào Course List, mở Learning Stats, hoặc quay lại Parent Dashboard. [SRC-002] [SRC-003] [SRC-006]
• Back behavior: nếu user ở trong LMS Home, back ưu tiên quay về Parent Dashboard hoặc route trước đó theo runtime shell. [SRC-002] [SRC-004]

Core Question

• Mình nên chú ý gì trước tiên và bấm vào đâu để đi tiếp?

Information Hierarchy

• Top Context Bar
  • active child,
  • active course,
  • back CTA về Parent Dashboard.
• Home Header
  • title ngắn,
  • subtitle rất gọn,
  • không biến thành marketing hero.
• Top-level Tab Strip
  • Overview,
  • Khóa học,
  • Kho đề,
  • Lịch học,
  • Thành tích,
  • Kỷ niệm.
• Tab Content Area
  • chỉ render đúng organism của tab hiện tại.

Default Tab: Overview

• Overview Hero
  • summary rất ngắn về tình trạng hiện tại.
  • chỉ trả lời: Hôm nay nên chú ý gì trước tiên? [SRC-006]
• To-do Board
  • 2-4 việc cần làm theo bối cảnh hiện tại.
  • có thể gồm:
    • xem lại tóm tắt bài học
    • làm exercise homework
    • hoàn thành assignment
    • làm final / online test
  • đây là khối hành động theo ngữ cảnh, không phải full task manager. [SRC-002] [SRC-006]
• Snapshot Rail
  • baseline ưu tiên:
    • Khóa học
    • Lịch học
    • Thành tích
  • có thể có thêm:
    • Learning Stats
    • Kỷ niệm
  • mỗi snapshot chỉ được mang đúng 1 tín hiệu cô đọng nhất của tab owner. [SRC-002] [SRC-006]
• Reminder Card
  • chỉ hiện nếu có homework gần hạn hoặc buổi học sắp tới.
• Primary CTA
  • duy nhất: Vào Khóa học
  • action: chuyển user sang tab Khóa học, không đi thẳng vào route sâu.
• Secondary Entry
  • Xem tiến bộ học tập
  • action: mở Learning Stats
  • visual weight phải thấp hơn CTA chính. [SRC-006]

Tab Contract

Khóa học

• Organisms:
  • Course Snapshot
  • Next Action Hero
  • Today / This Week Tasks
  • My Courses Strip
  • Practice Shortcuts
  • Learning Stats Entry
• Primary CTA:
  • Xem tất cả khóa học
• Owner:
  • mọi course-specific stats,
  • next action theo khóa,
  • shortcut practice theo course context.
  • Course Snapshot chỉ trả lời Đang ở đâu trong khóa này?
  • Next Action Hero chỉ trả lời Làm gì tiếp theo? [SRC-006]

Kho đề

• Organisms:
  • Level Focus
  • Type Group Rail
  • Test Item List
• Primary CTA:
  • Làm đề
  • hoặc Làm tiếp
• Owner:
  • optional self-practice theo level
  • test type grouping
• Không có:
  • homework signal
  • course stats
  • lesson/topic dependency. [SRC-002] [SRC-003] [SRC-006]

Lịch học

• Organisms:
  • Upcoming Schedule List
  • Light Reminder Note
• Mỗi item chỉ có:
  • ngày,
  • giờ,
  • trạng thái,
  • nhãn course/topic ngắn nếu thật sự cần nhận diện.
• Không có:
  • lesson breakdown,
  • attendance analytics,
  • course stats.

Thành tích

• Organisms:
  • Achievement Hero
  • Badge Cluster
  • Milestone Card
• Empty state:
  • nhẹ, động viên, không tạo cảm giác hụt hẫng.
• Rule:
  • recognition only
  • progress reflection nên đi sang Learning Stats. [SRC-006]

Kỷ niệm

• Organisms:
  • Later Placeholder Panel
• Copy:
  • ngắn, tích cực, không giả vờ feature đã active.

Secondary View: Learning Stats

• Entry:
  • từ Overview
  • từ Khóa học
  • hoặc từ next-step gợi ý sau khi làm xong activity. [SRC-002] [SRC-003]
• Organisms:
  • Learning Pulse Hero
  • Current Course Progress
  • Recent Learning Activity
  • Focus Now
• Rule:
  • reflection only
  • không phải top-level tab mới
  • không trộn badge/certificate vào đây. [SRC-006]

Component Tree

• Top context bar
• Home header
• Tab strip
• Tab content container
• Overview Hero + To-do Board + snapshot rail + reminder card
  • hoặc Course Snapshot stack
  • hoặc Level Focus + type groups + item list
  • hoặc Upcoming Schedule List
  • hoặc Achievement Cluster
  • hoặc Later Placeholder Panel
• Secondary route/view:
  • Learning Pulse Hero + Current Course Progress + Recent Learning Activity + Focus Now

Visual Direction

• Typography: Quicksand toàn màn. [SRC-005]
• First view low-density: chỉ 1 trọng tâm chính ở first view. [SRC-005]
• Shape:
  • primary control 56h / r20
  • tab control 48h / r18
  • hero card r32
  • medium card r24
• Spacing:
  • cluster gap 12-16
  • card padding 20-24
  • section gap 24-32
• Tone:
  • sáng,
  • mềm,
  • dễ gần,
  • không noisy. [SRC-005]

Interaction Rules

• Tab mặc định luôn là Overview. [SRC-002] [SRC-003]
• CTA chính ở Overview chỉ chuyển vào tab Khóa học.
• To-do Board có thể chứa CTA sang:
  • Khóa học
  • Exercise Home
  • Assignment W/S
  • Online Test nhưng mỗi item chỉ có 1 CTA chính và toàn bộ board vẫn phải giữ hierarchy nhẹ.
• entry phụ ở Overview có thể mở Learning Stats.
• CTA chính ở Khóa học mới đi tiếp Course List. [SRC-002] [SRC-003]
• Learning Stats là view phụ, không thêm vào Tab Strip. [SRC-002] [SRC-006]
• Practice Shortcuts chỉ nằm trong tab Khóa học.
• Lịch học chỉ có CTA quay về course context liên quan khi thực sự cần.
• Kỷ niệm không có CTA mở flow mới ở phase hiện tại.

States

• normal
  • render đầy đủ 6 tab, default Overview.
• no_course_assigned
  • Overview và Khóa học đều phải có empty state nhẹ; CTA quay lại dashboard hoặc hỗ trợ.
• upcoming_class
  • Overview hiển thị preview ngắn; Lịch học hiển thị list rõ.
• no_schedule_visible
  • Lịch học có empty state nhẹ, không làm đứt flow tổng.
• no_achievement_yet
  • Thành tích vẫn ấm và tích cực.

Copy & CTA

• Header title gợi ý:
  • Hôm nay mình học gì đây?
• Header subtitle:
  • ngắn, phụ huynh lẫn bé đều đọc được.
• Tab labels:
  • Overview
  • Khóa học
  • Kho đề
  • Lịch học
  • Thành tích
  • Kỷ niệm
• Primary CTA ở Overview:
  • Vào Khóa học
• Secondary CTA ở Overview:
  • Xem tiến bộ học tập
• Primary CTA ở Khóa học:
  • Xem tất cả khóa học

Constraints

• Không biến Overview thành dashboard analytics.
• Không biến To-do Board thành backlog dài hoặc checklist đầy đủ của course.
• Không dùng Snapshot Rail để copy full content của tab owner.
• Không render full content của tab owner trong Overview.
• Không cho Kho đề đọc như một course tab.
• Không để Lịch học thành lesson detail screen.
• Không trộn Thành tích với Learning Stats.
• Không dùng nhiều hero cùng trọng số.
• Không để Kỷ niệm trông như feature active.

Success Criteria

• User vào màn là hiểu ngay:
  • tab mặc định là tổng quan,
  • tab nào để học tiếp,
  • tab nào để tự luyện đề,
  • tab nào để xem lịch,
  • tab nào để xem thành tích.
• Overview dẫn sang Khóa học rõ ràng chỉ bằng 1 hành động chính.
• Khóa học vẫn là owner rõ nhất của course action và course stats.

Appendix: Facts & Constraints

• Fact: Overview là tab riêng và là default tab của LMS Home. [SRC-002] [SRC-003]
• Fact: Kho đề là top-level tab của LMS Home, còn Learning Stats chỉ là secondary view. [SRC-002] [SRC-003] [SRC-006]
• Fact: Lịch học là schedule-only. [SRC-002] [SRC-005]
• Fact: Khóa học là owner của course stats và CTA đi Course List. [SRC-002] [SRC-003]
• Constraint: LMS Home phải giữ tinh thần cute but calm, không thành dashboard dày thông tin. [SRC-005]