Có một thí nghiệm nhỏ bạn làm được ngay. Cầm điện thoại bằng một tay, như cách bạn vẫn lướt khi xếp hàng hay ngồi trên xe. Rồi thử chạm ngón cái tới góc trên cùng bên trái màn hình mà không đổi cách cầm. Khó, đúng không? Cảm giác chông chênh đó chính là điểm khởi đầu của thumb zone — vùng mà ngón cái với tới thoải mái khi cầm máy một tay.
Hiểu thumb zone không phải lý thuyết suông. Nó quyết định người mua có dễ bấm nút “Thêm vào giỏ”, có tìm thấy menu, có hoàn tất đơn hay bỏ giữa chừng. Bài này nói về vùng ngón cái trên màn hình, vì sao nó quan trọng với trải nghiệm mua hàng trên mobile, và vì sao đặt điều hướng ở đáy lại hợp với cách tay người ta cầm máy.
Thumb zone là gì và vì sao nó có thật
Khái niệm thumb zone được Steven Hoober phổ biến sau khi quan sát hơn 1.300 người dùng điện thoại ngoài đời thực. Ông thấy ba kiểu cầm máy chính: cầm một tay, đỡ một tay rồi chạm bằng tay kia, và cầm hai tay. Trong đó cầm một tay chiếm khoảng một nửa số lần quan sát — phổ biến nhất. Nói cách khác, rất nhiều lần người ta dùng điện thoại là chỉ với một ngón cái.
Khi cầm một tay, ngón cái di chuyển theo một cung tròn, tâm cung nằm ở góc dưới gần lòng bàn tay. Vì thế:
- Vùng dễ chạm nhất là phần giữa và dưới màn hình. Ngón cái nghỉ tự nhiên ở đây, không phải gồng.
- Vùng phải với là hai bên hông giữa màn hình. Chạm được nhưng hơi căng tay.
- Vùng khó nhất là hai góc trên cùng, nhất là góc chéo với bên tay cầm. Muốn chạm tới thường phải đổi tư thế hoặc dùng tay kia.
Bạn không cần tin tôi. Hãy gõ “thumb zone” hay “vùng ngón cái” vào Google, bạn sẽ thấy tấm bản đồ ba màu quen thuộc — xanh dễ chạm, vàng phải với, đỏ khó chạm — mà Samantha Ingram mô tả trên Smashing Magazine dựa trên nghiên cứu của Hoober. Đây là một trong những khái niệm UX được nhắc lại nhiều nhất, và lý do nó bền là vì nó đúng với giải phẫu bàn tay, không phải theo trào lưu.
Nghịch lý: thứ quan trọng nhất lại nằm ở chỗ khó với nhất
Đây là chỗ đáng dừng lại. Trên nhiều website bán hàng, biểu tượng hamburger (ba gạch ngang) — nơi giấu toàn bộ điều hướng chính — lại đặt ở góc trên cùng. Tức là cánh cửa dẫn vào mọi danh mục sản phẩm nằm đúng vào vùng ngón cái khó với nhất.
Vấn đề không dừng ở chuyện mỏi tay. Hamburger còn giấu mất nội dung. Nielsen Norman Group từng nghiên cứu trên cả điện thoại lẫn máy tính và kết luận rằng giấu điều hướng sau biểu tượng hamburger làm người dùng khó tìm thấy mục cần hơn, mất nhiều thời gian hơn và thấy việc khó hơn. Gộp lại: bạn vừa đặt menu vào chỗ tay khó với, vừa giấu nó khỏi mắt người dùng.
Với người bán hàng, điều này có giá rất cụ thể. Theo Baymard Institute, tỷ lệ bỏ giỏ hàng trung bình quanh mức 70% suốt hơn một thập kỷ, và trên mobile thường còn cao hơn. Mỗi thao tác khó thêm một chút là một lý do nữa để khách rời đi. Khi một người đang phân vân giữa mua và không, việc phải đổi cách cầm máy chỉ để mở menu là một ma sát nhỏ nhưng cộng dồn.
Thiết kế tốt cho mobile: đưa hành động quan trọng vào tầm ngón cái
Nguyên tắc rất đơn giản, dù áp dụng thì cần kỷ luật: đặt những tương tác quan trọng vào thumb zone, đừng đẩy ra rìa.
Cụ thể với một store bán hàng:
- Nút hành động chính — “Thêm vào giỏ”, “Mua ngay”, “Thanh toán” — nên nằm ở nửa dưới màn hình, nơi ngón cái nghỉ. Nhiều theme tốt neo nút mua cố định ở đáy trang sản phẩm vì lý do này.
- Điều hướng chính nên hiển thị sẵn ở vùng dễ chạm, thay vì giấu sau một biểu tượng ở góc.
- Những thứ ít dùng và hơi nguy hiểm — nút xóa, đăng xuất, đóng — có thể đặt ở vùng khó với hơn. Khó chạm ở đây lại thành một lớp bảo vệ, tránh bấm nhầm.
Một ví dụ gần gũi: nếu bạn bán đồ ăn hay thời trang và khách thường lướt store lúc đang đi đường, cầm máy một tay, thì việc nút “Thêm vào giỏ” nằm trong tầm ngón cái có thể là khác biệt giữa một đơn chốt được và một lần lướt qua rồi quên.
Đây cũng là lý do thumb zone thường được nhắc cùng các quy luật đọc như F-pattern hay Z-pattern. F-pattern và Z-pattern nói về cách mắt quét nội dung; thumb zone nói về việc tay với tới đâu. Một bố cục mobile tốt cần chiều cả hai: đặt thứ quan trọng vào nơi mắt nhìn tới và tay chạm được.
Vì sao Tab Bar ở đáy hợp với cách cầm máy
Nếu vùng dễ chạm nhất là phần dưới màn hình, thì thanh điều hướng đặt ở đáy là cách trả lời thẳng cho thực tế giải phẫu đó. Đây chính là Tab Bar — dải vài biểu tượng cố định ở cuối màn hình, kiểu thanh dưới cùng trong app Shopee, Lazada hay Instagram mà ai cũng quen.
Tab Bar được ưa chuộng trên mobile vì nó gom được mấy điểm cùng lúc:
- Luôn hiển thị, không phải mở ra mới thấy, nên giải quyết được vấn đề giấu điều hướng mà NN/g chỉ ra.
- Nằm đúng trong thumb zone, ngón cái chạm tới mà không gồng.
- Giới hạn số mục (thường 3–5), buộc bạn chọn ra những lối đi quan trọng nhất: Trang chủ, Danh mục, Tìm kiếm, Giỏ hàng, Tài khoản.
Tab Bar không thay thế mọi thứ. Một danh mục sản phẩm sâu nhiều tầng vẫn có thể cần menu trượt. Nhưng làm xương sống điều hướng trên mobile thì Tab Bar hợp với cách tay người ta cầm máy hơn hẳn hamburger ở góc trên.
Đây là một trong những loại menu mà Navi+ dựng được mà không cần code, bên cạnh Mega Menu cho desktop và Slide Menu. Bạn cấu hình mobile và desktop riêng — Tab Bar ở dưới cho điện thoại, Mega Menu cho máy tính — kéo thả là xong. Một điểm đáng nói với người bán: thêm một thanh điều hướng dễ làm trang nặng thêm, mà ngưỡng “tốt” của Google cho Core Web Vitals khá chặt (LCP dưới 2,5 giây, INP dưới 200 mili giây, CLS dưới 0,1). Navi+ được tối ưu để không kéo các chỉ số này xuống, nên bạn có điều hướng đặt đúng thumb zone mà không đánh đổi tốc độ.
Vài điều nên nhớ
Thumb zone không phải mẹo trang trí. Nó là cách tôn trọng một sự thật đơn giản: rất nhiều lúc, người mua chỉ dùng một ngón cái.
Vài câu hỏi đáng tự đặt khi nhìn lại store của mình trên điện thoại:
- Nút mua chính có nằm trong nửa dưới màn hình không?
- Menu chính có hiện ra sẵn, hay đang bị giấu ở góc trên?
- Có thao tác quan trọng nào bắt khách phải với tới góc xa không?
Không cần làm lại tất cả cùng lúc. Chỉ cần cầm máy bằng một tay, đi qua hành trình mua của chính mình, và để ngón cái nói cho bạn biết chỗ nào còn vướng.
Bài viết này nằm trong cẩm nang lớn hơn về Mobile navigation — vì sao hamburger menu đang lỗi thời và nên dùng gì thay thế.