Doodle Day

[UX 심리학] 피츠의 법칙 (Fitts’s Law) 본문

공부/UX 이론

[UX 심리학] 피츠의 법칙 (Fitts’s Law)

dooday 2025. 4. 25. 15:45

1. 피츠의 법칙이란?

피츠의 법칙(Fitts' Law)은 인간-컴퓨터 상호작용과 인간공학 분야에서 인간의 행동에 대해 속도와 정확성의 관계를 설명하는 기본적인 법칙이다. 시작점에서 목표로 하는 지역에 얼마나 빠르게 닿을 수 있을지를 예측하고자 하는 것이다. 이는 목표 영역의 크기와 목표까지의 거리에 따라 결정된다. 이 법칙은 폴 피츠가 1954년에 발표하였다.

이를테면, 웹페이지에서 링크가 걸린 버튼이 너무 작으면 클릭하기 힘든 이유를 설명하는 것이다.

사용자의 커서 등의 이동시간에 영향을 미치는 것은 "타겟의 사이즈"와 "타겟까지의 거리"라는 것이다.

 

2. 피츠의 법칙이 의미하는 것

  • 목표가 크고 가까울수록 선택 시간이 짧아진다.
  • 작은 목표나 멀리 떨어진 목표는 더 많은 시간이 소요된다.
  • UI/UX 설계에서 버튼 크기, 위치, 배치를 고려할 때 매우 중요한 원칙

로그인 버튼의 경우 아래쪽에 배치하는 이유

 

3. 피츠의 법칙이 적용된 좋은 디자인 예시

 

1. 네비게이션 바

  • 맥북 하단 네비게이션 바(GNB), 에어비앤비 홈페이지 네비게이션 바
  • 주요 버튼은 화면 하단에 크고 널찍하게 배치하여 엄지손가락으로 쉽게 누를 수 있도록 설계.
  • 중앙보다는 가장 자리에 배치해야 쉽고 빠르게 접근 가능.

 

가장자리는 '정확한 영역'을 제공한다.

화면의 가장자리는 커서가 그 영역을 벗어나지 않기 때문에, 사용자가 더 쉽게 목표에 도달할 수 있습니다.

예를 들어:

  • 커서를 가장자리로 움직이면 멈추는 효과가 생겨 사용자는 목표에 빠르게 도달할 수 있습니다.
  • 이는 네비게이션이 화면 중앙에 있을 때보다 사용자가 목표를 놓칠 가능성을 줄여줍니다.

(그러나, 이러한 스크린 엣지의 활용은 마우스 기반의 UI에서는 유효하지만 터치스크린에서는 유효하지 않음)

실제 연구에서는 터치스크린 장치의 경우, 오히려 엣지에 위치한 타겟을 클릭하는 시간이 늘어나는 것을 볼 수 있었습니다.

오버슈팅이 증가하거나, 사실 스크린 바깥을 클릭할 확률도 높아지기 때문입니다.

 

2. CTA(Call-to-Action) 버튼

  • CTA(Call-to-Action) 버튼을 사용자의 손에 가깝게 배치
  • "구매하기" 버튼을 눈에 띄게 배치하여 클릭 가능성을 높임.

 

 

4. 요점 정리

  • 모바일과 데스크톱 뷰포트 모두에 피츠의 법칙을 적용하는 데 사용할 수 있는 방법이 있음
  • 어떤 것을 더 쉽게 선택할 수 있게 하려면 더 크게 만들고 쉽게 닿을 수 있는 곳에 배치
  • 터치 타겟은 사용자가 정확하게 선택할 수 있을 만큼 충분히 커야 함.
  • 터치 대상 사이에는 충분한 간격이 있어야 함.
  • 터치 타겟은 인터페이스에서 쉽게 인식할 수 있는 곳에 배치.
  • 피츠의 법칙을 이용하면 의도적으로 어떤 것을 더 작게 만들어서 선택하기 어렵게 만들 수도 있다.

 


Reference

https://www.nngroup.com/articles/fitts-law/

 

Fitts's Law and Its Applications in UX

The movement time to a target depends on the size of the target and the distance to the target.

www.nngroup.com

 

반응형