UX/UI의 10가지 심리학 법칙(2) - 피츠의 법칙

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

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

 

개요

- 사용성은 좋은 디자인을 이루는 중요한 요소로써 인터페이스가 이해하기 쉬우며, 탐색하기도 쉬워야 함

- 인터렉션은 최소한의 노력만으로 불편없이 간단하게 이뤄져야 한다

- 사용자가 대상을 사용하기 까지 걸리는 시간이 대상의 크기와 대상까지의 거리가 있다는 피츠의 법칙은

이러한 과제를 해결하는데 도움이 됨

- 대상이 커지면 대상 선택에 드는 시간이 줄어듬

 

출처 : 뭔가 이게(티스토리) - 피츠의법칙

 

- 피츠는 대상 선택 작업의 난이도(ID)를 정량화하는 측정 기준도 제시함

- 대상 중심까지의 거리(D)는 신호, 대상의 허용 오차 혹은 너비(W)는 잡음으로 간주함

 

터치 대상의 최소 권장 규격

회사/조직	권장 규격
휴먼 인터페이스 가이드라인 (애플)	44x44 pt
머티리얼 가이드라인 (구글)	48x48 dp
콘텐츠 접근성 가이드라인 (WCAG)	44x44 CSS px
닐슨 노먼 그룹	1x1 cm

 

터치 대상

- 터치 대상의 크기는 사용자가 쉽게 알아보고 정확하게 선택할 수 있을 정도로 충분히 커야함

- 터치 대상 사이에 충분한 거리를 확보해야 함

- 터치 대상은 인터페이스상에서 쉽게 도달할 수 있는 영역에 배치해야 함

 

 

스마트폰의 터치 정확성

- 요소 사이의 간격도 인터랙티브 요소의 사용성에 영양을 미침

- 요소 사이의 거리가 너무 가까우면 잘못 선택할 가능성이 높아짐

- MIT 터치 랩의 연구 결과에 따르면 성인의 손가락 지문 면의 평균 면적은 10~14mm 이고 손끝 평균 면적이 8~10mm 임

- 따라서 터치 대상의 바깥 영역도 사용자가 가끔 건드릴 수밖에 없음

- 사람들이 시선을 두거나 터치하기 선호하는 영역은 스마트폰 화면 중앙부이며 정확도도 높음

- 집중하고 싶어하는 영역 역시 화면의 중앙부임

 

사례

 

출처 : 텍스트 필드 및 양식 디자인 잘 하기 (1) : 네이버 블로그 여니

 

폼 텍스트 레이블

- 디자이너와 개발자가 텍스 레이블 요소와 입력을 연결해두면 레이블을 탭하거나 클릭해도 입력이 선택됨

- 이런 기능을 넣으면 폼 입력 표면적이 효과적으로 확장되므로, 조준의 정확도가 떨어져도 사용자는 입력에 집중 할 수 있음

- PC 사용자와 모바일 사용자 경험은 모두 향상됨

 

링크드인

- 링크드인은 대화상자 오른편에 거절 과 수락 동작이 나란치 배치되어 있음

- 두 동작이 너무 가까이 있어서 상당한 집중력을 발휘하지 않으면 원하는 것을 선택하지 못하고 실수로 다른 것을 누를 확률이 높음

 

출처 : 브런치 TESLA 집중분석 1(특허법인 BLT) - 테슬라의 터치스크린 UI 특허

 

테슬라

- 피츠의 법칙을 고려해 각 항목 사이에 충분한 간격을 둠

- 그 덕분에 다른 동작을 실수로 누를 위험이 감소함

 

출처 : 한 손으로 iPhone 화면의 상단에 접근하기 - Apple 지원

 

Apple

- 화면 상단 간편 기능을 이용하여 사용자는 간단한 제스처 만으도 화면 상단에 놓인 항목을 빠르게 화면 하단으로 내릴 수 있음

- 이 기능이 있으므로써 한 손만 쓸때는 어려웠던 인터랙션 영역도 쉽게 접근가능

 

정리

- 디자이너가 만든 인터페이스로 인간의 능력과 경험을 신장시키는 것은 중요한 책무

- 사용자의 주의가 분산되거나 사용하고자 하는 의지가 꺾이는 일은 x

- 모바일 인터페이스를 디자인 할때는 화면이 작으므로 피츠의 법칙을 각별이 유념해야 함

- 인터랙티브 요소의 크기를 충분히 키우고 요소 사이에 넉넉한 간격을 두면 사용자가 실수로 옆에 있는 항목을 누를 일이 x

- 각 인터랙티브 요소를 쉽게 구분하고 정확하게 선택o