[PM][서비스기획] 01_[UI 컴포넌트별 > UX 원칙 #4] 스크롤 + 시그니파이어

스크롤

- 선택 행위 최소화를 위해 단축해야 하는 기능

- 탭 메뉴 좌우 스크롤 시 좌우 클릭 이동 폭이 적절해야 함

(아래) 왼 사진의 경우 웹디 추천을 눌렀을 경우, 오 사진 처럼 두 칸 정도만 이동이 되어야 함

 

- 선택한 탭을 화면 중앙 배치 필요

• 단, 선택 탭이 가장 처음/끝 일 때는 중앙으로 이동하지 않고 배치 유지

- 탭, 카테고리, 상품에 대한 이미지는 스크롤 기능에서 스와이핑 기능 제공으로 편의성 제공 필요

• 빨간 네모 속 사진들을 약한 스와이핑 하면 약간 스크롤 내려감 / 세게 스와이핑 하면 많이 스크롤 내려가야 함 (아래)

 

 

(+) 시그니파이어

- 스와이핑, 중앙으로 탭 배치 등 유저의 행위를 유도하는 장치

- 3원칙

• 원칙1. 사용자의 제스쳐 행위를 유도하는 장치일 것
• 원칙2. 폼 입력시 커서 모양을 통해 입력해야 되며 불가능 시 단서를 명확히 제공할 것
  • 입력 커서 깜빡 표시, 
• 원칙3. 폼의 텍스트 박스가 입력 상황에 맞는 크기로 제공될 것

카드번호와 비밀번호 입력 폼 크기가 달라서 원칙2를 반영한 CASE

 

출처 : 사용자의 다음 행위를 유도하는 시그니파이어 3원칙 (brunch.co.kr)