Thiết kế logo
Để trang web của bạn đạt chất lượng tốt như kế hoạch đề ra, bạn cần theo dõi sát sao checklist test giao diện web trong giai đoạn thử nghiệm. Bởi lẽ, 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 bài viết dưới đây, Chili sẽ giới thiệu đến bạn đọ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:
- Tại sao thiết kế giao diện lại quan trọng với mức độ tương tác người dùng?
- Hướng dẫn kiểm tra kích thước website để tối ưu SEO
- Thiết kế UI cho website: 10 quy tắc biểu tượng cần nắm chắc
Aesthetic check
Khi tạo checklist test giao diện web, bạn cần chú ý đến bố cục, hình thức trình bày văn bản và sự hài hòa giữa các yêu tố như màu sắc, cỡ chữ, phông chữ,… Dưới đây là một số lưu ý cụ 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 cá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 các giá trị đã đượ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 cả khi gõ và khi có thông báo lỗi.
Validation check
Đối với validation check trong thiết kế giao diện web, bạn cần chú ý cá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
Các loại dữ liệu khá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
- Navigation check
- Đối với mục điều hướng trong checklist test giao diện web, bạn cần lưu ý 4 điều sau đây:
- Các trang khác nhau có thể được truy cập từ menu hay không?
- Có 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.
Usability check
Checklist test giao diện web sẽ bao gồm cả usability check – kiểm tra khả năng sử dụng, cụ 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ụ và trình giữ chỗ.
- Kiểm tra các giá trị đã nhập không hợp lệ và vị trí lỗi có được đánh dấu hay không?
Data integrity conditions
Bạn đã biết đến data integrity conditions – toàn vẹn dữ liệu trong checklist test giao diện web chưa? Nếu câu trả lời là chưa, bạn có thể tham khảo danh sá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?
Responsive
Yếu tố cuối cùng trong checklist test giao diện web là responsive – khả năng thích ứng. Đây là yếu tố vô cùng quan trọng, đảm bảo người dùng có thể truy cập và có trỉa nghiệm tốt nhất trên mọi kích thước màn hình. Để đảm bảo tính thích ứng của trang web, bạn cần lưu ý 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 và đẹp mắt hay chưa?
- Highlight, đổi màu sắc khi hover và ở trạng thái lựa chọn đã được cà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 đã hài hòa chưa?
- Scroll văn bản đã nhập (dữ liệu đã nhập) đã được hiển thị chính xác hay chưa?
- Không hiển thị thanh ngang của trang.
- Trang web có thể được đọc ở tất cả các độ phân giải khác nhau.
Trên đây là checklist test giao diện web cụ thể mà bạn có thể tham khảo trong quá trình thử nghiệm website của mình. Đây là giai đoạn rất quan trọng, quyết định đến hoạt động của trang web sau này, vì thế bạn phải chú ý kĩ các danh mục cần kiểm tra. Hy vọng bài viết của Chili hữu ích với các bạn và đừng quên theo dõi các bài viết tiếp theo của chúng tôi để biết thêm nhiều kiến thức bổ ích về thiết kế giao diện web nhé!
