스티어링 법칙: UI 디자인에 대한 시사점

페이지 라브하이머 2019년 6월 23일

요약: 드롭다운, 계층 메뉴, 슬라이더 또는 스크롤바가 경로를 통해 포인터나 커서를 조종하는 것을 포함한다. 이러한 GUI 요소에 대한 최적의 설계는 스티어링 법칙을 고려해야 한다.

아코트-자이 스티어링 법칙 (HCI 연구원 조니 아코트와 슈민 자이에 의해 발견되었지만, 간단히 스티어링 법칙으로 알려짐)은 피츠의 법칙에 따른 결과입니다. 스티어링 법칙은 매우 일반적인 상호 작용의 효율성을 예측하는 방정식입니다. 이것은 경로 조정 작업의 특별한 경우를 설명합니다. 즉, 사용자가 경계 또는 "터널"이 있는 경로를 통해 포인터를 이동해야 하는 경우를 나타냅니다. 방정식은 다음과 같습니다.

[https://media.nngroup.com/media/editor/2019/05/31/steeringlawequation.png]

T는 전체 이동 시간, a와 b는 상수, A는 터널의 길이, W는 터널의 폭입니다.

걱정마세요. UX 전문가 대부분은 이 방정식을 사용할 필요가 없습니다. 실용적인 주요 통찰력은 길고 좁은 터널이 짧고 넓은 터널보다 탐색하는 데 더 많은 시간이 걸린다는 것입니다.

정의: 스티어링 법칙은 포인터 (예: 마우스 커서)를 제한된 터널 (예: 메뉴, 스크롤바 또는 슬라이더)을 통해 조종하는 데 필요한 시간을 예측합니다. 조종 시간은 터널의 길이와 너비에 달려 있습니다. 터널이 길어질수록 터널의 폭이 좁을수록 터널을 성공적으로 조종하는 데 더 많은 시간이 소요됩니다.

스티어링 법칙에 따르면, 터널은 경계가 있는 경로를 따라 사용자가 커서를 움직이는데 필요한 (또는 터치 스크린에서 손가락을 드래그하는) 사용자 인터페이스 컨트롤입니다. 경계를 넘어서면 약간의 결과가 발생하지만 일반적인 사용자 오류이기 때문에 포인터가 터널 외부에 있을 때 컴퓨터가 멈추는 등의 결과는 가볍게 느껴질 것입니다. 이러한 유형의 상호 작용을 포함하는 가장 일반적인 UI 요소에는 드롭 다운 메뉴 (특히 마우스를 가져가면 하위 메뉴가 있는 계층 메뉴), 매개변수 제어 슬라이더, 스크롤바, 비디오 재생 스크러버 막대 및 직선으로 드래그 앤 드롭이 필요한 비디오 게임 요소가 있습니다.

[https://media.nngroup.com/media/editor/2019/05/31/video-scrubber.png]

유튜브에서는 동영상 하단의 재생 스크러버가 스티어링 법칙을 준수하는 터널의 예입니다.

대부분의 경우 터널 경계 바깥으로 이동하면 사용자 작업이 중단됩니다. 예를 들어 계층적 드롭 다운 메뉴에서 메뉴 영역 바깥으로 커서를 이동하면 메뉴가 사라집니다 (터널 손상이 발생한 경우 다소 가혹한 처벌입니다). 그래서 터널의 너비가 사용자가 쉽게 조종할 수 있도록 하는데 중요합니다. 좁은 터널로 인해 실수로 터널 영역을 쉽게 빠져 나올 수 있습니다.

[https://media.nngroup.com/media/editor/2019/05/31/macos-lshape-menu.png]

맥OS에서 마우스 커서를 계층 메뉴로 이동하는 작업은 90도 회전으로 분리된 일련의 선형 경로 조정 작업이 필요합니다. 주 메뉴 안에서 하위 메뉴가 호버 상태로 열립니다. 이 L형 순서의 두 번째 단계 (찾기에서 자식 메뉴로 이동)는 사용자가 오류없이 이동하는 것이 느리고 어렵다는 가장 좁은 터널을 포함합니다.

[https://media.nngroup.com/media/editor/2019/05/31/macos-diagonal-menu.png]

많은 사용자가 Find에서 하위 메뉴 항목으로 이동하려고 시도하지만, 마우스를 사용하면 Spelling and Grammar 영역을 건너므로 대상 하위 메뉴가 사라지고 대신 Spelling and Grammar가 열립니다. (맥OS 구버전은 닐슨 노먼 그룹 교장 브루스 토냐치니가 디자인 한 메뉴를 특징입니다. 이 메뉴는 이 동작을 인식하지 않고 사용자가 대각선으로 이동할 수 있도록 벡터 기반 삼각형 버퍼를 사용했습니다. 유감스럽게도, 올해 이후로 애플은 이 우수한 상호 작용 설계를 되돌렸습니다.)

사람들이 직선 경로에서 커서를 유지하는데 어려움을 겪는 이유는 인간 생리학과 관련이 있습니다. 손의 움직임을 가능하게 하는 팔꿈치와 손목은 선이 아니라 호를 묘사합니다. 직접 시험해보십시오. 팔을 앞으로 들고 손을 왼쪽에서 오른쪽으로 움직이십시오. 직선으로 계속 움직이더라도 팔은 항상 움직임에 미묘한 원호를 가지고 있음을 알 수 있습니다. 결과적으로, 길고 직선으로 움직이기 위해 손을 사용하는 것은 물리적으로 어렵습니다. 동작이 길수록 오류의 가능성이 커집니다. 뿐만 아니라 많은 사용자 (특히 노약자와 장애인)는 불안정한 손을 가지고 있으며, 전세계 모든 모바일 사용자는 장치를 사용하는 것에 불안감을 느낍니다.

스티어링 법칙에 맞게 메뉴 만들기

메뉴는 스티어링 법칙에 가장 영향을 받는 사용자 인터페이스 요소 중 하나입니다. 다음은 사용하기 쉬운 디자인 선택권입니다.

드롭 다운 메뉴는 가능한 한 짧게 유지하십시오. 선택의 폭이 좁은 메뉴는 좁은 터널을 통과하는 시간과 어려움을 최소화하며 많은 선택을 통해 시각적으로 검색하는 시간을 줄여줍니다.

계층 메뉴, 특히 두 단계 이상의 계층 구조 메뉴를 사용하지 마십시오. 계층 메뉴는 본질적으로 스티어링 법칙 때문에 잘 디자인하기 어려운 사용자 인터페이스입니다. 계층 메뉴와 관련된 두 개의 터널, 즉 주 메뉴 영역에 해당하는 수직 터널과 하위 메뉴를 열 때 사용자가 가로질러야 하는 하위 카테고리 이름에 해당하는 수평 터널을 설계하는 것 사이에는 항상 상충 관계가 있습니다.

- 수직 터널은 짧아야 하지만, 메뉴의 각 항목에 작은 높이를 지정해야 할 수도 있습니다. 좁은 수평 터널이 생깁니다.

- 수직 터널은 넓어야 하지만, 메인 메뉴 옵션에서 해당 하위 메뉴까지 더 긴 수평 터널이 생깁니다.

[https://media.nngroup.com/media/editor/2019/05/31/menu-width-optimization-zoom.png]

Costco.com 의 계층 메뉴는 스티어링 법칙 효과에 맞게 계층 메뉴를 최적화하고 수직 터널 (왼쪽)과 수평 터널 (오른쪽)의 크기를 절충한다는 본질적인 교환을 보여줍니다. 넓은 메뉴는 메뉴를 쉽게 조작 할 수 있도록 수직 터널을 최적화합니다. 특히 많은 선택 항목이 있는 메뉴의 경우 유용합니다. 그러나 메뉴를 넓게 설정하면 가로 터널의 길이가 늘어나고 해당 하위 메뉴에 접근하기 위해 메뉴를 가로질러 이동하면 오류가 더 많이 발생합니다. 대부분의 메뉴는 단순히 가장 긴 텍스트 레이블만큼 넓게 만들어지기 때문에 스티어링 법칙에 전혀 최적화되지 않았다는 점에 유의하십시오.

계층 메뉴가 절대적으로 필요한 경우 마우스를 가리키면 하위 메뉴가 표시 될 때까지 약간의 시간 지연을 사용합니다 (또는 대각선 이동 오류를 허용하기 위해 벡터 기반 삼각형 시스템 사용). 또한 수평 이동을 위해 터널의 너비를 늘리려면, 각 메뉴 항목 위아래로 가능한 많은 패딩을 포함하십시오.

네비게이션 메뉴의 경우 풀다운 메뉴의 대안으로 메가 메뉴 (또는 정사각형 메뉴)를 고려하십시오. 메가 메뉴는 넓은 2D 공간에서 자유로운 움직임을 허용하기 때문에 스티어링 법칙은 적용되지 않습니다 (피츠의 법칙은 여전히 그렇지만 목표가 여전히 큰지 확인하십시오).

슬라이더, 스크롤바 및 스크러버에는 정밀도를 위한 추가 컨트롤이 필요하다

슬라이더, 스크롤바 및 비디오 재생 헤드와 같은 경로 조정 작업과 관련된 다른 UI 요소를 디자인 할 때 사용자는 이러한 컨트롤로 정밀도를 얻는데 어려움을 겪습니다. 따라서 정확한 작업을 위해 이러한 UI 요소를 정밀도를 지원하는 다른 보조 컨트롤로 보완하십시오. 슬라이더를 사용하여 매개변수 값을 선택하는 경우, 슬라이더를 거친 제어 (일반적으로 원하는 영역에 도달)로 사용하고 두번째 정밀 제어 (예: 스테퍼 버튼이 있는 숫자 입력 상자)를 사용하여 특정 값을 선택하십시오. 또한 사용자가 슬라이더의 아무 곳이나 클릭하여 클릭 및 드래그를 요구하지 않고 원하는 위치로 건너뛸 수 있습니다. 이 접근법을 통해 사용자는 터널을 조종할 필요없이 2D 공간에서 자유롭게 이동할 수 있습니다. 터치 스크린에서 슬라이더 손잡이의 전체 대상 크기 (적어도 1cm x 1cm 여야 함)를 고려하고 사용자의 손가락이 슬라이더 (또는 주변의 모든 레이블)를 가리지 않도록 하십시오.

관대하게

마지막으로, 터널에 패딩을 추가하여 화면의 시각적 표현보다 효과적으로 너비를 늘릴 수 있습니다. 패딩은 사용자가 터널의 시각 영역 외부에서 작은 편차로 인해 탈락하지 않고 터널을 따라 움직일 수 있는 흔들거리는 공간을 허용합니다.

요약

스티어링 법칙에 따르면 좁고 긴 터널은 짧고 넓은 터널보다 탐색하기가 더 어렵습니다. 드롭 다운 메뉴, 계층 메뉴, 슬라이더 및 기타 경로를 따르는 UI 요소는 해당 터널이 최대한 넓고 짧게 설계되어야 합니다. 이러한 컨트롤은 정밀한 작업에 사용하기 어렵고 선형 경로 조정 상호작용으로 인한 오류를 방지하기 위해 드롭 다운 대신 메가 메뉴나 슬라이더의 보조 컨트롤과 같은 대안을 고려해야 합니다.

출처: 닐슨 노먼 그룹