터치 시대의 피츠 법칙

게시 됨: 2022-03-10
빠른 요약 ↬ 이 기사에서 Steven Hoober는 Fitts의 법칙에 대해 집중 조명하고 우리가 항상 질문을 해야 하는 이유를 설명하고 특정 지침과 교훈이 사용자와 제품에 의미하는 바를 고려해야 합니다.

내가 모바일 인터페이스를 위한 터치 디자인을 쓰기 시작했을 때, 나는 정기적으로 흥미로운 주제나 접선을 발견하여 잡초로 이끌었고 너무 멀리 추구하는 것을 멈춰야 했습니다. 나는 끊임없이 변화하는 주제에 대한 15권의 작업을 끝내지 못하고 죽는 은둔자가 되고 싶지 않았습니다.

그러나 많은 사람들이 독립적으로 이야기할 가치가 있으며 당신이 즐길 수 있는 것은 Fitts의 법칙과 그것이 터치스크린에서 어떻게 작동하는지입니다. 모든 종류의 대부분의 대화형 디자이너는 이것을 인식하고 일반적으로 학습의 아주 작은 부분 집합을 암기적으로 알고 있습니다. 명시된 법은 다음과 같습니다.

"사람이 목표 지역으로 포인터를 이동하는 데 필요한 시간은 목표까지의 거리를 목표의 크기로 나눈 함수입니다."

그런 다음 일련의 용어와 이를 통해 얻을 수 있는 교훈이 있습니다. 몇 가지 일반적인 사항:

  • 제로 포인트
    마우스 포인터나 커서 아래의 픽셀은 움직이지 않고 즉시 사용할 수 있습니다.
  • 클수록 좋다
    큰 타겟은 항상 작은 타겟보다 클릭하기 쉽습니다.
  • 매직 에지
    화면의 가장자리는 "무한하게 깊습니다". 마우스가 거기에 도착했을 때 멈추기 때문에 가장자리를 놓칠 수 없습니다. 예를 들어 상단 가장자리에 있는 메뉴는 약간 오프셋된 동일한 크기 항목보다 클릭하기 쉽습니다.
  • 매직 코너
    이 무한한 깊이는 모서리에 대해 두 배로 사실이므로 마우스 아래가 아닌 영역을 선택하는 것이 가장 쉽습니다.

물론 우리 모두는 이 중 많은 부분이 보편적으로 사실이 아니라는 것을 알고 있습니다. 작용하는 다른 요인이 있습니다. 지나치게 큰 버튼은 버튼으로 인식되지 않기 때문에 실제로 사용하기가 매우 어렵습니다. 사람들은 동작 개체에 초점을 맞추기 때문에 버튼 안의 아이콘이나 텍스트 레이블을 클릭하려고 하여 크기의 힘을 어느 정도 약화시킵니다.

또는 가장자리가 가장자리가 아닐 수도 있습니다. 또는 마우스의 위치는 알지만 사용자의 손은 알 수 없습니다. 또는 마우스가 전혀 없습니다.

당신의 가정을 지켜보십시오

Paul Fitts는 전쟁 중 미 공군의 고위 장교였던 심리학자였습니다. 그는 항공기와 승무원의 너무 많은 손실이 인적 요소 고려 부족으로 인해 발생했다고 확신했습니다. 그는 오하이오 주립 대학에 항공 심리학 연구소를 설립했으며, 그의 잘 알려진 연구 외에도 중요한 항공 안전 작업이 수행되었습니다.

우리가 UX 디자인에서 하는 많은 작업은 인적 요소 표준에 뿌리를 두고 있지만 적용할 때 주의해야 합니다. 예를 들어, 그들은 종종 사용자가 누구인지 가정했습니다. 젊고 색맹이 아닌 일반적으로 백인인 유럽 남성들만이 연구되었습니다. 바로 그 사람들이 비행기를 조종하고 (대부분) 표준이 산업으로 옮겨갈 때 복잡한 기계를 조작했기 때문입니다.

그러나 그들은 또한 환경에 대해 가정합니다. 비행기는 가혹하고 가혹할 수 있지만 우리는 조종사가 조종 장치와 관련이 있는 위치를 알고 있습니다. 컴퓨터 워크스테이션에서도; 그러나 사용자의 손이 어디에 있는지 알 수 없습니다. Fitts의 작업을 적용하면 손이 항상 마우스 위에 있다고 가정합니다. 포인터 아래에 있는 것을 클릭하는 데 시간이나 노력이 필요하지 않습니다. 하지만 내가 타이핑을 하거나 종이에 글을 쓰거나 방금 전화를 끊었거나 또는 다른 수천 가지 중 하나가 있다면 어떻게 될까요? 이것은 실제로 마우스의 움직임이 아니라 인간의 움직임에 관한 것입니다. 그렇죠?

디자인할 때 우리는 깊이 생각하지 않고 많은 가정을 합니다. 우리는 웹사이트와 애플리케이션의 가장자리에 컨트롤을 배치하지만 뷰포트의 가장자리는 디스플레이의 가장자리가 아닌 경우가 많습니다. 웹 브라우저 주변에 크롬이 있으며 Windows에서 최대화된 응용 프로그램조차도 작업 표시줄을 덮지 않습니다. 응용 프로그램의 아래쪽 가장자리와 모서리가 이제 무한히 깊지 않습니까?

물론 터치에도 이렇게 쉽고 매끄럽게 적용하기는 꽤 어렵습니다.

점프 후 더! 아래에서 계속 읽기 ↓

당신의 손은 어디에 있습니까?

확실히, Fitt의 작업은 사실입니다. 거리와 목표 크기는 거의 보편적으로 적용됩니다. 그러나 마우스 구동 컴퓨터 시스템의 가정에서 발생하는 단순성은 실제로 터치 시스템에 적용할 수 없습니다.

방금 사용자가 마우스를 잡고 있지 않을 수 있다는 문제를 제기한 만큼 터치의 경우 손이 어디에 있는지 전혀 알 수 없습니다. 정말, 우리는하지 않습니다. 내 작품을 읽지 않았다면 모든 사람들이 다음과 같이 한 손으로 휴대전화를 잡고 엄지손가락으로 탭한다고 생각할 수 있습니다.

누군가가 한 손으로 휴대폰을 잡고 엄지손가락으로 탭하는 일러스트
(큰 미리보기)

그러나 그들은 단순히하지 않습니다. "모바일 인터페이스를 위한 터치 디자인"의 5장에서 사람들이 다양한 방법으로 휴대전화를 잡고 계속 휴대하는 방식을 바꾸는 확실한 정보를 얻었습니다. 개별 작업 유형의 경우에도 선호하는 유지 방법이 없기 때문에 사람들이 하는 일을 어느 정도 정확하게 예측하도록 설계할 수 없습니다.

전화기에서 원하는 대상과 관련하여 손의 다양한 방법과 위치를 보여주는 막대 차트
(큰 미리보기)

그렇다면 휴대전화, 태블릿 또는 터치스크린 컴퓨터에서 원하는 대상과 관련하여 손은 어디에 있습니까? 우리는 아무 생각이 없습니다. 컴퓨터는 그것을 감지할 수 없으며 우리는 손이 어디에 있는지에 대한 지침이나 확률이 없습니다. 어느 누구도 목표로 삼지 않으며 실제로 화면의 어떤 부분도 다른 부분보다 포인터(사용자의 손)에 더 가깝지 않습니다.

윤리적인 디자인 원칙

Fitts보다 몇 세대 앞서 FW Taylor는 Gilbreth의 시간 및 운동 연구를 통해 완전히 탐구될 분석 원리를 사용하여 과학적 관리 분야를 만들고 있었습니다. 이 모든 것은 관리 관행으로 간주되었으며 작업을 수행하는 "최상의 한 가지 방법"을 찾아 결과와 효율성을 최적화하도록 설계되었습니다.

항공과 같은 전문 분야에서도 이것은 지나치게 단순화된 것으로 판명되었습니다. 인간은 기계가 아니므로 지난 수십 년 동안 CRM과 같은 관행을 통해 항공 안전을 다시 개선했습니다. 체크리스트 및 절차와 함께 팀이 협력하여 문제를 해결하거나 더 자주 문제를 피하도록 하는 인간 중심 방식의 조직 자원 관리.

가장 좋은 방법 은 오늘날에도 여전히 유효합니다. 최근 월마트가 적용한 일련의 프로세스 개선 사항에 대한 바로 그 이름이기도 합니다. 디지털 제품 디자인 팀, 개발자, 심지어 디자이너까지 필터링된 것으로 보입니다. 항상 행복한 경로로 시작하고 사용자가 시스템에서 작업할 수 있는 다른 방법에 대해 걱정하지 않는 경우 오류 메시지나 오류 방지는 중요하지 않습니다. 왜냐하면 그것은 사용자가 "잘못" 하고 있기 때문입니다.

UX는 사용자 옹호자여야 하므로 적어도 제 업무 영역에서는 이런 생각이 비윤리적이라고 생각합니다.

디지털 프로세스와 표준의 기초가 된 너무 많은 표준과 가정이 워크스테이션을 가정하고 있지만 우리는 오랫동안 컴퓨터가 무엇이며 어디에 있는지에 대해 매우 느슨했습니다.

"

이제 터치와 모바일 기기로의 전환과 함께 우리는 세상을 이렇게 경직된 관점으로 바라볼 수 있는 곳이 없다는 것을 정말로 인정해야 합니다. 우리는 사용자의 위치와 작동 방식에 대해 많은 것을 예측할 수 있지만 가정해서는 안 됩니다. 앞으로 보게 되겠지만 이러한 가정이 항상 적용되는 것은 아니므로 강제로 맞추는 것은 혼란과 실패의 원인이 될 수 있습니다.

Fitts의 Work To Touch를 적용하려는 시도

Fitts와 다른 사람들에 의한 조사의 맥락은 항공, 기계 또는 제어였지만, 그 배후의 실제 수학은 모두 1차원적 움직임만을 다룹니다. 컨트롤 평면이나 화면을 가로질러 이동하지 않고 컨트롤을 한 위치에서 다른 위치로 어느 정도 정확하게 슬라이드하는 데 걸리는 시간입니다.

이것으로 작업할 수 있지만 마우스 기반 인터페이스에 대한 기본 해석은 몇 가지 문제를 가정합니다. 예를 들어 대상 크기는 항상 수평 구성 요소로 측정됩니다. 예, 버튼이 키보다 훨씬 넓고 커서가 대상 아래에서 시작하는 경우에도 마찬가지입니다. 이것은 문제입니다.

모바일 장치의 경우 컨트롤을 탭하거나 스크롤한 후 기본 동작은 작업 공간을 지우는 것입니다. 때로는 손가락이나 엄지손가락이 초점 영역에서 멀어져 무슨 일이 일어났는지 확인하는 것을 의미하지만 대부분의 경우 손가락이 화면에서 완전히 멀어지고 약간 떨어져서 호버링하거나 휴식을 취하는 것을 의미합니다. 물론 일부 사용자는 일정 시간 동안 장치와 상호 작용할 필요가 전혀 없을 것으로 예상하는 분리된 모델로 이동 합니다. 술을 마시거나, 휴대폰을 주머니에 넣거나, 비디오를 보기 위해 내려놓습니다. 이제 전화기가 매우 멀리 떨어져 있으므로 사용자는 상호 작용을 시작하기 위해 다른 조치를 취해야 하며 상호 작용 모드로 돌아가기 위해 다소 긴 인지 전환을 수행해야 합니다.

나는 Fitts의 공식을 적용하여 난이도 지수를 얻은 다음 내 실험 데이터를 사용하여 여기에 시간 값의 기울기를 맞추는 것이 어리석은 일이라는 것을 깨달았습니다. 변수가 너무 많기 때문에 다양한 유형의 상호작용을 체계화하는 것은 평생의 일이 될 것입니다.

또한 Fitts의 작업은 이미 일반적으로 적용되지 않는 것으로 알려져 있습니다. 팔다리 움직임이 있는 시스템에만 잘 적용됩니다. 즉, 손가락만 움직이는 것이 아니라 팔 전체를 의미합니다. 마우스, 트랙패드, 조이스틱, 멍에 또는 펜 태블릿을 어떻게 사용하는지 생각해 보십시오. 약간만 움직이면 대부분의 경우 팔 전체를 움직입니다.

잘 연구된 반례의 경우 움직임 대신 힘 감지를 사용하는 아이소메트릭 조이스틱 및 기타 컨트롤 은 잘 모델링되지 않거나 자체 수정 또는 모델이 필요합니다. 가능하지만 시스템의 여러 부분에 대한 상호 작용을 다양한 방식으로 모델링해야 하므로 이를 적용하기가 어렵습니다. 그리고 1970년대와 80년대에 이에 대한 SK카드의 작업에 대해 들어본 적이 있습니까? 아니요, 물론 복잡하기 때문에 아닙니다. 개업의는 요약된 단순화된 버전이 필요합니다.

연구 결과에 대한 약간의 분석과 조사에서 터치 상호 작용 에 대해서도 동일한 것을 발견했습니다. 결과에 예측 가능성과 반복 가능성이 있지만 기존 모델에 깔끔하게 맞지 않습니다.

그리고 대체로 이것이 제가 수학적 모델보다는 지침을 제시하는 이유입니다. 휴대용 터치스크린 태블릿 및 핸드셋의 경우 사람들은 가장자리보다 중앙을 더 빠르고 정확하게 터치합니다.

화면 중앙에 엄지손가락이 있는 전화기를 들고 있는 손의 그림
(큰 미리보기)

목표 크기에 대한 이러한 지침(모두 책에 자세히 설명되어 있음)과 염두에 두어야 할 혼란스러운 문제가 있습니다. 모든 것은 인터페이스 및 상호 작용을 설계하는 데 도움이 됩니다.

두 대의 전화기에 표시되는 인터페이스를 디자인하기 위한 대상 크기가 다른 그림
(큰 미리보기)

일상 생활의 속도에 대한 설명

책과 같이 지금까지의 작업에서 탭 시간은 사용 상황에 따라 매우 다양하기 때문에 일부러 공유하지 않았습니다. 그러나 이제 여기에서 모바일 장치가 워크스테이션 사고 방식과 어떻게 사용되는지에 대한 또 다른 지침을 제공할 수 있습니다. 물론 이는 대부분의 디자인이 마우스 중심의 집중된 주의 사용에 대한 가정을 접어야 함을 의미합니다.

내가 가장 좋아하는 것은 사라지는 컨트롤 입니다. 스크롤바, 크롬 등에서 많이 볼 수 있습니다. 그러나 이제는 온라인 비디오가 표준이 된 유비쿼터스 비디오 플레이어를 살펴보겠습니다. 비디오 플레이어를 탭하여 재생을 시작한다고 가정해 보겠습니다. 컨트롤이 잠시 후 페이드 아웃되거나 슬라이드 아웃되어 전체 화면에서 비디오를 볼 수 있습니다. 초점을 맞추면 일반적으로 마우스로 잘 작동합니다. 건너뛰기 컨트롤이나 진행률 표시줄이 근처에 있으므로 재생한 다음 "크레딧"으로 이동하여 즉시 건너뛸 수 있습니다. 또한 포인터를 약간 위로 밀어 재생을 길게 이동한 다음 뒤로 앉아서 컨트롤이 사라지는 것을 볼 수 있습니다.

터치스크린에서는 일상생활이나 무심코 바라보는 시선으로 인해 산만해지면서 컨트롤이 페이드아웃되는 동일한 시간이 적용되지만 사용하기에는 충분하지 않습니다. 손가락은 불투명하므로 탭한 다음 화면에서 손가락이나 엄지손가락을 움직입니다. 그러나 아마도 우리는 그것을 보기 위해 안주하다가 어리석은 부분을 건너뛰어야 한다는 것을 깨닫게 될 것입니다. 따라서 이제 우리는 두뇌를 대화형 모드로 다시 전환해야 합니다 . 우리는 우리가 보는 것에 방향을 잡고 행동을 취하기 위해 완전히 뒤로 움직입니다. 물론 그때쯤이면 모든 것이 마우스용으로 설정되어 있는 컨트롤이 사라졌습니다.

내가 말했듯이, 시대에 유용하고 실행 가능한 지침을 제공하는 것은 어렵습니다. 그리고 터치에 대한 상호 작용 시간을 인용했다면 비교를 위해 마우스 구동 시스템에 대해서도 동일한 시간을 제공해야 합니다. 이에 대한 전체 테스트를 수행하지 않고 유사한 상호 작용의 경우 시간이 비슷하지만 모든 상호 작용과 환경이 같지는 않다는 것이 일반적인 관찰입니다.

이것을 시도하여 올바르게 디자인하고 있는지 확인하거나 리뷰 및 데모에서 더 잘 평가할 수 있습니다. 상황을 생각하고 휴대폰을 주머니에 넣거나, 앉아서 시스템이 작동하는 것을 지켜본 다음, 시간이 되면 다시 상호 작용으로 이동하십시오. 사용성 테스트도 사용자의 관심을 너무 많이 끌 수 있으므로 사용 모드와 예상 속도에 대해 비현실적인 기대치를 설정하십시오. 분석을 보고, 실제 민족지학에 대해 알아보려고 노력하고, 가능한 한 하루 종일 사용자를 관찰하고, 사람들이 컨텍스트에서 실제로 귀하의 제품을 어떻게 사용할지 열심히 생각하십시오.

WIMP에서 터치로 이동

좋습니다. 기억하고 작업에 적용하는 방법을 알아내려고 노력하는 것이 많다고 생각할 수도 있습니다. 내가 당신을 덮었습니다. 책에서처럼 역사에 대해 헛소리를 하고 수학, 인지, 생리학, 윤리학에 뛰어든 후 돌아와서 간단한 체크리스트로 결론을 내립니다.

이것은 특히 Fitts의 법칙과 함께 UI 디자인에 대한 모든 최신 조언을 찾아야 했기 때문에 조합하기가 특히 어려웠습니다. 일부는 좋거나 최선을 다하지만 실제로 정말 나쁜 조언도 있습니다.

참고 : 이 차트는 현재의 조언(좋은 것과 나쁜 것)을 내가 제공할 수 있는 새로운 최상의 조언으로 받아들이기 때문에 마우스에 대한 모범 사례에서 터치에 대한 모범 사례로 완전히 이동하지 않습니다.

마우스 및 데스크탑에 대한 기존의 지혜 터치 및 모바일 모범 사례
콘텐츠를 위에서 아래로, 왼쪽에서 오른쪽으로 배치하고 가장 중요한 내용은 왼쪽 상단 모서리에 배치합니다. 사람들은 화면 중앙에서 가장 빠르고 좋은 방식으로 읽고 상호 작용합니다. 중앙의 큰 스크롤 영역에 주요 정보를 넣으십시오.
사용자가 필요한 모든 정보를 볼 수 있도록 접힌 부분을 확인하세요. 스크롤바가 멀리 떨어져 있으므로 스크롤을 신뢰하지 마십시오. 제스처가 쉽고 일반적이기 때문에 모두 스크롤합니다. 사용자가 더 많은 콘텐츠가 있음을 알리되 스스로 발견할 수 있기를 기대하십시오.
마우스 움직임을 줄이기 위해 모든 제어 옵션을 가깝게 유지하십시오. '취소'와 '제출'은 서로 바로 옆에 있어야 합니다. 사고가 발생하므로 이질적이고 특히 파괴적인 선택을 긍정적인 행동에서 멀리 유지하십시오.
Guard 대화 상자("확실합니까?")는 우발적인 활성화로부터 잘 보호합니다. 파괴적인 행동을 전혀 피하고, 필요할 때 행동 전에 가드가 아닌 실행 취소 방법(또는 가짜 실행 취소)이 있는지 확인하십시오.
사람들은 당면한 작업에 집중하고 무엇보다 속도를 원합니다. 사람들은 세상에 살고 있으므로 주의가 산만합니다. 알림 시간을 초과하거나 작업을 수행하는 데 제한된 시간을 제공하지 마십시오.
모서리와 모서리는 무한히 깊으므로 메뉴를 빠르게 액세스할 수 있도록 배치하십시오. 가장자리와 모서리는 탭하기 가장 어려운 영역이지만 사용 빈도가 낮은 메뉴와 고정된 작업을 숨기기에 좋은 위치입니다. 그러나 몇 가지만; 사용자가 성공적으로 탭할 수 있도록 크게 만드십시오.
팝업은 마우스 아래에 나타날 수 있으므로 메뉴 및 서랍에 비해 이동이 덜 필요하기 때문에 가장 좋습니다. 팝업은 여러 면에서 끔찍합니다. 특히 컨텍스트에서 분리되어 있습니다. UI에 항목을 배치하거나 서랍, 아코디언 및 기타 상황별 항목을 사용하여 선택합니다.
기본 동작으로 마우스를 이동하는 것을 포함하여 빠르게 선택할 수 있는 도구를 사용자에게 제공합니다. 사용자가 정보에 입각한 결정을 내릴 수 있도록 권한을 부여합니다. 좋은 선택을 할 수 있도록 충분한 정보를 제공하십시오. 결과적 선택의 경우 행동으로 옮기는 지연이 좋고 실제로 그것을 수행하기를 원하는지 생각할 시간을 제공합니다.
클수록 더 좋으므로 버튼을 자유롭게 채우고 가장 중요한 버튼에는 매우 긴 레이블을 사용하십시오. 버튼과 같은 대화형 요소를 화면의 예상 위치에 필요한 만큼만 크게 만드십시오. 사용자가 읽을 수 있도록 레이블을 명확하고 간결하게 만드십시오.
방사형 메뉴는 모든 옵션이 초기 지점에서 동일한 거리에 있기 때문에 가능한 가장 빠른 메뉴입니다. 방사형 메뉴는 커서에서 멀어지면 그 가치의 많은 부분을 잃게 되며 예상치 못한 것이므로 학습 곡선이 이론적인 가치를 방해하게 됩니다.

결론

내가 일한 많은 장소에서 볼 수 있는 이 일반적인 가정이 있습니다. 다른 사람들은 모두 자신이 하는 일을 완벽하게 알고 있습니다. 우리는 단순히 Apple이나 Amazon을 모방하거나 Material Design을 의심 없이 사용하는 것이 아니라 경쟁사 또는 우리가 사용하는 좋아하는 제품에서 "영감"을 차용하고 모든 디자인 조언이 옳다고 의심 없이 믿습니다.

방금 보여드린 것처럼 표준과 관례는 틀릴 수 있습니다 . 그것들은 구식이거나, 우리가 현재 사용하지 않는 기술에 국한되거나, 좁게 적용되고 과도하게 적용되거나, 잘못 해석되고 과도하게 단순화되거나, 잘못 적용될 수 있습니다.

기술, 직장 및 일상 생활은 종종 이전의 가정을 더 이상 관련이 없게 만드는 방식을 변경합니다. 우리는 마우스와 키보드가 있는 PC와 같은 일반 컴퓨터에서 모바일 터치스크린으로의 이동이라는 이러한 큰 변화 중 하나에 대해 잘 알고 있습니다.

그러나 더 중요한 것은 우리는 항상 질문을 하고 더 깊은 이해를 구해야 합니다. 맹목적으로 따를 것이 아니라 지침과 교훈이 사용자와 제품에 어떤 의미가 있는지 항상 고려해야 합니다.

편집자 주 : "모바일 인터페이스를 위한 터치 디자인"에서 Steven은 작업에 즉시 적용할 수 있는 지침과 휴리스틱을 통해 터치 디자인에 대한 심층 연구를 공유합니다. 발췌문을 읽거나 책을 바로 받으십시오.