[📚] Laws of UX #2: 피츠의 법칙(Fitts’s Law)

 

우리는 매일 수많은 버튼을 클릭하고, 아이콘을 탭하며, 메뉴를 선택합니다. 스마트폰에서 앱을 실행하거나, 컴퓨터에서 파일을 열 때, 우리의 손가락이나 마우스 커서는 목표물을 향해 움직입니다. 이 과정에서 우리는 무의식적으로 '얼마나 빨리, 정확하게 목표에 도달할 수 있을까?'를 계산합니다. 이러한 인간의 행동 패턴을 설명하는 것이 바로 'Fitts의 법칙'입니다. 오늘은 사용자 인터페이스 설계의 근간이 되는 이 중요한 원칙에 대해 자세히 알아보겠습니다.

 

Fitts의 법칙: 사용성의 수학적 모델

Fitts의 법칙은 1954년 미국의 심리학자 Paul Fitts가 제안한 인간의 운동 행동에 관한 모델입니다. 이 법칙의 핵심은 다음과 같습니다:

 

"목표물을 획득하는 데 걸리는 시간은 목표물까지의 거리와 목표물의 크기의 함수이다."

 

Fitts는 이 관계를 수학적으로 모델링하기 위해 '난이도 지수(Index of Difficulty)'라는 개념을 도입했습니다. 이 모델에서 목표물까지의 거리(D)는 '신호'로, 목표물의 너비(W)는 '노이즈'로 간주됩니다. 즉, 목표물이 멀수록 도달하기 어렵고(높은 난이도), 목표물이 클수록 도달하기 쉽다(낮은 난이도)는 것입니다.

출처: Laws of UX

이 수학적 모델은 오늘날 인간-컴퓨터 상호작용 분야에서 광범위하게 적용되고 있으며, 특히 사용자 인터페이스에서 '가리키기' 행위를 설계하고 평가하는 데 중요한 역할을 합니다.

 

실제 적용을 위한 핵심 원칙

Fitts의 법칙을 실제 인터페이스 설계에 적용할 때, 다음 세 가지 핵심 원칙을 고려해야 합니다:

1. 적절한 크기: 터치 타겟은 사용자가 정확하게 선택할 수 있을 만큼 충분히 커야 합니다. 이는 Fitts의 모델에서 목표물의 너비(W)를 증가시켜 난이도를 낮추는 효과가 있습니다.
2. 충분한 간격: 터치 타겟 사이에는 충분한 간격이 있어야 합니다. 이는 인접한 타겟을 실수로 선택하는 오류를 줄이며, 각 타겟의 '유효 너비'를 증가시키는 효과가 있습니다.
3. 최적의 위치: 터치 타겟은 인터페이스에서 쉽게 도달할 수 있는 위치에 배치되어야 합니다. 이는 Fitts의 모델에서 목표물까지의 거리(D)를 최소화하여 난이도를 낮추는 전략입니다.

이러한 원칙들을 적용함으로써, 우리는 사용자가 더 빠르고 정확하게 인터페이스와 상호작용할 수 있도록 돕는 디자인을 만들 수 있습니다.

 

인간 요소의 중요성: Fitts의 법칙의 배경

Fitts의 법칙은 단순히 이론에서 나온 것이 아닙니다. 제2차 세계대전 중 미 공군의 많은 사고가 "조종사의 실수"로 치부되던 시기에 Paul Fitts와 그의 동료 Alfonse Chapanis는 실제로 이 사고들이 조종석의 디자인 문제에서 비롯되었다는 것을 발견했습니다.

플랩과 랜딩 기어 제어 장치를 혼동 (출처: ChatGPT)

이들은 "형태 코딩"이라는 시스템을 고안하여 각 컨트롤을 구별할 수 있게 만들었고, 이는 "인간 요소"라는 새로운 패러다임의 시작이 되었습니다. 이 접근법은 완벽한 조건과 합리성을 가정하는 대신, 인간의 한계와 행동을 고려하여 기계를 설계해야 한다는 것을 강조합니다.

 

실제 적용 사례: Fitts의 법칙이 현실에서 작동하는 방식

터치 타겟 크기 최적화

출처: Apple Developer

다양한 기업과 조직에서 최소 터치 타겟 크기를 권장하고 있습니다:

• Apple (공간 인터페이스): 60 × 60 pt
• Apple (터치 인터페이스): 44 × 44 pt
• Google (Material Design): 48 × 48 dp
• WCAG: 44 × 44 CSS px
• Nielsen Norman Group: 1 × 1 cm

이러한 권장 사항은 사용자가 정확하게 터치 타겟을 선택할 수 있도록 돕습니다. 적절한 크기의 터치 타겟은 상호작용 시간을 줄이고 정확도를 높입니다.

작은 크기의 터치 대상은 사용자가 실수 없이 선택할 수 있더라도, 인터페이스의 사용성이 떨어진다는 인상을 줄 수 있습니다.

 

요소 간 간격 최적화

터치 타겟 사이의 간격도 Fitts의 법칙에서 중요한 고려사항입니다. MIT Touch Lab의 연구에 따르면, 평균적인 성인의 손가락 끝 너비는 16-20mm입니다. 사용자는 불가피하게 때때로 터치 타겟 외부를 부분적으로 터치하게 됩니다. 만약 터치 타겟들이 너무 가깝게 배치되어 있다면, 의도하지 않은 터치 타겟이 실수로 선택될 수 있습니다.

출처: Google Material Design

 

이러한 문제를 해결하기 위해, Google의 Material Design 가이드라인은 "터치 타겟들 사이에 8dp 이상의 간격을 두어 균형 잡힌 정보 밀도와 사용성을 보장해야 한다"고 권장합니다. 이는 사용자의 실수를 줄이고, 인터페이스의 사용성에 대한 인식을 높이는 데 도움이 됩니다.

 

터치 타겟 위치 최적화

터치 타겟의 위치 또한 Fitts의 법칙에서 중요한 요소입니다. 화면에서 접근하기 어려운 영역에 터치 타겟을 배치하면 사용자가 해당 타겟을 선택하는 데 더 많은 시간이 걸리고 오류 가능성이 높아집니다.

출처: UX Magazine

스마트폰의 경우, 기기의 다양한 형태와 사용자의 손 크기, 사용 방식(한 손 또는 양손)에 따라 쉽게 접근할 수 있는 영역이 달라집니다. 예를 들어, 한 손으로 스마트폰을 사용할 때 화면 상단은 접근하기 어려운 영역이 됩니다.

 

Steven Hoober의 연구에 따르면, 사람들은 스마트폰 화면의 중앙을 선호하며 이 영역에서 정확도가 가장 높습니다. 또한, 데스크톱과 달리 화면 중앙에 초점을 맞추는 경향이 있습니다. 이러한 발견은 모바일 앱 디자인에 중요한 영향을 미치며, 주요 기능이나 자주 사용하는 컨트롤을 화면 중앙이나 하단에 배치하는 것이 효과적임을 시사합니다.

 

이러한 이유로, 많은 모바일 앱에서 주요 네비게이션 요소나 중요한 액션 버튼을 화면 하단에 배치하는 것을 볼 수 있습니다. 이는 사용자가 한 손으로 기기를 사용할 때도 쉽게 접근할 수 있는 위치입니다.

 

폼 레이블과 입력 필드 연결

출처: Google Material Design

웹 폼에서 레이블을 클릭하면 관련 입력 필드가 활성화되는 것은 Fitts의 법칙을 적용한 좋은 예입니다. 이는 실질적으로 폼 입력의 선택 가능 영역을 확장하여, 사용자가 더 쉽고 빠르게 원하는 필드에 포커스를 맞출 수 있게 합니다.

 

제출 버튼 위치 최적화

출처: Parachute Design

폼 제출 버튼은 일반적으로 마지막 입력 필드 바로 아래에 위치합니다. 이는 사용자가 폼을 작성한 후 최소한의 움직임으로 제출할 수 있게 합니다.

 

아이폰의 Reachability 기능

출처: Apple

아이폰 6와 6 Plus의 출시와 함께 도입된 Reachability 기능은 Fitts의 법칙을 창의적으로 적용한 예입니다. 이 기능은 화면 상단의 내용을 화면 하단으로 내려와 한 손으로도 쉽게 조작할 수 있게 만듭니다.

 

데스크톱 OS의 무한 타겟

출처: Apple

macOS의 메뉴 바나 화면 하단의 Dock, Windows의 작업 표시줄과 같은 화면 가장자리 요소들은 '무한 타겟'의 개념을 활용합니다. 화면의 가장자리는 커서의 자연스러운 벽 역할을 하여 사용자가 옵션을 정확하게 누르는 데 속도를 늦추지 않고도 빠르게 액세스할 수 있습니다.

 

공간 컴퓨팅 인터페이스

출처: Apple

Apple의 visionOS와 같은 공간 컴퓨팅 인터페이스에서도 Fitts의 법칙이 적용됩니다:

• 주요 콘텐츠를 사용자의 시야 중앙에 배치하여 목표물까지의 거리를 최소화합니다.
• 상호작용 요소를 동일한 깊이에 유지하여 사용자의 초점 조절 필요성을 줄입니다.
• 둥근 모서리를 사용하여 타겟의 유효 면적을 증가시키고 정확도를 높입니다.

이러한 설계는 3D 공간에서의 상호작용을 더 자연스럽고 효율적으로 만듭니다.

 

맥락적 조사: Fitts의 법칙을 실제에 적용하기

Fitts와 Chapanis의 혁신적인 접근 방식은 오늘날 UX 연구에서 널리 사용되는 '맥락적 조사'의 초기 형태라고 볼 수 있습니다. 맥락적 조사는 사용자의 자연스러운 환경에서 그들의 행동을 관찰하고 인터뷰하는 방법으로, 다음과 같은 단계로 진행됩니다:

1. 준비: 참가자가 세션에 쉽게 적응할 수 있도록 먼저 자신을 소개하고, 참가자에게 조사의 목적과 과정을 설명합니다.
2. 맥락적 인터뷰: 참가자의 작업을 관찰하면서 필요시 개방형 질문을 합니다.
3. 마무리: 관찰한 내용을 정리하고 참가자에게 확인받습니다.

이러한 방법을 통해 우리는 Fitts의 법칙이 실제 사용 환경에서 어떻게 적용되는지, 그리고 어떤 추가적인 고려사항이 필요한지 더 깊이 이해할 수 있습니다.

 

적용해보기

See the Pen Fitts's Law by ‍곽윤철[학생](소프트웨어융합대학 컴퓨터공학부) (@tkuffnrk-the-typescripter) on CodePen.

 

Fitts의 법칙은 단순해 보이지만, UX 디자인에 깊은 영향을 미치는 중요한 원칙입니다. 이 법칙을 이해하고 적절히 적용함으로써, 우리는 사용자가 더 쉽고 효율적으로 상호작용할 수 있는 인터페이스를 만들 수 있습니다.

 

그러나 Fitts의 법칙을 맹목적으로 따르는 것보다는, 각 제품의 특성과 사용 맥락을 함께 고려해야 합니다. 특히 모바일 인터페이스, 차량 내 시스템, 공간 컴퓨팅 등 다양한 환경에서 이 법칙을 어떻게 적용할 수 있을지 항상 고민해야 합니다.

 

---

Reference

Laws of UX