UIUX

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

스크롤 - 선택 행위 최소화를 위해 단축해야 하는 기능 - 탭 메뉴 좌우 스크롤 시 좌우 클릭 이동 폭이 적절해야 함 (아래) 왼 사진의 경우 웹디 추천을 눌렀을 경우, 오 사진 처럼 두 칸 정도만 이동이 되어야 함 - 선택한 탭을 화면 중앙 배치 필요 단, 선택 탭이 가장 처음/끝 일 때는 중앙으로 이동하지 않고 배치 유지 - 탭, 카테고리, 상품에 대한 이미지는 스크롤 기능에서 스와이핑 기능 제공으로 편의성 제공 필요 빨간 네모 속 사진들을 약한 스와이핑 하면 약간 스크롤 내려감 / 세게 스와이핑 하면 많이 스크롤 내려가야 함 (아래) (+) 시그니파이어 - 스와이핑, 중앙으로 탭 배치 등 유저의 행위를 유도하는 장치 - 3원칙 원칙1. 사용자의 제스쳐 행위를 유도하는 장치일 것 원칙2. 폼 입력시 ..

[PM][서비스기획] 01_[UI 컴포넌트별 > UX 원칙 #3] 체크 박스

체크 박스 - 체크 박스는 디폴트 개념이 없음 (라디오 버튼과 큰 차이) - 1개 이상의 옵션을 선택할 수 있는 기능 Cf. 독립 실행형 체크박스는 특정 조건의 동의 여부 확인/단위 확인을 위해, 폼 마지막 항목에 활용됨 - 사용자가 선택 옵션을 저장하거나 시스템 제출 전 확인 및 검토 시 사용 - 상위 옵션 내 하위 옵션 그룹화 형태 ui에서 사용됨 (토글 버튼은 이런 형태 불가능) 체크 박스의 인식성 - 체크 박스 영역이 충분해야 하므로, 박스 크기가 텍스트에 비해 상대적으로 커야 함 - 체크 박스의 리스트는 한 줄에 한 개로 세로 형태 제공 단 체크 박스가 너무 많이 필요한 경우, 칩 버튼으로 대체하여 세로 가로로 확장 형태 제공 체크 박스의 선택 행위 최소화 - 디폴트를 비설정하여 유저가 스스로 ..

[PM][서비스기획] 01_[UI 컴포넌트별 > UX 원칙 #2] 라디오 버튼 2

라디오 버튼의 즉각적 선택 행위 인지 - 라디오 버튼을 선택할 때 안에 있는 두 번째 원이 작은 원으로 표시되어야 함 단, 예/아니오에 대한 라디오 버튼이라면 두 번째 모양이 체크 표시여도 됨 - 호버링 표시&컬러 처리(포인트 컬러랑 통일된 색)를 하여 사용자의 행동 현황을 표현해야 함 포인트 컬러는 브랜드 이미지색과 동일함 - 항목이 많아 더보기를 눌러야 하는 경우, 더보기를 누르기 전에는 디폴트 옵션이 없게 세팅 더 많은 항목을 소개하기 위한 전략 CTA 여부에 따른 버튼 구성 - CTA : Call To Action, 목표 달성을 위해 고객의 특정 반응이나 행동을 유도 고객 유지의 핵심이 되는 버튼 1인칭을 사용한 문구 중요! 더 많은 클릭을 부르는 CTA 버튼 놓치면 안돼! (pixso.net) ..