노트

피츠의 법칙

Fitts's Law

프런트엔드#book · 연결된 개념 4개

쉽게 말하면

피츠의 법칙은 멀리 있는 작은 단추는 누르기 어렵고 가까운 큰 단추는 쉽다는 법칙이에요. 엘리베이터 버튼이 작고 멀면 엉뚱한 층을 누르게 되듯, 자주 쓰는 버튼은 크게 만들어 손 닿는 곳에 둬요.

비유가 깨지는 곳 보이는 크기를 꼭 키울 필요는 없어요. 아이콘 버튼은 작게 두고 padding으로 누를 영역만 넓히고, label을 입력과 연결하면 레이블을 눌러도 포커스가 가니 그만큼 넓어지는 셈이에요.

대상에 손가락이나 커서가 닿는 데 걸리는 시간은 대상까지의 거리와 대상의 크기로 정해진다는 법칙. 멀수록, 작을수록 오래 걸리고 실수가 잦다. 1954년 심리학자 폴 피츠가 제시했다.

  • 터치 대상은 정확히 누를 수 있을 만큼 크게 만든다. WCAG(Web Content Accessibility Guidelines) 2.2는 최소 24×24 CSS px를, 많은 플랫폼 가이드는 44~48px 정도를 권한다
  • 대상 사이에 충분한 간격을 둬서 옆의 것을 잘못 누르지 않게 한다
  • 자주 쓰는 동작은 손이 쉽게 닿는 곳에 둔다. 모바일이라면 엄지가 닿는 아래쪽이다. 데스크톱에서는 화면 가장자리와 모서리에서 커서가 멈추므로 그곳은 사실상 무한히 큰 대상이 된다
  • 폼에서 label을 입력과 연결하면 레이블을 눌러도 입력에 포커스가 가서 누를 수 있는 영역이 넓어진다
  • 제출 버튼은 마지막 입력 바로 옆에 둔다. 거리가 짧고 흐름도 자연스럽다

아이콘만 있는 작은 버튼은 보이는 크기는 작게 두고 padding으로 누를 영역만 넓히는 방법을 자주 쓴다. 보이지 않는 이름은 sr-only로 붙인다.

출처: 『UX/UI의 10가지 심리학 법칙』 존 야블론스키 (원서 Laws of UX) · Laws of UX — Fitts's Law → 『UX/UI의 10가지 심리학 법칙』

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • 힉의 법칙

    결정하는 데 걸리는 시간은 선택지의 수와 복잡도에 따라 늘어난다는 법칙. 1952년 윌리엄 힉과 레이 하이먼의 실험에서 선택지가 늘수록 반응 시간이 로그 함수로 증가한다는 결과가 나왔다.

  • 제이콥의 법칙

    사용자는 대부분의 시간을 다른 사이트에서 보내므로, 우리 사이트도 이미 익숙한 사이트들처럼 동작하길 기대한다는 법칙. 사용성 전문가 제이콥 닐슨이 2000년에 제시했다.

  • 디자인 패턴

    반복해서 나타나는 설계 문제에 대한 검증된 해결 구조와 그 이름. 복사해 쓰는 완성 코드가 아니라 객체들이 협력하는 방식을 설명하는 어휘다. 1994년 이른바 GoF(Gang of Four, 네 명의 저자)의 책 『Design Patterns: Elements of Reusable Object-Oriented Software』가 23개 패턴을 정리하며 널리 퍼졌다.

  • Core Web Vitals

    실제 사용자가 느끼는 페이지 품질을 재기 위해 구글이 정한 지표 모음. 그중 로딩·반응성·시각적 안정성을 대표하는 세 가지를 Core Web Vitals라고 부른다.

  • 심플 디자인

    켄트 벡이 XP(Extreme Programming)에서 제시한 단순한 설계의 네 가지 규칙. 우선순위 순으로 ① 모든 테스트를 통과하고 ② 의도를 드러내고 ③ 중복이 없고 ④ 요소가 가장 적다. 마틴 파울러가 이렇게 정리한 형태가 널리 쓰인다.

보기 옵션