Checklist kiểm tra giao diện web, cẩm nang không thể thiếu cho doanh nghiệp

Để trang web của bạn đạt chất lượng tốt như kế hoạch đề ra, bạn cần theo dõi sát sao checklist test giao diện web trong giai đoạn thử nghiệm. Bởi lẽ, dựa trên danh sách kiểm tra là cách tốt nhất để kiểm soát chất lượng trang web của bạn.

Trong bài viết dưới đây, Chili sẽ giới thiệu đến bạn đọc các công việc cụ thể cần thực hiện khi kiểm tra giao diện website.

Bài viết liên quan:

Checklist kiểm tra giao diện web, cẩm nang không thể thiếu cho doanh nghiệp - 8 — Checklist kiểm tra giao diện web, cẩm nang không thể thiếu cho doanh nghiệp (Ảnh: Meganest)

Aesthetic check

Khi tạo checklist test giao diện web, bạn cần chú ý đến bố cục, hình thức trình bày văn bản và sự hài hòa giữa các yêu tố như màu sắc, cỡ chữ, phông chữ,… Dưới đây là một số lưu ý cụ thể đối với Aesthetic check:

Kiểm tra màu nền chung của toàn bộ màn hình.
Kiểm tra màu của các hộp văn bản.
Kiểm tra màu chữ, phông chữ, cỡ chữ của nhãn.
Kiểm tra sự căn chỉnh của các đối tượng hiển thị trên màn hình (nhãn, hộp văn bản, …).
Kiểm tra thông báo lỗi: nội dung, phông chữ, màu sắc, vị trí,…
Kiểm tra sự hiển thị của các giá trị đã được nhập trường văn bản.
Kiểm tra màu đường viền của hộp văn bản cả khi gõ và khi có thông báo lỗi.

Checklist kiểm tra giao diện web, cẩm nang không thể thiếu cho doanh nghiệp - 9 — Aesthetic check trong checklist test giao diện web (Ảnh: Pinterest)

Validation check

Đối với validation check trong thiết kế giao diện web, bạn cần chú ý các yêu cầu sau:

Loại dữ liệu:

varchar, nvarchar, ntext
int, tinyint, float
Kiểm tra độ dài tối đa
Chữ hoa / chữ thường
Kích thước đầy đủ / Kích thước nửa
Phân biệt các ký tự unicode

Các loại dữ liệu khác:

Các ký tự đặc biệt (& ^ & ^% $% ^)
Khoảng trống

Datetime:

Kiểm tra ngày hết hạn
Nhập từ
Kiểm tra định dạng
Kiểm tra các năm nhuận
Kiểm tra tháng khi nhập: 00 và 13
Kiểm tra ngày khi nhập: 00 và 32
Kiểm tra ngày 28, 29, 30 đối với tháng 2

Checklist kiểm tra giao diện web, cẩm nang không thể thiếu cho doanh nghiệp - 10 — Validation check trong checklist test giao diện web (Ảnh: Fred Pryor Seminars)

Navigation check
Đối với mục điều hướng trong checklist test giao diện web, bạn cần lưu ý 4 điều sau đây:
Các trang khác nhau có thể được truy cập từ menu hay không?
Có thể truy cập trang sau khi chọn từ menu hay không?
Kiểm tra tiêu điểm đánh dấu khi chọn mục trên menu.
Kiểm tra thông báo xác nhận chuyển trang.

Checklist kiểm tra giao diện web, cẩm nang không thể thiếu cho doanh nghiệp - 11 — Navigation check trong checklist test giao diện web (Ảnh: Pinterest)

Usability check

Checklist test giao diện web sẽ bao gồm cả usability check – kiểm tra khả năng sử dụng, cụ thể:

Danh sách có được sắp xếp theo thứ tự mong muốn hay không?
Kiểm tra định dạng của giá trị ngày theo yêu cầu.
Các phím tắt được gán cho các nút có hoạt động chính xác không?
Tab/ Shift Tab order.
Các trường chỉ đọc và bị vô hiệu hóa không có thứ tự Tab/ Shift Tab order.
Kiểm tra chú giải công cụ và trình giữ chỗ.
Kiểm tra các giá trị đã nhập không hợp lệ và vị trí lỗi có được đánh dấu hay không?

Checklist kiểm tra giao diện web, cẩm nang không thể thiếu cho doanh nghiệp - 12 — Usability check trong checklist test giao diện web (Ảnh: UX studio)

Data integrity conditions

Bạn đã biết đến data integrity conditions – toàn vẹn dữ liệu trong checklist test giao diện web chưa? Nếu câu trả lời là chưa, bạn có thể tham khảo danh sách Chili liệt kê dưới đây:

Kiểm tra lưu dữ liệu khi đóng tab/ window tab.
Kiểm tra tất cả các trường để có độ dài tối đa và đảm bảo giá trị đầu vào không bị cắt ngắn.
Kiểm tra giá trị tối đa/ tối thiểu của đầu vào kỹ thuật số.
Kiểm tra xem một số âm có được nhập và lưu trữ chính xác trong cơ sở dữ liệu hay không?
Kiểm tra cùng lúc nhiều dữ liệu được lưu trữ trong cơ sở dữ liệu có đúng không?

Checklist kiểm tra giao diện web, cẩm nang không thể thiếu cho doanh nghiệp - 13 — Data integrity conditions check trong checklist test giao diện web (Ảnh: LabVantage Solutions)

Responsive

Yếu tố cuối cùng trong checklist test giao diện web là responsive – khả năng thích ứng. Đây là yếu tố vô cùng quan trọng, đảm bảo người dùng có thể truy cập và có trỉa nghiệm tốt nhất trên mọi kích thước màn hình. Để đảm bảo tính thích ứng của trang web, bạn cần lưu ý một số điều sau đây:

Văn bản, control và hình ảnh được căn chỉnh chính xác và đẹp mắt hay chưa?
Highlight, đổi màu sắc khi hover và ở trạng thái lựa chọn đã được cài đặt hay chưa?
Khu vực có thể nhấp thích hợp.
Chỉnh sửa màu sắc, bóng đổ và độ dốc.
Kiểm tra padding.
Kích thước phông chữ, kiểu và màu sắc cho văn bản đã hài hòa chưa?
Scroll văn bản đã nhập (dữ liệu đã nhập) đã được hiển thị chính xác hay chưa?
Không hiển thị thanh ngang của trang.
Trang web có thể được đọc ở tất cả các độ phân giải khác nhau.

Checklist kiểm tra giao diện web, cẩm nang không thể thiếu cho doanh nghiệp - 14 — Responsive – khả năng thích ứng với mọi loại màn hình

Trên đây là checklist test giao diện web cụ thể mà bạn có thể tham khảo trong quá trình thử nghiệm website của mình. Đây là giai đoạn rất quan trọng, quyết định đến hoạt động của trang web sau này, vì thế bạn phải chú ý kĩ các danh mục cần kiểm tra. Hy vọng bài viết của Chili hữu ích với các bạn và đừng quên theo dõi các bài viết tiếp theo của chúng tôi để biết thêm nhiều kiến thức bổ ích về thiết kế giao diện web nhé!

Đánh giá

Từ khóa: