Fitts의 법칙 활용: 전자 상거래를 위한 사용자 인터페이스 설계 원칙

전자 상거래 사이트의 구매 흐름을 약간만 개선하면 방문자를 유료 고객으로 유도할 때 큰 영향을 미칠 수 있습니다. 디자이너는 전자 상거래 사이트의 인터페이스에 Fitts' 법칙을 적용하여 사용자가 원하는 것을 정확하게 찾고 장바구니에 항목을 추가하고 궁극적으로 구매를 쉽게 하도록 만들 수 있습니다.

피츠의 법칙에 따르면 사람이 목표물을 가리키는 포인터를 이동하는 데 걸리는 시간은 목표물까지의 거리를 목표물의 크기로 나눈 함수입니다. 본질적으로 이는 더 크고 가까운 물체가 더 쉽게 상호 작용할 수 있음을 의미합니다. 이 법칙은 원래 인간 행동의 수학적 모델을 만들고 인간 신경계의 능력을 정량화하기 위해 노력한 심리학자 Paul Fitts에 의해 1954년에 고안되었습니다.

Fitts의 법칙은 속도-정확성 트레이드오프를 수량화합니다. 작업 실행이 더 정확해야 할수록 완료하는 데 더 오래 걸립니다. UI 디자인으로 번역하면 "장바구니에 추가" 버튼과 같은 대상이 사용자의 커서나 손가락에서 멀수록 대상이 커야 함을 의미합니다. 이렇게 하면 목표물에 도달하는 행위에 많은 정밀도가 필요하지 않고 신속하게 실행할 수 있습니다.

UI 구성 요소를 더 크게 만드는 것의 중요성은 명백해 보일 수 있지만 Fitts의 법칙은 시각적 효과를 위해 크기를 늘리는 것이 아닙니다. 사용자가 커서나 손가락으로 구성 요소에 도달하는 데 걸리는 시간을 줄이는 것입니다. 이는 종종 UI 구성 요소를 더 크게 만드는 것을 의미하지만 사용자가 전자 상거래 사이트를 보다 효율적으로 이동하고 궁극적으로 구매를 할 수 있도록 하는 다른 기술을 배포하는 것을 의미할 수도 있습니다.

Fitts의 법칙 공식 분해하기

Fitts가 작성한 수학 방정식은 t = a + b log2(2 d/w) 입니다. 여기서:

• t 는 시간과 같습니다.
• 및 b 는 테스트 관찰에서 파생된 회귀 계수를 나타냅니다.
• d 는 시작점과 목표 사이의 거리입니다.
• w 는 대상의 너비입니다.
• log2 는 공식이 대수임을 나타내고, log2(2 d/w) 는 목표를 획득하는 것이 얼마나 어려운지를 수량화하는 측정인 난도 지수(ID)를 산출합니다.

대수 방정식은 표적 크기 또는 거리와 반응 시간 사이의 관계를 나타냅니다. 작은 표적의 경우 크기 또는 거리를 작게 늘리면 더 쉽게 획득할 수 있지만, 큰 표적에 대해서는 크기나 거리를 조금만 늘리면 표적을 훨씬 더 쉽게 획득할 수 없습니다. 도달하다.

방정식에 비추어 전자 상거래 UI 디자이너는 사이트의 다른 항목에 상대적인 인터페이스 대상의 크기와 커서에서 해당 대상까지의 거리라는 두 가지 사항을 고려해야 합니다. 전자 상거래에 Fitts의 법칙을 적용한다는 것은 고객이 작업을 신속하게 완료하고 구매 프로세스의 다음 단계로 이동할 수 있도록 대상을 쉽게 발견하고 상호 작용할 수 있도록 하는 것을 의미합니다.

Fitts의 법칙과 전자상거래 UI 디자인: 완벽한 적합성

Fitts의 법칙은 또한 주어진 순간에 사용자 커서의 위치인 프라임 픽셀의 개념을 발생시키는 데 도움이 되었습니다. 전자상거래 UI 디자이너의 목표는 프라임 픽셀에서 타겟까지의 거리를 최대한 줄이는 것입니다. 그러나 프라임 픽셀은 가변적이기 때문에(사용자가 페이지에 도착했을 때 커서를 정확히 어디에 둘지 누가 알겠습니까?) 전자 상거래 페이지의 고정 구성 요소를 제어하여 사용자의 프라임 픽셀이 있을 가능성이 있는 위치에 가능합니다.

효율적인 제품 검색을 위한 설계

성공적인 전자 상거래 사이트에서는 제품을 쉽게 찾을 수 있습니다. 제품 발견을 개선하기 위해 Fitts의 법칙을 사용하는 한 가지 방법은 홈페이지의 영웅 섹션에 검색 기능을 추가하는 것입니다. 사람들은 웹 페이지를 예측 가능한 패턴으로 스캔하는 경향이 있으며 스캔 동작과 커서 움직임은 밀접한 상관 관계가 있습니다.

방문자가 응시할 것으로 예상되는 영역에 검색 표시줄을 배치하여 주요 픽셀을 만들기 위해 커서를 배치하면 검색 쿼리를 입력하기 위해 커서를 이동하는 데 필요한 거리를 크게 줄일 수 있습니다. 또한 예측 검색을 구현하면 사용자가 목록을 더 빨리 타겟팅할 수 있습니다.

전자상거래 메뉴 최적화

성공적인 전자 상거래 사이트의 핵심 기능은 고객이 효율적으로 탐색하고 쇼핑하려는 범주와 제품을 찾을 수 있도록 하는 메뉴입니다. 고객이 콘텐츠 카테고리 위로 마우스를 가져갈 때 나타나는 자동 드롭다운 메뉴를 채택하여 Fitts의 법칙을 적용합니다. 사용자가 항목을 선택하기 위해 커서를 멀리 이동할 필요가 없도록 하나의 목록에 너무 많은 항목을 배치하지 마십시오. 또한 좋은 정보 아키텍처와 제품 사진을 사용하여 선택을 위해 커서가 이동해야 하는 거리를 단축하는 더 큰 대상 영역을 사용자에게 제공합니다.

클릭 유도문안 버튼의 표면적 늘리기

Fitts의 법칙을 적용할 분명한 위치는 구매를 유발하는 CTA 버튼입니다. 버튼이 눈에 띄고 클릭하기 쉽도록 크게 만드십시오. 더 큰 목표를 획득하면 정확도가 낮아집니다. 또한 버튼을 스크롤 없이 볼 수 있는 부분에 포함하고 접근 가능한 대비를 적용하고 사용자가 잘못된 요소를 클릭하지 않도록 다른 구성 요소에서 충분히 멀리 배치하여 버튼을 명확하게 만듭니다. T0는 사용자의 의사 결정에 대한 확신을 더욱 높여주고 버튼의 현미경 사본이 명확하고 유익하도록 합니다.

또한 CTA 버튼을 화면 가장자리에 배치하여 사용자가 대상을 명중하면서 빠르고 부정확하게 탐색할 수 있는 화면 영역인 매직 픽셀의 사용을 최대화하는 것도 고려하십시오.

일부 행동을 다른 행동보다 더 어렵게 만드십시오

대부분의 경우 전자 상거래 UI 디자이너는 Fitts의 법칙을 적용하여 사용자의 상호 작용 속도를 높입니다. 그러나 어떤 경우에는 속도를 늦추고 싶을 수도 있습니다. 예를 들어, 디자이너는 주요 픽셀(이 경우 "장바구니에 추가" 버튼일 가능성이 높음)에서 더 멀리 떨어진 제품 추가 기능에 대해 작은 확인란을 구현할 수 있습니다. 이렇게 하면 사용자가 추가 제품을 선택할 때 더 정확해져서 원치 않는 항목을 실수로 구매하지 않도록 할 수 있습니다.

모바일 장치에 대한 피츠의 법칙

모바일 장치용 전자 상거래 UI 디자인에 Fitts의 법칙을 적용할 때 디자이너는 몇 가지 제약 조건을 고려해야 합니다.

손가락은 커서

모바일 장치에는 커서가 없습니다. 사용자는 인터페이스를 사용하기 위해 손가락에 의존합니다. 그러나 손가락은 두꺼우므로 커서보다 정확하지 않습니다. 터치 대상은 웹사이트보다 모바일 애플리케이션에서 더 커야 합니다. 화면 너비에 걸쳐 있는 CTA 버튼을 고려하고 패딩을 늘려 클릭하기 쉽게 만듭니다.

모바일 사용은 종종 한 손으로 이루어집니다.

대부분의 경우 사용자는 한 손에 모바일 장치를 잡고 엄지손가락으로 조작합니다. 이것은 일반적으로 사용자가 두 손을 사용하여 상단을 터치할 수 있도록 하지 않는 한 화면 하단과 상호 작용하도록 제한합니다. 모바일 전자상거래를 위한 UI 디자인을 고려할 때 디자이너는 엄지손가락의 자연스러운 도달 범위 내에 원하는 대상을 배치해야 합니다.

주의 사항 고려

Fitts의 법칙을 적용할 때 두 가지 핵심 질문을 고려해 볼 가치가 있습니다. 사용자가 이 페이지를 방문했을 때 달성하고자 하는 주요 목표는 무엇입니까? 그리고: 사용자가 그 목표를 쉽게 달성할 수 있도록 하려면 어떻게 해야 합니까?

피츠의 법칙은 만병통치약이 아닙니다. 그것을 적용하는 것이 의미가 있는 경우와 다른 개념이 더 적절한 경우가 있을 것입니다. 전자 상거래의 경우 사이트의 다른 측면(예: 콘텐츠가 청중에게 얼마나 잘 전달되는지)에 초점을 맞추면 더 나은 결과를 얻을 수 있는지 여부도 고려해 볼 가치가 있습니다.

또한 검색 엔진 페이지에 표시되는 광고에서 때때로 발생하는 것처럼 Fitts의 법칙이 어두운 패턴으로 사용될 수 있는 위험도 있습니다. 일반적으로 이러한 광고는 검색 결과 자체인 것처럼 페이지 상단에 표시됩니다. 이것은 광고와 마지막으로 상호작용한 구성요소 사이의 거리가 서로 가깝기 때문에 Fitts의 법칙의 한 예입니다. 관련 검색 결과 옆에 회사 광고를 표시하는 좋은 사용 사례가 많이 있지만 이러한 디자인 결정은 종종 사용자를 잘못 안내하려는 경쟁업체에 의해 도용됩니다.

전자 상거래 성공을 위한 Fitts의 법칙 따르기

Fitts의 법칙은 인터넷이 출현하기 수십 년 전에 개발되었지만 디지털 제품 설계에서 중요한 원칙입니다. 오늘날 디자이너는 Fitts의 법칙을 사용하여 전자 상거래 고객이 사이트를 탐색하고 제품을 찾고 구매할 수 있도록 하여 수익을 높일 수 있습니다.

Toptal 블로그에 대한 추가 읽기:

• 구매 경로 개척 – 전자 상거래 UX 모범 사례
• 랜딩 페이지 모범 사례(인포그래픽 포함)
• 전환하는 방문 페이지를 디자인하는 방법
• Figma에서 디자인 시스템 구축 및 확장: 사례 연구