본문 바로가기
카테고리 없음

쉽고 간단하게 알아보는 UI/UX - 피츠의 법칙 -

by _o_ch_o_Book_Shelf 2022. 7. 27.
반응형

피츠의 법칙


이미지 출처: 핀터레스트 UI



터치 대상에 도달하는 시간은 거리와 대상의 크기와 함수 관계에 있다.
터치 대상에 대한 크기는 사용자가 정확하게 선택할 수 있어야 한다.
터치하고자 하는 대상과의 거리를 충분하게 유지해야 한다.

사용성이 좋은 디자인은 디자인에서 가장 중요한 요소입니다.
사용성이라는 단어는 사용하기 쉽다는 의미도 내포하고 있습니다.
인터페이스가 이해하기 쉽고 탐색하기도 쉬워야 한다는 의미입니다.
상호작용(interaction)은 최소한의 노력으로 불편함 없이 간단하게 작동해야 하는 건데요
사용자가 상호작용 요소를 이용하기 위해 움직이는 데 드는 시간은 상호작용의 중요한 지표입니다.
디자이너는 상호작용 요소의 사이즈, 위치를 적절하게 조정하고 지정함으로써 이용자가 손쉽게 선택하게 하고 선택 가능 영역에 관한 이용자의 기대를 만족시켜야 합니다.
마우스 혹은 손을 이용한 조작과 같이 각각 정밀도가 다른 다양한 입력 방식이 존재하기 때문에 오늘날 이용자의 환경을 고려했을 때 이를 만족하게 하기가 상당히 어렵습니다.
이용자가 대상을 사용하는 데 걸리는 시간은 대상의 크기와 대상까지의 거리와도 연관이 있다고 제시한 피츠의 법칙은 이러한 문제를 해결하는 데 도움이 됩니다.
다시 얘기하자면 선택 하고자 하는 대상이 커지면 그 대상을 선택하기까지의 시간이 줄어듭니다.
또한, 선택하고자 하는 대상에 대해 움직이고자 하는 거리가 줄어들면 선택 시 시간도 줄어들게 되죠.
이와 반대로 선택하고자 하는 대상이 작고 멀어질수록 대상을 조작하기까지의 시간이 오래 걸리게 됩니다.
이해하기 쉽지만 이에 대한 효과는 상당합니다.
피츠의 법칙은 미국의 심리학자 폴 피츠가 이용자가 조작하고자 하는 대상까지의 거리와 너비 간의 비율에 관한 관계를 함수를 통해 예측하면서 탄생했습니다.
피츠의 법칙은 오늘날 인체 움직임에 대하여 가장 영향력 있는 수학적 모델로 여겨지고 있습니다.
인체 공학, 인간과 컴퓨터 간 상호작용 등 실제와 가상에 대한 행동에 관한 모델을 만드는데 널리 쓰이고 있죠.
피츠는 선택하고자 하는 대상의 난이도를 정량화하기도 했습니다.
폼 텍스트 레이블은 피츠의 법칙을 보여주는 아주 대표적인 예시입니다.
디자이너와 개발자가 텍스트 레이블을 연결해 두면 레이블을 선택해서 터치하거나 클릭하는 과정을 통해 입력이 선택되는 방식이죠
이런 기능이 도입되면 폼 입력 표면적이 효과적으로 확장됩니다.
이용자의 조작에 대한 정확도가 떨어지더라도 이용자는 입력에 대하여 집중할 수 있습니다.
이렇게 되면 PC 사용자와 모바일 사용자 모두 경험이 향상되는 효과를 발생시킬 수 있습니다.
피츠의 법칙에 대한 또 다른 예시는 폼 전송 버튼의 위치가 있습니다.
이런 종류의 버튼은 보통 맨 마지막에 입력하는 폼 주변에 배치되곤 합니다.
폼 입력이라는 하나의 동작을 완료하는 버튼이며, 폼 입력 동작과 관련하여 요소와 가까워야 하기 때문입니다.
이렇게 배치하면 두 종류의 입력이 시각적으로 연결되어 보일 수 있고 마지막 입력부터 전송 버튼까지의 거리도 최소로 줄어듭니다.
상호작용 요소 사이의 간격도 매우 중요합니다. 한쪽에 치우쳐서 거절과 수락의 동작 아이콘이 붙어있다면 두 동작 사이의 거리가 너무 가까워서 정교한 조작이 일어나지 않으면 원하는 조작에 대한 결과가 발생할 수 있습니다.
이런 경우 원하는 조작을 하기 위해서 두 손을 모두 다 사용해야 하는 경우가 발생할 수 있습니다.
이용자가 매우 쉽게 접하는 인터페이스는 스마트 폰, 노트북, PC, 차량용 인포테인먼트 시스템 등이 있습니다.
디자이너가 만든 인터페이스로 이용자의 능력과 경험을 성장시키는 것은 디자이너에게 주어진 중요한 업무 중 하나입니다.
디자이너가 제작한 인터페이스로 인해 이용자의 주의가 분산되거나, 사용하고자 하는 의지를 줄어들게 만드는 일은 없어야 합니다.
모바일 인터페이스를 제작할 때 화면이 작기 때문에 피츠의 법칙을 각별히 유념하면서 제작해야 합니다.
상호작용 요소의 크기를 충분히 크게 제작하고 요소와 요소 사이의 넉넉한 간격을 만들어 두면 이용자는 실수로 원하지 않는 요소를 선택하는 불필요한 조작을 겪지 않아도 됩니다.
이용자는 상호작용 요소를 쉽게 구분하고 정확하게 선택할 수 있어야 합니다.

반응형