Hi, My name's Khanh, I'm a UX/UI designer. Today, let's talk about FITTS'S LAW. Let's start
1. Fitts's law
According to the Fitts's law of psychologist Pauls Fitts's when he researched actions and manipulations of people, pointed out that fast movements and small targets would lead to a big error in “loss of fairness between speed and exactly.”
For example
- Manipulation time to choose exact “elements".
- The time to eyes sees “elements" to act and complete action.
- Manipulation time when press error.
So, Fitts's law would affect the interaction design of the user.
2. Optimize
Therefore, you have to note while the design for the user the “element” such as iconography, typography, or button need to be easy to use for the user.
2.1 Large and small moderate:
The most obvious implication of Fitts's' Law is this: The larger the size, the faster it will reach the target. There by reducing the error rate between targets.
2.2 Icon accompanying the note
The icons that accompany the note don’t decrease ambiguity but are even easy to understand, improving travel time to that specific target. Why? For any icon that comes with a note will be bigger than it would be without a note, this according to Fitts's law is very easy to use.
2.3 Infinite vertical target limit.
What the “infinite elements” do we have in the actual design? Exactly that edge of the screen as long as you interact and manipulate the pointer. Indeed, edge screens is like a natural wall for any pointer - as soon as the pointer reaches the edge screen, it cannot move outward, no matter how fast it hits the edge screen.
In one or two screens, the last actions of the user often tend to ignore worries if the "elements" are very large or even infinitely. And with the "infinite elements," you usually don't worry about the pointer where to stop, as long as it's to the target you want to stop at.
Therefore, to interact with the "elements" positioned next to the edge screen, the user doesn’t need to slow down like when the "elements" is placed between screens because there isn't a risk of clicking out. - the cursor will stop automatically when it reaches the edge screen.
For any mobile device, vertical infinite manipulation can be applied with a swipe instead of a button click.
Remember: Mobile devices use finger manipulations - including tap, tap and hold, zoom, slide up - down and more.
2.4 Allotment of “elements”
When the "elements" are standing too close together, the risk user exceeds or activator is wrong is something that can happen. Please consider you have used a "grid" in Figma or XD a way exactly to optimize space and distance.
Conclusion: Fitts' law states that the travel time to the target (elements) depends on its magnitude and distance. While you create the new UI, think about optimizing two variations by creating large "elements", and reorganizing the spacing and space properly before sending it to the user.
- Thank you -
1. Định luật Fitts's
Theo như định luật Fitts's của nhà tâm lý học Pauls Fitts's khi ông nghiên cứu hành động thao tác của con người, đã chỉ ra rằng các chuyển động nhanh và mục tiêu nhỏ sẽ dẫn đến lỗi lớn là “sự mất cân bằng giữa tốc độ và chính xác”. Và khi áp dụng vào UX/UI Design
Thí dụ:
- Thời gian thao tác để chọn chính xác “yếu tố”
- Thời gian mắt nhìn thấy các “yếu tố" để hành động và kết thúc hành động
- Thời gian thao tác khi nhấn bị lỗi.
Như vậy, định luật Fitt's sẽ ảnh hưởng đến thiết kế tương tác người dùng.
2. Tối ưu hóa:
Vì vậy, bạn hãy lưu ý khi thiết kế đến người dùng các “yếu tố"như Iconography hay button cần phải dễ sử dụng đến người dùng:
2.1 To nhỏ vừa phải
Hàm ý rõ ràng nhất của định luật Fitts's: Kích thước lớn sẽ chạm vào mục tiêu nhanh hơn từ đó tỉ lệ lỗi giữa các mục tiêu sẽ giảm xuống.
2.2 Biểu tượng đi kèm chú giải
Các biểu tượng đi kèm chú giải không chỉ làm giảm sự mơ hồ của biểu tượng mà thậm chí dễ hiểu hơn, cải thiện được thời gian di chuyển đến mục tiêu cụ thể đó. Tại sao lại như vậy? Vì bất kỳ một biểu tượng kèm chú thích sẽ lớn hơn khi không có chú thích, theo như định luật Fitts's thì sẽ dễ dàng sử dụng hơn.
2.3 Giới hạn mục tiêu theo vô hạn dọc
Tại thời điểm này, bạn sẽ thắc mắc: Chúng ta có những “yếu tô vô hạn” nào trong thiết kế thực? chính xác đó chính là cạnh màn hình miễn là tương tác và thao tác với con trỏ chuột. Thật vậy, các cạnh màn hình hoạt động như những bức tường tự nhiên đối với con trỏ - ngay sau khi con trỏ đến một cạnh, nó không thể di chuyển ra ngoài nó, bất kể nó chạm bức tường nhanh đến mức nào
Trong một màn hình hoặc 2 màn hình, các hành động cuối cùng của người dùng thường có xu hướng bỏ qua sự lo lắng nếu “yếu tố" rất lớn hoặc thậm chí là vô hạn. Và với những “Yếu tố vô hạn” bạn thường không lo lắng về con trỏ chuột dừng ở đâu, miễn là đến mục tiêu bạn muốn dừng.
Vì vậy, để tương tác “yếu tố” được đặt ở vị trí cạnh màn hình, người dùng không cần phải giảm tốc độ nhiều như khi các “yếu tố” ở giữa màn hình, bởi vì không có nguy cơ nhấn ra ngoài - con trỏ sẽ tự động dừng lại khi nó đến cạnh màn hình.
Hãy nhớ rằng: Thiết bị di động sử dụng các thao tác ngón tay - bao gồm nhấn, nhấn và giữ, thu phóng, trượt v.v.
2.4 Phân bổ các “yếu tố"
Khi các “yếu tố” đứng quá gần nhau, rủi ro người dùng vượt quá hoặc kích hoạt nhầm các “yếu tố" là điều có thể xảy ra, hãy cân nhắc rằng bạn đã sử dụng “lưới” trong Figma & XD để tối ưu không gian và khoảng cách.
Lời kết: Định luật Fitts's nói rằng thời gian để di chuyển đến một mục tiêu (yếu tố) phụ thuộc vào độ lớn và khoảng cách của nó. Trong khi bạn đang tạo thiết kế giao diện người dùng mới, hãy nghĩ đến việc tối ưu hóa cả hai biến này bằng cách tạo các “yếu tố” lớn, sắp xếp khoảng cách và không gian hợp lý trước khi đưa đến người dùng.
- Cảm ơn các bạn -
