[PM][서비스기획] 01_[UI 컴포넌트별 > UX 원칙 #1] 세그먼트 버튼 1 + 버튼

230715 추가사항 기재

 

 

헷갈리는 화면 구성 종류

- 카테고리 : 상호배타적이고 메뉴 기능 (메뉴 : 선택할 때 전체 레이아웃 변경 될 때)

- 탭 : 유사성 존재

- 드롭다운 : 상호배타적이고 단위 선택 가능

- 세그먼트 : 상호배타이고 단위 선택 가능

- 정렬 옵션 : 개인화 부분 표현 적

---

선택 행위 최소화 (버튼)

- 버튼 : 제출, 병합, 새로 만들기, 업로드 등 작업 수행이 가능하도록 사용자에게 알림

 

 

버튼의 종류(세그먼트 버튼)

- 유저가 모든 소팅 옵션을 볼 수 있어야 함

- 분명하게 옵션을 파악할 수 있어야 함

- 크기가 일관 유지해야 함

 

- 옵션 선택 시, 1번만 클릭하면 실현할 수 있어야 함

 

- 세그먼트 버튼은 그룹으로 결합된 옵션이 2가지 이상 필요함

 

- 세그먼트 버튼은 2개 ~5개 선택 항목의 경우 사용됨 (6개 이후는 드롭 다운)

드롭다운과 세그먼트

 

- 가시적, 정확성을 지님

올바른 세그먼트 버튼 예시와 그렇지 않은 예시

 

- 세그먼트 버튼 그룹의 첫 번째 버튼은 항상 디폴트 선택

---

버튼의 종류(체크 박스)

- 선택 가능 옵션이 1개 있는 경우 이상적 형태

체크박스 예시

- 상호 종속 가능

---

버튼의 종류(칩 버튼)

- 칩 버튼은 세그먼트 버튼과 생긴 것이 유사하나 다중 선택 가능함 (라디오버튼 대체 불가)

칩 버튼의 예

• 다중 선택이 가능하기 때문에 라디오 버튼으로 대체 불가 & 디폴트 선택 없음
• 상세 페이지를 구성할 때, 유저 다빈도 옵션에 디폴트 값 제시 가능

유저 다빈도 옵션에 디폴트 값 예시

---

탭 메뉴

- 탭 메뉴는 콘텐츠를 필터링하거나 탐색하는데 사용함

---

토글

- 사용자가 ON/OFF 를 선택하는 스위치

슬라이더

- 특정 범위내 미세값 조절, 직관적 요소로 고객 이해도 높음

 

---

버튼의 공통 속성

- 세그먼트&라디오 버튼은 상호배타적 그룹 형태로 분류 (버튼 간 비종속)

- 선택 가능 옵션이 2개 이상 있는 경우 이상적 버튼 : 세그먼트 버튼, 라디오 버튼

 

- 세그먼트와 해시태그 : 총 합계량에 따른 선택 

• 세그먼트과 해시태그 구별 필요

	해당 page 적용	Data 적용	검색에 따른총 합계 변경
세그먼트 버튼	O	X	X
해시태그	O	O	O

세그먼트 버튼 형태이나, 해시태그인 사례

 

세그먼트와 칩 버튼 : 다중 선택 여부에 따른 선택

- 검색결과에 여러 버튼이 중복 선택이 되는 경우 칩 버튼

칩 버튼 예시

- 라디오 버튼, 토글, 체크박스, 드롭다운 R&R

 

- 세그먼트 버튼과 연관상품 페이지 버튼의 혼돈 

• URL이 변경되어서는 안됨 
• 연관상품 페이지 예시 : 대표적인 혼돈 버튼 사례

---

버튼의 구분

	세그먼트 버튼	칩 버튼	정렬 옵션	편집옵션
단일 선택	O	O	O	O
다중 선택	X	O	X	X
선택 행위에 따른 데이터 즉시 호출	O	O	O	X
선택 행위에 따른 추가 액션 행위 요구 (EX_확인)	약간	50%	약간	100%

 

---

각 요소의 구분

- 탭 메뉴 중 시각적 특징을 주기 위할 때 해시태그 등 테마, 디자인 요소 활용

탭 메뉴의 해시태그 활용 예시

	메뉴	탭 메뉴	세그먼트 버튼	정렬 옵션
단일 선택		O	O	O
다중 선택			X	X
상호 배타적	100%	X	100%	100%
유사성	상호배타적	유사함	상호배타적 OR 약간 유사	O
그룹 간 기간 정렬		약간	약간	50%
레이아웃 변경	전체 변경	유지O, 일부 변경	무변경
버튼 모양	자율	자율	박스 , 칩 버튼
구분자		전체가 포함되는 경우 (EX_1개월,3개월,전체)
정보성		O	O	X
상하위 계층구조 기반 논리성	메뉴로 구성시  1차 메뉴 2차 메뉴 계층화	이중 탭 불가	O
하단(/상단)에 탭 바가 있는가	O	X

메뉴의 특징 : 3차부터는 3차 메뉴가 아닌 탭 메뉴로 치환하여 명칭을 붙인다.

 

왼 : 탭메뉴     오 : 정렬 메뉴

---

기능메뉴기능 VS 메뉴메뉴메뉴

- 메뉴와 기능이 같이 있음 = 메뉴 순서도 따른 패턴

• 순서도의 기준(NORMAL) : 좌(큰 중요) 우(낮은 중요도)
• 메뉴, 기능의 UI 차별됨

 

- 메뉴와 기능이 분리됨 

• 메뉴, 기능의 UI 차별되지 않음

---

콘텐츠 유사성의 의미

- 1개라도 무언가 속성이 닮는다면 유사한 콘텐츠라 명시함

ex) 키워드 = 유사 콘텐츠의 집합

---

네비게이션과 UI FLOW 구별 필요

 

 

 

 

 

 

결론 : 세그먼트 버튼과

아닌 버튼(탭 메뉴, 칩버튼 등)을 상황에 따라 구분할 줄 알아야 한다.

 

 

 

 

 

 

출처 : 01_[UI 컴포넌트별 > UX 원칙 #1] 세그먼트 버튼 (총 1시간 40분) (liveklass.com)