Lỗi hiển thị (Visual Bugs)

Visual bug (lỗi hiển thị) là lỗi liên quan tới giao diện đồ hoạ của website hoặc app. Một số ví dụ thường gặp:

• Lỗi bố cục (layout), ví dụ văn bản hoặc phần tử bị lệch vị trí.
• Lỗi thiết kế đáp ứng (responsive design), ví dụ một phần tử hiển thị đúng trên thiết bị di động này nhưng lại biến mất trên thiết bị khác.
• Văn bản hoặc phần tử vô tình đè lên nhau.
• Văn bản hoặc phần tử bị cắt cụt, hiển thị không đầy đủ.
• Bất kỳ vấn đề nào có thể khắc phục bằng cách sửa file HTML hoặc CSS.

1. Lỗi lặp lại chỉ báo cáo một lần

Giống với lỗi nội dung, khi một vấn đề hiển thị lặp lại ở nhiều nơi, chỉ cần báo cáo một lần duy nhất, dù mỗi lần xuất hiện có thể ở URL, link hay hình ảnh khác nhau, kể cả khi chúng nằm trên cùng một trang hay rải rác nhiều trang. Báo cáo nên ghi rõ những vị trí khác cũng gặp vấn đề tương tự.

Không được gửi riêng một báo cáo cho từng lần xuất hiện, các báo cáo trùng lặp kiểu này sẽ bị từ chối. Khách hàng chỉ cần một báo cáo duy nhất để nhận biết vấn đề, sau đó họ sẽ tự sửa cho tất cả các trường hợp tương tự.

Ví dụ lỗi lặp lại

• Một vài phần tử cùng gặp chung một lỗi đồ hoạ, ví dụ văn bản hoặc ảnh to hơn khung chứa của nó.
• Ô nhập liệu không đủ rộng để hiển thị hết văn bản mặc định bên trong.
• Các banner quảng cáo (teaser) vô tình đè lên phần tử khác.

2. Khi nào cần nâng thành functional bug

Ngay khi một lỗi hiển thị khiến người dùng không thể sử dụng được một chức năng, nó nên được báo cáo là functional bug, dù bản thân lỗi không nằm ở logic chức năng.

Nếu người dùng vẫn có cách khác dễ dàng, trực quan để đạt được mục tiêu, họ không thực sự bị chặn lại, nên lỗi đó vẫn nên giữ nguyên là visual bug.

3. Tài liệu hoá lỗi hiển thị

Báo cáo lỗi hiển thị bắt buộc phải kèm ảnh chụp màn hình. Nếu lỗi chỉ xuất hiện sau một hành động cụ thể (ví dụ khi cuộn trang hoặc mở một menu), có thể cần quay thêm screencast (video màn hình) để minh hoạ rõ hơn.

4. Lỗi responsive: loại lỗi hiển thị dễ bị bỏ sót

Có một dạng lỗi khiến nhiều người phân vân không biết nên xếp vào content bug hay visual bug: lỗi phát sinh từ thiết kế đáp ứng (responsive design) của website.

Loại lỗi này thường khó nhận ra khi bạn chỉ lướt nhanh qua các trang, cho tới khi bắt gặp một trang có đầy đủ thông tin cần thiết nhưng hiển thị rất gượng gạo, khó dùng. Nếu không để ý kỹ, rất dễ bỏ qua và quên báo cáo.

Ví dụ thực tế

Khi test responsive, có thể bạn sẽ gặp tình huống: một trang hiển thị hoàn hảo trên điện thoại (ví dụ trang “Thể loại phim/chương trình phổ biến”), nhưng khi chuyển sang một trang danh mục khác (ví dụ trang “Hài kịch”), nội dung lại gần như không đọc được vì các phần tử quá nhỏ.

Cách phát hiện lỗi responsive

• Để ý độ co giãn (scaling) không nhất quán giữa các trang.
• Kiểm tra xem văn bản có bị nhỏ tới mức không đọc được trên kích thước màn hình đang test hay không.
• Chú ý các phần tử điều hướng có bị thu nhỏ tới mức khó bấm hay không.
• Quan sát xem có trang nào xuất hiện thanh cuộn ngang (horizontal scroll) trong khi các trang khác thì không.

Công cụ kiểm tra responsive miễn phí

Google Chrome Lighthouse (công cụ tích hợp trong Chrome, trước đây từng tách riêng dưới tên Google Mobile-Friendly Test) là công cụ hữu ích để kiểm tra xem trang web đã tối ưu cho thiết bị di động hay chưa. Công cụ này giúp Tester phát hiện các vấn đề hiển thị bằng cách đánh giá các yếu tố như cỡ chữ, kích thước vùng chạm (tap target), và cấu hình viewport. Khi gặp một lỗi hiển thị, công cụ này có thể giúp bạn xác định xem nguyên nhân có phải do thiết kế responsive hay không. Khác với công cụ cũ chạy trên một website riêng, Lighthouse cần được cài trực tiếp vào trình duyệt Chrome và chạy ngay trên trang đang test.

Trắc nghiệm: Lỗi hiển thị · 5 câu · 8 phút