•
피츠의 법칙
Who is Paul Fitts?
•
핵심 요약
•
터치 대상의 크기는 사용자가 정확하게 선택할 수 있을 정도로 충분히 커야 한다.
•
터치 대상 사이에 충분한 거리를 확보해야 한다.
•
터치 대상은 인터페이스 상에서 쉽게 도달할 수 있는 영역에 배치해야 한다.
•
핵심 요약
•
터치 대상 사이에 충분한 거리를 확보해야 한다.
•
터치 대상은 인터페이스 상에서 쉽게 도달할 수 있는 영역에 배치해야 한다.
◦
개요
▪
사용성 (usability)
사용성은 좋은 디자인을 이루는 중요한 요소이다.
- 사용하기 편하다.
- 인터페이스가 이해하기 쉽다.
- 탐색하기 쉽다.
HTML
복사
▪
인터랙션 (interaction)
사용자가 인터랙티브 요소를 사용하려고 움직이는데 드는 시간은 인터랙션의 중요한 지표이다.
HTML
복사
사용성 + 인터랙션
◦
기원
▪
1954년, 터치 대상 까지 움직이는데 드는 시간, 대상까지 거리와 대상 너비 간의 비율
▪
인체 공학, 인간-컴퓨터 상호작용분야에서 널리 전파
graph
대상 선택 작업의 난이도 (ID)
대상 중심까지의 거리 (D) = signal, 대상의 허용 오차 혹은 너비 (W) = noise
◦
심화 학습
▪
터치 대상
1.
터치 대상의 크기는 사용자가 쉽게 알아보고 정확하게 선택할 수 있을 정도로 충분히 커야한다.
2.
터치 대상 사이에 충분한 거리를 확보해야 한다.
3.
터치 대상은 인터페이스 상에서 쉽게 도달할 수 있는 영역에 배치해야 한다.
▪
터치 대상의 최소 권장 규격 (권장수치가 최소치)
회사 / 조직 | 권장 규격 |
Human Interface Guideline (Apple) | 44 X 44 pt |
Material Design Guideline (Google) | 48 X 48 dp |
Web Contents Accessibility Guideline (WCAG) | 44 X 44 CSS px |
Nielsen Norman Group | 1 X 1 cm |
▪
요소 사이의 간격
1.
MIT Touch Lab
2.
Google Material Design
▪
터치 대상의 위치
1.
Smartphone form factor (Steven Hoober)
◦
사례
▪
form
1.
label
<form method="get" class="form-example">
<div class="form-example">
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required>
</div>
</form>
HTML
복사
2.
전송버튼 위치
3.
‘거절’, ‘수락’버튼 간격
▪
일상생활
1.
테슬라 모델3 대시보드 (15인치 디스플레이), 하단 네비게이션 바
좁은 간격, 인접한 다른 동작을 실수로 누를 위험
2.
◦
정리
디자이너가 만든 인터페이스 때문에 사용자의 주의가 분산되거나,
사용하고자 하는 의지가 꺾이는 일은 없어야 한다.
[모바일 인터페이스]
디자인할 때는 화면이 작으므로 피츠의 법칙을 각별히 유념해야 한다.
인터랙티브 요소의 크기를 충분히 키우고 요소 사이에 넉넉한 간격을 두면 사용자는 실수로 옆에 있는 항목을 선택하는 불상사를 겪지 않으며, 각 인터랙티브 요소를 쉽게 구분하고 정확하게 선택할 수 있다.
