#05 – User flow & thiết kế trải nghiệm

Giai đoạn: Thiết kế UX · Nguồn: [UF], [MT], 03 – SRS · Phiên bản 0.1 – 29/10/2026

Các luồng dưới đây chuyển từ sơ đồ draw.io [UF] sang Mermaid, bổ sung các bước còn thiếu (đánh dấu ★) theo phát hiện F1–F7 ở 02 §3.3.

#1. Nguyên tắc thiết kế

#2. User flow

#2.1 Kích hoạt sách lần đầu

★ Luồng bổ sung, không có trong [UF].

flowchart TD
    A(["Mua sách, cào tem/quét QR kích hoạt"]) --> B{"Đã đăng nhập?"}
    B -- "Chưa" --> C["Đăng nhập / Đăng ký<br/>(giữ mã kích hoạt)"]
    C --> D
    B -- "Rồi" --> D["Trang kích hoạt<br/>mã điền sẵn"]
    D --> E{"Kiểm tra mã"}
    E -- "Hợp lệ" --> F["Xác nhận thông tin sách"]
    F --> G["Kích hoạt thành công<br/>Hướng dẫn dùng ID trên sách"]
    G --> H(["Sách của tôi"])
    E -- "Không tồn tại" --> I["Báo lỗi, gợi ý ký tự dễ nhầm"] --> D
    E -- "Đã dùng bởi tài khoản này" --> H
    E -- "Đã dùng bởi tài khoản khác" --> J["Báo lỗi + mã tham chiếu<br/>Liên hệ hỗ trợ"]
    E -- "Sai quá nhiều lần" --> K["Captcha / khoá tạm 15 phút"]

#2.2 Toán (chuyển từ [UF], bổ sung ★)

flowchart TD
    subgraph GIAY["📖 Sách giấy"]
        G1(["Mở sách giấy"]) --> G2["Xem mind map lý thuyết"]
        G2 -- "đã hiểu" --> G3["Xem ví dụ minh hoạ"]
        G3 -- "đã hiểu" --> G4["Làm bài tập thực hành"]
        G5["Làm đề thi thử"]
    end
    subgraph SO["📱 Nền tảng số"]
        S1["Nhập ID mind map"] --> S2["Xem giải thích lý thuyết<br/>(text, video)"]
        S3["Nhập ID ví dụ"] --> S4["Xem video giải thích"]
        S5["Nhập ID bài tập"] --> S5a{"★ Chọn chế độ"}
        S5a -- "Làm trên máy" --> S5b["★ Làm bài tương tác"] --> S6
        S5a -- "Đã làm trên giấy" --> S6["Xem đáp án, giải thích"]
        S6 --> S7["Nhận đề xuất kiến thức"]
        S8["★ Nhập ID đề"] --> S8a{"★ Chọn chế độ"}
        S8a -- "Làm trên máy (90 phút)" --> S8b["★ Làm đề"] --> S9["★ Kết quả, đáp án, giải thích"]
        S8a -- "Đã làm trên giấy" --> S9
        S9 --> S7
        S10["★ Gói đề mở rộng (P3)"]
    end
    G2 -- "cần chi tiết" --> S1
    S2 --> G3
    G3 -- "cần chi tiết" --> S3
    S4 --> G4
    G4 --> S5
    S7 -- "chuyên đề yếu" --> S2
    S6 --> G5
    G5 --> S8
    S9 -- "★ làm hết đề trong sách" --> S10

#2.3 Tiếng Anh (chuyển từ [UF], bổ sung ★)

flowchart TD
    subgraph GIAY["📖 Sách giấy"]
        G1(["Mở sách giấy"]) --> G2["Đọc hướng dẫn làm test"]
        G2 -- "không test" --> G3["Xem tổng hợp kiến thức (lý thuyết)"]
        G3 -- "bỏ qua chi tiết" --> G4["Xem cấu trúc đề, dạng bài"]
        G4 --> G5["Xem đề luyện tập"]
    end
    subgraph SO["📱 Nền tảng số"]
        S1["Nhập ID test (1–5)"] --> S2["Làm mini test 20 câu<br/>một câu/màn hình, đo thời gian"]
        S2 --> S3["Xem kết quả, đáp án, giải thích"]
        S3 --> S4["Nhận đề xuất kiến thức<br/>(chuyên đề trong 12 chuyên đề)"]
        S4 --> S6
        S5["Nhập ID chuyên đề"] --> S6["Xem video giải thích 3–5 phút"]
        S6 --> S7["Làm bài tập thực hành 5–10 câu"]
        S8["Nhập ID đề luyện tập"] --> S8a{"★ Chọn chế độ"}
        S8a -- "Làm trên máy (50 phút)" --> S9["Làm đề luyện tập"]
        S8a -- "Đã làm trên giấy" --> S10
        S9 --> S10["★ Kết quả, key, giải thích"]
        S10 --> S11["★ Đề xuất chủ đề/dạng bài sai nhiều"]
        S11 --> S6
    end
    G2 -- "làm test" --> S1
    G3 -- "xem chi tiết" --> S5
    S7 -- "muốn xem cấu trúc đề" --> G4
    S7 -- "muốn làm đề" --> S8
    G5 -- "muốn làm đề" --> S8

#2.4 Ngữ văn (suy ra từ [MT])

flowchart TD
    subgraph GIAY["📖 Sách giấy"]
        G1(["Mở sách giấy"]) --> G0["Đọc phân tích cấu trúc đề thi"]
        G0 --> G2["Xem mind map kỹ năng"]
        G2 -- "đã hiểu" --> G3["Đọc ví dụ và đáp án ngắn gọn"]
        G3 -- "đã hiểu" --> G4["Đọc đề bài tập vận dụng"]
        G6["Đọc đề thi thử (5–10 đề)"]
    end
    subgraph SO["📱 Nền tảng số"]
        S1["Nhập ID kỹ năng"] --> S2["Xem video tóm tắt lý thuyết"]
        S3["Nhập ID ví dụ"] --> S4["Xem video hướng dẫn làm bài"]
        S5["Nhập ID bài / đề"] --> S5a{"Chọn chế độ"}
        S5a -- "Viết trên máy" --> S5b["Soạn bài / tải ảnh bài viết tay"] --> S6
        S5a -- "Đã viết trên giấy" --> S6["Xem đáp án, hướng dẫn giải"]
        S6 --> S7["Tự chấm theo rubric (P1)"]
        S7 --> S8["Gợi ý kỹ năng cần ôn lại"]
        S8 --> S2
    end
    G2 -- "cần chi tiết" --> S1
    S2 --> G3
    G3 -- "cần chi tiết" --> S3
    S4 --> G4
    G4 --> S5
    S6 --> G6
    G6 --> S5

#2.5 Làm bài và nhận đề xuất (dùng chung 3 môn)

stateDiagram-v2
    [*] --> GioiThieu: Mở bằng ID / QR / bài được giao
    GioiThieu --> TraDapAn: "Đã làm trên giấy"
    GioiThieu --> DangLam: "Bắt đầu" (chọn chế độ hiển thị)
    GioiThieu --> DangLam: "Tiếp tục lượt đang làm"
    DangLam --> DangLam: Trả lời → tự lưu
    DangLam --> NgoaiTuyen: Mất mạng
    NgoaiTuyen --> DangLam: Có mạng, đồng bộ
    DangLam --> DaNop: Nộp bài / hết giờ
    TraDapAn --> PhieuTraLoi: "Nhập đáp án để biết chuyên đề cần ôn"
    PhieuTraLoi --> DaNop
    DaNop --> KetQua: Chấm câu khách quan
    KetQua --> TuCham: Có câu tự luận
    TuCham --> DeXuat
    KetQua --> DeXuat
    DeXuat --> HocLieu: Mở lý thuyết / ví dụ / bài tập
    DeXuat --> SachGiay: "Học tiếp trên sách"
    KetQua --> GioiThieu: Làm lại
    HocLieu --> [*]
    SachGiay --> [*]

#2.6 Giáo viên giao bài ★

sequenceDiagram
    actor GV as Giáo viên
    participant LMS as LMS Hoclieu
    participant SYS as Nền tảng hybrid
    actor HS as Học sinh
    GV->>SYS: Đăng nhập (SSO Hoclieu)
    SYS->>LMS: Lấy danh sách lớp, học sinh
    GV->>SYS: Chọn đề trong sách, chọn lớp, đặt hạn nộp
    SYS-->>HS: Thông báo "Bài được giao"
    HS->>SYS: Làm bài, nộp
    SYS->>SYS: Chấm, gắn lượt với bài giao
    SYS-->>LMS: Đồng bộ điểm (nếu LMS hỗ trợ)
    GV->>SYS: Xem tiến độ, phổ điểm, câu sai nhiều
    GV->>SYS: Giao bài tập củng cố chuyên đề yếu (P2)

#2.7 Sản xuất nội dung và ID cho sách in ★

flowchart LR
    A["BTV biên soạn<br/>bản thảo sách"] --> B["Nhập/Import câu hỏi,<br/>lời giải, video lên CMS"]
    B --> C["Gắn tag<br/>ma trận kiến thức"]
    C --> D["Sinh ID cho tài nguyên"]
    D --> E["Trưởng ban duyệt<br/>& KHOÁ ID"]
    E --> F["Xuất Excel ID + ảnh QR<br/>+ lô mã kích hoạt"]
    F --> G["Dàn trang chèn ID/QR<br/>Nhà in in tem kích hoạt"]
    G --> H["Kiểm tra liên kết<br/>(mọi ID mở được)"]
    H --> I["Xuất bản nội dung số"]
    I --> J(["Sách phát hành"])
    H -- "Lỗi" --> B

Điểm kiểm soát quan trọng: sau bước E, ID không được đổi. Nội dung đích của ID vẫn sửa được trên hệ thống đến trước và sau khi phát hành.

#3. Sơ đồ trang (Sitemap)

flowchart TD
    HOME["SCR-01 Trang chủ<br/>(ô Nhập ID)"] --> AUTH["SCR-02 Đăng nhập / Đăng ký"]
    HOME --> ACT["SCR-03 Kích hoạt sách"]
    HOME --> MY["SCR-04 Sách của tôi"]
    MY --> LIB["SCR-22 Thư viện học liệu (P2)"]
    HOME --> RES{{"Tài nguyên theo ID"}}
    RES --> TH["SCR-05 Lý thuyết"]
    RES --> EX["SCR-06 Ví dụ minh hoạ"]
    RES --> INT["SCR-08 Giới thiệu bài làm"]
    INT --> T1["SCR-09 Làm bài – đề thi"]
    INT --> T2["SCR-10 Làm bài – phiếu trả lời"]
    INT --> T3["SCR-11 Làm bài – một câu/màn hình"]
    INT --> KEY["SCR-13 Đáp án & lời giải"]
    T1 & T2 & T3 --> RS["SCR-12 Kết quả"]
    RS --> KEY
    RS --> SG["SCR-14 Tự chấm tự luận"]
    RS --> REC["SCR-15 Đề xuất củng cố"]
    HOME --> HIS["SCR-16 Lịch sử làm bài"]
    HOME --> PRO["SCR-17 Tiến bộ (biểu đồ)"]
    HOME --> ASG["SCR-23 Bài được giao"]
    HOME --> PKG["SCR-18 Gói đề mở rộng"] --> PAY["SCR-19 Thanh toán"]
    HOME --> ME["SCR-21 Tài khoản"]
    RES -.-> ERR["SCR-20 Không tìm thấy ID /<br/>Chưa kích hoạt"]

#4. Danh mục màn hình

#4.1 Học sinh (web mobile-first)

#4.2 Giáo viên

#4.3 CMS (BTV, Trưởng ban) và Quản trị (Admin HEID)

#5. Mô tả khung màn hình quan trọng (wireframe dạng chữ)

SCR-01 – Trang chủ (mobile)

┌────────────────────────────────┐
│ ☰  Ôn thi Hybrid        👤     │
├────────────────────────────────┤
│  Nhập ID trên sách             │
│ ┌───────────────────┐ ┌──────┐ │
│ │ VD: TV012         │ │ 📷QR │ │
│ └───────────────────┘ └──────┘ │
│        [ Mở nội dung ]         │
├────────────────────────────────┤
│ ▶ Tiếp tục: Đề thi thử Toán 3  │
│   Còn 42:10 · Câu 15/22        │
├────────────────────────────────┤
│ Bài được giao (2)          >   │
├────────────────────────────────┤
│ Sách của tôi                   │
│ [Toán 2027] [Anh 2027] [+ Kích hoạt] │
├────────────────────────────────┤
│ Ôn gì tiếp: Nguyên hàm (sai 67%)│
└────────────────────────────────┘

SCR-08 – Giới thiệu bài làm

┌────────────────────────────────┐
│ ← Đề thi thử Toán số 3 · TD003 │
├────────────────────────────────┤
│ 22 câu · 90 phút · Thang 10    │
│ Phần I: 12 câu trắc nghiệm     │
│ Phần II: 4 câu đúng/sai        │
│ Phần III: 6 câu trả lời ngắn   │
├────────────────────────────────┤
│ Cách làm:                      │
│ (•) Xem đề trên máy            │
│ ( ) Phiếu trả lời – đề ở sách  │
│ [✓] Tính giờ 90 phút           │
│        [ Bắt đầu làm bài ]     │
├────────────────────────────────┤
│ Đã làm trên giấy?              │
│   [ Xem đáp án & lời giải ]    │
├────────────────────────────────┤
│ Bạn đã làm 2 lần · cao nhất 7,25│
└────────────────────────────────┘

SCR-12 – Kết quả

┌────────────────────────────────┐
│ Kết quả · Đề thi thử Toán số 3 │
│         7,25 / 10              │
│ Đúng 14 · Sai 6 · Bỏ trống 2   │
│ Thời gian 78 phút              │
│ Phần I 2,5/3 · II 2,75/4 · III 2/3│
├────────────────────────────────┤
│ ÔN GÌ TIẾP                     │
│ 1. Nguyên hàm – Tích phân  67% │
│    Lý thuyết TL021 · Ví dụ TV045│
│    [Mở lý thuyết] [Bài tập]    │
│ 2. Xác suất có điều kiện   50% │
├────────────────────────────────┤
│ [Xem lời giải]  [Làm lại]      │
│ Học tiếp trên sách: trang 112  │
└────────────────────────────────┘

#6. Kế hoạch prototype cho mốc M1 (15/11)

Nội dung mẫu cần HEID cung cấp trước 08/11: 1 chuyên đề Toán (mind map, 2 ví dụ, 1 bộ bài tập, 1 đề), 1 placement test Tiếng Anh, 1 bài vận dụng Ngữ văn kèm hướng dẫn chấm, 3–5 video.