Wireframe & luồng giao diện
Trang này phác thảo bảy màn hình chính. Đây là bản phác khung, chỉ mô tả có những gì và đặt ở đâu — chưa phải thiết kế màu sắc, phông chữ hay khoảng cách cuối cùng.
Wireframe vẽ thẳng bằng mã trong trang này, không dùng công cụ ngoài. Nhờ vậy sửa được cùng lúc với tài liệu và luôn khớp với đặc tả.
Khung nét đứt là chỗ chứa nội dung. Ô màu là nhãn trạng thái. Chữ trong ngoặc vuông là nút bấm.
Mỗi màn hình có ghi mã chức năng tương ứng để tra ngược về đặc tả yêu cầu chức năng.
Sơ đồ điều hướng
Người dùng vào màn hình nào phụ thuộc vai trò.
Đăng nhập
│
┌───────────────┼───────────────┐
▼ ▼ ▼
Ban Giám hiệu Trưởng phòng Nhân viên
│ │ │
▼ ▼ ▼
Màn hình tổng quan ───┘ Việc của tôi
│ │
├── Danh sách công việc ────────┤
│ │ │
│ ▼ │
│ Chi tiết công việc ◄────────┘
│ │
│ ├── Bình luận
│ ├── Tệp đính kèm
│ └── Lịch sử thay đổi
│
├── Việc trễ hạn
├── Xuất báo cáo Excel
└── Quản lý người dùng (chỉ Ban Giám hiệu)
Thanh điều hướng bên trái chỉ hiện những mục người đó được phép vào. Nhân viên không thấy mục Quản lý người dùng, cũng không thấy Màn hình tổng quan.
1. Đăng nhập
Quên mật khẩu? Liên hệ Ban Giám hiệu để được cấp lại.
Điểm cần chú ý: không có nút "Đăng ký tài khoản" — tài khoản do Ban Giám hiệu cấp, theo BR-10. Dòng chữ cuối nói rõ phải làm gì khi quên mật khẩu, thay vì để người dùng loay hoay.
2. Màn hình tổng quan
Màn hình đầu tiên của Trưởng phòng và Ban Giám hiệu.
| Tên việc | Phụ trách | Trễ | Tình trạng |
|---|---|---|---|
| Tổng hợp báo cáo quý | Nguyễn Thị B | 5 ngày | Chưa nộp |
| Gửi công văn số 112 | Trần Văn C | 2 ngày | Chờ tôi duyệt |
Điểm cần chú ý: cột Tình trạng trong bảng trễ hạn phân biệt hai loại theo BR-08 — Chưa nộp là cán bộ trễ, Chờ tôi duyệt là người giao việc chưa xử lý. Không tách hai loại này thì trưởng phòng sẽ trách nhầm người.
3. Danh sách công việc và bộ lọc
Đang lọc: Đang làm ✕ Gấp ✕ — tìm thấy 6 công việc
| Tên việc | Phụ trách | Hạn | Trạng thái | |
|---|---|---|---|---|
| Gấp Chuẩn bị hồ sơ thanh tra | Nguyễn Thị B | 05/08 · trễ 2 ngày | Đang làm | ⋯ |
| Rà soát danh sách học sinh | Trần Văn C | 12/08 | Đang làm | ⋯ |
| Cập nhật bảng phân công | Lê Thị D | — | Mới giao | ⋯ |
Điểm cần chú ý: điều kiện lọc đang áp dụng hiện thành thẻ nhỏ có dấu ✕ để bỏ từng cái. Người không chuyên thường quên mình đã đặt bộ lọc rồi tưởng mất dữ liệu. Việc không có hạn hiện dấu gạch ngang, không hiện ngày trống.
4. Chi tiết công việc
Màn hình quan trọng nhất — nơi thay thế các cuộc trao đổi qua Zalo.
Người giao: Phạm Văn A · Phụ trách: Nguyễn Thị B · Hạn: 05/08/2026
Mô tả chi tiết công việc — tập hợp hồ sơ theo danh mục đoàn thanh tra yêu cầu, nộp về văn phòng trước ngày 05/08.
📎 cong-van-112.pdf · 1,2 MB
📎 danh-muc-ho-so.xlsx · 340 KB
+ Đính kèm tệp
02/08 09:15 — Phạm Văn A tạo việc
02/08 14:20 — Nguyễn Thị B nhận việc
04/08 08:00 — Phạm Văn A đổi hạn: 03/08 → 05/08
Phạm Văn A · 02/08 09:20
Chị B lấy thêm biểu mẫu số 3 ở phòng Đào tạo nhé.
Nguyễn Thị B · 03/08 15:40
Em đã lấy được rồi ạ, đang tổng hợp.
Điểm cần chú ý:
- Nút Báo hoàn thành chứ không phải Hoàn thành — nhân viên chỉ chuyển sang Chờ xác nhận, theo BR-01
- Khối Lịch sử hiện cả lần đổi hạn, để không ai âm thầm dời hạn cho hết trễ
- Trao đổi và tệp đính kèm nằm ngay trong việc — đây là thứ thay thế Zalo
- Nhân viên không thấy nút Chuyển giao lại, Sửa, Huỷ việc
5. Màn hình việc của tôi
Màn hình đầu tiên của nhân viên sau khi đăng nhập.
Chuẩn bị hồ sơ thanh tra
Hạn 05/08 · Người giao: Phạm Văn A
Hạn 12/08 · còn 5 ngày
Chưa đặt hạn
Điểm cần chú ý: dùng thẻ dọc thay cho bảng, vì nhân viên thường mở trên điện thoại. Việc quá hạn có viền đỏ, việc không có hạn xếp cuối và ghi rõ Chưa đặt hạn thay vì để trống.
6. Quản lý người dùng
| Họ tên | Thư điện tử | Phòng ban | Vai trò | Trạng thái | |
|---|---|---|---|---|---|
| Phạm Văn A | [email protected] | VP Hành chính | Trưởng phòng | Đang dùng | ⋯ |
| Nguyễn Thị B | [email protected] | VP Hành chính | Nhân viên | Đang dùng | ⋯ |
| Lê Văn E | [email protected] | VP Hành chính | Nhân viên | Đã khoá | ⋯ |
7. Tạo công việc mới
Điểm cần chú ý: chỉ ba ô bắt buộc, đánh dấu sao đỏ. Ô hạn hoàn thành ghi thẳng có thể để trống ngay trong ô, theo BR-04 — nếu không nói rõ, người dùng sẽ tưởng bắt buộc và điền bừa. Trưởng phòng thấy ô Phòng ban đã điền sẵn và không sửa được; Ban Giám hiệu phải tự chọn.
8. Xác nhận hoàn thành — góc nhìn người duyệt
Cùng một công việc nhưng người giao việc nhìn thấy khác nhân viên.
Phụ trách: Trần Văn C · Nộp lúc 04/08 16:20 · Hạn: 05/08
📎 cong-van-112-da-gui.pdf · 820 KB
Điểm cần chú ý: hai nút này chỉ hiện với người đã giao việc đó. Trưởng phòng khác mở cùng công việc sẽ không thấy, theo BR-01. Dòng ghi chú phân biệt rõ đây là chờ duyệt quá hạn chứ không phải cán bộ trễ.
9. Hộp thoại — trả lại để làm tiếp
Công việc sẽ quay về trạng thái Đang làm. Cán bộ phụ trách nhận được thông báo kèm lý do bạn ghi bên dưới.
Ví dụ: Thiếu chữ ký của lãnh đạo ở trang cuối, nhờ em bổ sung.
Điểm cần chú ý: lý do là bắt buộc. Trả lại mà không nói vì sao thì cán bộ không biết sửa gì. Lý do lưu vào lịch sử của việc, không lẫn vào phần trao đổi.
10. Hộp thoại — huỷ công việc
Công việc chuyển sang trạng thái Đã huỷ và biến khỏi danh sách đang làm. Dữ liệu vẫn được giữ lại để tra cứu — thao tác này không hoàn tác được.
Ví dụ: Đoàn thanh tra dời lịch sang tháng sau.
11. Hộp thoại — chuyển giao lại
Đang phụ trách: Nguyễn Thị B
12. Danh sách thông báo
Công việc đã quá hạn 2 ngày · 07/08 08:00
Phạm Văn A giao cho bạn · 06/08 14:30
Phạm Văn A trả lại: "Thiếu chữ ký trang cuối" · 05/08 09:10
Lê Thị D có bình luận mới · 04/08 16:45
Điểm cần chú ý: thông báo chưa đọc có viền trái đậm, đã đọc thì mờ đi. Cảnh báo quá hạn chỉ một lần mỗi ngày cho mỗi việc — nếu báo mỗi lần rà soát thì người dùng sẽ tắt thông báo và hỏng luôn cả chức năng nhắc hạn.
13. Xuất báo cáo
Điểm cần chú ý: hiện trước số lượng tìm được để người dùng biết sẽ tải về bao nhiêu. Quá 5.000 dòng thì báo thu hẹp khoảng thời gian thay vì để chờ lâu rồi hỏng.
14. Thêm người dùng
Tam2026!xY
Mật khẩu này chỉ hiện một lần. Hãy chép lại và bàn giao cho cán bộ. Nếu để mất, bạn phải đặt lại mật khẩu mới.
15. Ba vai trò nhìn thấy gì
Cùng một phần mềm, ba vai trò thấy ba thanh điều hướng khác nhau. Đây là cách FR-ACC-03 thể hiện ra giao diện.
Điểm cần chú ý: mục không được phép vào thì ẩn hẳn, không hiện rồi báo lỗi khi bấm. Nhân viên không thấy Màn hình tổng quan và Người dùng.
16. Giao diện trên điện thoại
Cán bộ thường mở trên điện thoại để xem việc và cập nhật nhanh.
Chuẩn bị hồ sơ thanh tra
Hạn 05/08
Hạn 12/08
Chưa đặt hạn
Nguyên tắc trên màn hình hẹp:
| Trên máy tính | Trên điện thoại |
|---|---|
| Thanh điều hướng bên trái | Thu vào nút ba gạch ở góc |
| Bảng nhiều cột | Đổi thành thẻ dọc, mỗi việc một thẻ |
| Bốn ô đếm nằm ngang | Xếp thành hai hàng, mỗi hàng hai ô |
| Nút thao tác nằm ngang | Xếp dọc, chiều rộng đầy màn hình |
17. Trạng thái rỗng và thông báo lỗi
Hai thứ hay bị bỏ quên nhưng người dùng không chuyên gặp thường xuyên.
Bấm nút bên dưới để tạo công việc đầu tiên cho phòng.
Thử bỏ bớt điều kiện lọc hoặc mở rộng khoảng thời gian.
Công việc thuộc phòng ban khác. Nếu bạn cần xem, hãy liên hệ trưởng phòng.
Điểm cần chú ý: không viết "Lỗi 403" hay "Không có quyền truy cập". Câu thông báo phải nói rõ vì sao và làm gì tiếp, theo NFR-USE-04.
Bảng bao phủ
Kiểm tra mỗi chức năng bắt buộc đều có ít nhất một màn hình mô tả.
| Mã chức năng | Màn hình |
|---|---|
| FR-ACC-01 | 1 Đăng nhập |
| FR-ACC-02 | 6 Quản lý người dùng · 14 Thêm người dùng |
| FR-ACC-03 | 15 Ba vai trò nhìn thấy gì |
| FR-TASK-01 | 7 Tạo công việc mới |
| FR-TASK-02 | 7 Tạo công việc mới |
| FR-TASK-03 | 4 Chi tiết công việc · 8 Xác nhận hoàn thành |
| FR-TASK-04 | 3 Danh sách · 7 Tạo công việc mới |
| FR-TASK-05 | 4 Chi tiết công việc |
| FR-TASK-06 | 4 Chi tiết công việc |
| FR-TASK-07 | 8 Xác nhận hoàn thành · 9 Hộp thoại trả lại |
| FR-TASK-08 | 11 Hộp thoại chuyển giao |
| FR-TASK-09 | 10 Hộp thoại huỷ việc |
| FR-VIEW-01 | 2 Màn hình tổng quan |
| FR-VIEW-02 | 2 Màn hình tổng quan |
| FR-VIEW-03 | 5 Việc của tôi · 16 Trên điện thoại |
| FR-VIEW-04 | 3 Danh sách và bộ lọc |
| FR-NOTI-01 | 12 Danh sách thông báo |
| FR-NOTI-02 | 12 Danh sách thông báo |
| FR-NOTI-03 | 12 Danh sách thông báo · 2 Màn hình tổng quan |
| FR-REP-01 | 13 Xuất báo cáo |
Đủ 20 trên 20 chức năng bắt buộc.
Quy ước chung cho mọi màn hình
| Quy ước | Lý do |
|---|---|
| Thao tác không hoàn tác được thì hỏi lại một lần | Huỷ việc, khoá tài khoản |
| Thông báo lỗi nói rõ phải làm gì tiếp | NFR-USE-04 |
| Danh sách rỗng thì hiện gợi ý, không để trắng | Người dùng tưởng phần mềm hỏng |
| Nút không được phép bấm thì ẩn hẳn | Rõ hơn là hiện rồi báo không có quyền |
| Đang tải thì hiện khung xám mờ | Hiện số 0 gây hiểu nhầm là không có dữ liệu |
| Cỡ chữ tối thiểu đủ lớn, tương phản đạt chuẩn | NFR-USE-05 |
Còn thiếu gì
Bản phác này cố tình chưa gồm:
- Màu sắc, phông chữ, khoảng cách cuối cùng — sẽ chốt khi dựng giao diện thật trên nền mẫu đã chọn. Wireframe chỉ nói có gì, ở đâu, không nói trông ra sao
- Màn hình đổi mật khẩu và trang cá nhân — biểu mẫu đơn giản, theo mẫu chung
- Giao diện điện thoại cho từng màn hình — mới nêu nguyên tắc chung ở mục 16, chưa vẽ hết
- Sáu chức năng giai đoạn sau