Những Vấn Đề Thiết Kế Tương Tác Trên Màn Hình Cảm Ứng
Trong quá trình phát triển game hiện tại, chúng tôi luôn ưu tiên thiết bị di động, tập trung vào các tương tác dành riêng cho màn hình cảm ứng. Nếu trong giai đoạn thử nghiệm chỉ sử dụng chuột trên máy tính, nhiều vấn đề tương tác quan trọng sẽ bị bỏ qua. Vì lý do này, công cụ phát triển nội bộ của chúng tôi đã đầu tư mạnh mẽ để đảm bảo tính “thấy được ngay lập tức” khi chỉnh sửa trực tiếp trên thiết bị di động. Chúng tôi khuyến khích các lập trình viên nên trực tiếp debug và điều chỉnh trên điện thoại, bởi cách này giúp phát hiện những lỗi khó nhận biết khi dùng chuột.
Một lợi ích phụ khi phát triển trực tiếp trên điện thoại là dễ dàng kiểm tra kích thước các yếu tố hình ảnh (đặc biệt là phông chữ) có phù hợp với trải nghiệm thực tế hay không.
Dù chuột và màn hình cảm ứng đều có điểm tương đồng trong tương tác, nhưng khác biệt lại vô cùng rõ rệt:
- Độ chính xác của điểm nhấn: Chuột có thể xác định chính xác từng điểm đơn lẻ, trong khi thao tác chạm (tap) trên màn hình cảm ứng thực chất là một vùng diện tích. Nhiều framework hiện nay vẫn máy móc lấy tâm của vùng chạm làm tọa độ sự kiện chuột, điều này hoàn toàn sai lầm. Khi thiết kế tương tác, chúng ta cần luôn ghi nhớ rằng sự kiện tap trên cảm ứng không mang tính chính xác như click chuột.
- Số lượng điểm tương tác đồng thời: Màn hình cảm ứng cho phép nhiều điểm chạm cùng lúc, trong khi chuột chỉ có một con trỏ duy nhất. Dù không nhất thiết phải khai thác triệt để đa điểm chạm, nhưng hãy nghĩ đến trường hợp người dùng vô tình ấn giữ một góc màn hình bằng tay không thuận, rồi dùng tay kia thực hiện thao tác tap - tình huống cực kỳ phổ biến.
- Cơ chế tương tác cơ bản: Chuột có di chuyển, click trái/phải; màn hình cảm ứng chỉ có sự kiện kéo (drag), thiếu hoàn toàn sự kiện di chuyển con trỏ và không phân biệt được click trái/phải. Có thể dùng cử chỉ (gesture) để thay thế, ví dụ như phân biệt chạm nhẹ và giữ lâu, nhưng cần cẩn trọng tránh lạm dụng gây rối cho người dùng.
- Cử chỉ thông minh: Với chuột, cử chỉ thường dành cho người dùng nâng cao. Ngược lại, cử chỉ trên màn hình cảm ứng đã trở thành kiến thức phổ thông nhờ sự phổ biến của smartphone. Người dùng đã quen thuộc với các thao tác như zoom hai ngón, vuốt, chạm chọn… Tuy nhiên, việc áp dụng các cử chỉ phức tạp vẫn cần cân nhắc kỹ lưỡng.
- Khu vực “chết” trên màn hình: Có những vị trí trên điện thoại mà người dùng khó thao tác (như góc dưới cùng bên trái với người thuận tay phải), điều này gần như không tồn tại với chuột.
Bài toán thiết kế tương tác cho game xây dựng cơ sở (kiểu Factorio)
Với thể loại game xây dựng cơ sở yêu cầu chọn đối tượng trên màn hình, làm thế nào để tối ưu trải nghiệm trên di động? Rõ ràng không thể sao chép nguyên mẫu logic chuột/bàn phím.
Giải pháp 1: Biến điện thoại thành tay cầm ảo
Tôi đề xuất tiếp cận điện thoại như một chiếc tay cầm (gamepad). Ở giữa màn hình sẽ hiển thị một con trỏ ảo, di chuyển bản đồ thông qua cần điều khiển cảm ứng (còn gọi là “chà kính”). Con trỏ này luôn cố định ở trung tâm, nút xác nhận đặt ở góc dưới bên phải để mô phỏng logic gần giống chuột nhất.
Giải pháp 2: Chạm trực tiếp để chọn đối tượng
Song song, cần giữ lại cơ chế chạm trực tiếp lên màn hình - phương pháp trực quan nhất: muốn xem công trình nào thì chạm vào đó. Khi này, camera sẽ tự động di chuyển để đưa đối tượng được chọn vào tâm màn hình.
Vấn đề nan giải: Chạm vào khu vực có nhiều đối tượng chồng chéo
Trên chuột, độ chính xác từng điểm giúp người dùng dễ dàng chọn đúng đối tượng mong muốn. Nếu chọn sai, chỉ cần dịch chuyển nhẹ con trỏ. Nhưng với màn hình cảm ứng, thao tác điều chỉnh này gần như bất khả thi vì:
- Tay người chạm vào màn hình là diện tích chứ không phải điểm
- Khi ngón tay che khuất vùng cần chọn, việc điều chỉnh tinh trở nên khó khăn
Giải pháp của tôi:
Mỗi lần người dùng chạm, hệ thống sẽ quét một vùng diện tích nhất định để tìm tất cả đối tượng tiềm năng. Thay vì chọn ngẫu nhiên, chúng tôi xây dựng một hàng đợi vòng (circular queue) ghi nhớ lịch sử các đối tượng đã chọn. Khi có nhiều lựa chọn khả dĩ, hệ thống sẽ so sánh với lịch sử và ưu tiên chọn đối tượng chưa được chọn trong vài lần gần nhất. Nếu tất cả đều đã được chọn qua, thuật toán LRU (Least Recently Used) sẽ loại bỏ đối tượng lâu nhất chưa được truy cập.
Trải nghiệm thực tế:
Khi người dùng chạm vào khu vực tập trung nhiều đối tượng nhưng không phải cái mình muốn, họ chỉ cần liên tục chạm nhiều lần tại cùng một điểm. Hệ thống sẽ tự động luân chuyển giữa các đối tượng lân cận, giúp chọn chính xác mà không cần di chuyển ngón tay.
Kết luận
Thiết kế tương tác cho màn hình cảm ứng không chỉ là bài toán kỹ thuật, mà còn đòi hỏi sự thấu hiểu hành vi người dùng. Từ việc xử lý độ chính xác của điểm chạm, đến việc tối ưu cử chỉ quen thuộc, mỗi chi tiết nhỏ đều góp phần tạo nên trải nghiệm liền mạch và tự nhiên trên nền tảng di động.