Laws of UX: Quy luật thiết kế cho lập trình viên

Lập trình viên Senior không chỉ code chạy được, họ code để sản phẩm "dễ dùng". Dưới đây là 3 quy luật quan trọng nhất bạn nên áp dụng ngay vào UI của mình.

1. Định luật Fitts (Fitts's Law)

"Thời gian để chạm tới một mục tiêu phụ thuộc vào khoảng cách và kích thước của mục tiêu đó."

Ứng dụng trong UI:

• Nút bấm quan trọng: Hãy làm nó lớn hơn và đặt ở vị trí dễ chạm (đặc biệt là trên mobile).
• Khu vực click (Click Target): Đừng chỉ đặt onClick vào một icon 16px nhỏ xíu. Hãy thêm padding hoặc bọc trong một button lớn hơn (ít nhất 44x44px theo chuẩn Apple).

// ❌ BAD: Khu vực click nhỏ, khó trúng
<SearchIcon onClick={handleSearch} />

// ✅ GOOD: Tăng diện tích tương tác
<button className="p-3 hover:bg-zinc-100 rounded-full" onClick={handleSearch}>
  <SearchIcon className="w-4 h-4" />
</button>

2. Định luật Hick (Hick's Law)

"Thời gian thực hiện quyết định sẽ tăng lên theo số lượng và độ phức tạp của các lựa chọn."

Ứng dụng trong UI:

• Giảm tải lựa chọn: Đừng đưa 50 option vào một Dropdown duy nhất.
• Phân cấp thông tin: Dùng Progress Step cho Form dài thay vì hiện 20 input cùng lúc.
• Default values: Luôn để sẵn một lựa chọn phổ biến nhất.

3. Định luật Miller (Miller's Law)

"Một người bình thường chỉ có thể ghi nhớ khoảng 7 (± 2) mục trong bộ nhớ ngắn hạn."

Ứng dụng trong UI:

• Chunking (Chia nhóm): Thay vì hiện một danh sách 20 link ở Sidebar, hãy chia chúng thành các nhóm (Module) với tiêu đề rõ ràng.
• Số điện thoại/Thẻ tín dụng: Luôn format theo cụm xxxx-xxxx-xxxx để người dùng dễ kiểm tra lại.

4. Định luật Jakob (Jakob's Law)

"Người dùng dành phần lớn thời gian cho các trang web khác. Điều đó có nghĩa là họ muốn trang web của bạn hoạt động giống như các trang web khác mà họ đã biết."

Ứng dụng trong UI:

• Đừng sáng tạo thái quá: Nút "X" nên ở góc trên bên phải Modal. Search icon nên là hình kính lúp. Menu nên nằm ở trên cùng hoặc bên trái.
• Học tập các Design System lớn: Apple, Google, Stripe có lý do để làm UI như vậy. Đừng cố "phát minh lại bánh xe" trừ khi bạn thực sự có lý do cực mạnh về UX.

Kết luận

UX không phải là trang trí, UX là Tâm lý học. Code của bạn có thể hoàn hảo về logic, nhưng nếu vi phạm các quy luật này, người dùng sẽ cảm thấy " mệt mỏi" khi sử dụng. Hãy thiết kế để giảm thiểu Cognitive Load (tải nhận thức) cho người dùng.