가볍게 유지하기
가볍게 유지하기 (Keep it Lightweight)
피츠의 법칙(Fitts's Law)은 대상의 크기와 그 맥락적 근접성이 사용 용이성에 연결된다는 인간공학 원칙이에요. 다시 말해, 도구가 손에 닿을 만큼 가깝고 조준하기에 충분히 크다면 사용자의 상호작용을 개선할 수 있어요. 도구를 맥락 안에 두는 것이 가벼운 상호작용을 만드는 비결이죠.
출처: 문서
본문
피츠의 법칙(Fitts's Law): 대상에 도달하는 시간은 대상까지의 거리와 대상 크기의 함수예요. 대상까지의 거리에 비례하고 대상의 폭에 반비례하죠.
항상 보이는 도구 (Always-Visible Tools)
동작이 중요하다면 인터페이스에 직접 노출하고 항상 보이게 유지하세요.
상태 1: 명확한 클릭 가능 영역이 페이지에서 버튼을 강조하기 더 쉽게 해 줘요. 상태 2: 버튼 위로 마우스를 올리면 포인터가 손 모양으로 바뀌고 버튼의 채워진 색이 어두운 색으로 변해 명확한 행동 유도(call to action)를 제공해요. 상태 3: 클릭하면 버튼 스타일이 눈에 띄게 바뀌어요.
호버로 드러나는 도구 (Hover-Reveal Tools)
맥락 도구(Contextual Tools)를 항상 보이게 하기보다, 필요할 때만 보여 줄 수 있어요. 한 가지 방법은 사용자가 객체 위에 마우스를 멈추면 도구를 드러내는 것이에요.
마우스를 올리면 도구가 드러나요.
토글로 드러나는 도구 (Toggle-Reveal Tools)
동작이 주 흐름(main flow)이 아닐 때는 영역이나 페이지의 도구 모드를 토글해요. 토글을 활성화하면 그 작업을 위한 도구가 드러나요.
해당 영역의 편집 모드를 켜면 테이블이 텍스트만 보이던 상태에서 입력 상자(input box)를 드러내요.
보이는 영역 ≠ 클릭 가능 영역 (Visible Area ≠ Clickable Area)
하이퍼텍스트의 클릭 가능 영역은 셀 안의 문자열 길이에 영향을 받아요. 더 쉽게 트리거되도록 셀 전체를 핫스팟(hot spot)으로 설정할 수 있어요.
하이퍼텍스트가 있는 셀 위로 마우스를 올리면 커서가 손 모양으로 바뀌어요. 클릭하면 다른 페이지로 이동해요.
클릭 가능한 핫스팟을 늘려 반응성을 강화하되, 버튼 크기 자체는 늘리지 마세요.
특히 모바일에서 잘 맞는 방법이에요.
버튼 근처로 마우스를 옮기면 호버 상태가 활성화돼요.