Mẹo thiết kế điều hướng thân thiện với ngón tay cái trên điện thoại: Tính dễ dùng thực tế cho smartphone

Tính dễ dùng trên điện thoại thường xoay quanh một câu hỏi đơn giản: liệu một người có thể thoải mái với các điều khiển bằng một tay mà không cần với, đổi cách cầm hay lo lắng làm rơi máy không? Điều hướng thân thiện với ngón tay cái trên điện thoại giải quyết vấn đề này bằng cách đặt các yếu tố tương tác ở vị trí ngón tay cái tự nhiên chạm tới, đồng thời định hình các thao tác và phản hồi cho phù hợp với cách mọi người thực sự cầm thiết bị. Mục tiêu là sự tiện lợi khi sử dụng một tay, mang lại cảm giác dễ đoán và an toàn, ngay cả trên những màn hình cao.

Tại sao tầm với của ngón tay cái quyết định mọi quyết định trên di động

Hầu hết mọi người cầm điện thoại bằng cách quấn các ngón tay quanh mặt sau và để ngón tay cái hoạt động ở mặt trước. Trên những màn hình cao hiện nay, khu vực giữa và dưới cùng là dễ với tới nhất, trong khi các góc trên cùng và các cạnh xa đòi hỏi nhiều nỗ lực hơn. Khi phải với lên trên cùng của một màn hình lớn, bạn sẽ cảm thấy không ổn định và nhanh mệt, và việc với liên tục làm tăng nguy cơ bị trượt hoặc chạm vào sai mục tiêu. Một thiết kế thân thiện với ngón tay cái tốt sẽ giảm bớt các chuyển động không cần thiết, giữ các thao tác chính trong vùng an toàn và tránh các bố cục khiến bạn phải đổi cách cầm tay một cách khó khăn.

Xác định các vùng nghỉ tự nhiên của ngón tay cái

Hãy nghĩ về màn hình như một tập hợp các vùng với tới. Vùng thoải mái nhất là phần giữa dưới của màn hình, nơi ngón tay cái tự nhiên nghỉ ngơi. Các cạnh có thể với tới nhưng ít thoải mái hơn, đặc biệt là các góc trên. Phía trên cùng của màn hình là vùng khó chạm tới nhất một cách nhanh chóng và an toàn bằng một tay.

• Các thao tác chính nên ở khu vực dưới cùng hoặc giữa dưới, nơi ngón tay cái có thể chạm mà không bị căng.
• Các thao tác phụ có thể đặt cao hơn một chút hoặc về phía các cạnh, nhưng vẫn giữ chúng trong phạm vi trượt dễ dàng.
• Các thao tác ít khi dùng hoặc có tính phá hủy nên tránh xa vùng dễ nhất để giảm thiểu các lần chạm nhầm.

Đặt các điều khiển cốt lõi trong cung di chuyển tự nhiên của ngón tay cái

Đối với hầu hết các thao tác bằng một tay, cung di chuyển tự nhiên của ngón tay cái bao phủ nửa dưới màn hình. Hãy đặt các điều khiển quan trọng nhất, như nút bấm chính, các điểm neo điều hướng và các hành động thường dùng, trong cung này. Tránh neo các điều khiển quan trọng ở trên cùng màn hình trừ khi ứng dụng thường được sử dụng bằng hai tay. Nếu một yếu tố ở trên cùng là bắt buộc, hãy cung cấp m��t cách khác để truy cập nó, chẳng hạn như một hành động dính ở dưới cùng hoặc một lối tắt dễ với tới.

Sử dụng thanh điều hướng dưới cùng cho các tác vụ thường xuyên

Thanh điều hướng dưới cùng giữ các điểm đến thường dùng ở gần ngón tay cái. Giới hạn số lượng mục trong một bộ nhỏ để các nhãn vẫn dễ đọc và vùng chạm đủ lớn. Mỗi mục nên rõ ràng, khác biệt, có nhãn hiển thị và trạng thái active mạnh mẽ. Tránh giấu các điểm đến chính bên trong một menu hamburger khi chúng được sử dụng nhiều lần mỗi ngày. Nếu ứng dụng có nhiều hơn một vài màn hình chính, hãy cân nhắc sử dụng thanh dưới cho những màn hình quan trọng nhất và một menu phụ cho các tùy chọn ít dùng hơn.

Thiết kế các vùng chạm lớn và được phân cách rõ ràng

Thiết kế thân thiện với ngón tay cái phụ thuộc vào các vùng chạm đủ lớn để bấm thoải mái. Sử dụng ít nhất 44×44 điểm (points) cho vùng chạm trên iOS và 48×48 dp trên Android làm tiêu chuẩn cơ bản, sau đó kiểm tra bằng ngón tay thật. Thêm khoảng cách rõ ràng giữa các vùng để giảm thiểu chạm nhầm. Hãy nhớ rằng kích thước trực quan của một nút có thể nhỏ hơn vùng chạm của nó; bạn có thể mở rộng vùng có thể chạm ra ngoài ranh giới trực quan để giữ bố cục gọn gàng nhưng vẫn đảm bảo tính dễ dùng.

Tôn trọng các vùng an toàn và các rãnh (inset) của thiết bị

Các điện thoại hiện đại bao gồm các góc bo trống, cụm cảm biến và các vùng thao tác hệ thống. Giữ các điều khiển tương tác tránh xa các rãnh này để các lần chạm không bị gò bó hay bị hệ thống chặn lại. Sử dụng hướng dẫn vùng an toàn của nền tảng và kiểm tra trên các thiết bị có các kiểu notch và bán kính góc khác nhau. Khoảng đệm ở mép dưới cũng giúp ngăn chặn các thao tác vuốt vô tình xung đột với các thao tác hệ thống.

Lựa chọn các thao tác thân thiện với ngón tay cái và tránh các mô hình rủi ro

Các thao tác vuốt và kéo có thể hiệu quả, nhưng chúng phải dễ thực hiện mà không cần đổi cách cầm. Các thao tác vuốt ngang ở nửa dưới màn hình thường thoải mái, trong khi các thao tác vuốt dọc dài hoặc vuốt từ cạnh có thể cảm thấy không ổn định khi dùng một tay. Nếu bạn dựa vào các thao tác, hãy cung cấp các tín hiệu trực quan rõ ràng và một con đường thay thế cho những người dùng thích chạm. Tránh đặt các hành động quan trọng ở các góc khó với tới hoặc yêu cầu các thao tác chính xác trên các điều khiển nhỏ.

Giữ các hành động quan trọng cố định và liên tục hiển thị

Khi một hành động được sử dụng lặp đi lặp lại trong một phiên, hãy giữ nó hiển thị và ở cùng một vị trí. Một thanh hành động dính ở dưới cùng hoặc một nút hành động nổi (FAB) ở khu vực dưới có thể giúp người dùng đỡ phải tìm kiếm và cuộn. Tính nhất quán rất quan trọng: việc di chuyển các điều khiển xung quanh buộc người dùng phải học lại vị trí và làm tăng số lần chạm nhầm. Nếu một hành động xuất hiện ở các ngữ cảnh khác nhau, hãy giữ vị trí và kiểu dáng của nó dễ đoán.

Hỗ trợ sử dụng một tay với bố cục nội dung thông minh

Đặt nội dung chính và các điều khiển ở gần phía dưới, nhưng cũng đảm bảo việc đọc và cuộn vẫn thoải mái. Tránh các thẻ có chiều rộng đầy đủ khiến bạn phải với ra các cạnh xa để thực hiện các hành động thường xuyên. Đối với các danh sách và nguồn cấp dữ liệu, hãy giữ các yếu tố tương tác quan trọng nhất, như thích, trả lời hoặc mở, ở gần bên phải hoặc trung tâm, nơi ngón tay cái có thể chạm tới mà không cần đổi cách cầm. Nếu một màn hình bắt buộc phải có các điều khiển ở trên cùng, hãy cung cấp cách để kéo các hành động chính xuống dưới hoặc đưa ra một lối tắt ở dưới cùng.

Để phản hồi rõ ràng và dễ tha thứ

Các lần chạm bằng ngón tay cái chính xác hơn so với nhấp chuột, vì vậy phản hồi phải nhanh chóng và rõ ràng. Sử dụng các trạng thái trực quan cho hover, focus, pressed và disabled. Cung cấp xác nhận rung hoặc hình ảnh cho các hành động quan trọng. Thêm tính năng hoàn tác (undo) cho các thao tác có tính phá hủy khi có thể, và tránh các vùng chạm nhỏ đòi hỏi sự chính xác tuyệt đối. Việc phòng ngừa và khắc phục lỗi rõ ràng giúp việc sử dụng một tay cảm thấy an toàn và thoải mái hơn.

Kiểm tra bằng tay thật và trong ngữ cảnh thực tế

Các giả định thiết kế nên được kiểm chứng với người dùng thực tế khi họ đang di chuyển. Quan sát các phiên sử dụng một tay khi đang đi bộ, đứng hoặc ngồi. Chú ý các lần đổi cách cầm, các lần với của ngón tay cái và các lần chạm nhầm. Kiểm tra hiệu suất trên các điện thoại nhỏ hơn và lớn hơn, và xem xét các kích thước tay khác nhau. Những thay đổi nhỏ, chẳng hạn như di chuyển một nút xuống thấp hơn hoặc tăng khoảng cách, có thể tạo ra tác động đáng kể đến sự thoải mái và tỷ lệ hoàn thành tác vụ.

Một checklist thực tế cho điều hướng thân thiện với ngón tay cái trên điện thoại

• Đặt các thao tác chính trong vùng giữa dưới, nằm trong cung di chuyển tự nhiên của ngón tay cái.
• Sử dụng thanh điều hướng dưới cùng cho các điểm đến thường xuyên nhất và giữ nhãn hiển thị rõ ràng.
• Phóng to các vùng chạm lên ít nhất 44×44 điểm hoặc 48×48 dp, với khoảng cách đủ lớn.
• Tôn trọng các vùng an toàn và giữ các điều khiển tránh xa các rãnh hệ thống và thao tác vuốt từ cạnh.
• Giữ các điều khiển quan trọng cố định để chúng không di chuyển trong suốt phiên sử dụng.
• Cung cấp các lựa chọn thay thế cho các yếu tố khó với tới ở trên cùng hoặc các cạnh xa.
• Sử dụng phản hồi rõ ràng và các mô hình dễ tha thứ như hoàn tác cho các hành động rủi ro.
• Kiểm tra trên nhiều thiết bị với việc sử dụng một tay thực tế trong điều kiện hàng ngày.

Điều hướng thân thiện với ngón tay cái không chỉ là về một widget hay xu hướng duy nhất; đó là một cách tiếp cận nhất quán để đặt menu và nút bấm ở vị trí ngón tay cái tự nhiên chạm tới. Khi các điều khiển cốt lõi nằm trong vùng thoải mái, các mục tiêu đủ lớn, khoảng cách đủ lớn và phản hồi rõ ràng, việc sử dụng một tay trở nên dễ dàng. Hãy bắt đầu bằng việc kiểm tra các màn hình bạn dùng nhiều nhất, di chuyển các hành động chính xuống thấp hơn và xác nhận các thay đổi với người dùng thực. Những thay đổi nhỏ, đầy suy nghĩ về vị trí và kích thước có thể khiến các tương tác di động hàng ngày trở nên nhẹ nhàng, nhanh chóng và đáng tin cậy hơn.