Quy tắc ngón tay cái khi thiết kế giao diện Mobile
UX
16
White

Võ Hoài Nam viết ngày 17/07/2018

"Quy tắc ngón tay cái" mà mình đề cập trong bài viết này chính là thói quen sử dụng ngón tay cái trên mobile. Viết rõ ràng như vậy để tránh mấy bài viết dạng quy tắc vàng, blah blah,... Ý tưởng bài viết đến bất chợt khi mình gặp một số khó khăn.
Design for Thumbs

Ngón tay cái

Như đã nói, mình đang ngồi thiết kế

cho web khi hiển thị trên mobile (Mobile First). Đến lúc thiết kế menu điều hướng, mình xuất nó sang điện thoại để test bằng Pixate. Kết quả là mấy cái menu item như SIGN UP, SIGN ININTRODUCTION khó chạm được đúng vị trí bằng ngón tay cái. Và thế là mình quyết định tìm hiểu và dùng bài viết này để ghi chú lại kết quả tìm hiểu.

Prototype

Tại sao phải quan tâm tới ngón tay cái?

Trước hết, nhu cầu sử dụng mobile đang tăng. Do đó, kéo theo nhu cầu sử dụng phần mềm trên mobile, lướt web trên mobile,... Việc thiết kế giao diện cho mobile đang rất cần thiết.

Number of mobile phone users worldwide from 2012 to 2018 (in billions)

Hoặc các bạn có thể tham khảo link dưới đây:

Trong thiết kế giao diện, ngoài yếu tố đẹp nữa thì còn phải dễ sử dụng, sử dụng thoải mái. Theo một số thống kê thói quen khi sử dụng smartphone trước đây, ta có thể chia cách sử dụng theo như hình dưới.

Summary of how people hold and interact with mobile phones

Dựa vào cách giữ điện thoại và tương tác, ta sẽ chia ra làm 3 cách cơ bản (được đăng vào ngày 18 tháng 2, năm 2013):

  • Sử dụng tay phải hoặc trái, dùng ngón tay cái để tương tác - 49%.

    • Ngón cái tay phải - 67%.
    • Ngón cái tay trái - 33%
  • Một tay giữ, tay kia tương tác với màn hình - 36%.

    • Tương tác bằng ngón tay: ngón tay cái (72%) - ngón tay trỏ (28%).
    • Giữ bằng bàn tay: bàn tay trái (79%) - bàn tay phải (21%).
  • Giữ bằng 2 tay, sử dụng cả 2 ngón tay cái để tương tác - 15%.

    • Để màn hình dọc - 90%.
    • Để màn hình ngang - 10%.

Thumb Zone

Thumb Zone, bạn có thể hiểu nó là vùng mà ngón tay cái của bạn có thể thao tác được. Ta sử dụng 3 màu để làm rõ vấn đề:

  • Xanh: Dễ dàng thao tác.
  • Vàng: Phải với ngón tay ra chút xíu, nhưng vẫn chấp nhận được.
  • Đỏ: Khó thao tác, từ bỏ đi.

Two methods of holding a touchscreen phone with one hand

The two methods of cradling a mobile phone

Two-handed use when holding a phone vertically or horizontally

Thiết kế

Về phần thiết kế, ta nên lưu ý một số vấn đề như sau:

  • Bề rộng trung bình của ngón tay cái là 72 px.
  • Bề rộng trung bình của ngón tay trỏ là 45 ~ 57px.
  • Tính toán kích thước các components đủ rộng, nên thêm khoảng trống xung quanh.
  • Để ý đến độ tuổi, thói quen, công việc (nếu cần) của đối tượng mà bạn muốn nhắm đến.
  • Quan tâm đến kích thước các loại thiết bị. Nếu quá rộng, bạn hãy khoanh vùng chúng lại. Chẳng hạn, viết ứng dụng hỗ trợ tốt cho các màn hình kích thước 3.5 ~ 4.7 inch.
  • Mỗi hệ điều hành đều có thông số riêng cho mình. Có thể tham khảo bản tóm tắt Tự học User Interface cơ bản qua UI Document của Silicon Straits Saigon.
  • Người sử dụng Mobile Web khác với Web thông thường, họ chỉ cần một số chức năng quan trọng. Hãy đảm bảo là họ có thể làm trực tiếp mọi vấn đề chỉ cần chạm ngón tay cái vào màn hình. Hạn chế đụng tới nút Home.
  • Quên đi chuyện "hover" khi thiết kế dành cho các thiết bị cảm ứng nói chung.
  • Nội dung đơn giản, rõ ràng.

Thumb Flow

Hiểu nôm na là luồng xử lý của ngón tay cái. Dựa vào số liệu đã đưa phía trên, người dùng chủ yếu dùng bàn tay phải để giữ và ngón tay cái để thao tác. Do đó, bạn cần quan tâm đến các thao tác thường gặp nhất khi dùng ngón cái. Bạn có thể coi clip dưới đây để dễ hình dung.

Khi bạn nắm rõ cách người dùng sử dụng ngón cái thao tác thế nào, sẽ giúp chọn cách đặt components sao cho hợp lý. Dễ sử dụng, người dùng sẽ gắn bó lâu dài hơn. Vì bạn bỏ tiền ra mua sản phẩm để xài chứ không phải để "thờ".

Chuyện bên lề

Những gì mình chia sẻ nãy giờ cũng giúp một phần nào giải quyết vấn đề của mình. Số liệu thống kê thì cũng hơi cũ mong các bạn thông cảm.

Trong việc thiết kế giao diện cho mobile, điều mình cảm thấy hơi khó chịu đó chính là kích thước màn hình. Nó đủ loại kích thước màn hình, có lần mình hơi khó khăn khi thiết kế, vì mình không chuyên về design nên chả biết ước lượng thế nào là dễ thao tác. Quan điểm của mình, màn hình cỡ iPhone 5S là vừa tay, nhét túi được nên nhiều khi thiết kế dựa theo nó. Sau đó, đưa wireframe sang iPhone 6, mấy con Sammsung màn hình lớn là banh xác và có đi chăng nữa, sử dụng cảm thấy vướng tay.

Tham khảo

Nguồn: My blog - https://vhnam.github.io/tutorials/quy-tac-ngon-tay-cai-khi-thiet-ke-giao-dien-mobile/

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Võ Hoài Nam

7 bài viết.
44 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
15 6
Sẵn dịp đọc cuốn (Link) nên mình lược dịch và thêm thắt một số chỗ để có thêm tài liệu tham khảo bằng tiếng Việt. Mình sẽ chia cuốn sách ra làm nhi...
Võ Hoài Nam viết gần 3 năm trước
15 6
White
12 3
Trong một bài test của mình, có một câu là hãy thực hiện (Link) giống của (Link). Cách sử dụng là khi bạn nhập một ký tự thì sẽ gởi một request lên...
Võ Hoài Nam viết 3 năm trước
12 3
White
7 2
Lời người dịch Tiếp tục loạt bài lược dịch của cuốn "The Guide to Wireframeing". Ở phần này có một số mình không tìm được nghĩa tiếng Việt tương ...
Võ Hoài Nam viết 4 tháng trước
7 2
Bài viết liên quan
White
12 3
Trong một bài test của mình, có một câu là hãy thực hiện (Link) giống của (Link). Cách sử dụng là khi bạn nhập một ký tự thì sẽ gởi một request lên...
Võ Hoài Nam viết 3 năm trước
12 3
White
2 0
11. Sử dụng hình ảnh để thu hút sự chú ý của khách truy cập (Ảnh) Người dùng là trực quan Các trang web đã sử dụng hình ảnh đẹp được chọn để làm ...
Đào Mạnh Thắng viết hơn 2 năm trước
2 0
White
20 1
(Ảnh) Tại sao chúng ta cài đặt 1 ứng dụng ngay lần đầu tiên? Để làm cuộc sống của chúng ta tiện lợi hơn. Nhưng nếu ứng dụng đó không đáp ứng được ...
Đào Mạnh Thắng viết hơn 2 năm trước
20 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
7 bài viết.
44 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!