Mở đầu — vì sao bài này quan trọng
Bạn có bao giờ thắc mắc tại sao nút "Mua ngay" trên Shopee hay Tiki lại to đùng, màu cam nổi bật, và luôn nằm ở đáy màn hình trong tầm ngón cái? Hay tại sao trên máy tính, khi bạn di chuột lên góc trên cùng bên trái để đóng cửa sổ, bạn gần như không bao giờ trượt tay? Đằng sau những quyết định thiết kế tưởng chừng đơn giản đó là một định luật đã tồn tại hơn 70 năm: Fitts's Law (Định luật Fitts).
Trong toàn bộ khóa học này, chúng ta đã và đang nói rất nhiều về việc đo lường trải nghiệm — Task Success Rate, Time on Task, Error Rate. Nhưng đo lường mà không hiểu nguyên nhân gốc rễ thì bạn chỉ mới làm được một nửa công việc. Fitts's Law là một trong số ít những "định luật" trong UX có nền tảng toán học vững chắc, cho phép bạn dự đoán thời gian và độ khó khi người dùng tương tác với một mục tiêu (target) — trước cả khi bạn kịp làm usability test.
Đây là bài đầu tiên trong nhóm các định luật tâm lý học nhận thức ứng dụng vào thiết kế (Fitts, Hick, Miller, Gestalt). Nắm được Fitts's Law, bạn sẽ giải thích được vì sao một nút bấm quá nhỏ hoặc đặt sai chỗ có thể làm sụt giảm conversion, tăng error rate, và khiến người dùng cảm thấy giao diện "khó dùng" mà không nói ra được lý do. Quan trọng hơn, bạn có một công cụ định lượng để bảo vệ quyết định thiết kế của mình trước sếp và stakeholder bằng con số, chứ không phải cảm tính.
Khái niệm cốt lõi
Công thức và ý nghĩa
Fitts's Law được nhà tâm lý học Paul Fitts đề xuất năm 1954, ban đầu để mô tả chuyển động tay người. Ngày nay nó được áp dụng rộng rãi cho mọi tương tác trỏ-và-chọn: chuột, ngón tay trên màn hình cảm ứng, thậm chí ánh mắt.
Công thức dạng chuẩn (Shannon formulation):
T = a + b × log₂(D/W + 1)
Trong đó:
- T = thời gian cần để chạm tới và chọn mục tiêu (Movement Time).
- D = khoảng cách (Distance) từ điểm bắt đầu tới trung tâm mục tiêu.
- W = chiều rộng (Width) của mục tiêu, đo theo hướng chuyển động.
- a và b = hai hằng số thực nghiệm, phụ thuộc thiết bị và người dùng (a là thời gian phản ứng/khởi động, b là tốc độ tăng theo độ khó).
log₂(D/W + 1), được gọi là Index of Difficulty (ID) — chỉ số độ khó, đo bằng đơn vị "bits". ID càng cao thì thao tác càng khó và càng tốn thời gian.Diễn giải bằng ngôn ngữ đời thường
Bạn hãy nhớ một câu duy nhất: Mục tiêu càng LỚN và càng GẦN thì càng nhanh chạm tới; càng NHỎ và càng XA thì càng khó.
Nhưng có một chi tiết tinh tế mà nhiều người bỏ qua: mối quan hệ là logarit, không phải tuyến tính. Điều này có hai hệ quả cực kỳ thực dụng:
- Tăng kích thước target đem lại lợi ích giảm dần. Nút từ 20px lên 44px cải thiện rất nhiều; nhưng từ 100px lên 200px thì gần như không ai cảm nhận được sự khác biệt. Vì vậy đừng phóng đại nút quá mức chỉ vì "to là dễ bấm".
- Khoảng cách và kích thước có thể "bù trừ" cho nhau. Một nút nhỏ đặt ngay cạnh con trỏ có thể nhanh bằng một nút to đặt ở xa. Đây chính là lý do menu chuột phải (context menu) hiện ra ngay tại vị trí click — D gần như bằng 0.
Bốn hệ quả thiết kế kinh điển
Từ Fitts's Law, cộng đồng UX rút ra bốn nguyên tắc bạn nên thuộc lòng:
1. Cạnh và góc màn hình là "vô cực". Trên desktop, khi bạn hất chuột về phía cạnh màn hình, con trỏ dừng lại ở cạnh dù bạn đẩy mạnh đến đâu. Điều này khiến W (chiều rộng hiệu dụng của mục tiêu) trở thành vô hạn theo hướng đó — bạn không thể trượt qua. Đó là lý do nút Start của Windows nằm ở góc dưới trái, và menu bar của macOS nằm sát cạnh trên. Chúng là những mục tiêu "không thể trượt".
2. Kích thước chạm tối thiểu. Apple khuyến nghị 44×44 pt, Google Material Design khuyến nghị 48×48 dp. Con số này không phải ngẫu nhiên — nó xuất phát từ kích thước trung bình đầu ngón tay người (~9-10mm) kết hợp với Fitts's Law để đảm bảo error rate chấp nhận được.
3. Nhóm các thao tác liên quan lại gần nhau để giảm D giữa các bước liên tiếp.
4. Vùng bấm (hit area) có thể lớn hơn phần nhìn thấy. Một icon nhìn thấy 24px nhưng vùng chạm 48px thì W hiệu dụng vẫn là 48px — người dùng bấm dễ mà giao diện vẫn gọn.
Tình huống thực tế
Ví dụ 1 — Sàn TMĐT Việt Nam và nút "Thêm vào giỏ" trên mobile
Hãy tưởng tượng một team UX tại một sàn thương mại điện tử giả định tên ChợViệt, doanh thu chủ yếu từ mobile web. Trên trang chi tiết sản phẩm, nút "Thêm vào giỏ hàng" ban đầu cao 32px, đặt lẫn giữa các thông tin ở giữa màn hình, và khoảng cách từ ngón cái (thường nghỉ ở đáy màn hình) tới nút khá xa.
Team đo được Time on Task để hoàn tất thao tác thêm giỏ trung bình là 2,4 giây, và tap error rate (bấm trượt, bấm nhầm) là 11%.
Áp dụng Fitts's Law, họ nhận ra hai vấn đề: W quá nhỏ (32px < ngưỡng 44px) và D quá lớn (nút ở giữa, xa vùng ngón cái). Giải pháp: chuyển nút thành thanh CTA cố định (sticky bar) cao 56px dán sát đáy màn hình. Việc dán sát đáy vừa tăng W hiệu dụng (cạnh dưới là "vô cực"), vừa giảm D xuống gần bằng khoảng cách nghỉ tự nhiên của ngón cái.
Kết quả sau A/B test: Time on Task giảm còn 1,6 giây, tap error rate giảm còn 4%, và tỉ lệ thêm-vào-giỏ tăng khoảng 8%. Bài học: trên mobile, hai đòn bẩy mạnh nhất là phóng to target và đưa nó vào vùng ngón cái (thumb zone) ở đáy màn hình.
Ví dụ 2 — Menu điều hướng dạng dropdown gây ức chế
Một startup SaaS ở Singapore, gọi là Ledgerly, có một menu điều hướng ngang. Khi rê chuột vào một mục cha, một submenu dọc bung ra bên phải. Nhân viên hỗ trợ liên tục nhận phàn nàn: người dùng rê chuột theo đường chéo tới mục con thì submenu biến mất, phải làm lại.
Đây là một bài toán Fitts's Law kinh điển. Khi người dùng di chuột theo đường chéo tới target ở góc dưới của submenu, con trỏ tạm thời rời khỏi vùng cha, và hệ thống hiểu nhầm là "rời menu" nên đóng nó. Mỗi lần thất bại buộc người dùng lặp lại chuyển động — tăng cả T lẫn error rate.
Ledgerly áp dụng kỹ thuật gọi là "triangle menu" / diagonal tolerance (nổi tiếng từ menu của Amazon): thay vì đóng submenu ngay khi con trỏ rời mục cha, hệ thống theo dõi hướng di chuyển. Nếu con trỏ đang tiến theo hình tam giác về phía submenu, menu được giữ mở thêm 300ms. Điều này cho phép người dùng đi đường chéo tự nhiên (giảm D) mà không bị "phạt". Sau khi triển khai, số ticket phàn nàn về menu giảm hơn 70%. Bài học: Fitts's Law không chỉ về kích thước tĩnh, mà còn về đường đi của con trỏ — đôi khi bạn phải nới rộng vùng chấp nhận theo thời gian và hướng, chứ không chỉ theo pixel.
Ví dụ 3 — Nút "Xóa" đặt sát nút "Lưu": bù trừ ngược
Một app quản lý công việc nội bộ của một ngân hàng tại TP.HCM có màn hình chỉnh sửa hồ sơ khách hàng. Nút "Lưu" (màu xanh) và nút "Xóa" (màu đỏ) nằm sát nhau, cùng kích thước, cách nhau chỉ 8px. Đội vận hành ghi nhận nhiều sự cố nhân viên bấm nhầm "Xóa" khi định "Lưu".
Ở đây Fitts's Law bị dùng "ngược": vì cả hai nút đều to và gần con trỏ, T để chạm tới cả hai đều rất thấp — nghĩa là ranh giới giữa đúng và sai quá mong manh. Với các thao tác nguy hiểm (destructive action), bạn muốn tăng độ khó có chủ đích.
Giải pháp: tách nút "Xóa" ra xa nút "Lưu" (tăng D tới nút nguy hiểm), thu nhỏ nó hoặc chuyển thành liên kết văn bản, và thêm một bước xác nhận. Sau thay đổi, sự cố xóa nhầm gần như biến mất. Bài học: Fitts's Law là con dao hai lưỡi. Với hành động chính, hãy làm target lớn và gần. Với hành động nguy hiểm, hãy cố ý làm nó nhỏ hơn và xa hơn.
Hướng dẫn từng bước
Đây là quy trình để áp dụng Fitts's Law vào một màn hình cụ thể:
Bước 1 — Xác định "primary action" của màn hình. Mỗi màn hình nên có một hành động chính rõ ràng (ví dụ: "Đặt hàng", "Tiếp tục", "Gửi"). Đây là target bạn ưu tiên tối ưu.
Bước 2 — Ước lượng D (khoảng cách). Xác định điểm xuất phát tự nhiên của con trỏ/ngón tay. Trên desktop, đó thường là vị trí thao tác trước đó. Trên mobile, đó là thumb zone ở nửa dưới màn hình. Đo khoảng cách từ đó tới target.
Bước 3 — Kiểm tra W (kích thước). Đảm bảo target đạt tối thiểu 44px (iOS) hoặc 48dp (Android). Nếu hình ảnh nhỏ hơn vì lý do thẩm mỹ, hãy mở rộng hit area vô hình bao quanh.
Bước 4 — Tận dụng "biên vô cực". Nếu có thể, đặt các action quan trọng ở cạnh hoặc góc màn hình (đặc biệt trên desktop), hoặc dùng sticky bar sát đáy trên mobile.
Bước 5 — Rút ngắn chuỗi thao tác. Với các bước liên tiếp (ví dụ chọn số lượng rồi bấm mua), đặt chúng gần nhau để giảm tổng D giữa các bước.
Bước 6 — Tính ID để so sánh hai phương án. Khi phân vân giữa hai layout, tính log₂(D/W + 1) cho mỗi phương án. Phương án có ID thấp hơn thường nhanh và ít lỗi hơn. Bạn không cần a, b chính xác — chỉ cần so sánh tương đối.
Bước 7 — Kiểm chứng bằng dữ liệu thật. Đừng dừng ở lý thuyết. Dùng Time on Task và Error Rate (những metric bạn đã học ở các bài trước) trong một A/B test để xác nhận giả thuyết Fitts's Law của bạn có đúng trong bối cảnh thực tế không.
Lỗi thường gặp & mẹo
Lỗi 1 — Nghĩ "to hơn luôn tốt hơn". Vì quan hệ là logarit, việc phóng nút từ đã-đủ-lớn thành khổng lồ hầu như không cải thiện tốc độ, mà lại phá vỡ bố cục và hệ thống thị giác. Hãy đủ lớn, đừng thừa.
Lỗi 2 — Bỏ quên khoảng cách giữa các target. Fitts's Law nói về khoảng cách tới target, nhưng khoảng cách giữa các target cũng quan trọng để tránh bấm nhầm. Hai nút quan trọng bấm sát nhau làm tăng nguy cơ lỗi — đặc biệt với hành động nguy hiểm.
Lỗi 3 — Quên vùng "với không tới" trên mobile. Trên điện thoại màn hình lớn (6.7 inch phổ biến ở VN), góc trên cùng nằm ngoài tầm ngón cái. Đặt primary action ở đó tương đương với D rất lớn về mặt công thái học. Luôn ưu tiên nửa dưới màn hình.
Lỗi 4 — Chỉ nghĩ tới chuột. Fitts's Law áp dụng cho ngón tay, bút stylus, remote TV, thậm chí điều khiển bằng mắt. Mỗi thiết bị có hằng số a, b khác nhau. Đừng bê nguyên layout desktop sang TV hay đồng hồ thông minh.
Mẹo 1 — Mở rộng hit area, không mở rộng hình ảnh. Với padding vô hình quanh icon nhỏ, bạn giữ được thẩm mỹ mà vẫn dễ bấm.
Mẹo 2 — Đặt hành động phá hủy ra xa. Cố ý tăng D và giảm W cho nút "Xóa", "Hủy tài khoản" để chống nhầm lẫn.
Mẹo 3 — Dùng cạnh màn hình cho toolbar. Trên web app desktop, thanh công cụ dán sát cạnh sẽ dễ trúng hơn thanh nổi ở giữa.
Mẹo 4 — Kết hợp với thumb-zone map. Overlay bản đồ vùng ngón cái lên thiết kế mobile để thấy trực quan target nào đang nằm ngoài tầm với.
Bài tập thực hành
Bài tập 1 — Tính Index of Difficulty. Cho hai nút. Nút A: D = 400px, W = 40px. Nút B: D = 200px, W = 80px. Hãy tính ID = log₂(D/W + 1) cho mỗi nút và cho biết nút nào người dùng chạm tới nhanh hơn. (Gợi ý: A cho log₂(11) ≈ 3,46 bits; B cho log₂(3,5) ≈ 1,81 bits — nút B nhanh hơn đáng kể.)
Bài tập 2 — Audit một app bạn dùng hằng ngày. Mở một app Việt Nam bạn dùng thường xuyên (MoMo, ZaloPay, Grab, Shopee). Chụp màn hình một trang có primary action. Đánh giá: (a) target có đạt 44px không? (b) nó nằm trong thumb zone không? (c) có tận dụng cạnh/đáy màn hình không? Ghi lại 3 đề xuất cải thiện dựa trên Fitts's Law.
Bài tập 3 — Thiết kế lại một form nguy hiểm. Tìm một màn hình có nút "Lưu" và "Xóa" đặt sát nhau. Vẽ lại bố cục sao cho hành động chính dễ trúng còn hành động phá hủy khó trúng hơn. Giải thích bằng ngôn ngữ Fitts's Law (D và W thay đổi thế nào).
Bài tập 4 — Đề xuất A/B test. Viết một giả thuyết dạng: "Nếu tôi tăng W của nút X và giảm D bằng cách [...], thì Time on Task sẽ giảm và conversion sẽ tăng." Xác định metric bạn sẽ đo và cách kết luận thắng/thua.
Tóm tắt
Fitts's Law cho ta một công cụ định lượng hiếm có trong UX: khả năng dự đoán độ khó và thời gian của thao tác trỏ-chọn dựa trên hai biến đơn giản — khoảng cách (D) và kích thước (W) của mục tiêu, qua công thức T = a + b × log₂(D/W + 1).
Những điều cần khắc cốt ghi tâm:
- Target càng lớn và càng gần thì càng nhanh chạm tới. Mục tiêu nhỏ và xa làm tăng thời gian lẫn error rate.
- Quan hệ là logarit: phóng to đem lại lợi ích giảm dần, nên hãy đủ lớn (44-48px) chứ đừng phóng đại.
- Cạnh và góc màn hình là mục tiêu "vô cực" — tận dụng chúng cho hành động quan trọng; trên mobile, dùng sticky bar sát đáy trong thumb zone.
- Mở rộng hit area thay vì phóng to hình ảnh để cân bằng thẩm mỹ và khả năng bấm.
- Dùng ngược Fitts's Law cho hành động nguy hiểm: làm chúng nhỏ hơn, xa hơn để chống nhầm lẫn.
- Cuối cùng, luôn kiểm chứng bằng Time on Task và Error Rate trong A/B test — lý thuyết chỉ ra giả thuyết, dữ liệu mới xác nhận.