Nghe người dùng
Phỏng vấn người từng dùng, hỏi thêm bằng khảo sát ngắn, rồi gom lời họ thành phát hiện có mức độ.
ONMATE / UI/UX
UI/UX
Giao diện dễ hiểu, thao tác thuận tiện, trải nghiệm nhất quán.
ONMATE thiết kế UI/UX từ nhu cầu người dùng đến sơ đồ thao tác, bố cục và bản mẫu tương tác. Từng màn hình được xem xét trong toàn bộ hành trình để khách dễ tìm thông tin và hoàn thành công việc.
HÀNH TRÌNH TRÊN THIẾT KẾ UI/UX
Thiết kế UI/UX tốt bắt đầu từ việc nghe khách, rồi mới tới màu sắc và hình ảnh.
Thiết kế đi qua nhiều chặng, từ nghe người dùng tới kiểm tra tiếp cận. Chọn chặng để xem việc ở đó.
Vẽ luồng và cấu trúc
Đường đi của khách được vẽ cả nhánh lỗi. Menu xếp theo cách khách tự phân nhóm, rồi thử bằng cây thông tin.
Dựng khung dây
Vị trí và thứ tự thành phần được bàn trên khung dây điện thoại, dùng chữ thật, một lưới và một thang khoảng cách.
Thiết kế trạng thái
Nút và ô nhập có đủ trạng thái tải, trống, lỗi. Màu và chữ gom thành mã thiết kế đã đo tương phản.
Thử bản mẫu
Khoảng 6 người thử bản mẫu theo nhiệm vụ, rồi sửa chỗ họ vướng và bàn giao số đo cho người làm web.
Kiểm tra tiếp cận
Từng màn hình được kiểm theo WCAG 2.2: tương phản, bàn phím, tên và mô tả. Lỗi còn lại được ghi rõ.
Sáu chặng quay quanh một điểm. Chọn một chặng để đọc chi tiết.
THIẾT KẾ UI/UX
SÁU PHẦN VIỆCChọn một phần việc để xem
Chọn một phần việc để xem
toàn bộ cách làm.
Mỗi phần việc có màn hình làm việc, đầu vào và cách đo riêng.
Chạm vào một thẻ để đổi nội dung bên dưới.
Đang xemNghe khách trước khi vẽNội dung của thẻ Nghe khách trước khi vẽChọn thẻ khác
01
TRÔNG NHƯ THẾ NÀO
Nghiên cứu người dùng trông như thế nào.
Ba màn hình: gom ghi chú, chân dung và kết quả khảo sát. Bấm từng mục để xem.
Gom ghi chú sau 8 buổi phỏng vấn
Mỗi tờ là một câu khách nói, kèm mã người nói như P3. Tờ giống ý gom nhóm: Phí giao hàng không rõ (6 người), Nhập lại thông tin (5).
Đọc tiếp
Giữ lời nguyên văn, không viết lại thành ý mình. Nhóm đông nhất là việc nên sửa trước; nhóm nhỏ vẫn đáng giữ nếu nói đúng mục đích.
MÔ PHỎNG · SỐ MẪU
thietke.nhathom.example/phong-van/gom-ghi-chu
XXưởng thiết kếĐặt quà tặng (mẫu)M
Phỏng vấn 8 người: gom ghi chú
16 ghi chú · 3 nhóm lớn, 2 nhóm nhỏPhí giao hàng không rõ6 người1
Tới bước cuối mới thấy phí giao, tôi bỏ luôn.P32
Muốn biết tổng tiền trước khi nhập địa chỉ.P5
Phí giao nên nằm cạnh giá.P7
+3 ghi chú khácNhập lại thông tin5 người
Mua lần hai mà vẫn gõ lại địa chỉ.P2
Điện thoại nhỏ, gõ dài rất mệt.P6
+3 ghi chú khácGửi quà cho người khác5 người3
Tôi muốn ghi một câu chúc trong hộp.P4
Giao thẳng cho người nhận, đừng ghi giá.P8
+3 ghi chú khác- 1Nhóm “Phí giao hàng không rõ”: 6 trên 8 người nhắc tới. Nhóm đông nhất cho biết việc nên sửa trước.
- 2Ghi chú P3: giữ nguyên lời người nói, kèm mã người, không viết lại thành ý mình. Cả nhóm đọc cùng một nghĩa.
- 3Nhóm “Gửi quà cho người khác”: 5 người, nhỏ hơn nhưng đúng mục đích hộp quà. Nhóm ít người vẫn đáng giữ.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Chân dung dựa trên dữ liệu thật
Chân dung Mai, 34 tuổi, nhân viên văn phòng: một câu tiêu biểu, mục tiêu, ba điều khó chịu. Dòng cuối ghi nguồn: 8 phỏng vấn, 124 phản hồi.
Đọc tiếp
Chân dung giúp cả nhóm nhớ đang thiết kế cho ai. Không có dòng nguồn thì chỉ là nhân vật tưởng tượng, nên phải ghi dựa vào đâu.
MÔ PHỎNG · SỐ MẪU
thietke.nhathom.example/chan-dung/mai
XXưởng thiết kếĐặt quà tặng (mẫu)M
Chân dung người dùng: Mai
Người mua quàM
Mai, 34 tuổiNhân viên văn phòng · TP. Hồ Chí Minh (mẫu)
“Tôi mua nến làm quà vài lần một năm, hay mua trên điện thoại giờ nghỉ trưa. Phải xong trong vài phút.”1
Mục tiêu
- Chọn hộp quà vừa tầm tiền
- Ghi một câu chúc cho người nhận
- Giao đúng ngày sinh nhật
Điều khó chịu2
- Biết phí giao quá muộn
- Phải nhập lại địa chỉ
- Chữ mô tả nhạt, khó đọc
Dựa trên 8 phỏng vấn và 124 phản hồi khảo sát · cập nhật 12/09/20263
- 1Câu nói tiêu biểu: lấy từ phỏng vấn thật, không bịa. Một câu của khách giúp cả nhóm nhớ mình làm cho ai.
- 2Điều khó chịu: ba việc khách nói lặp lại nhiều nhất, lấy từ các nhóm ghi chú. Thiết kế giải quyết chúng trước.
- 3Dòng nguồn: chân dung dựa trên 8 phỏng vấn và 124 phản hồi khảo sát. Chân dung không ghi nguồn chỉ là đoán.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Khảo sát đo vấn đề lớn cỡ nào
Khảo sát 124 phản hồi: 51 người (41%) vướng nhất ở phí giao hàng không rõ, 102 người (82%) trả lời bằng điện thoại. 13 câu “Khác” đọc bằng tay.
Đọc tiếp
Phỏng vấn cho biết vì sao, khảo sát cho biết bao nhiêu người gặp. Dùng cả hai thì có lời kể và có số để xếp việc.
MÔ PHỎNG · SỐ MẪU
thietke.nhathom.example/khao-sat/ket-qua
XXưởng thiết kếĐặt quà tặng (mẫu)M
Phỏng vấnKhảo sátPhát hiệnCấu trúcKết quả
Khảo sát: khó khăn khi đặt hàng
124 phản hồi · 08–15/09/2026Điều gì làm bạn khó hoàn tất đơn trên điện thoại nhất?1
Trả lời bằng điện thoại102 · 82%trên 124 người2
13 câu trả lời “Khác”, đọc bằng tay3
“Muốn biết giao ngày nào.”
“Không thấy nút đổi số lượng.”
- 1Biểu đồ câu hỏi: 51 trên 124 người (41%) vướng nhất ở phí giao hàng không rõ. Đây là việc cần sửa trước.
- 2Trả lời bằng điện thoại: 102 trên 124 người (82%). Khách chủ yếu dùng điện thoại nên thiết kế từ màn hình nhỏ.
- 3Ô “Khác”: 13 câu đọc bằng tay, như “muốn biết giao ngày nào”. Câu tự do hay chứa điều lựa chọn bỏ sót.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Tài liệu tham khảo:Nielsen Norman Group: gom ghi chú theo nhóm ↗Usability.gov: chân dung người dùng ↗
02
LÀM NHƯ THẾ NÀO
Năm bước nghiên cứu.
Bắt đầu từ câu hỏi hẹp và quyết định sẽ đổi, rồi mới chọn cách làm.
- 01Viết câu hỏi và quyết định sẽ đổi, như “vì sao khách bỏ đơn ở bước giao hàng”.
- 02Tuyển 8 người mua trong 6 tháng qua, có cả người mua lần đầu; phỏng vấn mỗi người một giờ.
- 03Gửi khảo sát ngắn cho tệp khách rộng hơn để đo xem điều nghe được phổ biến tới đâu.
- 04Chép ghi chú ra từng tờ, gom theo ý giống nhau và đếm số người ở mỗi nhóm.
- 05Viết phát hiện xếp theo mức độ, mỗi phát hiện kèm một việc cần làm trên thiết kế.
Bạn đưa vào
- Danh sách khách từng mua
- Điều khách hay hỏi, hay phàn nàn
- Số liệu đang có về bước bỏ đơn
- Quyết định cần đưa ra
Phỏng vấn, khảo sát, gom nhómONMATE cùng doanh nghiệp
Bạn nhận lại
- Ghi chú gom nhóm, chân dung có nguồn, khảo sát và phát hiện xếp theo mức độ, kèm việc cần làm.
Tài liệu tham khảo:Nielsen Norman Group: phỏng vấn người dùng ↗Usability.gov: phỏng vấn người dùng ↗
03
CẦN CHUẨN BỊ GÌ
Cần chuẩn bị gì để nghiên cứu.
Cần danh sách người từng dùng thật và quyền liên hệ họ.
NGUYÊN TẮC
Kế hoạch nghiên cứu ghi: câu hỏi, cách làm, người tham gia, thời gian, quyết định sẽ đổi. Câu hỏi hẹp cho câu trả lời dùng được.
KẾ HOẠCH NGHIÊN CỨU · MẪU
docs.google.com/spreadsheets
nhathom-ke-hoach-nghien-cuuTệp Chỉnh sửa Xem Chèn Định dạng Dữ liệu
| A | B | |
|---|---|---|
| 1 | Mục | Nội dung |
| 2 | Câu hỏi cần trả lời | Vì sao khách bỏ đơn ở bước giao hàng trên điện thoại?1 |
| 3 | Cách làm | Phỏng vấn 1 giờ qua video và khảo sát ngắn 6 câu |
| 4 | Người tham gia | 8 người từng mua quà trong 6 tháng, 4 người mua lần đầu2 |
| 5 | Thời gian | 01–15/09/2026 (2 tuần) |
| 6 | Quyết định sẽ đổi | Có chuyển phí giao lên giỏ hàng và lưu địa chỉ hay không3 |
Kế hoạchLịch phỏng vấn
- 1Câu hỏi cần trả lời: về việc khách đang làm, không hỏi “khách thích gì”. Câu hẹp giúp phỏng vấn khỏi lan man.
- 2Người tham gia: 8 người từng mua quà trong 6 tháng, 4 người mua lần đầu. Họ kể việc thật, không phải đoán.
- 3Quyết định sẽ đổi: ghi trước nghiên cứu này quyết định điều gì. Không có quyết định thì tài liệu nằm yên.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Một câu hỏi hẹp
Về việc khách đang làmNgười từng dùng thật
Không hỏi người chưa từng muaGiới hạn thời gian
Ghi ngày bắt đầu, kết thúcGhi quyết định sẽ đổi
Biết nghiên cứu để làm gìBộ tài nguyên4 mục
- BảngDanh sách khách từng muaKhách mua 6 tháng qua, số lần mua.
- KháchNgười sẽ mời kháchNgười của cửa hàng gửi lời mời.
- TệpSố liệu bỏ đơn đang cóBáo cáo phễu hoặc nhận xét chăm sóc.
- KháchĐiều kiện phỏng vấnGặp hay video, thời lượng, quà cảm ơn.
Xem đủ thông số và ghi chú
- Nguồn
- Phỏng vấn người dùng Nielsen Norman Group mô tả phỏng vấn người dùng là trò chuyện trực tiếp với từng người để hiểu thói quen, nhu cầu và cách họ nghĩ. Usability.gov có hướng dẫn chuẩn bị và tiến hành phỏng vấn.
- Nguồn
- Gom ghi chú và chân dung Nielsen Norman Group mô tả biểu đồ gom nhóm (affinity diagram) là cách sắp ghi chú rời thành nhóm theo ý giống nhau để thấy chủ đề chung. Usability.gov mô tả chân dung người dùng là nhân vật hư cấu dựng từ dữ liệu nghiên cứu.
- Lưu ý
- Số người phỏng vấn nhỏ chưa đại diện cho mọi khách Phỏng vấn 8 người cho biết vì sao, không cho biết tỷ lệ chính xác. Muốn biết bao nhiêu khách gặp thì dùng thêm khảo sát hoặc số liệu bán hàng, và ghi rõ mẫu nhỏ trong báo cáo.
Tài liệu tham khảo:Usability.gov: phỏng vấn người dùng ↗Nielsen Norman Group: phỏng vấn người dùng ↗
04
ĐO ĐIỀU GÌ
Đo bằng số người gặp từng phát hiện.
Phát hiện đáng tin khi nhiều người cùng gặp và có việc đi kèm. Trang Phát hiện xếp theo mức độ.
CẦN ĐO
Xem số người và mức độ; ít người nhưng khách bỏ đơn vẫn đáng ưu tiên.
PHÁT HIỆN · SỐ MẪU
thietke.nhathom.example/phat-hien
XXưởng thiết kếĐặt quà tặng (mẫu)M
Phỏng vấnKhảo sátPhát hiệnCấu trúcKết quả
Phát hiện
Từ 8 phỏng vấn và 124 khảo sátBuổi phỏng vấn8Phát hiện5Mức Cao2Đã có việc cần làm5/5
Xếp theo mức độ
| Mã | Phát hiện | Số người | Mức | Việc cần làm |
|---|---|---|---|---|
| F1 | Phí giao hàng chỉ hiện ở bước cuối | 6/81 | Cao | Đưa phí giao lên giỏ hàng3 |
| F2 | Phải nhập lại địa chỉ khi mua lần hai | 5/8 | Cao2 | Lưu địa chỉ cho khách có tài khoản |
| F3 | Không có chỗ ghi lời nhắn cho người nhận | 5/8 | Vừa | Thêm ô lời nhắn ở trang hộp quà |
| F4 | Chữ mô tả nhạt, khó đọc ngoài nắng | 3/8 | Vừa | Đổi màu chữ phụ cho đủ tương phản |
| F5 | Không rõ đã thêm vào giỏ hay chưa | 2/8 | Thấp | Thêm thông báo sau khi thêm |
- 1F1 có 6 trên 8 người gặp: càng nhiều người gặp, xếp càng cao. Bàn bằng số liệu, không bằng ai nói to.
- 2Mức Cao: F2 nhiều người gặp và làm khách phải làm lại việc. Mức độ cân giữa số người gặp và hậu quả.
- 3Việc cần làm của F1: mỗi phát hiện kèm một việc cụ thể. Không có việc kèm theo thì báo cáo nằm yên.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Cách đọc số · số mẫu
| Chỉ số | Cho biết | Cần xem lại khi |
|---|---|---|
| Số người gặp | Từ nửa số người trở lên cho phát hiện ưu tiên | Chỉ một hai người nói, chưa kiểm lại |
| Mức độ | Xếp theo hậu quả với việc đặt hàng | Mọi phát hiện đều xếp “Cao” |
| Việc cần làm | Mỗi phát hiện có một việc cụ thể | Phát hiện không có việc đi kèm |
| Nguồn | Có mã người nói và lời nguyên văn | Chỉ có kết luận mà không có lời khách |
CÁCH ĐỌC
Mở trang Phát hiện, xem bốn con số đầu, rồi đọc từng dòng theo mức độ.
Đọc tiếp
Với phát hiện Cao, mở lại ghi chú gốc để nghe đúng lời khách.
LƯU Ý
Phỏng vấn 8 người không đại diện mọi khách, nên số người gặp chỉ để xếp việc.
Đọc tiếp
Số trong hình là số mẫu.
Tài liệu tham khảo:Nielsen Norman Group: gom ghi chú theo nhóm ↗Nielsen Norman Group: cần bao nhiêu người thử ↗
05
CÁCH TRIỂN KHAI
Cách xử lý các tình huống thường gặp.
Số trong bảng là số mẫu để minh họa cách đọc, không phải kết quả dự kiến.
Chưa từng nghiên cứu, mọi thứ dựa trên ý kiến
Bắt đầu nhỏ với một câu hỏi và vài buổi phỏng vấn, chưa cần khảo sát lớn.
- Chọn một luồng quan trọng
- Phỏng vấn 5–8 người
- Gom nhóm ghi chú
- Viết 3–5 phát hiện
Có số liệu nhưng chưa biết vì sao
Giữ số liệu hiện có, thêm phỏng vấn để hiểu lý do phía sau con số.
- Chọn bước khách bỏ nhiều nhất
- Mời người vừa bỏ bước đó
- Hỏi về lần mua gần nhất
- Đối chiếu với số liệu
Đã có phát hiện từ lâu mà chưa ai làm
Rà lại phát hiện cũ, gắn việc cụ thể và người phụ trách cho từng cái.
- Liệt kê phát hiện cũ
- Kiểm lại còn đúng không
- Gắn việc và người làm
- Xếp vào kế hoạch thiết kế
DẤU HIỆU
Phỏng vấn xong mà không biết nên làm gì
| Chỉ số | Giá trị |
|---|---|
| Câu hỏi | Khách thích gì ở cửa hàng? |
| Số nhóm ghi chú | Hơn 15 nhóm nhỏ |
| Việc cần làm | Viết lại: vì sao khách bỏ đơn ở bước giao hàng |
Câu hỏi nghiên cứu quá rộng nên ghi chú rời rạc.
Đọc tiếp
Quay lại viết một câu hỏi hẹp và quyết định sẽ đổi.
DẤU HIỆU
Mọi người cãi nhau về điều khách muốn
| Chỉ số | Giá trị |
|---|---|
| Căn cứ hiện tại | “Tôi nghĩ khách thích rẻ” |
| Số người đã nghe | 0 |
| Việc cần làm | Gom ghi chú và đếm số người ở mỗi nhóm |
Ý kiến cá nhân đang thay cho dữ liệu.
Đọc tiếp
Đưa lời khách nguyên văn và số người vào bảng gom nhóm.
DẤU HIỆU
Báo cáo nghiên cứu nằm yên
| Chỉ số | Giá trị |
|---|---|
| Phát hiện | F1: 6 trên 8 người gặp |
| Việc đi kèm | Chưa có |
| Việc cần làm | Giao cho người thiết kế: đưa phí giao lên giỏ hàng |
Phát hiện chưa gắn với việc cụ thể và người làm.
Đọc tiếp
Mỗi phát hiện cần một việc và một hạn.
Tài liệu tham khảo:Nielsen Norman Group: phỏng vấn người dùng ↗Usability.gov: chân dung người dùng ↗
06
TRƯỚC KHI BẮT ĐẦU
Danh sách kiểm tra.
Đánh dấu từng mục để xem mức sẵn sàng. Trạng thái chỉ lưu trên trình duyệt của bạn.
0%SẴN SÀNG
Tài liệu tham khảo:Usability.gov: phỏng vấn người dùng ↗Nielsen Norman Group: gom ghi chú theo nhóm ↗
Nội dung của thẻ Vẽ đường đi của kháchChọn thẻ khác
01
TRÔNG NHƯ THẾ NÀO
Luồng và cấu trúc trông như thế nào.
Ba màn hình: luồng đặt hàng, phân nhóm thẻ và cây menu đề xuất. Bấm từng mục để xem.
Luồng đặt hộp quà, có nhánh lỗi
Luồng đi từ quảng cáo qua 6 màn hình tới xác nhận đơn, rẽ ở “Đã có tài khoản” và “Thanh toán thành công”. Phí giao hiện ở giỏ hàng.
Đọc tiếp
Vẽ cả nhánh lỗi: thanh toán không thành công thì báo lỗi, cho thử lại. Nhánh lỗi không vẽ thì không ai thiết kế, khách lại gặp đúng chỗ đó.
MÔ PHỎNG · SỐ MẪU
thietke.nhathom.example/luong/dat-hop-qua
XXưởng thiết kếĐặt quà tặng (mẫu)M
Luồng đặt hộp quà trên điện thoại
6 màn hình · 2 câu hỏi rẽ nhánhVào từ quảng cáo→Trang hộp quà→Chọn hộp và lời nhắn→Giỏ hàng, thấy phí giao2
Đã có tài khoản?1
Có → Chọn địa chỉ đã lưuKhông → Nhập địa chỉ mới
→Thanh toánThanh toán thành công?
Có → Xác nhận đơnKhông → Báo lỗi, thử lại ↺ Thanh toán3
- 1Hình thoi “Đã có tài khoản?”: chỗ luồng rẽ nhánh. Khách cũ chọn địa chỉ đã lưu, khách mới nhập địa chỉ.
- 2Bước giỏ hàng thấy phí giao: phí giao chuyển lên đây, không để tới bước cuối. Đây là chỗ sửa cho F1.
- 3Nhánh thanh toán không thành công: báo lỗi, cho thử lại, không bắt làm lại từ đầu. Nhánh lỗi cũng phải vẽ.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Phân nhóm thẻ: khách tự xếp nội dung
14 người xếp 12 thẻ. Nến hoa nhài 180 g: 13 trên 14 người xếp vào Nến thơm. Quà tặng doanh nghiệp: chỉ 6 trên 14 xếp vào Quà tặng.
Đọc tiếp
Thẻ bị chia nhiều nhóm cho thấy tên hoặc vị trí chưa hợp khách. Nhóm Hỗ trợ do chính khách đặt tên, nên dùng đúng chữ đó cho menu.
MÔ PHỎNG · SỐ MẪU
thietke.nhathom.example/cau-truc/phan-nhom-the
XXưởng thiết kếĐặt quà tặng (mẫu)M
Phỏng vấnKhảo sátPhát hiệnCấu trúcKết quả
Phân nhóm thẻ
14 người · 12 thẻNgười tham gia14Thẻ12Nhóm khách tự đặt4
Hiển thị 6 trong 12 thẻ
| Thẻ | Nhóm xếp nhiều nhất | Cùng xếp |
|---|---|---|
| Nến hoa nhài 180 g | Nến thơm | 13/141 |
| Hộp quà 3 nến | Quà tặng | 12/14 |
| Phí giao hàng | Hỗ trợ3 | 11/14 |
| Chính sách đổi trả | Hỗ trợ | 12/14 |
| Quà tặng doanh nghiệp | Quà tặng | 6/142 |
| Câu chuyện thương hiệu | Về chúng tôi | 9/14 |
- 1Nến hoa nhài 180 g: 13 trên 14 người xếp vào Nến thơm. Ai cũng xếp giống nhau thì giữ nguyên tên nhóm.
- 2Quà tặng doanh nghiệp: chỉ 6 trên 14 người xếp vào Quà tặng, còn lại rải nhiều nhóm. Tên mục chưa hợp khách.
- 3Nhóm “Hỗ trợ”: khách tự đặt tên cho thẻ Phí giao hàng và Đổi trả. Tên mục menu dùng đúng chữ khách gọi.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Cây menu 4 mục chính, hai cấp
Menu gồm Nến thơm, Quà tặng, Hỗ trợ và Câu chuyện. Quà tặng có thêm mục Thiệp và lời nhắn, còn Quà doanh nghiệp được đổi tên.
Đọc tiếp
Mỗi mục mới hoặc đổi tên nên có một phát hiện làm lý do. Menu ít cấp, ít mục dễ nhìn, nhưng đừng gom thứ khách không coi cùng loại.
MÔ PHỎNG · SỐ MẪU
thietke.nhathom.example/cau-truc/menu
XXưởng thiết kếĐặt quà tặng (mẫu)M
Cấu trúc menu đề xuất
4 mục chính · 2 cấpTrang chủ
- Nến thơm
- Theo mùi hương
- Theo kích cỡ
- Nến lẻ
- Quà tặng1
- Hộp quà
- Quà doanh nghiệp Đổi tên
- Thiệp và lời nhắn Mới2
- Hỗ trợ3
- Giao hàng
- Đổi trả
- Liên hệ
- Câu chuyện
- 1Mục “Quà tặng”: gom Hộp quà, Quà doanh nghiệp, Thiệp và lời nhắn vào một chỗ. Khách tìm quà thấy ngay một mục.
- 2Mục mới “Thiệp và lời nhắn”: thêm vì 5 người phỏng vấn muốn ghi lời chúc. Mục mới nào cũng cần lý do.
- 3Mục “Hỗ trợ”: gom Giao hàng, Đổi trả, Liên hệ như khách đã xếp. Dù vậy giỏ hàng vẫn hiện phí giao sẵn.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Tài liệu tham khảo:Nielsen Norman Group: hành trình và luồng người dùng ↗Nielsen Norman Group: phân nhóm thẻ ↗
02
LÀM NHƯ THẾ NÀO
Năm bước vẽ luồng và cấu trúc.
Đi từ việc khách muốn làm tới màn hình, rồi tới menu; thử với khách thật.
- 01Chọn một việc chính của khách, như đặt hộp quà trên điện thoại, và ghi điểm bắt đầu, điểm xong.
- 02Vẽ luồng từng bước, ghi rõ chỗ rẽ nhánh và nhánh lỗi, rồi đặt mã cho từng màn hình.
- 03Cho 14 người phân nhóm các thẻ nội dung để xem khách tự gom thế nào.
- 04Dựng cây menu theo cách khách đã xếp, đổi tên mục nào bị chia đôi.
- 05Thử cây menu với 36 người, sửa mục nhiều người tìm sai hoặc phải quay lại.
Bạn đưa vào
- Việc chính khách muốn làm
- Danh sách nội dung và trang hiện có
- Khách tham gia xếp thẻ
- Đường đi khách đang đi, nếu có
Luồng, phân nhóm, cây thông tinONMATE cùng doanh nghiệp
Bạn nhận lại
- Sơ đồ luồng có nhánh lỗi, danh sách màn hình có mã, cây menu đã thử và kết quả cây thông tin.
Tài liệu tham khảo:Nielsen Norman Group: hành trình và luồng người dùng ↗Nielsen Norman Group: thử cây thông tin ↗
03
CẦN CHUẨN BỊ GÌ
Cần chuẩn bị gì để vẽ luồng và cấu trúc.
Cần danh sách nội dung hiện có và việc chính khách muốn làm.
NGUYÊN TẮC
Danh sách màn hình, mỗi dòng một màn: mã, tên, đi tới từ đâu, đi tiếp tới đâu. Cột Đi tiếp tới ghi cả đường lỗi.
DANH SÁCH MÀN HÌNH · MẪU
docs.google.com/spreadsheets
nhathom-danh-sach-man-hinhTệp Chỉnh sửa Xem Chèn Định dạng Dữ liệu
| A | B | C | D | E | |
|---|---|---|---|---|---|
| 1 | Mã | Màn hình | Đi tới từ | Đi tiếp tới | Ghi chú |
| 2 | M01 | Trang hộp quà | Quảng cáo, menu | M02 | Có phí giao ngay dưới giá1 |
| 3 | M02 | Chọn hộp và lời nhắn | M01 | M03 | Ô lời nhắn tối đa 120 ký tự |
| 4 | M03 | Giỏ hàng | M02 | M04 | Hiện phí giao và tổng tiền |
| 5 | M04 | Địa chỉ giao | M03 | M05 | Có nút dùng địa chỉ đã lưu |
| 6 | M05 | Thanh toán | M04 | M06; lỗi thì ở lại M052 | Báo lỗi bằng chữ, cho thử lại |
| 7 | M06 | Xác nhận đơn | M05 | —3 | Gửi tin xác nhận cho khách |
Màn hìnhLuồng
- 1M01 có phí giao ngay dưới giá: màn đầu đã trả lời câu khách hay hỏi. Mỗi màn ghi một việc phải làm.
- 2M05 đi tiếp tới M06, lỗi thì ở lại M05: không đẩy khách về đầu. Ghi cả đường lỗi, không chỉ đường thuận.
- 3M06 không đi tiếp tới đâu: là điểm cuối của luồng. Mỗi luồng cần điểm cuối rõ để đo được khách làm xong.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Mỗi dòng một màn hình
Có mã như M01, M02Ghi đường đi và đường lỗi
Đến từ đâu, đi tiếp đâuCó điểm cuối
Biết khi nào khách làm xongGhi việc của màn hình
Một câu cho mỗi mànBộ tài nguyên4 mục
- TệpTrang và menu hiện tạiĐịa chỉ trang và thứ tự menu.
- KháchViệc chính khách muốn làmBa đến năm việc, hay gặp xếp trước.
- BảngDanh sách nội dung cần xếpChục mục nội dung, tên như khách gọi.
- KháchNgười tham gia phân nhómKhách từng mua; số lượng bàn cùng ONMATE.
Xem đủ thông số và ghi chú
- Nguồn
- Luồng người dùng Nielsen Norman Group phân biệt luồng người dùng, là đường đi của một người để làm xong một việc cụ thể, với hành trình người dùng, rộng hơn và trải qua nhiều kênh theo thời gian.
- Nguồn
- Phân nhóm thẻ và thử cây thông tin Nielsen Norman Group mô tả phân nhóm thẻ là để người tham gia tự xếp nội dung thành nhóm, còn thử cây thông tin kiểm xem người ta tìm đúng mục trong một cấu trúc chỉ có chữ, chưa có giao diện.
- Lưu ý
- Cấu trúc hợp với khách khác cấu trúc hợp với công ty Tên mục theo cách nội bộ gọi, như tên phòng ban, thường khó với khách. Kết quả phân nhóm thẻ có thể trái với sơ đồ tổ chức, và khi đó ưu tiên cách khách nghĩ.
Tài liệu tham khảo:Nielsen Norman Group: hành trình và luồng người dùng ↗Usability.gov: phân nhóm thẻ ↗
04
ĐO ĐIỀU GÌ
Đo bằng tỷ lệ tìm đúng và đi thẳng.
Thử cây thông tin cho hai số: bao nhiêu người tìm đúng mục, bao nhiêu người đi thẳng, không quay lại.
CẦN ĐO
Tìm đúng nhưng phải quay lại nhiều là dấu hiệu tên mục khiến người ta đoán.
THỬ CÂY THÔNG TIN · SỐ MẪU
thietke.nhathom.example/cau-truc/thu-cay-thong-tin
XXưởng thiết kếĐặt quà tặng (mẫu)M
Phỏng vấnKhảo sátPhát hiệnCấu trúcKết quả
Thử cây thông tin
36 người · 4 nhiệm vụTìm đúng82%118/144 lượtĐi thẳng, không quay lại63%91/144 lượtNhiệm vụ cần sửa1
Theo nhiệm vụ
| Nhiệm vụ | Tìm đúng | Đi thẳng | Trung vị |
|---|---|---|---|
| Tìm hộp quà 3 nến | 33/36 · 92%1 | 28/36 · 78% | 9 giây |
| Tìm phí giao hàng | 30/36 · 83% | 19/36 · 53%2 | 14 giây |
| Tìm cách đổi trả | 34/36 · 94% | 32/36 · 89% | 8 giây |
| Đặt quà cho doanh nghiệp | 21/36 · 58%3 | 12/36 · 33% | 22 giây |
- 1Tìm hộp quà 3 nến: 33 trên 36 người tìm đúng, 92%. Đa số đúng ngay lần đầu là cây thông tin tốt.
- 2Tìm phí giao hàng: đúng 83% nhưng chỉ 53% đi thẳng, còn lại phải quay lại. Đi vòng tức tên mục chưa rõ.
- 3Đặt quà cho doanh nghiệp: chỉ 21 trên 36 người tìm đúng, 58%. Cần đổi tên mục trước khi làm giao diện.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Cách đọc số · số mẫu
| Chỉ số | Cho biết | Cần xem lại khi |
|---|---|---|
| Tìm đúng | Đa số người tìm đúng mục ngay lần đầu | Một nhiệm vụ có nhiều người chọn sai cùng một chỗ |
| Đi thẳng | Gần bằng số tìm đúng | Thấp hơn nhiều so với số tìm đúng |
| Thời gian trung vị | Ngắn và đều giữa các nhiệm vụ | Một nhiệm vụ lâu hơn hẳn |
| Mục bị chọn nhầm | Phân tán, không dồn vào một mục | Dồn vào một mục có tên gần nghĩa |
CÁCH ĐỌC
Mở kết quả thử, xem tỷ lệ tìm đúng và đi thẳng, rồi đọc theo nhiệm vụ để tìm nhiệm vụ yếu nhất và mục hay bị chọn nhầm.
LƯU Ý
Cây thông tin chỉ kiểm tên mục và cách xếp, chưa kiểm giao diện hay chữ trên trang.
Đọc tiếp
Số trong hình là số mẫu.
Tài liệu tham khảo:Nielsen Norman Group: thử cây thông tin ↗Nielsen Norman Group: phân nhóm thẻ ↗
05
CÁCH TRIỂN KHAI
Cách xử lý các tình huống thường gặp.
Số trong bảng là số mẫu để minh họa cách đọc, không phải kết quả dự kiến.
Menu mọc dài theo năm tháng
Bắt đầu bằng phân nhóm thẻ để xếp lại từ đầu theo cách khách nghĩ.
- Liệt kê mọi trang đang có
- Cho khách phân nhóm thẻ
- Dựng cây menu mới
- Thử cây thông tin
Menu ổn nhưng khách vẫn không tìm thấy một mục
Chỉ thử cây thông tin với nhiệm vụ nhắm vào mục đó, rồi đổi tên.
- Chọn mục khó tìm
- Viết nhiệm vụ tìm mục đó
- Thử cây thông tin
- Đổi tên hoặc chuyển chỗ
Luồng đặt hàng dài, khách bỏ giữa chừng
Vẽ luồng hiện tại, đánh dấu chỗ bỏ nhiều nhất rồi rút gọn.
- Vẽ luồng hiện tại
- Đánh dấu chỗ bỏ nhiều
- Gộp hoặc bỏ bước thừa
- Vẽ luồng mới có nhánh lỗi
DẤU HIỆU
Khách bỏ ở bước cuối vì thấy phí giao
| Chỉ số | Giá trị |
|---|---|
| Chỗ hiện phí giao | Bước thanh toán |
| Số người nhắc tới | 6 trên 8 |
| Việc cần làm | Hiện phí giao ngay ở giỏ hàng |
Thông tin quan trọng xuất hiện quá muộn trong luồng.
Đọc tiếp
Đưa lên sớm hơn.
DẤU HIỆU
Một mục menu có tên mà khách không hiểu
| Chỉ số | Giá trị |
|---|---|
| Tên mục | Quà tặng doanh nghiệp |
| Số người xếp đúng | 6 trên 14 |
| Việc cần làm | Thử tên khác ở lần thử cây thông tin tới |
Tên theo cách nội bộ gọi.
Đọc tiếp
Dùng chữ khách đã dùng khi phân nhóm.
DẤU HIỆU
Thanh toán lỗi và khách phải làm lại từ đầu
| Chỉ số | Giá trị |
|---|---|
| Nhánh khi thanh toán lỗi | Chưa vẽ |
| Màn hình bị ảnh hưởng | M05 |
| Việc cần làm | Báo lỗi bằng chữ và cho thử lại ngay tại M05 |
Luồng chưa có nhánh lỗi.
Đọc tiếp
Vẽ đường quay lại và giữ dữ liệu khách đã nhập.
Tài liệu tham khảo:Nielsen Norman Group: phân nhóm thẻ ↗Nielsen Norman Group: thử cây thông tin ↗
06
TRƯỚC KHI BẮT ĐẦU
Danh sách kiểm tra.
Đánh dấu từng mục để xem mức sẵn sàng. Trạng thái chỉ lưu trên trình duyệt của bạn.
0%SẴN SÀNG
Tài liệu tham khảo:Nielsen Norman Group: thử cây thông tin ↗Usability.gov: phân nhóm thẻ ↗
Nội dung của thẻ Bàn chỗ đặt trước màu sắcChọn thẻ khác
01
TRÔNG NHƯ THẾ NÀO
Khung dây trông như thế nào.
Ba màn hình: trang chọn hộp, ba màn nối tiếp và lưới khoảng cách. Bấm từng mục để xem.
Khung dây trang chọn hộp và lời nhắn
Màn M02 khung 390 × 844 có ảnh, tên, giá, chọn hộp, ô lời nhắn, dòng giao hàng, nút Thêm vào giỏ. Ô xám, chữ thật, chưa có màu.
Đọc tiếp
Ô lời nhắn nằm dưới lựa chọn hộp vì khách nghĩ tới lời chúc lúc chọn hộp. Bàn vị trí lúc này rẻ hơn sửa khi giao diện đã xong.
MÔ PHỎNG · SỐ MẪU
thietke.nhathom.example/khung-day/chon-hop
XXưởng thiết kếĐặt quà tặng (mẫu)M
Khung dây: chọn hộp và lời nhắn
M02 · điện thoại 390 × 844Lớp
- Chọn hộp và lời nhắn
- Ảnh sản phẩm
- Tên và giá
- Chọn hộp
- Lời nhắn
- Nút chân trang
☰▢
1
Hộp quà 3 nến390.000₫
3 nến6 nến
Lời nhắn cho người nhận2
Giao từ 30.000₫ · nhận trong 2–3 ngày
Thêm vào giỏ3
- Khung
- 390 × 844
- Lưới
- 4 cột
- Lề
- 16
- Ghi chú
- Chưa có màu
- 1Khung ảnh sản phẩm: ô xám có dấu chéo, chưa dùng ảnh thật. Khung dây chỉ bàn vị trí và thứ tự.
- 2Ô lời nhắn cho người nhận: thêm theo F3, đặt ngay dưới lựa chọn hộp. Khách nghĩ tới lời chúc lúc chọn hộp.
- 3Nút “Thêm vào giỏ” dính chân màn hình: luôn trong tầm ngón cái dù trang dài. Chốt vị trí nút trước khi vẽ.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Giỏ hàng, địa chỉ, thanh toán cạnh nhau
Giỏ hàng hiện phí giao ngay, màn địa chỉ có nút Dùng địa chỉ đã lưu, nút Đặt hàng ghi tổng tiền. Mã M03–M05 khớp danh sách màn.
Đọc tiếp
Đặt ba màn hình cạnh nhau để thấy luồng liền mạch: thông tin xuất hiện đúng lúc, nút chính ở cùng chỗ và cùng kiểu trong cả ba.
MÔ PHỎNG · SỐ MẪUM03 · Giỏ hàng Tiếp tụcM04 · Địa chỉ giao M05 · Thanh toán
thietke.nhathom.example/khung-day/gio-dia-chi-thanh-toan
XXưởng thiết kếĐặt quà tặng (mẫu)M
Khung dây: giỏ hàng, địa chỉ, thanh toán
M03 · M04 · M05Giỏ hàng (1)
Hộp quà 3 nến390.000₫Lời nhắn: Chúc Lan một mùa thơm
Phí giao1từ 30.000₫
Tổng420.000₫
Địa chỉ giao
Dùng địa chỉ đã lưu2Họ tênSố điện thoạiĐịa chỉTỉnh/ThànhTiếp tụcThanh toán
Chuyển khoản
Tiền mặt khi nhận
Thẻ
Giao tới: Quận 3 (mẫu)
Đặt hàng · 420.000₫3- 1Dòng phí giao ở giỏ hàng: hiện trước khi nhập địa chỉ. Cách sửa F1: biết tổng tiền sớm thì ít bỏ đơn.
- 2Nút “Dùng địa chỉ đã lưu” đặt trên các ô nhập: bấm một lần là xong, bớt gõ. Cách sửa F2.
- 3Nút Đặt hàng ghi cả tổng tiền: khách thấy sắp trả bao nhiêu ngay trên nút. Nút rõ việc thì ít bấm nhầm.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Lưới 4 cột và thang khoảng cách
Lưới 4 cột, lề 16, khoảng cột 12 phủ lên màn 390. Khoảng cách chỉ dùng 4, 8, 12, 16, 24, 32; nút cao 48.
Đọc tiếp
Có lưới và thang số, thiết kế và web chọn giống nhau mà không cần đo. Nút cao 48 vượt mức tối thiểu 24 × 24 của WCAG 2.2.
MÔ PHỎNG · SỐ MẪU
thietke.nhathom.example/khung-day/luoi
XXưởng thiết kếĐặt quà tặng (mẫu)M
Lưới và khoảng cách
Điện thoại 3901
Hộp quà 3 nến
Thêm vào giỏ3Lưới
4 cột · lề 16 · khoảng cột 12
Thang khoảng cách2
4812162432
Nút
Cao 48 · bo góc 8 · rộng theo lưới
- 1Lớp lưới 4 cột: cột xanh phủ lên màn hình điện thoại 390. Canh theo cột thì các màn trông đều, không lệch.
- 2Thang khoảng cách 4, 8, 12, 16, 24, 32: chỉ dùng số trong thang. Ít số thì khỏi đo từng chỗ.
- 3Nút cao 48: lớn hơn mức tối thiểu 24 × 24 của WCAG 2.2. Khách hay bấm bằng một tay nên chọn lớn.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Tài liệu tham khảo:Usability.gov: khung dây ↗web.dev: thiết kế đáp ứng cơ bản ↗
02
LÀM NHƯ THẾ NÀO
Năm bước dựng khung dây.
Nét thô, nội dung thật. Chưa chọn màu, chưa chọn ảnh, để bàn đúng chỗ.
- 01Lấy danh sách màn hình và phát hiện nghiên cứu, ghi mỗi màn hình phải giúp khách làm việc gì.
- 02Viết nội dung thật cho từng phần tử và giới hạn ký tự, thay vì dùng chữ giả.
- 03Vẽ khung dây trên điện thoại trước, dùng lưới 4 cột và thang khoảng cách cố định.
- 04Đặt các khung cạnh nhau theo luồng và kiểm xem thông tin có xuất hiện đúng lúc không.
- 05Cho người xem 5 giây rồi hỏi họ nhớ gì, sửa chỗ chưa rõ trước khi thiết kế hoàn chỉnh.
Bạn đưa vào
- Danh sách màn hình và luồng
- Nội dung thật, chữ khách thường dùng
- Phát hiện nghiên cứu cần xử lý
- Ảnh và logo, nếu đã có
Khung dây, lưới, nội dung thậtONMATE cùng doanh nghiệp
Bạn nhận lại
- Khung dây từng màn hình, bảng nội dung có giới hạn ký tự, lưới, thang khoảng cách, kết quả thử 5 giây.
Tài liệu tham khảo:Usability.gov: khung dây ↗Usability.gov: kiểm thử khả dụng ↗
03
CẦN CHUẨN BỊ GÌ
Cần chuẩn bị gì để dựng khung dây.
Cần chữ thật cho từng màn hình và điều kiện giao hàng đang áp dụng.
NGUYÊN TẮC
Mỗi phần tử một dòng: tên, chữ thật, giới hạn ký tự, cách xử lý chữ dài. Chữ giả làm trang gọn rồi vỡ khi gặp tên dài.
BẢNG NỘI DUNG · MẪU
docs.google.com/spreadsheets
nhathom-noi-dung-man-hinhTệp Chỉnh sửa Xem Chèn Định dạng Dữ liệu
| A | B | C | D | |
|---|---|---|---|---|
| 1 | Phần tử | Nội dung thật | Giới hạn | Khi quá dài |
| 2 | Tên sản phẩm | Hộp quà 3 nến1 | 40 ký tự | Xuống 2 dòng |
| 3 | Giá | 390.000₫ | 12 ký tự | Không xuống dòng |
| 4 | Lời nhắn (ô nhập) | Chúc Lan một mùa thơm | 120 ký tự2 | Hiện bộ đếm còn lại |
| 5 | Dòng giao hàng | Giao từ 30.000₫ · nhận trong 2–3 ngày | 60 ký tự | Cắt bớt, bấm để xem đủ3 |
| 6 | Nút chính | Thêm vào giỏ | 20 ký tự | Không cắt chữ |
M02 Chọn hộpM03 Giỏ hàng
- 1Nội dung thật “Hộp quà 3 nến”: dùng chữ thật thay “Tiêu đề ở đây”. Chữ giả làm khung dây đẹp hơn thật.
- 2Giới hạn 120 ký tự cho lời nhắn: ghi trước để thiết kế chừa đủ chỗ, người làm web đặt đúng giới hạn.
- 3Dòng giao hàng quá dài: cắt bớt, bấm để xem đủ. Quy định trước cách xử lý chữ dài, màn hình khỏi vỡ.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Chữ thật, không chữ giả
Tên, giá, lời nhắn thậtGiới hạn ký tự
Dùng chung thiết kế và mãCách xử lý chữ dài
Xuống dòng, cắt hoặc xem đủĐiện thoại trước
Rồi mới nới ra máy tínhBộ tài nguyên4 mục
- TệpChữ đang dùng trên websiteTên sản phẩm, mô tả, giao hàng.
- BảngSản phẩm có tên dài nhấtVài tên dài, vài tên ngắn, để thử.
ẢnhẢnh sản phẩm tiêu biểuVài ảnh để biết tỷ lệ ảnh.- KháchĐiều kiện giao hàng hiện hànhPhí giao, thời gian giao, vùng giao.
Xem đủ thông số và ghi chú
- Nguồn
- Khung dây Usability.gov mô tả khung dây là bản vẽ đơn giản về bố cục trang, để bàn nội dung và vị trí mà chưa sa vào màu sắc hay chi tiết đồ họa.
- Nguồn
- Thiết kế đáp ứng và vùng bấm web.dev trình bày thiết kế đáp ứng cơ bản để một trang hiển thị tốt trên nhiều cỡ màn hình. WCAG 2.2 đặt mức tối thiểu 24 × 24 điểm ảnh CSS cho vùng bấm, có một số ngoại lệ.
- Lưu ý
- Thử 5 giây đo ấn tượng đầu, không đo việc làm được Người xem chỉ nhìn 5 giây rồi trả lời nên chỉ cho biết trang có nói rõ mình bán gì và nút chính ở đâu. Việc làm được hay không phải thử bằng nhiệm vụ, ở bước thử bản mẫu.
Tài liệu tham khảo:Usability.gov: khung dây ↗web.dev: thiết kế đáp ứng cơ bản ↗
04
ĐO ĐIỀU GÌ
Đo bằng thử 5 giây.
Cho người xem khung dây 5 giây rồi hỏi vài câu ngắn. Số câu đúng cho biết thông điệp chính rõ chưa.
CẦN ĐO
Đọc từng câu hỏi riêng: rõ bán gì chưa chắc rõ giao tận nơi.
THỬ 5 GIÂY · SỐ MẪU
thietke.nhathom.example/cau-truc/thu-5-giay
XXưởng thiết kếĐặt quà tặng (mẫu)M
Phỏng vấnKhảo sátPhát hiệnCấu trúcKết quả
Thử 5 giây: trang hộp quà
30 người · xem 5 giây rồi trả lờiNgười tham gia30Thời gian xem5 giâyCâu hỏi3
Người xem nhớ gì
| Câu hỏi | Trả lời đúng | Điều người xem nhớ |
|---|---|---|
| Trang này bán gì? | 24/30 · 80%1 | “Nến thơm làm quà” 18 · “Nến thơm” 6 |
| Nút chính để làm gì? | 27/30 · 90%2 | “Thêm vào giỏ” 27 |
| Có giao tận nơi không? | 11/30 · 37%3 | “Không nhớ” 19 |
- 1Trang này bán gì: 24 trên 30 người đúng (80%), nói “nến thơm làm quà”. Hiểu sau 5 giây là tiêu đề đạt.
- 2Nút chính: 27 trên 30 người nói đúng, 90%. Nút nổi bật thì khách biết bước tiếp theo mà không phải tìm.
- 3Giao tận nơi: chỉ 11 trên 30 người nhớ, 19 người không nhớ. Thông tin này đang quá nhỏ, cần đưa lên gần giá.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Cách đọc số · số mẫu
| Chỉ số | Cho biết | Cần xem lại khi |
|---|---|---|
| Trang này bán gì | Đa số trả lời đúng | Nhiều người trả lời chung chung hoặc sai |
| Nút chính để làm gì | Gần như mọi người nói đúng | Nhiều người không nhớ hoặc nói nhầm |
| Thông tin quan trọng | Từ một nửa số người trở lên nhớ | Rất ít người nhớ |
| Câu trả lời tự do | Không có chỗ hiểu sai lặp lại | Nhiều người cùng hiểu sai một chỗ |
CÁCH ĐỌC
Mở kết quả thử 5 giây, xem số người tham gia và thời gian xem, rồi đọc từng câu hỏi để tìm điều người xem nhớ ít nhất.
LƯU Ý
Nhớ trong 5 giây khác với dùng được.
Đọc tiếp
Hỏi mọi người cùng câu hỏi. Số trong hình là số mẫu.
Tài liệu tham khảo:Usability.gov: kiểm thử khả dụng ↗Nielsen Norman Group: nhập môn khả dụng ↗
05
CÁCH TRIỂN KHAI
Cách xử lý các tình huống thường gặp.
Số trong bảng là số mẫu để minh họa cách đọc, không phải kết quả dự kiến.
Trang điện thoại chật và khó đọc
Dựng lại khung dây từ việc khách làm nhiều nhất, bỏ bớt thứ phụ.
- Chọn việc chính của trang
- Bỏ hoặc dời thứ phụ
- Dựng khung dây điện thoại
- Thử 5 giây
Mỗi người hình dung một bố cục khác
Vẽ nhanh vài phương án thô rồi chọn bằng thử với khách, không bằng biểu quyết.
- Vẽ 2–3 phương án
- Thử 5 giây từng phương án
- So kết quả
- Chọn phương án rõ nhất
Đã có thiết kế đẹp nhưng nội dung sai
Quay về khung dây để sửa nội dung và thứ tự rồi mới tô màu lại.
- Rút khung dây từ bản đẹp
- Thay chữ giả bằng chữ thật
- Sửa thứ tự thông tin
- Tô màu lại
DẤU HIỆU
Thiết kế đẹp nhưng chữ vỡ khi gặp tên dài
| Chỉ số | Giá trị |
|---|---|
| Chữ dùng trong khung dây | Tiêu đề ở đây |
| Tên dài nhất thật | Hộp quà 6 nến hương nhài và gỗ đàn hương |
| Việc cần làm | Thử lại với tên dài và đặt quy tắc xuống dòng |
Khung dây dùng chữ giả nên chưa gặp trường hợp thật.
Đọc tiếp
Thử lại bằng tên sản phẩm dài nhất.
DẤU HIỆU
Khách không nhớ thông tin giao hàng
| Chỉ số | Giá trị |
|---|---|
| Vị trí dòng giao hàng | Chữ nhỏ, dưới nút |
| Số người nhớ | 11 trên 30 |
| Việc cần làm | Đưa lên ngay dưới giá rồi thử 5 giây lại |
Thông tin quan trọng đặt nhỏ và xa giá.
Đọc tiếp
Đưa lên gần giá và đủ lớn.
DẤU HIỆU
Các màn hình ghép lại trông lệch nhau
| Chỉ số | Giá trị |
|---|---|
| Khoảng cách đang dùng | 5, 9, 14, 22 lẫn lộn |
| Thang chuẩn | 4, 8, 12, 16, 24, 32 |
| Việc cần làm | Đổi mọi khoảng cách về số trong thang |
Mỗi màn hình vẽ lề và khoảng cách khác nhau.
Đọc tiếp
Dùng chung một lưới và một thang khoảng cách.
Tài liệu tham khảo:Usability.gov: khung dây ↗web.dev: thiết kế đáp ứng cơ bản ↗
06
TRƯỚC KHI BẮT ĐẦU
Danh sách kiểm tra.
Đánh dấu từng mục để xem mức sẵn sàng. Trạng thái chỉ lưu trên trình duyệt của bạn.
0%SẴN SÀNG
Tài liệu tham khảo:W3C WCAG 2.2: kích thước vùng bấm ↗web.dev: thiết kế đáp ứng cơ bản ↗
Nội dung của thẻ Làm một lần, dùng mọi nơiChọn thẻ khác
01
TRÔNG NHƯ THẾ NÀO
Trạng thái và hệ thống thiết kế trông như thế nào.
Ba màn hình: trạng thái nút, ô nhập và màn hình giỏ hàng. Bấm từng mục để xem.
Nút chính, nút phụ: 6 trạng thái
Mỗi nút có 6 trạng thái: mặc định, di chuột, đang bấm, focus, vô hiệu, đang tải. Nút cao 48, bo góc 8, chữ 16/24, viền focus dày 3 px.
Đọc tiếp
Đang tải chặn bấm hai lần nên khách không vô tình đặt hai đơn. Focus là chỗ người dùng bàn phím dựa vào, nên không bỏ khi làm đẹp.
MÔ PHỎNG · SỐ MẪUĐặt hàngMặc định Đặt hàngDi chuột Đặt hàngĐang bấm Đặt hàngFocus1 Đặt hàngVô hiệu2 Đang xử lýĐang tải3 Xem giỏ hàngMặc định Xem giỏ hàngDi chuột Xem giỏ hàngĐang bấm Xem giỏ hàngFocus Xem giỏ hàngVô hiệu Đang xử lýĐang tải
thietke.nhathom.example/he-thong/nut
XXưởng thiết kếĐặt quà tặng (mẫu)M
Thành phần: Nút
Phiên bản 1.2 · 6 trạng thái · 2 kiểuNút chính
Nút phụ
Cao 48 · bo góc 8 · chữ 16/24 · viền focus 3 px, cách nút 2 px
- 1Trạng thái Focus: viền xanh dày 3 px quanh nút. Người dùng bàn phím dựa vào viền này để biết mình đang ở đâu.
- 2Trạng thái Vô hiệu: nền xám, chữ nhạt nhưng vẫn đọc được tên nút. Nút bị khóa cần có lý do ở gần.
- 3Trạng thái Đang tải: có vòng xoay và chữ “Đang xử lý”, không bấm thêm được. Chặn bấm đúp, khỏi đặt hai đơn.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Ô số điện thoại: 5 trạng thái
Ô số điện thoại có 5 dạng: trống, đang nhập, lỗi, đúng, vô hiệu. Dạng lỗi báo rõ cần đủ 10 chữ số, kèm ví dụ, ngay dưới ô.
Đọc tiếp
Lời báo lỗi nói cần gì, có ví dụ thì khách tự sửa được. Đừng chỉ báo lỗi bằng màu viền: người mù màu sẽ không thấy.
MÔ PHỎNG · SỐ MẪU
thietke.nhathom.example/he-thong/o-nhap
XXưởng thiết kếĐặt quà tặng (mẫu)M
Thành phần: Ô nhập
Số điện thoại · 5 trạng tháiSố điện thoại · trốngVí dụ: 0901234567Chỉ dùng để shipper gọi khi giao
Số điện thoại · đang nhập09012Bàn phím số tự bật trên điện thoại1
Số điện thoại · lỗi090123Số điện thoại cần đủ 10 chữ số. Ví dụ: 09012345672
Số điện thoại · đúng0901234567Đã nhận số điện thoại3
Họ tên · vô hiệuNguyễn Thu MaiLấy từ tài khoản, sửa ở trang Hồ sơ
- 1Ô đang nhập: viền đổi màu, bàn phím số tự bật trên điện thoại. Đúng bàn phím thì khách gõ nhanh, ít sai.
- 2Thông báo lỗi: nói rõ cần gì (đủ 10 chữ số) kèm ví dụ, hiện ngay dưới ô, không chỉ đổi màu viền.
- 3Ô nhập đúng: có dấu tích và dòng xác nhận. Khách biết có thể sang ô kế tiếp, không phải đoán.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Giỏ hàng: tải, trống, lỗi, có hàng
M03 có 4 trạng thái. Đang tải hiện khung chờ xám, trống có nút “Xem hộp quà”, lỗi mạng báo hàng đã chọn vẫn được giữ, có nút “Thử lại”.
Đọc tiếp
Ba trạng thái đầu thường bị bỏ sót khi thiết kế chỉ vẽ trường hợp có hàng. Chúng cũng là những lúc khách dễ lo hoặc bỏ đi nhất.
MÔ PHỎNG · SỐ MẪUĐang tải1 Trống2 Lỗi mạng3 Có hàng
thietke.nhathom.example/he-thong/trang-thai-man-hinh
XXưởng thiết kếĐặt quà tặng (mẫu)M
Trạng thái màn hình: Giỏ hàng
M03 · 4 trạng tháiGiỏ hàng
Giỏ hàng
Giỏ hàng đang trốngHộp quà 3 nến đang được nhiều khách chọn.Xem hộp quà
Giỏ hàng
Chưa tải được giỏ hàngKiểm tra kết nối mạng rồi thử lại. Hàng bạn chọn vẫn được giữ.Thử lại
Giỏ hàng (1)
Hộp quà 3 nến390.000₫
Tổng420.000₫
Tiếp tục- 1Màn hình đang tải: khung chờ xám đúng hình dạng nội dung sẽ hiện. Trang không nhảy, khách biết vẫn đang chạy.
- 2Màn hình trống: nói thẳng “Giỏ hàng đang trống”, có nút “Xem hộp quà”. Không có việc làm tiếp là ngõ cụt.
- 3Màn hình lỗi mạng: nói chuyện gì xảy ra, hàng đã chọn vẫn giữ, có nút “Thử lại”. Khách bớt lo mất hàng.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Tài liệu tham khảo:Nielsen Norman Group: hệ thống thiết kế ↗Nielsen Norman Group: màn hình trống ↗
02
LÀM NHƯ THẾ NÀO
Năm bước làm hệ thống thiết kế.
Bắt đầu từ thành phần lặp lại nhiều nhất, không cần làm cả hệ thống ngay.
- 01Rà màn hình hiện có, liệt kê thành phần lặp lại: nút, ô nhập, thẻ sản phẩm, thông báo lỗi.
- 02Thiết kế mỗi thành phần một lần, đủ trạng thái, rồi ghi kích thước và cách dùng.
- 03Đặt tên màu, cỡ chữ, khoảng cách, bo góc thành mã thiết kế, đo tương phản ngay cạnh mã màu.
- 04Thiết kế trạng thái của cả màn hình ở những nơi quan trọng: đang tải, trống và lỗi.
- 05Rà lại các màn hình, đổi bản tự chế về bản chung và đếm tỷ lệ dùng bản chung.
Bạn đưa vào
- Ảnh các màn hình hiện tại
- Màu, chữ và logo của thương hiệu
- Thư viện thành phần đang dùng, nếu có
- Các tình huống lỗi khách hay gặp
Thành phần, mã thiết kế, trạng tháiONMATE cùng doanh nghiệp
Bạn nhận lại
- Bộ thành phần đủ trạng thái, bảng mã đã đo tương phản, trạng thái màn hình, bảng rà soát bản chung.
Tài liệu tham khảo:Nielsen Norman Group: hệ thống thiết kế ↗Design Tokens Community Group: mã thiết kế ↗
03
CẦN CHUẨN BỊ GÌ
Cần chuẩn bị gì để làm hệ thống thiết kế.
Cần ảnh các màn hình đang chạy và bộ nhận diện thương hiệu.
NGUYÊN TẮC
Mỗi dòng một cặp tên và giá trị, kèm chỗ dùng và kết quả đo. Màu có tên thay mã rải rác: đổi một nơi, cả website đổi.
MÃ THIẾT KẾ · MẪU
docs.google.com/spreadsheets
nhathom-ma-thiet-keTệp Chỉnh sửa Xem Chèn Định dạng Dữ liệu
| A | B | C | D | |
|---|---|---|---|---|
| 1 | Tên | Giá trị | Dùng cho | Kiểm tra |
| 2 | màu/chính | #7A4A211 | Nút chính, liên kết | 7,42:1 trên trắng |
| 3 | màu/chữ-phụ | #6B5D4A | Chữ mô tả, giờ giao | 6,38:1 trên trắng2 |
| 4 | màu/lỗi | #C0392B | Viền và chữ báo lỗi | 5,44:1 trên trắng |
| 5 | chữ/thân | 16/24 | Đoạn chữ chính | Không nhỏ hơn 16 |
| 6 | khoảng/md | 16 | Lề màn hình | Thuộc thang 4–32 |
| 7 | bo/nút | 8 | Nút, ô nhập3 | Dùng chung cho 2 thành phần |
Mã thiết kếLịch sử
- 1màu/chính #7A4A21: một giá trị có tên, dùng cho nút và liên kết. Đổi tại đây là đổi mọi nơi dùng.
- 2Cột Kiểm tra 6,38:1: tương phản đo sẵn cạnh mã màu. Màu nào chưa đạt 4,5:1 bị loại trước khi vào thiết kế.
- 3bo/nút dùng cho cả nút và ô nhập: cùng giá trị nên đứng cạnh nhau trông khớp. Ít giá trị, dùng lại nhiều.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Tên theo việc dùng
Như màu/chính, bo/nútĐo tương phản ngay
Cạnh mỗi mã màuÍt giá trị, dùng nhiều
Thang khoảng cách cố địnhĐủ trạng thái
Focus, lỗi, vô hiệu, đang tảiBộ tài nguyên4 mục
- ẢnhẢnh các màn hình đang chạyTrang chính trên điện thoại, cả trang lỗi.
- TệpBộ nhận diện thương hiệuLogo, màu chính, phông chữ, cách dùng.
- KháchNgười làm web, nhà cung cấpNgười sẽ nhập mã thiết kế vào trang.
- KháchCác tình huống lỗi hay gặpNhập sai số, mất mạng giữa chừng.
Xem đủ thông số và ghi chú
- Nguồn
- Hệ thống thiết kế Nielsen Norman Group mô tả hệ thống thiết kế là bộ thành phần dùng lại cùng hướng dẫn cách dùng, giúp giảm làm trùng lặp và giữ giao diện nhất quán trên nhiều trang.
- Nguồn
- Màn hình trống, khung chờ và mã thiết kế Nielsen Norman Group có hướng dẫn thiết kế màn hình trống (cho biết tình trạng và có việc để làm tiếp) và khung chờ khi tải. Design Tokens Community Group mô tả mã thiết kế là cặp tên và giá trị dùng chung giữa công cụ.
- Lưu ý
- Hệ thống nhỏ mà được dùng tốt hơn hệ thống lớn không ai dùng Bộ thành phần quá nhiều thì người làm web thấy khó tìm và quay lại tự chế. Bắt đầu với những thành phần lặp lại nhiều nhất và thêm khi có nhu cầu thật.
Tài liệu tham khảo:Design Tokens Community Group: mã thiết kế ↗W3C WCAG 2.2: tương phản tối thiểu ↗
04
ĐO ĐIỀU GÌ
Đo bằng tỷ lệ dùng bản chung.
Bảng rà soát đếm chỗ dùng mỗi thành phần và chỗ còn dùng bản tự chế. Cho biết gộp cái nào trước.
CẦN ĐO
Đọc từng thành phần: thông báo lỗi có thể tụt xa dù tổng thể ổn.
RÀ SOÁT THÀNH PHẦN · SỐ MẪU
thietke.nhathom.example/he-thong/ra-soat
XXưởng thiết kếĐặt quà tặng (mẫu)M
Phỏng vấnKhảo sátPhát hiệnCấu trúcKết quả
Rà soát thành phần dùng chung
6 màn hình · M01–M06Chỗ dùng63Dùng bản chung87%55/63Bản tự chế8
Theo thành phần
| Thành phần | Số chỗ dùng | Bản chung | Tự chế | Việc cần làm |
|---|---|---|---|---|
| Nút | 24 | 22 | 2 | Đổi 2 nút tự chế sang bản chung |
| Ô nhập | 18 | 16 | 2 | Đổi 2 ô tự chế, giữ nhãn và lỗi |
| Thẻ sản phẩm | 12 | 12 | 03 | Giữ nguyên |
| Thông báo lỗi | 9 | 5 | 41 | Gộp 4 kiểu thông báo thành 12 |
- 1Thông báo lỗi có 4 bản tự chế: 4 trên 9 chỗ dùng kiểu riêng. Mỗi bản riêng phải sửa riêng.
- 2Việc cần làm: gộp 4 kiểu thành 1. Có việc cụ thể đi kèm thì bảng rà soát mới dẫn tới thay đổi.
- 3Thẻ sản phẩm 12 trên 12 là bản chung: giữ nguyên. Thành phần đã thống nhất là mẫu cho phần còn lại.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Cách đọc số · số mẫu
| Chỉ số | Cho biết | Cần xem lại khi |
|---|---|---|
| Dùng bản chung | Phần lớn chỗ dùng đã dùng bản chung | Nhiều thành phần mỗi nơi một kiểu |
| Bản tự chế | Ít, và có việc đổi đi kèm | Nhiều mà chưa có việc nào |
| Thành phần tụt xa | Không có thành phần nào kém hẳn | Một thành phần có nhiều kiểu riêng, như thông báo lỗi |
| Việc cần làm | Mỗi dòng đều có việc cụ thể | Chỉ có số, không có việc |
CÁCH ĐỌC
Mở bảng rà soát, xem ba con số đầu, rồi đọc từng thành phần.
Đọc tiếp
Tìm thành phần nhiều bản tự chế nhất và đọc việc cần làm ở dòng đó.
LƯU Ý
Tỷ lệ dùng bản chung chỉ là tỷ lệ chỗ dùng, không phải điểm chất lượng.
Đọc tiếp
Số trong hình là số mẫu.
Tài liệu tham khảo:Nielsen Norman Group: hệ thống thiết kế ↗Design Tokens Community Group: mã thiết kế ↗
05
CÁCH TRIỂN KHAI
Cách xử lý các tình huống thường gặp.
Số trong bảng là số mẫu để minh họa cách đọc, không phải kết quả dự kiến.
Mỗi màn hình một kiểu nút và một kiểu lỗi
Bắt đầu bằng rà soát để biết đang có bao nhiêu bản tự chế, rồi gộp.
- Rà các màn hình
- Đếm bản chung và bản tự chế
- Gộp thành phần tụt xa
- Đo lại tỷ lệ
Chưa ai thiết kế màn hình trống, tải và lỗi
Chọn ba màn hình quan trọng nhất và thiết kế bốn trạng thái cho chúng.
- Chọn 3 màn hình quan trọng
- Vẽ đang tải, trống, lỗi
- Viết chữ cho từng trạng thái
- Giao cho người làm web
Đã có bộ thành phần nhưng không ai dùng
Tìm lý do: thiếu thành phần, khó tìm hay tên khó hiểu, rồi sửa đúng chỗ đó.
- Hỏi người làm web vì sao tự chế
- Thêm thành phần còn thiếu
- Đặt lại tên cho dễ tìm
- Rà soát lại sau 1 tháng
DẤU HIỆU
Đổi màu thương hiệu mà phải sửa từng nơi
| Chỉ số | Giá trị |
|---|---|
| Cách ghi màu hiện tại | #7A4A21 viết rải rác ở nhiều nơi |
| Mã thiết kế | màu/chính |
| Việc cần làm | Thay mọi chỗ bằng màu/chính |
Màu đang viết cứng ở từng chỗ.
Đọc tiếp
Gom thành mã thiết kế có tên rồi dùng lại.
DẤU HIỆU
Lỗi nhập liệu mỗi nơi báo một kiểu
| Chỉ số | Giá trị |
|---|---|
| Số kiểu thông báo lỗi | 4 kiểu trên 9 chỗ |
| Bản chung | 1 kiểu: biểu tượng, chữ và ví dụ |
| Việc cần làm | Gộp 4 kiểu thành 1 |
Có nhiều bản tự chế của thông báo lỗi.
Đọc tiếp
Gộp về một bản có chữ nói cần gì.
DẤU HIỆU
Khách thấy trang trắng khi mạng chậm
| Chỉ số | Giá trị |
|---|---|
| Trạng thái đang tải | Chưa thiết kế |
| Màn hình ảnh hưởng | M03 Giỏ hàng |
| Việc cần làm | Thêm khung chờ và thử khi mạng chậm |
Chưa có trạng thái đang tải.
Đọc tiếp
Dùng khung chờ đúng hình dạng nội dung.
Tài liệu tham khảo:Nielsen Norman Group: màn hình khung chờ ↗Nielsen Norman Group: màn hình trống ↗
06
TRƯỚC KHI BẮT ĐẦU
Danh sách kiểm tra.
Đánh dấu từng mục để xem mức sẵn sàng. Trạng thái chỉ lưu trên trình duyệt của bạn.
0%SẴN SÀNG
Tài liệu tham khảo:web.dev: kiểm tra dữ liệu biểu mẫu ↗W3C WAI: kiểm tra dữ liệu biểu mẫu ↗W3C WCAG 2.2: nhận biết lỗi nhập liệu ↗W3C WCAG 2.2: thấy rõ phần đang chọn ↗
Nội dung của thẻ Cho người dùng thử trướcChọn thẻ khác
01
TRÔNG NHƯ THẾ NÀO
Bản mẫu và bàn giao trông như thế nào.
Ba màn hình: sơ đồ bản mẫu, màn bấm thử, bảng bàn giao. Bấm từng mục để xem.
Bản mẫu đặt hộp quà gồm 6 màn
M01 đến M06 nối bằng mũi tên có nhãn việc người dùng bấm, như “Thêm vào giỏ”, “Đặt hàng”. Cờ “Bắt đầu” ở M01; nhánh lỗi thanh toán chưa nối.
Đọc tiếp
Ghi rõ phần chưa nối để người thử biết chỗ nào chưa bấm được. Bản mẫu mới nối 5 trên 6 liên kết thì chưa nên mời người dùng thử.
MÔ PHỎNG · SỐ MẪUBắt đầu1M01Trang hộp quà Chọn hộp→M02Chọn hộp, lời nhắn M03Giỏ hàng M04Địa chỉ giao M05Thanh toán M06Xác nhận đơn
thietke.nhathom.example/ban-mau/luong-dat-hang
XXưởng thiết kếĐặt quà tặng (mẫu)M
Bản mẫu: luồng đặt hộp quà
6 màn hình · 5 liên kết đã nốiNhánh lỗi M05 → báo lỗi, ở lại M05Chưa nối3
- 1Cờ “Bắt đầu”: điểm vào của bản mẫu là M01. Khi xem thử, người dùng luôn bắt đầu từ cùng một màn hình.
- 2Nhãn trên mũi tên “Thêm vào giỏ”: mỗi mũi tên ghi việc người dùng bấm để đi tiếp. Đọc nhãn là hiểu luồng.
- 3Nhánh lỗi thanh toán, chưa nối: bản mẫu mới nối 5 trên 6 liên kết. Người thử biết chỗ nào chưa bấm được.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
M03 Giỏ hàng: vùng bấm, tương tác
Vùng xanh trên nút “Tiếp tục” là chỗ bấm được. Khai báo bên phải: bấm thì tới M04, trượt trái 200 ms; vuốt từ mép trái để quay lại.
Đọc tiếp
Khai báo rõ giúp người làm web làm đúng, không phải đoán hiệu ứng. Chỉ vùng bấm mới có phản ứng nên người thử không lạc sang chỗ chưa làm.
MÔ PHỎNG · SỐ MẪU
thietke.nhathom.example/ban-mau/m03-gio-hang
XXưởng thiết kếĐặt quà tặng (mẫu)M
Bản mẫu: M03 Giỏ hàng
Xem thử trên điện thoạiGiỏ hàng (1)
Hộp quà 3 nến390.000₫
Phí giaotừ 30.000₫
Tổng420.000₫
Tiếp tục1Tương tác
- Khi
- Bấm nút “Tiếp tục”2
- Chuyển tới
- M04 Địa chỉ giao
- Hiệu ứng
- Trượt sang trái · 200 ms
- Quay lại
- Vuốt từ mép trái
Đã nối 5/6 liên kết3
- 1Vùng xanh trên nút “Tiếp tục”: chỗ người thử bấm được. Chỉ vùng này có phản ứng, khỏi bấm nhầm chỗ chưa làm.
- 2Dòng “Khi bấm”: khai báo việc xảy ra, chuyển tới M04 và trượt sang trái 200 ms. Người làm web khỏi phải đoán.
- 3Đã nối 5/6 liên kết: bộ đếm cho biết bản mẫu hoàn chỉnh tới đâu. Còn thiếu thì chưa mời người dùng thử.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Thông số nút “Thêm vào giỏ”
Nút rộng 358 và cao 48, chữ 16/24 đậm 600, nền màu/chính, bo góc theo bo/nút. Có kèm đoạn CSS dùng biến thay cho số cứng.
Đọc tiếp
Dùng tên mã thiết kế thay mã màu cứng, đổi một chỗ là đổi cả website. Người làm web chép gần như nguyên, kết quả trùng thiết kế.
MÔ PHỎNG · SỐ MẪU
thietke.nhathom.example/ban-giao/nut-them-vao-gio
XXưởng thiết kếĐặt quà tặng (mẫu)M
Bàn giao: nút “Thêm vào giỏ”
M02 · thành phần Nút chínhThêm vào giỏ
481
- Chữ
- 16/24 · đậm 600
- Nền
- #7A4A21màu/chính
- Bo góc
- 8bo/nút
Dùng mã thiết kế, không dùng số cứng2
.nut-chinh {
min-height: 48px;
border-radius: var(--bo-nut);
background: var(--mau-chinh);
color: #fff;
font: 600 16px/24px var(--chu-than);
}3- 1Số đo 358 × 48: rộng và cao của nút ở màn 390. Người làm web lấy đúng số, khỏi đo bằng mắt.
- 2Mã thiết kế “màu/chính” và “bo/nút”: tên chung cho màu và bo góc. Đổi một chỗ là đổi cả website.
- 3Đoạn mã CSS: lấy từ thông số bên trên, dùng biến thay cho số cứng. Chép gần như nguyên là trùng thiết kế.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Tài liệu tham khảo:Usability.gov: bản mẫu ↗Usability.gov: tiến hành thử khả dụng ↗
02
LÀM NHƯ THẾ NÀO
Năm bước làm bản mẫu và thử.
Bản mẫu chỉ cần đủ thật để làm nhiệm vụ. Thử sớm, ít người, rồi sửa.
- 01Chọn luồng cần thử, như đặt hộp quà từ M01 đến M06, rồi nối màn thành bản mẫu bấm được.
- 02Khai báo việc xảy ra khi bấm từng nút, kể cả nhánh lỗi, và kiểm số liên kết đã nối.
- 03Viết nhiệm vụ bằng việc khách muốn làm, mỗi nhiệm vụ có điều kiện xong và thời gian tối đa.
- 04Cho khoảng 6 người thử từng người một, ghi ai xong, ai vướng, rồi điền bảng SUS 10 câu.
- 05Sửa chỗ nhiều người vướng, thử lại với nhóm khác, rồi bàn giao số đo, mã thiết kế, mã mẫu.
Bạn đưa vào
- Thiết kế các màn hình đã xong
- Luồng và danh sách màn hình
- Người thử, khoảng 6 người
- Nhiệm vụ và điều kiện xong
Bản mẫu, nhiệm vụ, thử với người dùngONMATE cùng doanh nghiệp
Bạn nhận lại
- Bản mẫu bấm được, kịch bản thử, tỷ lệ xong và điểm SUS, danh sách vấn đề, bộ thông số bàn giao.
Tài liệu tham khảo:Usability.gov: bản mẫu ↗Usability.gov: tiến hành thử khả dụng ↗
03
CẦN CHUẨN BỊ GÌ
Cần chuẩn bị gì để thử bản mẫu.
Cần người thử thật và quyền ghi lại buổi thử.
NGUYÊN TẮC
Kịch bản thử: mã nhiệm vụ, việc cần làm, điều kiện xong, thời gian tối đa. Viết bằng việc khách muốn làm, như “Mua một hộp quà”.
KỊCH BẢN THỬ · MẪU
docs.google.com/spreadsheets
nhathom-kich-ban-thuTệp Chỉnh sửa Xem Chèn Định dạng Dữ liệu
| A | B | C | D | |
|---|---|---|---|---|
| 1 | Mã | Nhiệm vụ cho người thử | Xong khi | Thời gian tối đa |
| 2 | T1 | Mua một hộp quà 3 nến1 | Tới màn hình Giỏ hàng | 60 giây |
| 3 | T2 | Ghi lời chúc cho người nhận | Lời chúc hiện trong giỏ hàng | 90 giây |
| 4 | T3 | Nói cho tôi biết phí giao hàng | Nói đúng “từ 30.000₫”2 | 30 giây |
| 5 | T4 | Đặt hàng bằng chuyển khoản | Thấy màn hình xác nhận đơn | 120 giây3 |
Nhiệm vụNgười thử
- 1Nhiệm vụ T1: việc khách muốn làm, “Mua một hộp quà”, không phải tên nút. Chỉ sẵn đường thì không lộ chỗ vướng.
- 2Cột Xong khi: T3 chỉ tính xong khi người thử nói đúng phí giao. Ghi trước để ai chấm cũng giống nhau.
- 3Thời gian tối đa 120 giây: quá thì ghi chưa xong, cho đi tiếp. Buổi thử không kéo dài, có số để so.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Nhiệm vụ là việc khách muốn làm
Không nói tên nútĐiều kiện xong ghi trước
Để chấm giống nhauCó thời gian tối đa
Quá giờ ghi là chưa xongKhoảng 6 người mỗi vòng
Sửa rồi thử vòng sauBộ tài nguyên4 mục
- KháchNgười thửSáu người giống khách thật, đồng ý ghi.
- TệpThiết kế đã xongMàn hình và luồng muốn thử.
- BảngDanh sách việc muốn kiểmBa đến năm việc chính khách làm.
- KháchNgười quan sát buổi thửMột người ghi chép riêng.
Xem đủ thông số và ghi chú
- Nguồn
- Bản mẫu và thử khả dụng Usability.gov mô tả bản mẫu là mô hình của sản phẩm để thử sớm, từ bản vẽ tay tới bản bấm được, và có hướng dẫn tiến hành buổi thử từ khâu chuẩn bị đến ghi chú.
- Nguồn
- Thang điểm SUS và số người thử Usability.gov mô tả SUS là bảng 10 câu hỏi cho người thử, điểm trên 68 là trên mức trung bình. Nielsen Norman Group khuyên thử vòng nhỏ khoảng 5 người rồi sửa và thử lại.
- Lưu ý
- Điểm SUS tốt không thay cho việc xem người dùng vướng ở đâu Một điểm số tổng có thể che đi một nhiệm vụ nhiều người không làm được. Luôn đọc điểm cùng với tỷ lệ xong theo từng nhiệm vụ và ghi chú quan sát.
Tài liệu tham khảo:Usability.gov: tiến hành thử khả dụng ↗Usability.gov: thang điểm SUS ↗
04
ĐO ĐIỀU GÌ
Đo bằng tỷ lệ xong nhiệm vụ.
Buổi thử cho ba thứ: tỷ lệ xong, điểm SUS và vấn đề mới. Bảng theo nhiệm vụ cho thấy chỗ vướng.
CẦN ĐO
Đo bằng việc làm được, không bằng lời khen “dễ dùng”.
KẾT QUẢ THỬ · SỐ MẪU
thietke.nhathom.example/thu-nguoi-dung/ket-qua
XXưởng thiết kếĐặt quà tặng (mẫu)M
Phỏng vấnKhảo sátPhát hiệnCấu trúcKết quả
Thử với người dùng: bản mẫu
6 người · 4 nhiệm vụ · 12–14/09/2026Hoàn thành179%19/24 lượtĐiểm SUS278mức trung bình 68Vấn đề mới4
Ai làm xong nhiệm vụ nào
Nhiệm vụU1U2U3U4U5U6Xong
T1 Mua hộp quà6/6
T2 Ghi lời chúc5/6
T3 Nói phí giao3/63
T4 Chuyển khoản5/6
- 1Hoàn thành 79%: 19 trên 24 lượt làm xong nhiệm vụ. Đo lượt làm xong thay vì hỏi “bạn thấy dễ dùng không”.
- 2Điểm SUS 78: bảng hỏi 10 câu sau buổi thử, trên 68 là trên trung bình (Usability.gov). Dùng để so hai lần thử.
- 3Nhiệm vụ T3 chỉ 3/6 người xong: ba người không nói được phí giao dù đã ở giỏ hàng. Sửa trước lần sau.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Cách đọc số · số mẫu
| Chỉ số | Cho biết | Cần xem lại khi |
|---|---|---|
| Tỷ lệ lượt làm xong | Phần lớn lượt làm xong, không nhiệm vụ nào tụt hẳn | Một nhiệm vụ chỉ một nửa số người xong |
| Điểm SUS | Trên 68, và cao hơn lần thử trước | Dưới 68 hoặc thấp hơn lần trước |
| Nhiệm vụ yếu nhất | Có nguyên nhân và việc sửa kèm theo | Chưa ai xem lại buổi thử |
| Vấn đề mới | Ghi người gặp và việc cần sửa | Ghi chung chung, không biết ai gặp |
CÁCH ĐỌC
Mở kết quả thử, xem tỷ lệ xong và điểm SUS ở đầu trang, rồi đọc bảng theo nhiệm vụ để tìm dòng yếu nhất.
Đọc tiếp
Xem lại buổi thử đó.
LƯU Ý
Thử 6 người cho biết khách vướng ở đâu, không cho biết tỷ lệ chính xác.
Đọc tiếp
Số trong hình là số mẫu.
Tài liệu tham khảo:Usability.gov: thang điểm SUS ↗Usability.gov: kiểm thử khả dụng ↗
05
CÁCH TRIỂN KHAI
Cách xử lý các tình huống thường gặp.
Số trong bảng là số mẫu để minh họa cách đọc, không phải kết quả dự kiến.
Có thiết kế đẹp nhưng chưa ai thử
Dựng bản mẫu cho luồng quan trọng nhất và thử với vài người trước khi viết mã.
- Chọn luồng quan trọng nhất
- Nối bản mẫu
- Thử với 5–6 người
- Sửa chỗ nhiều người vướng
Đã thử một lần, còn vài chỗ vướng
Sửa các chỗ vướng rồi thử lại với nhóm mới, so cả điểm lẫn tỷ lệ xong.
- Xếp vấn đề theo mức độ
- Sửa thiết kế
- Thử với nhóm mới
- So kết quả hai lần
Người làm web làm ra khác thiết kế
Làm lại bàn giao với số đo, mã thiết kế và đoạn mã mẫu cho các thành phần chính.
- Chọn thành phần hay bị sai
- Ghi số đo và mã thiết kế
- Thêm đoạn mã mẫu
- So bản làm ra với thiết kế
DẤU HIỆU
Điểm SUS tốt nhưng khách vẫn bỏ đơn
| Chỉ số | Giá trị |
|---|---|
| Điểm SUS | 78, trên mức trung bình 68 |
| Nhiệm vụ T3 nói phí giao | 3 trên 6 người xong |
| Việc cần làm | Xem lại buổi thử T3 và sửa chỗ hiện phí giao |
Điểm tổng che nhiệm vụ yếu.
Đọc tiếp
Đọc theo nhiệm vụ, tập trung nhiệm vụ ít người xong nhất.
DẤU HIỆU
Bản mẫu bấm tới chỗ chưa làm
| Chỉ số | Giá trị |
|---|---|
| Liên kết đã nối | 5 trên 6 |
| Nhánh chưa nối | Thanh toán lỗi, ở lại M05 |
| Việc cần làm | Nối nhánh lỗi rồi mới mời người thử |
Có liên kết chưa nối nên người thử bị kẹt.
Đọc tiếp
Nối đủ hoặc ghi rõ phần chưa làm trước khi mời thử.
DẤU HIỆU
Nút làm ra có màu khác thiết kế
| Chỉ số | Giá trị |
|---|---|
| Màu trong mã | #B0722A |
| Màu theo thiết kế | màu/chính #7A4A21 |
| Việc cần làm | Dùng biến var(--mau-chinh) và kiểm tương phản lại |
Người làm web lấy màu bằng mắt.
Đọc tiếp
Bàn giao dùng mã thiết kế thay cho mã màu cứng.
Tài liệu tham khảo:Nielsen Norman Group: cần bao nhiêu người thử ↗Usability.gov: bản mẫu ↗
06
TRƯỚC KHI BẮT ĐẦU
Danh sách kiểm tra.
Đánh dấu từng mục để xem mức sẵn sàng. Trạng thái chỉ lưu trên trình duyệt của bạn.
0%SẴN SÀNG
Tài liệu tham khảo:Usability.gov: thang điểm SUS ↗Nielsen Norman Group: cần bao nhiêu người thử ↗
Nội dung của thẻ Ai cũng dùng đượcChọn thẻ khác
01
TRÔNG NHƯ THẾ NÀO
Kiểm tra tiếp cận trông như thế nào.
Ba màn hình: tương phản màu, thứ tự phím Tab và cây tiếp cận. Bấm từng mục để xem.
Cặp màu chữ trước và sau khi sửa
Chữ phụ cũ #A89B88 trên nền trắng chỉ đạt 2,72:1 nên chưa đạt, chữ mới #6B5D4A đạt 6,38:1. Chữ trên nút đổi từ 3,97:1 lên 7,42:1 với màu nền #7A4A21.
Đọc tiếp
Chữ thường cần từ 4,5:1 và chữ lớn cần từ 3:1 theo WCAG 2.2. Chỉ đổi mã màu mà không đổi bố cục nên sửa nhanh và ít rủi ro.
MÔ PHỎNG · SỐ MẪU
thietke.nhathom.example/tiep-can/tuong-phan
XXưởng thiết kếĐặt quà tặng (mẫu)M
Kiểm tra tương phản màu
WCAG 2.2 · mức AAChữ phụ trên nền trắng
Trước
Giao từ 30.000₫2,72:1Chưa đạt1
#A89B88 trên #FFFFFF
Sau
Giao từ 30.000₫6,38:1Đạt2
#6B5D4A trên #FFFFFF
Chữ trên nút
Trước
Thêm vào giỏ3,97:1Chưa đạt
#FFFFFF trên #B0722A
Sau
Thêm vào giỏ7,42:1Đạt
#FFFFFF trên #7A4A21
Chữ thường cần từ 4,5:1 · chữ lớn và biểu tượng cần từ 3:13
- 1Chữ phụ cũ 2,72:1: chưa đạt mức 4,5:1. Chữ nhạt khó đọc ngoài nắng, đúng điều 3 người phỏng vấn đã phàn nàn (F4).
- 2Chữ phụ mới 6,38:1: đạt. Chỉ đổi mã màu mà không đổi bố cục, nên sửa nhanh và ít rủi ro.
- 3Quy tắc ở chân: chữ thường cần từ 4,5:1, chữ lớn và biểu tượng từ 3:1 (WCAG 2.2). Mọi màn dùng một thước.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Thứ tự phím Tab ở màn địa chỉ
Phím Tab đi qua 6 phần tử từ trên xuống: Họ tên, Số điện thoại, Địa chỉ, Tỉnh/Thành, Ghi chú, Tiếp tục. Ô đang chọn có viền dày.
Đọc tiếp
Thứ tự Tab theo thứ tự đọc, không thì người dùng bàn phím bị lạc. Thử một lượt chỉ bằng bàn phím, bấm Enter để gửi, là cách kiểm nhanh.
MÔ PHỎNG · SỐ MẪU
thietke.nhathom.example/tiep-can/thu-tu-tab
XXưởng thiết kếĐặt quà tặng (mẫu)M
Thứ tự di chuyển bằng bàn phím
M04 Địa chỉ giao · phím Tab1
Họ tên1Nguyễn Thu Mai
2
Số điện thoại09012
3
Địa chỉ
4
Tỉnh/Thành
5
Ghi chú giao hàng
6Tiếp tục
Tab 2 lầnĐang ở: Số điện thoại2
Nút “Tiếp tục” bấm được bằng Enter3
- 1Số trong vòng tròn: thứ tự phím Tab qua các ô, từ trên xuống. Tab lệch thứ tự đọc thì người dùng lạc.
- 2Dòng “Đang ở: Số điện thoại” và viền dày quanh ô: luôn thấy mình đang ở đâu. WCAG 2.2 yêu cầu thấy rõ.
- 3Nút “Tiếp tục” bấm được bằng Enter: gửi biểu mẫu không cần chuột. Thử một lượt chỉ bằng bàn phím là kiểm nhanh.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Cây tiếp cận: điều trình đọc nghe
Quét trang hộp quà ra 6 phần tử. Ảnh thứ hai thiếu mô tả; nút giỏ hàng chỉ có biểu tượng, thiếu tên. Trình đọc chỉ nghe “hình ảnh”, “nút”.
Đọc tiếp
Nút không có tên là lỗi nghiêm trọng vì người dùng không biết bấm để làm gì. Mỗi lỗi kèm cách sửa, như đặt tên “Giỏ hàng, 1 sản phẩm”.
MÔ PHỎNG · SỐ MẪU
thietke.nhathom.example/tiep-can/cay-tiep-can
XXưởng thiết kếĐặt quà tặng (mẫu)M
Phỏng vấnKhảo sátPhát hiệnCấu trúcKết quả
Cây tiếp cận: M01 Trang hộp quà
Nội dung mà trình đọc màn hình sẽ đọc6 phần tử đã quét
| Vai trò | Tên truy cập |
|---|---|
heading · cấp 1 | Hộp quà tặng |
img | Hộp quà 3 nến màu kem, buộc nơ nâu |
img | (không có mô tả)1 |
link | Xem chi tiết hộp quà 6 nến |
button | Thêm vào giỏ |
button | (không có tên, chỉ có biểu tượng giỏ hàng)2 |
Gợi ý: đặt tên nút “Giỏ hàng, 1 sản phẩm” và mô tả ảnh thứ hai3
- 1Ảnh thứ hai thiếu mô tả: trình đọc màn hình chỉ đọc “hình ảnh”. Người khiếm thị không biết hộp quà nào.
- 2Nút giỏ hàng chỉ có biểu tượng: không có tên nên chỉ nghe “nút”. Lỗi nghiêm trọng, không biết bấm làm gì.
- 3Dòng gợi ý sửa: đặt tên nút “Giỏ hàng, 1 sản phẩm” và mô tả ảnh. Mỗi lỗi kèm cách sửa cụ thể.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Tài liệu tham khảo:W3C WCAG 2.2: tương phản tối thiểu ↗W3C WCAG 2.2: thứ tự di chuyển bằng bàn phím ↗
02
LÀM NHƯ THẾ NÀO
Năm bước kiểm tra tiếp cận.
Kết hợp công cụ quét và kiểm bằng tay. Công cụ chỉ thấy một phần lỗi.
- 01Chọn mức cần đạt là WCAG 2.2 mức AA, và lập tiêu chí áp dụng cho 6 màn hình.
- 02Đo tương phản cho mọi cặp chữ và nền trong bảng mã thiết kế, rồi đổi cặp chưa đạt.
- 03Thử từng màn hình chỉ bằng bàn phím: Tab đi hết, thấy rõ mình đang ở đâu, Enter gửi được.
- 04Quét cây tiếp cận tìm ảnh thiếu mô tả, nút không tên, rồi nghe thử bằng trình đọc màn hình.
- 05Ghi lỗi theo mức nghiêm trọng, kèm tiêu chí, màn hình bị và cách sửa; sửa xong rà lại.
Bạn đưa vào
- Thiết kế hoặc trang đang chạy
- Bảng mã thiết kế và màu đang dùng
- Danh sách màn hình cần kiểm
- Người dùng công nghệ hỗ trợ, nếu có thể mời
Tương phản, bàn phím, tên và mô tảONMATE cùng doanh nghiệp
Bạn nhận lại
- Bảng kiểm tra theo WCAG 2.2, danh sách lỗi có mức độ và cách sửa, bảng rà soát sau khi sửa.
Tài liệu tham khảo:W3C: WCAG 2.2 ↗W3C WAI: kiểm tra tiếp cận nhanh ↗
03
CẦN CHUẨN BỊ GÌ
Cần chuẩn bị gì để kiểm tra tiếp cận.
Cần bảng màu và quyền xem các màn hình cần kiểm.
NGUYÊN TẮC
Mỗi dòng một tiêu chí WCAG: số hiệu, mức, điều cần đạt, kết quả, màn hình lỗi. Dòng Cần sửa luôn ghi tên màn hình cần sửa.
KIỂM TRA TIẾP CẬN · MẪU
docs.google.com/spreadsheets
nhathom-kiem-tra-tiep-canTệp Chỉnh sửa Xem Chèn Định dạng Dữ liệu
| A | B | C | D | E | |
|---|---|---|---|---|---|
| 1 | Tiêu chí | Mức | Cần đạt | Kết quả | Màn hình lỗi |
| 2 | 1.1.1 Nội dung không phải chữ | A | Ảnh có mô tả thay thế | Cần sửa1 | M01 |
| 3 | 1.4.3 Tương phản tối thiểu | AA | Chữ đạt 4,5:1 | Đạt2 | — |
| 4 | 2.1.1 Bàn phím | A | Dùng được chỉ bằng bàn phím | Đạt | — |
| 5 | 2.4.7 Thấy rõ phần đang chọn | AA | Viền focus hiện rõ | Đạt | — |
| 6 | 2.5.8 Kích thước vùng bấm | AA | Tối thiểu 24 × 24 | Đạt | — |
| 7 | 3.3.1 Nhận biết lỗi | A | Lỗi nói bằng chữ | Đạt | — |
| 8 | 4.1.2 Tên, vai trò, giá trị | A | Nút có tên truy cập | Cần sửa3 | M01 |
WCAG 2.2Công cụ
- 11.1.1 Cần sửa: một ảnh sản phẩm ở M01 chưa có mô tả thay thế. Số hiệu WCAG giúp tra đúng yêu cầu.
- 21.4.3 Đạt: đổi màu chữ phụ, chữ đạt 4,5:1 ở cả 6 màn. Ghi “Đạt” để thấy việc sửa có tác dụng.
- 34.1.2 Cần sửa: nút giỏ hàng chỉ có biểu tượng, thiếu tên truy cập. Người dùng trình đọc không biết nút làm gì.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Mỗi dòng một tiêu chí
Có số hiệu WCAG 2.2Ghi mức nghiêm trọng
Lỗi nặng sửa trướcGhi màn hình bị lỗi
Để biết sửa ở đâuRà lại sau khi sửa
Ghi cả phần còn lạiBộ tài nguyên4 mục
- TệpBảng màu thương hiệuMã màu chữ, nền, nút, liên kết.
- ẢnhCác màn hình cần kiểmBản thiết kế hoặc địa chỉ trang.
- KháchNgười dùng công nghệ hỗ trợMột hai người dùng trình đọc màn hình.
- BảngPhản hồi về chữ khó đọcKhách phàn nàn chữ nhạt, nút khó bấm.
Xem đủ thông số và ghi chú
- Nguồn
- WCAG 2.2 W3C WCAG 2.2 đặt tương phản tối thiểu 4,5:1 cho chữ thường và 3:1 cho chữ lớn, yêu cầu dùng được bằng bàn phím, thấy rõ phần đang chọn, thứ tự di chuyển hợp lý và mỗi thành phần có tên, vai trò. Vùng bấm tối thiểu 24 × 24 điểm ảnh CSS, có một số ngoại lệ.
- Nguồn
- Mô tả ảnh và kiểm tra nhanh W3C WAI hướng dẫn viết mô tả cho ảnh tùy vai trò của ảnh trên trang, và có bộ kiểm tra nhanh để rà trang lần đầu. web.dev có bài học về khả năng tiếp cận.
- Lưu ý
- Công cụ quét và kiểm tra nhanh chỉ là bước đầu W3C WAI nói rõ kiểm tra nhanh không thay cho đánh giá đầy đủ. Đạt các tiêu chí này cũng không có nghĩa mọi người dùng được, nên vẫn cần thử với người dùng thật.
Tài liệu tham khảo:W3C: WCAG 2.2 ↗W3C WAI: mô tả hình ảnh ↗
04
ĐO ĐIỀU GÌ
Đo bằng lỗi còn lại sau mỗi lần sửa.
Bảng rà soát: lỗi nghiêm trọng, cảnh báo trước và sau sửa, theo màn hình. Số còn lại là việc chưa xong.
CẦN ĐO
Lỗi nghiêm trọng ở thanh toán nặng hơn nhiều cảnh báo nhỏ ở trang giới thiệu.
RÀ SOÁT TIẾP CẬN · SỐ MẪU
thietke.nhathom.example/tiep-can/ra-soat
XXưởng thiết kếĐặt quà tặng (mẫu)M
Phỏng vấnKhảo sátPhát hiệnCấu trúcKết quả
Rà soát tiếp cận: 6 màn hình
WCAG 2.2 · kiểm tra bằng công cụ và bằng tayTrước khi sửa6 · 9nghiêm trọng · cảnh báoCòn lại12 · 5nghiêm trọng · cảnh báoĐã sửa28
Theo màn hình (còn lại sau khi sửa)
| Màn hình | Nghiêm trọng | Cảnh báo | Đã sửa |
|---|---|---|---|
| M01 Trang hộp quà | 2 | 2 | 3 |
| M02 Chọn hộp, lời nhắn | 0 | 1 | 2 |
| M03 Giỏ hàng | 0 | 1 | 2 |
| M04 Địa chỉ giao | 0 | 1 | 1 |
| M05 Thanh toán | 0 | 0 | 0 |
| M06 Xác nhận đơn | 0 | 0 | 0 |
M05 và M06 không còn lỗi nào3
- 1Còn lại 2 · 5: sau lần sửa đầu còn 2 lỗi nghiêm trọng, 5 cảnh báo. Đó là việc đang dở.
- 2Đã sửa 8: tổng lỗi và cảnh báo giảm từ 15 xuống 7. Số đã sửa cho thấy tiến độ rà soát.
- 3M05 và M06 không còn lỗi: hai màn thanh toán và xác nhận đã sạch. Màn sạch cho khách thử ngay.
Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.
Cách đọc số · số mẫu
| Chỉ số | Cho biết | Cần xem lại khi |
|---|---|---|
| Lỗi nghiêm trọng còn lại | Về 0 ở các màn hình đặt hàng | Còn ở màn hình thanh toán |
| Cảnh báo còn lại | Giảm sau mỗi lần sửa, có người phụ trách | Giữ nguyên hoặc tăng |
| Số đã sửa | Có danh sách từng lỗi đã sửa | Chỉ có tổng số, không rõ lỗi nào |
| Màn hình đã sạch | Màn thanh toán và xác nhận không còn lỗi | Chưa rà lại sau khi sửa |
CÁCH ĐỌC
Mở bảng rà soát, xem ba con số đầu, rồi đọc từng màn để tìm màn còn lỗi nghiêm trọng.
Đọc tiếp
Tra số hiệu trong bảng tiêu chí.
LƯU Ý
Hết lỗi theo công cụ và theo bảng tiêu chí chưa có nghĩa mọi người dùng được.
Đọc tiếp
Số trong hình là số mẫu.
Tài liệu tham khảo:W3C WAI: kiểm tra tiếp cận nhanh ↗web.dev: học về khả năng tiếp cận ↗
05
CÁCH TRIỂN KHAI
Cách xử lý các tình huống thường gặp.
Số trong bảng là số mẫu để minh họa cách đọc, không phải kết quả dự kiến.
Chưa từng kiểm tiếp cận
Bắt đầu bằng kiểm tra nhanh trên các màn hình đặt hàng rồi mới mở rộng.
- Chọn 3 màn hình chính
- Quét bằng công cụ
- Thử bằng bàn phím
- Ghi lỗi và sửa
Khách phàn nàn chữ khó đọc
Đo tương phản cho mọi cặp màu trước, rồi đổi cặp chưa đạt.
- Liệt kê cặp màu chữ và nền
- Đo tương phản
- Đổi màu chưa đạt
- Cập nhật bảng mã thiết kế
Đã sửa một lần, muốn giữ chất lượng
Đưa kiểm tra tiếp cận vào quy trình bàn giao mỗi khi đổi thiết kế.
- Thêm tiêu chí vào danh sách kiểm
- Kiểm khi thiết kế xong
- Kiểm khi làm xong trang
- Rà soát định kỳ
DẤU HIỆU
Chữ phụ mờ khó đọc ngoài nắng
| Chỉ số | Giá trị |
|---|---|
| Chữ phụ hiện tại | #A89B88 trên trắng: 2,72:1 |
| Mức cần đạt | 4,5:1 cho chữ thường |
| Việc cần làm | Đổi sang #6B5D4A (6,38:1) |
Màu chữ chưa đạt tương phản tối thiểu.
Đọc tiếp
Đổi sang màu đậm hơn trong cùng tông.
DẤU HIỆU
Người dùng bàn phím không biết đang ở đâu
| Chỉ số | Giá trị |
|---|---|
| Viền focus | Đã bị tắt trong CSS |
| Mức cần đạt | Nhìn thấy rõ phần đang chọn |
| Việc cần làm | Hiện viền dày 3 px quanh phần đang chọn |
Viền focus bị tắt hoặc quá mờ.
Đọc tiếp
Hiện viền dày, tương phản rõ quanh phần đang chọn.
DẤU HIỆU
Trình đọc màn hình chỉ nghe “nút”
| Chỉ số | Giá trị |
|---|---|
| Tên truy cập của nút giỏ hàng | Chưa có |
| Màn hình bị lỗi | M01 Trang hộp quà |
| Việc cần làm | Đặt tên “Giỏ hàng, 1 sản phẩm” |
Nút chỉ có biểu tượng nên chưa có tên truy cập.
Đọc tiếp
Thêm tên mô tả việc nút làm.
Tài liệu tham khảo:W3C WCAG 2.2: tương phản tối thiểu ↗W3C WCAG 2.2: thấy rõ phần đang chọn ↗
06
TRƯỚC KHI BẮT ĐẦU
Danh sách kiểm tra.
Đánh dấu từng mục để xem mức sẵn sàng. Trạng thái chỉ lưu trên trình duyệt của bạn.
0%SẴN SÀNG
Tài liệu tham khảo:W3C WCAG 2.2: dùng được bằng bàn phím ↗W3C WCAG 2.2: tên, vai trò, giá trị ↗W3C WCAG 2.2: nội dung không phải chữ ↗W3C WCAG 2.2: kích thước vùng bấm ↗W3C WCAG 2.2: nhận biết lỗi nhập liệu ↗W3C: hướng dẫn mẫu thành phần giao diện (ARIA APG) ↗
NHỚ NHANH
Sáu phần việc, từ nghe người dùng đến kiểm tra tiếp cận.
Chọn một ô để quay lại đúng phần nội dung ở trên.
01
NĂM BƯỚC TRIỂN KHAI
ONMATE làm gì, và doanh nghiệp nhận lại được gì.
Mỗi bước kết thúc bằng một thứ xem được. Bấm một bước để xem việc làm và thứ được bàn giao.
01 · Hiểu
02 · Thiết kế
03 · Kiểm chứng
BƯỚC 01
Tác vụ & dữ liệu
Việc người dùng đến làm, chỗ họ bỏ.
Bàn giaoDanh sách ưu tiênBƯỚC 02
Luồng
Bước, nhánh rẽ, lỗi.
Bàn giaoSơ đồ luồngBƯỚC 03
Khung dây
Bố cục và nội dung từng màn.
Bàn giaoKhung dây duyệtBƯỚC 04
Bản mẫu
Giao diện và trạng thái, bấm được.
Bàn giaoBản mẫuBƯỚC 05
Thử người dùng
Vài người đúng nhóm, ghi vấn đề, sửa, thử lại.
Bàn giaoBáo cáo thửBƯỚC 06
Hệ thống giao diện
Thành phần, quy tắc, bàn giao.
Bàn giaoThư viện thành phầnTài liệu tham khảo:W3C: WCAG 2.2 ↗W3C WAI: hướng dẫn biểu mẫu ↗
02
CÂU HỎI THƯỜNG GẶP
Những câu hay được hỏi trước khi bắt đầu.
Chọn một chủ đề. Câu trả lời nói rõ cả điều làm được lẫn điều không ai bảo đảm được.
UI và UX khác nhau thế nào?
UX là người dùng đi qua các bước ra sao và có xong việc không; UI là từng màn hình trông và phản hồi thế nào.
Có cần thử người dùng không?
Nên có. Một vòng nhỏ với vài người đúng nhóm người dùng thường đã lộ ra các chỗ vướng lớn của luồng.
Mất bao lâu?
Tùy số tác vụ và vòng thử; lịch chốt sau khi có danh sách tác vụ ưu tiên.
Bàn giao cho lập trình viên thế nào?
Bản mẫu có trạng thái, thư viện thành phần và ghi chú hành vi từng thành phần.
Có làm lại toàn bộ giao diện không?
Không bắt buộc. Có thể chỉ làm lại luồng đang có vấn đề và chuẩn hóa thành phần dần.
Khả năng truy cập có cần không?
Có. WCAG 2.2 giúp nhiều người dùng hơn, kể cả người dùng trong điều kiện khó như nắng gắt, một tay.
Tài liệu tham khảo:W3C: WCAG 2.2 ↗
03
BẮT ĐẦU
Kể điều bạn cần, bắt đầu từ đây.
Chỉ cần họ tên và số điện thoại. Các mục còn lại bỏ trống cũng được.
Yêu cầu đã sẵn sàng
Yêu cầu chưa được gửi. Bạn có thể sao chép nội dung và gửi qua Messenger hoặc kênh liên hệ bên dưới để bắt đầu trao đổi.
- Họ và tên
- Số điện thoại
- Dịch vụ
- Điều cần trao đổi
- Ngân sách
CÓ THỂ CẦN THÊM