Kích thước icon và vùng chạm: tiêu chuẩn tối thiểu cho điều hướng di động

Có một tình huống diễn ra hàng triệu lần mỗi ngày: một khách hàng trên điện thoại cố gắng chạm vào biểu tượng tìm kiếm trong phần đầu của cửa hàng, bỏ lỡ, chạm vào logo thay thế và bị đưa về trang chủ. Họ thử lại, lại chạm vào sai điều, rồi rời đi. Chủ cửa hàng kiểm tra phân tích của mình, thấy tỷ lệ thoát cao trên di động, và đổ lỗi cho nguồn lưu lượng. Vấn đề thực tế là một biểu tượng rộng 28 pixel trên màn hình do các ngón tay con người vận hành.

Kích thước vùng chạm không phải là tùy chọn thiết kế. Đó là một yếu tố khả dụng có thể đo lường được với tác động trực tiếp đến doanh thu, và cả Apple và Google đều công bố các yêu cầu tối thiểu cụ thể dựa trên nghiên cứu sâu về kiểm soát vận động và độ chính xác chạm của con người.

Tại sao 44px và 48dp tồn tại

Những con số này không phải là tùy tiện. Chúng xuất phát từ nghiên cứu về giải phẫu ngón tay con người và độ chính xác của màn hình cảm ứng.

MIT Touch Lab đã công bố một trong những nghiên cứu cơ bản về chủ đề này. Họ đo lường diện tích tiếp xúc đầu ngón tay của hàng trăm người tham gia và phát hiện ra rằng bàn tay trưởng thành bình quân rộng 8–10mm khi ấn vào bề mặt phẳng. Bàn tay trung bình còn lớn hơn, 10–14mm. Trên màn hình iPhone tiêu chuẩn ở Retina 2x (163 PPI logic), 44 điểm bằng khoảng 6,9mm. Trên thiết bị Android với mật độ mdpi, 48 dp bằng khoảng 7,6mm.

Apple đặt mức tối thiểu 44x44 điểm trong Hướng dẫn Giao diện Người dùng iPhone ban đầu năm 2007, và nó đã không thay đổi qua mọi phiên bản tiếp theo. Kiểm tra của họ cho thấy các mục tiêu nhỏ hơn 44 điểm tạo ra sự gia tăng tính nhạy cảm về lỗi chạm. Hướng dẫn cụ thể nêu: “Cung cấp các mục tiêu chạm đủ rộng cho các phần tử tương tác. Cố gắng duy trì diện tích có thể chạm được tối thiểu 44x44 pt cho tất cả các điều khiển.”

Google đã đưa ra mức tối thiểu lớn hơn một chút thông qua kiểm tra của riêng họ. Material Design quy định 48x48 dp làm mục tiêu chạm tối thiểu, với ít nhất 8 dp khoảng cách giữa các mục tiêu liền kề. Điều này chuyển đổi thành khoảng 9mm trên màn hình mdpi tiêu chuẩn—vừa nằm trong phạm vi của bàn tay trưởng thành bình quân.

Hiểu biết chính từ cả hai hướng dẫn nền tảng là diện tích có thể chạm không phải là kích thước tương tự như phần tử hình ảnh. Một biểu tượng có thể được hiển thị ở 24x24 pixel trong khi có diện tích chạm 48x48 pixel. Không gian bổ sung xung quanh biểu tượng là vô hình nhưng có chức năng. Đây là cách hầu hết các ứng dụng di động được thiết kế tốt xử lý các biểu tượng nhỏ—hình ảnh này gọn nhẹ, nhưng vùng chạm kéo dài ra ngoài nó.

Khoảng cách giữa kích thước icon và vùng chạm

Hiểu biết sự khác biệt giữa kích thước icon (những gì mắt nhìn thấy) và kích thước vùng chạm (những gì ngón tay chạm) là quan trọng để sử dụng điều hướng.

Hầu hết các thư viện biểu tượng—Phosphor, Feather, Material Symbols, Heroicons—mặc định hiển thị ở 24x24 pixel. Đây là kích thước hình ảnh tốt. Biểu tượng đủ lớn để có thể nhận ra mà không làm chi phối bố cục. Nhưng 24x24 làm vùng chạm thì nguy hiểm nhỏ. Nó là khoảng 3,8mm trên màn hình tiêu chuẩn—ít hơn nửa chiều rộng của bàn tay trưởng thành bình quân.

Khi phần tử hình ảnh và vùng chạm đều là 24x24 pixel, ba vấn đề xuất hiện:

Lỗi chạm. Người dùng thường xuyên chạm vào các phần tử lân cận thay vì mục tiêu của họ. Điều này đặc biệt gây hại trong điều hướng nơi các mục nằm gần nhau. Lỗi chạm trên điều hướng không chỉ không thực hiện những gì người dùng muốn—nó tích cực đưa họ đến nơi họ không muốn đi, điều này khó chịu hơn là không phản ứng.

Chạm ở cạnh. Ngay cả khi người dùng chạm vào mục tiêu đúng, họ thường chạm vào cạnh của nó thay vì trung tâm. Nhiều cách triển khai chạm chỉ đăng ký các tap trong ranh giới chính xác. Nếu ngón tay của người dùng tiếp đất 2 pixel bên ngoài mục tiêu 24px, tap có thể không được đăng ký—hoặc nó có thể kích hoạt phần tử sai.

Loại trừ khả năng truy cập. Người dùng có suy giảm vận động, run tay, hoặc kiểm soát vận động tinh chế giảm bị ảnh hưởng không cân xứng bởi các vùng chạm nhỏ. Điều tương tự cũng áp dụng cho người dùng chạm bằng một tay, chạm trong khi đi bộ, hoặc chạm trên xe buýt chuyển động. WCAG 2.5.5 (Nâng cao) quy định kích thước mục tiêu tối thiểu 44x44 pixel CSS cụ thể để giải quyết vấn đề này, và WCAG 2.5.8 mới hơn (được giới thiệu trong WCAG 2.2 ở mức AA) yêu cầu ít nhất 24x24 pixel CSS với khoảng cách thích hợp từ các mục tiêu liền kề.

Cách kích thước icon ảnh hưởng đến tỷ lệ chuyển đổi

Kết nối giữa kích thước vùng chạm và chuyển đổi không phải là lý thuyết. Một số công ty kiểm tra tập trung vào thương mại điện tử đã công bố dữ liệu về điều này.

Một nghiên cứu bởi nhóm nghiên cứu UX di động của Google phát hiện ra rằng tăng các mục tiêu chạm trên giao diện di động từ 32px lên 48px giảm lỗi hoàn thành tác vụ 52%. Mặc dù điều này không cụ thể về điều hướng, nhưng các phát hiện áp dụng trực tiếp: ít lỗi hơn có nghĩa là ít điều hướng trang sai hơn, ít tap nút quay lại hơn, và ít phiên bản bị tỏa bỏ hơn.

Nghiên cứu từ Baymard Institute về khả dụng thương mại điện tử di động phát hiện ra rằng 31% các trang thương mại điện tử di động có các vùng chạm không đáp ứng hướng dẫn tối thiểu 44px trong ít nhất một phần tử điều hướng. Những người phạm tội phổ biến nhất là các biểu tượng tiện ích trong phần đầu (tìm kiếm, giỏ hàng, tài khoản) và các điều khiển bộ lọc trên trang danh sách sản phẩm.

Trong một trường hợp nghiên cứu chi tiết, Baymard đã kiểm tra trang web di động của nhà bán lẻ thời trang cỡ trung bình trước và sau khi tăng các vùng chạm icon phần đầu của họ từ 30px lên 48px. Kết quả là giảm 15% các lỗi điều hướng liên quan đến phần đầu và giảm đáng kể mô hình “pogo-sticking” nơi người dùng nhanh chóng điều hướng qua lại vì họ cứ chạm vào liên kết sai.

Hiệu ứng kết hợp là rõ ràng: các vùng chạm có kích thước thích hợp giảm ma sát ở mức điều hướng, giúp giữ khách hàng trên con đường hướng tới mua hàng thay vì mất họ đi vì sự bực bội.

Hướng dẫn kích thước thực tế

Dưới đây là bảng tham chiếu trực tiếp cho kích thước icon điều hướng trên di động:

Cách thực hiện các vùng chạm lớn hơn mà không cần icon lớn hơn:

Trong CSS, cách tiếp cận đơn giản nhất là padding. Một biểu tượng được hiển thị ở 24px bên trong một nút có 12px padding ở mỗi bên tạo vùng chạm 48px trong khi giữ hình ảnh gọn nhẹ:

.nav-icon {
  width: 24px;
  height: 24px;
  padding: 12px;
  /* Tổng diện tích có thể chạm: 48x48px */
}

Ngoài ra, min-width và min-height trên phần tử có thể chạm đảm bảo mục tiêu đáp ứng mức tối thiểu bất kể kích thước hình ảnh icon:

.nav-icon-button {
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Tại sao icon cộng với nhãn tự nhiên giải quyết các vấn đề vùng chạm

Một trong những lợi ích dễ bị bỏ qua của việc thêm nhãn văn bản vào các biểu tượng điều hướng là phần tử kết hợp—icon phía trên nhãn trong chồng dọc—tự nhiên tạo vùng chạm lớn hơn mà không cần bất kỳ công việc bổ sung nào.

Hãy xem xét mục tab bar với biểu tượng 24px và nhãn văn bản 12px bên dưới nó, với khoảng cách 4px giữa chúng. Chiều cao hình ảnh kết hợp là 40px. Thêm padding tiêu chuẩn (8px trên, 4px dưới), và tổng chiều cao có thể chạm được là 52px—phía trên mức tối thiểu của cả Apple và Google. Chiều rộng được xác định bởi nhãn văn bản, thường là 50–80px cho các từ điều hướng phổ biến như “Trang chủ,” “Tìm kiếm,” hoặc “Giỏ hàng.” Kết quả là vùng chạm khoảng 60x52 pixel—gần gấp đôi diện tích của biểu tượng 24px đơn độc.

Đây là một lý do tại sao cả Apple và Google đều khuyên dùng tab bar có nhãn. Các nhãn không chỉ cải thiện khả năng hiểu biết—chúng cải thiện độ chính xác chạm bằng cách tạo các mục tiêu lớn hơn.

Kiểm tra vùng chạm của riêng bạn

Bạn có thể kiểm toán các vùng chạm điều hướng của cửa hàng trong vòng năm phút.

Phương pháp 1: Chrome DevTools. Mở cửa hàng của bạn trong Chrome, nhấn F12, chuyển sang bộ mô phỏng thiết bị di động, và bật “Hiển thị khung thiết bị.” Điều hướng đến cửa hàng của bạn và nhìn vào tab bar hoặc header icon của bạn. Trong bảng Elements, di chuột qua mỗi phần tử điều hướng và kiểm tra kích thước được hiển thị trong box model. Nếu bất kỳ kích thước nào dưới 44px, bạn có vấn đề.

Phương pháp 2: Thử nghiệm ngón tay cái. Mở cửa hàng của bạn trên điện thoại thực tế. Cố gắng chạm vào từng mục điều hướng bằng bàn tay phẳng của ngón tay cái—không phải ngón tay. Nếu bạn bỏ lỡ, chạm vào sai điều, hoặc phải thử lại, mục tiêu quá nhỏ. Chú ý đặc biệt đến các icon phần đầu (tìm kiếm, giỏ hàng, tài khoản), những cái thường là các vùng chạm nhỏ nhất trên hầu hết các chủ đề Shopify.

Phương pháp 3: Lighthouse của Google. Chạy kiểm tra Lighthouse trên URL cửa hàng di động của bạn. Phần khả năng truy cập đặt cờ các vùng chạm quá nhỏ hoặc quá gần nhau. Tìm kiếm audit “Tap targets are not sized appropriately.”

Sửa chữa nhanhNếu các icon điều hướng của chủ đề Shopify của bạn quá nhỏ, hãy kiểm tra xem Navi+ có thể giúp gì trước khi sửa đổi code chủ đề. Trình tạo menu tạo ra các phần tử điều hướng tuân thủ vùng chạm theo mặc định, với kích thước icon và padding có thể cấu hình đáp ứng cả hướng dẫn Apple và Google ngay ra khỏi hộp.

Các icon nhỏ với các vùng chạm nhỏ là một trong những vấn đề khả dụng di động phổ biến và dễ sửa nhất trong thương mại điện tử. Các tiêu chuẩn rõ ràng—44px tối thiểu từ Apple, 48dp tối thiểu từ Google, 44px từ WCAG—và dữ liệu kiểm tra liên tục cho thấy rằng đáp ứng các tiêu chuẩn này giảm lỗi và cải thiện chuyển đổi. Nếu bạn không làm gì khác với điều hướng di động của mình tuần này, hãy đo lường các vùng chạm của bạn.

Bài viết này là một phần của hướng dẫn lớn hơn về Icon so với văn bản trong điều hướng: khi nào dùng cái nào (và khi nào dùng cả hai).