Để trang web của bạn có chất lượng tốt như kế hoạch, bạn cần phải theo dõi chặt chẽ danh sách kiểm tra giao diện web trong giai đoạn thử nghiệm. Bởi vì, 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, ớt sẽ giới thiệu đến độc giả những công việc cụ thể cần thực hiện khi test giao diện website.
Những bài viết liên quan:
Danh sách kiểm tra giao diện web, cẩm nang không thể thiếu đối với doanh nghiệp (Ảnh: Meganest)
Kiểm tra thẩm mỹ
Khi tạo danh sách kiểm tra giao diện webbạ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ữ, kiểu chữ,… Dưới đây là một số lưu ý cụ thể cho thẩm mỹ:
- 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í, v.v.
- Kiểm tra sự hiển thị của các giá trị đã nhập trong trường văn bản.
- Kiểm tra màu đường viền của hộp văn bản cả khi nhập và khi có thông báo lỗi.
Kiểm tra thẩm mỹ trong danh sách kiểm tra giao diện web (Ảnh: Pinterest)
Kiểm tra xác thực
Để xác thực, hãy đăng ký thiết kế giao diện webbạn cần chú ý đến 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 kiểu dữ liệu khác:
- Các ký tự đặc biệt (& ^ & ^% $% ^)
- Không gian
Ngày giờ:
- Kiểm tra ngày hết hạn
- Nhập từ
- Kiểm tra định dạng
- Kiểm tra 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 28, 29, 30 cho tháng 2
Kiểm tra xác thực trong danh sách kiểm tra kiểm tra giao diện web (Ảnh: Fred Pryor Seminars)
- Kiểm tra điều hướng
- Đối với mục điều hướng trong danh sách kiểm tra giao diện webbạn cần lưu ý 4 điều sau:
- Có thể truy cập các trang khác nhau từ menu không?
- Trang có thể truy cập được sau khi chọn từ menu không?
- Kiểm tra tiêu điểm điểm đánh dấu khi chọn một mục menu.
- Kiểm tra thông báo xác nhận chuyển trang.
Kiểm tra điều hướng trong danh sách kiểm tra giao diện web (Ảnh: Pinterest)
Kiểm tra khả năng sử dụng
Danh sách kiểm tra giao diện web thử nghiệm sẽ bao gồm kiểm tra khả năng sử dụng – 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 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 Thứ tự Tab.
- Các trường chỉ đọc và bị vô hiệu hóa không có thứ tự Tab Tab / Shift.
- Kiểm tra chú giải công cụ và trình giữ chỗ.
- Kiểm tra xem các giá trị đã nhập không hợp lệ và vị trí lỗi có được đánh dấu hay không?
Kiểm tra khả năng sử dụng trong danh sách kiểm tra giao diện web (Ảnh: UX studio)
Điều kiện toàn vẹn dữ liệu
Bạn đã biết các điều kiện toàn vẹn dữ liệu danh sách kiểm tra giao diện web chưa? Nếu câu trả lời là không, bạn có thể tham khảo danh sách các loại ớt được liệt kê dưới đây:
- Chọn để lưu dữ liệu khi đóng tab cửa sổ / tab.
- Kiểm tra tất cả các trường để biết độ dài tối đa và đảm bảo rằng các giá trị đầu vào không bị cắt ngắn.
- Kiểm tra giá trị tối đa / nhỏ nhất 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 xem nhiều dữ liệu được lưu cùng lúc trong cơ sở dữ liệu có đúng không?
Kiểm tra các điều kiện toàn vẹn dữ liệu trong danh sách kiểm tra kiểm tra giao diện web (Ảnh: LabVantage Solutions)
Phản ứng nhanh nhẹn
Phần tử cuối cùng trong danh sách kiểm tra giao diện web là khả năng đáp ứng – khả năng thích ứng. Điều này cực kỳ quan trọng, đảm bảo rằng người dùng có thể truy cập và có trải nghiệm tốt nhất trên mọi kích thước màn hình. Để đảm bảo khả năng đáp ứng của trang web của bạn, có một số điều cần lưu ý:
- Văn bản, điều khiển và hình ảnh có được căn chỉnh chính xác và đẹp mắt không?
- Đánh dấu, thay đổi màu khi di chuột và ở trạng thái đã chọn đã được thiết lập 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 đệm.
- Kích thước phông chữ, kiểu và màu sắc cho văn bản có hài hòa không?
- Cuộn văn bản đã nhập (dữ liệu đã nhập) có hiển thị chính xác hay không?
- Thanh ngang của trang không được hiển thị.
- Các trang web có thể được đọc ở tất cả các độ phân giải khác nhau.
Đáp ứng – khả năng thích ứng với mọi loại màn hình
Trên đây là danh sách kiểm tra giao diện web cụ thể mà bạn có thể tham khảo trong quá trình thử nghiệm trang web của mình. Đây là công đoạn rất quan trọng, quyết định đến hoạt động của website sau này nên bạn phải để ý kỹ các hạng mục để kiểm tra. Hy vọng bài đăng của ớt hữu ích với bạn và đừng quên theo dõi những bài viết tiếp theo của chúng tôi để có thêm nhiều kiến thức bổ ích về thiết kế giao diện web nhé!
