Bộ chọn model nhìn đẹp nhưng chỉ mở được bằng chuột sẽ chặn một phần người mua. Một lựa chọn được tô sáng cũng chưa chắc là giá trị họ đã xác nhận. Bộ chọn sản phẩm bằng bàn phím cần có hành vi rõ từ lúc vào trường đến lúc hủy hoặc chấp nhận.
Chọn control theo bài toán, không theo hiệu ứng
Với danh sách ngắn và cố định, control HTML chuẩn có thể phù hợp hơn dropdown tự làm. Nếu cần tìm trong nhiều model, combobox là một lựa chọn cần thiết kế kỹ. W3C APG mô tả các kiểu combobox và tương tác bàn phím; không phải mọi kiểu đều có cùng hành vi tự chọn.
Người dùng cần nhận biết tên trường, giá trị đang có, danh sách đã mở chưa và lỗi nếu thiếu lựa chọn. Không chỉ thêm thuộc tính ARIA rồi coi đã đạt accessibility; hành vi thật, focus và thông báo vẫn phải được kiểm tra.
Bốn việc cần nghiệm thu trên cấu hình cụ thể
| Thao tác | Kết quả cần thống nhất |
|---|---|
| Đến trường bằng Tab | Focus thấy được, nhãn có nghĩa |
| Mở và duyệt danh sách | Gợi ý hiện rõ, không kéo focus mất dấu |
| Chấp nhận lựa chọn | Giá trị đã chọn được đọc và hiển thị |
| Hủy hoặc thoát | Không giữ nhầm lựa chọn chỉ mới xem |
Phím cụ thể cần bám pattern đã chọn và cách nền tảng hoạt động. Không chiếm các phím sửa văn bản thông thường của ô nhập để tạo hiệu ứng riêng khiến người dùng không thể sửa mã.
Ví dụ giả định: đổi model làm kích thước cũ không hợp lệ
Khách đã chọn model A và một kích thước. Khi chuyển sang B, kích thước đó không còn bán. Giao diện cần thông báo giá trị phụ thuộc đã mất hiệu lực và cho chọn lại. Không giữ một mã ẩn khác với phần chữ đang hiển thị; cũng không tự lấy kích thước đầu tiên để hoàn thành form.
Nếu không có lựa chọn phù hợp, người mua phải tìm được đường hỏi tư vấn. Trạng thái đang tải hoặc không có kết quả cần được giải thích, thay vì dropdown rỗng trông như lỗi thao tác của khách.
Kiểm tra trải nghiệm trước khi mở rộng control
- Đi hết form chỉ bằng bàn phím, không bị mắc trong popup.
- Thử phóng to và màn hình hẹp.
- Thử công cụ hỗ trợ đọc với nhãn, giá trị và lỗi.
- Đối chiếu mã gửi đi với lựa chọn khách nhìn thấy.
Bài này tập trung khả năng thao tác, khác việc quyết định SKU hợp lệ về nghiệp vụ. Khi trao đổi bộ chọn model cho website với Onter, mang theo danh sách trường và quan hệ phụ thuộc. Giải quyết đúng thao tác trước khi thêm animation hoặc nhiều tầng menu.
