[📕] 2. 피츠의 법칙 - 대상의 크기와 거리

 

2. 피츠의 법칙

 

- 대상에 도달하는 시간은 대상까지의 거리와 대상의 크기와 함수 관계에 있다.

- 피츠의 법칙은 인체 움직임에 관한 가장 영향력 있는 수학적 모델로 여겨지며, 인체 공학, 인간- 컴퓨터 상호작용(HCI) 분야에서 실제로든 가상으로든 대상을 가리키는 행동에 관한 모델을 만드는 데 널리 쓰인다.

 

[핵심 요약]

- 터치 대상의 크기는 사용자가 정확하게 선택할 수 있을 정도로 충분히 커야 한다.
- 터치 대상 사이에 충분한 거리를 확보해야 한다.
- 터치 대상은 인터페이스상에서 쉽게 도달할 수 있는 영역에 배치해야 한다.

 

사용성 은 좋은 디자인을 이루는 중요한 요소다. 사용성이라는 단어에는 편하다는 의미가 담겨있다. 인터페이스가 이해하기 쉬우며, 탐색하기도 쉬워야 한다는 뜻이다.

인터랙션은 최소한의 노력만으로 불편 없이 간단하게 이뤄져야 한다. 사용자가 인터랙티브 요소를 사용하려고 움직이는 데 드는 시간은 인터랙션의 중요한 지표다. 디자이너는 인터랙티브 요소의 크기와 위치를 적절하게 지정함으로써, 사용자가 해당 요소를 손쉽게 선택하게 하고, 선택 가능 영역에 관한 사용자의 기대에 부응시켜야 한다. 마우스나 정밀도가 제각기 다른 다양한 입력 방식이 존재하는 오늘날의 사용 환경을 고려하면 꽤 어려운 과제다.

 

• 대상이 커지면 대상 선택에 드는 시간이 줄어든다.
• 대상 선택을 위해 움직이는 거리가 줄면 대상을 선택하는 데 드는 시간도 줄어든다.
• 대상이 작아지고 멀어질수록 대상 선택에 드는 시간은 늘어난다. (Bad)

 

---

 

[터치 대상의 최소 권장 규격]

 

• 애플- 44 x 44 pt
• 구글- 48 x 48 dp
• WCAG(웹 콘텐츠 접근성 가이드라인)- 44 x 44 CSS px

 

- 권장 수치가 최소치라는 점을 명심. 사용자가 정확도를 신경 쓰지 않도록 터치 대상 크기를 이 수치보다 크게 만드는 게 좋다. 터치 대상의 크기가 적당하면, 사용자는 인터랙티브 요소를 쉽게 선택할 수 있을 뿐 아니라, 사용하기 쉬운 인터페이스라고 기억한다.

- 요소 사이의 간격도 인터랙티브 요소의 사용성에 영향을 미친다. 요소 사이의 거리가 너무 가까우면 잘못 선택할 가능성이 커진다. 다른 터치 대상이 너무 가까이 있으면 뜻하지 않게 그 터치 대상을 선택하게 된다. 그러면 사용자는 불만을 느끼고 해당 인터페이스의 사용성을 낮게 평가할 것이다.

- 구글 디자인 가이드라인에서는 대상이 서로 너무 가까워서 발생하는 입력 오류를 줄이는 방법에 대해 “터치 대상 간 거리를 최소 8dp이상 확보해서 정보 밀도와 사용성을 적정 수준으로 유지하라”라고 권고한다.

- 터치 대상을 쉽게 선택하게 하려면, 크기와 간격뿐 아니라 위치도 중요하다. 닿기 어려운 위치에 있는 터치 대상은 선택하기 어렵다.

 

스마트폰을 예를 들면 스마트폰은 폼 택터가 다양하다. 스티븐 후버가 진행한 연구에 따르면 사람들이 시선을 두거나 터치하기 선호하는 영역은 스마트폰 화면의 중앙부이며, 정확도도 그 부분에서 가장 높다. 집중하고 싶어 하는 영역 역시 화면의 중앙부다. PC는 일반적으로 왼쪽 상단에서 오른쪽 하단으로 훑어보는 것과 상반되는 결과라 할 수 있다.

 

---

 

[사례]

 

1. 폼 텍스트 레이블 / 텍스트 레이블과 폼 입력의 터치 대상 영역

디자이너와 개발자가 텍스트 레이블 요소와 입력을 연결해 두면 레이블을 탭 하거나 클릭해도 입력이 선택된다. 이런 기능을 넣으면 폼 입력 표면적이 효과적으로 확장되므로, 조준의 정확도가 떨어져도 사용자는 입력에 집중할 수 있다. 그러면 PC 사용자와 모바일 사용자의 경험은 모두 향상된다.

 

2.폼 전송 버튼의 위치 /폼 전송 버튼이 마지막 입력 폼과 가까운 위치에 있다.

보통 맨 마지막에 입력하는 폼 주변에 배치한다. 폼 입력이라는 하나의 작업을 완료하는 버튼이므로, 폼 입력 동작과 관련한 요소와 가까워야 한다. 이렇게 배치하면 두 종류의 입력이 시각적으로 연결되어 보일 뿐 아니라 폼 입력에서 전송 버튼까지의 거리도 최소로 줄어든다.

 

3. 동작 사이의 간격이 너무 가까우면 사용성이 떨어진다. 아이콘이 나란히 배치되어 있을 때 실수로 다른걸 누르기 십상이다.

 

[정리]

디자이너가 만든 인터페이스로 인간의 능력과 경험을 신장시키는 것은 디자이너에게 주어진 중요한 책무이다. 디자이너가 만든 인터페이스 때문에 사용자가 분산되거나, 사용하고자 하는 의지가 꺾이는 일은 없어야 한다. 모바일 인터페이스를 디자인할 때는 화면이 작으므로 피츠의 법칙을 각별히 유념해야 한다. 인터랙티브 요소의 크기를 충분히 키우고 요소 사이에 넉넉한 간격을 두면, 사용자는 실수로 옆에 있는 항목을 선택하는 불상사를 겪지 않으며, 각 인터랙티브 요소를 쉽게 구분하고 정확하게 선택할 수 있다.