Mỗi lần bạn chạm vào màn hình, điện thoại đo vị trí ngón tay nhiều lần mỗi giây, hệ điều hành gom lại thành một sự kiện, rồi trình duyệt phải quyết định trong tích tắc: đây là cú chạm cho ứng dụng, hay là cử chỉ cuộn trang, phóng to, quay lại. Phần lớn chuyện “bấm không ăn”, “vuốt bị cuộn trang” hay “nhấn giữ hiện bảng chọn chữ” trên ứng dụng web đều nằm ở khâu quyết định đó. Bài này đi theo một cú chạm từ mặt kính tới mã của ứng dụng.
Từ mặt kính tới hệ điều hành
Màn hình cảm ứng của điện thoại hiện nay là loại điện dung: dưới mặt kính có một lưới dây dẫn rất mảnh. Ngón tay người dẫn điện, chạm vào làm thay đổi điện tích ở vài nút lưới. Bộ điều khiển cảm ứng quét lưới liên tục, tìm chỗ thay đổi, tính ra toạ độ và cả diện tích tiếp xúc.
Tần số quét này gọi là tốc độ lấy mẫu cảm ứng, thường cao hơn tần số làm tươi màn hình — nhiều máy quét 120, 240 lần mỗi giây hoặc hơn, theo thông số nhà sản xuất công bố. Quét nhanh giúp nét vẽ mượt và cú chạm được ghi nhận sớm hơn, nhưng không làm hình hiện lên nhanh hơn tốc độ màn hình.
Vì lưới đo điện, nên vài chuyện quen thuộc có lời giải thích đơn giản: đeo găng tay len thì không bấm được; tay ướt hay màn hình dính nước thì máy “tự bấm” loạn; miếng dán cường lực quá dày hoặc kém chất lượng làm cảm ứng chập chờn ở mép.
Trình duyệt nhận được những gì
Hệ điều hành chuyển cho trình duyệt một chuỗi sự kiện: ngón tay đặt xuống, di chuyển, nhấc lên. Mỗi sự kiện kèm toạ độ, thời điểm và một mã số cho từng ngón — nhờ đó ứng dụng biết ngón nào là ngón nào khi bạn chạm hai, ba ngón cùng lúc.
Các trình duyệt hiện nay đưa cả chuột, bút cảm ứng và ngón tay về chung một kiểu sự kiện gọi là pointer events (sự kiện con trỏ). Người làm viết mã một lần là chạy được với cả ba, chỉ khác ở chỗ ngón tay không có trạng thái “di qua mà chưa bấm” như chuột.
| Thứ đo được | Ứng dụng dùng để làm gì |
|---|---|
| Vị trí đặt xuống | Biết bạn bấm nút nào, hay chạm vào vùng cần điều khiển |
| Quãng di chuyển và hướng | Phân biệt chạm với vuốt; đọc hướng vuốt để đổi làn, ra đòn |
| Thời gian giữ | Phân biệt chạm nhanh với nhấn giữ (giữ ga, gồng lực) |
| Số ngón cùng lúc | Một ngón lái, một ngón bấm; hai ngón phóng to bản đồ |
| Thời điểm chính xác | Tính tốc độ vuốt, tính cú đánh sớm hay muộn |
Cuộc giằng co giữa ứng dụng và trình duyệt
Đây là phần thú vị nhất. Trên một trang web bình thường, vuốt là để cuộn, chụm hai ngón là để phóng to, chạm đúp có khi cũng phóng to. Nhưng trong một ứng dụng giải trí, vuốt có thể là đổi làn xe, chạm đúp là nhảy. Trình duyệt và ứng dụng cùng muốn một cú vuốt — ai được?
Khai báo trước: vùng nào ứng dụng tự lo
Cách đúng là ứng dụng khai báo trước cho trình duyệt biết vùng nào nó tự xử lý cử chỉ. Có một thuộc tính giao diện tên là touch-action: đặt nó trên vùng chơi, trình duyệt sẽ không cuộn, không phóng to ở đó nữa, chuyển nguyên cú vuốt cho ứng dụng. Khai báo trước quan trọng vì trình duyệt muốn cuộn trang ngay lập tức, không chờ mã ứng dụng chạy xong mới biết có được cuộn hay không.
Cái bẫy “trình nghe thụ động”
Một số người làm cố chặn cuộn bằng cách viết mã “khi ngón tay di chuyển thì huỷ cuộn”. Các trình duyệt lớn từ lâu đã mặc định coi kiểu mã này ở cấp toàn trang là thụ động — tức là trình duyệt cứ cuộn trước, không đợi hỏi — để trang không bị ì. Kết quả là lệnh huỷ bị bỏ qua, ứng dụng bị cuộn lên xuống dù người làm tưởng đã chặn. Lời giải vẫn là khai báo trước bằng touch-action.
Những cử chỉ ứng dụng không bao giờ cướp được
Một số cử chỉ thuộc về hệ điều hành, trang web không có quyền chặn:
- Vuốt từ mép trái hoặc phải để quay lại trang trước (iPhone, nhiều máy Android dùng cử chỉ).
- Vuốt từ đáy lên để về màn hình chính hoặc mở đa nhiệm.
- Vuốt từ đỉnh xuống để mở thanh thông báo.
Vì vậy, ứng dụng làm cẩn thận không đặt nút quan trọng sát mép và không bắt bạn vuốt từ cạnh màn hình. Nếu bạn hay lỡ tay thoát ra khi đang chơi, đó thường là do ngón tay bắt đầu vuốt quá gần mép.
Độ trễ 300 phần nghìn giây ngày xưa
Ai dùng điện thoại cảm ứng từ thời đầu sẽ nhớ cảm giác bấm vào trang web thì phải “đợi một nhịp” mới có phản hồi. Đó là độ trễ có chủ ý: trình duyệt chờ khoảng 300 phần nghìn giây xem bạn có chạm thêm lần nữa không, vì chạm đúp nghĩa là phóng to. Các trình duyệt di động đã bỏ độ trễ này cho những trang khai báo hiển thị vừa khổ màn hình điện thoại — gần như mọi trang làm cho di động hiện nay. Nếu bạn còn gặp cảm giác “trễ một nhịp” trên trang nào, khả năng cao trang đó chưa được làm cho di động.
Vì sao nhấn giữ lại hiện bảng chọn chữ
Trên trang web, nhấn giữ có nghĩa mặc định: chọn chữ, lưu ảnh, mở bảng “sao chép, chia sẻ”. Trong ứng dụng cần nhấn giữ để tăng tốc hay gồng lực, bảng đó bật lên là hỏng cả pha. Trên iPhone còn có hiện tượng màn hình bôi xanh hay hiện kính lúp khi giữ lâu. Người làm phải tắt chọn chữ và tắt bảng chọn mặc định trên đúng vùng điều khiển, còn ở phần chữ thông thường (hướng dẫn, điều khoản) thì để nguyên cho bạn sao chép được.
Đội làm AppGiaiTri đã có một bài hậu trường riêng về đúng lỗi này trên iPhone; ở đây chỉ cần nhớ nguyên tắc: tắt hành vi mặc định càng hẹp càng tốt, chỉ ở chỗ thật sự cần.
Thiết kế vùng chạm cho ngón tay thật
Ngón tay không chính xác như con trỏ chuột. Hướng dẫn thiết kế của Apple khuyến nghị vùng chạm tối thiểu khoảng 44 × 44 điểm; hướng dẫn Material của Google khuyến nghị khoảng 48 × 48 dp. Ứng dụng giải trí còn cần rộng hơn, vì bạn bấm khi mắt đang nhìn chỗ khác trên màn hình.
Bảng kiểm cho người làm, cũng là cách bạn tự đánh giá một ứng dụng:
- Nút điều khiển to, cách nhau đủ xa để không bấm nhầm nút bên cạnh.
- Không đặt nút sát mép, tránh vùng cử chỉ của hệ điều hành và phần “tai thỏ”, đục lỗ camera.
- Phản hồi ngay khi ngón tay đặt xuống (nút lún, đổi màu), không đợi nhấc lên.
- Cần nhấn giữ thì có dấu hiệu đang giữ, nhả ra thì dừng ngay.
- Không bắt chạm đúp cho thao tác hay dùng.
- Có cách chơi bằng bàn phím hoặc tay cầm cho người không thoải mái với cảm ứng.
Một mẹo bố trí hay gặp ở ứng dụng lái xe hay đánh bóng: tách điều khiển ra hai nửa màn hình, mỗi ngón cái lo một nửa. Hai ngón không phải chen nhau trong một góc nên chạm nhầm giảm hẳn, và bàn tay cũng đỡ mỏi.
Khi cảm ứng có vấn đề: tự kiểm thế nào
- Lau màn hình, lau khô tay. Mồ hôi và nước làm lưới điện dung đọc sai.
- Tháo ốp hoặc miếng dán nếu nghi ngờ. Cảm ứng chập chờn ở mép thường do miếng dán bị bong hoặc quá dày.
- Kiểm tra ở ứng dụng khác. Nếu mọi nơi đều lỗi thì là máy; nếu chỉ một trang thì là trang.
- Tắt chế độ găng tay hoặc độ nhạy cảm ứng cao nếu máy có (tên mục có thể khác tuỳ phiên bản máy) khi đang dùng tay trần — chế độ này dễ làm máy nhận nhầm.
- Thử xoay ngang. Nhiều ứng dụng giải trí bố trí nút tốt hơn khi xoay ngang.
Câu hỏi thường gặp
Vì sao vuốt trong ứng dụng web lại làm trang bị cuộn?
Vì trình duyệt mặc định hiểu vuốt là cuộn. Ứng dụng phải khai báo trước rằng vùng điều khiển do nó tự xử lý; nếu chưa khai báo hoặc khai báo thiếu chỗ, trình duyệt vẫn cuộn.
Tại sao ứng dụng web không chặn được thao tác vuốt quay lại?
Vuốt từ mép để quay lại, vuốt từ đáy để về màn hình chính là cử chỉ của hệ điều hành, trang web không có quyền chặn. Hãy bắt đầu vuốt cách mép một chút để tránh lỡ tay thoát ra.
Màn hình có tốc độ lấy mẫu cảm ứng cao thì có lợi gì?
Cú chạm được ghi nhận sớm hơn và chuyển động ngón tay được đo mịn hơn, nên cảm giác bám tay hơn. Nhưng hình vẫn chỉ đổi theo tần số màn hình, và độ trễ tổng còn phụ thuộc vào ứng dụng.
Ứng dụng web có nhận được nhiều ngón tay cùng lúc không?
Có, trình duyệt gửi riêng từng ngón kèm mã số phân biệt. Nhờ vậy một ngón có thể lái trong khi ngón kia bấm nút, miễn ứng dụng được viết để xử lý đa điểm.
Vì sao nhấn giữ trên iPhone lại hiện kính lúp hoặc bôi xanh?
Đó là hành vi chọn chữ mặc định của Safari. Ứng dụng cần nhấn giữ phải tắt riêng hành vi này trên vùng điều khiển; nếu còn sót, bạn sẽ thấy nó bật lên giữa chừng.
