버튼
버튼 (Button)
버튼은 엔터프라이즈 제품에서 가장 기본적이면서도 중요한 조작 요소예요. 좋은 버튼 설계는 사용자를 원하는 동작으로 안내하고 실수를 예방할 수 있어요.
출처: 문서
본문
디자인 원칙 (Design Principal)
- 사용자를 원하는 동작으로 안내하세요.
- 사용자가 실수하지 않도록 예방하세요.
유형 (Types)
일반적인 버튼 유형 (Common Button Types)
① 기본 버튼 (Default Button)
기본 버튼은 비우선(non-primary) 동작에 사용돼요. 어떤 버튼 유형을 고를지 확실하지 않다면, 기본 버튼이 항상 안전한 선택이에요.
② 주 버튼 (Primary Button)
"완료(complete)" 또는 "권장(recommend)" 동작을 강조해요. 버튼 그룹에는 주 버튼이 최대 하나만 있어야 해요.
③ 텍스트 버튼 (Text Button)
낮은 강조와 가벼운 버튼 유형이에요. 예를 들어 테이블 속의 동작이요.
④ 아이콘 버튼 (Icon Button)
아이콘은 시각적 단서를 제공해요.
- 작은 공간에 더 많은 버튼을 넣을 수 있어요.
- 아이콘만 있는 버튼은 버튼의 의미를 나타내기 위해 Tooltip을 제공해야 해요.
⑤ 아이콘이 있는 텍스트 버튼 (Text Button with Icon)
버튼에 보조적인 의미를 제공해요.
강조 (Emphasis)
일반적인 버튼 유형을 사용해 서로 다른 강조(emphasis) 를 보여 줄 수 있어요.
Do & Don't
- 주 동작을 강조하세요. 2. 주 동작이 없다면 기본 버튼이 가장 안전한 선택이에요.
같은 그룹에 주 버튼을 두 개 이상 두지 마세요.
- 버튼을 중요도 순서로 배치하세요. 2. 덜 중요한 동작은 오른쪽이나 아래에 배치하세요.
같은 버튼에 아이콘 두 개를 두지 마세요.
특수 버튼 유형 (Special Button Types)
대시 버튼 (Dashed Button)
사용자가 영역에 콘텐츠를 추가하도록 안내해요.
위험 버튼 (Danger Button)
사용자의 의도가 삭제라면, 위험 버튼을 사용해 이 동작에 위험이 있다는 걸 경고하세요.
시스템이 삭제 동작을 권장하지 않을 때는 'Cancel'을 주 동작으로 설정할 수 있어요.
동작에 관련된 위험이 있음을 사용자에게 경고해요.
고스트 버튼 (Ghost Button)
어두운 배경이나 컬러 배경에서 사용해요.
콜 투 액션 (Call to Action)
보통 단독으로 나타나며 명령(command)으로 사용되는 걸 의도해요. 예를 들어 랜딩 페이지나 웰컴 배너에서 사용돼요. 부모 컨테이너만큼 넓을 수 있어요. 한 화면에 "콜 투 액션" 버튼은 1개만 두는 것이 권장돼요.
배치 (Placement)
"F자형 읽기 패턴(F-Shaped Reading Pattern)"과 "Z자형 읽기 패턴(Z-Shaped Reading Pattern)"처럼, 사용자의 읽기 패턴 안에 버튼을 배치해 발견되기 쉽게 해요.
버튼 배치는 어떻게 결정하나요? (How to Decide Button Placement?)
페이지/카드/섹션이 하나의 주제를 제시할 때, 3개 영역으로 나눌 수 있어요.
- Header: 주제의 제목, 요약, 내비게이션
- Body: 상세 콘텐츠
- Footer: 보조 정보나 툴바
다른 영역에 버튼을 배치하면 다른 의미를 가질 수 있어요.
언제 버튼을 Footer에 두나요? (When to Put Buttons in the Footer?)
- Body 섹션에 접혀 있거나 숨겨진 콘텐츠가 있을 때, 예를 들어 한 화면에 전체 콘텐츠를 보여 줄 수 없을 때요.
- Body 섹션에 복잡한 콘텐츠가 있을 때. 예를 들어 여러 하위 그룹이 있고 각 하위 그룹이 고유한 동작을 가질 때요. 이때는 혼란을 피하기 위해 "완료(Complete)" 동작을 Body 섹션에서 분리할 필요가 있어요.
요컨대, footer의 목적은 body와의 분리(separation)예요.
순서 (Ordering)
버튼 순서 (Button Ordering)
읽기 흐름(reading flow)에서 시작할 것을 권장하고, 접힌 콘텐츠는 항상 오른쪽에 있어야 해요.
버튼 순서 결정 방법 (How to Decide Button Ordering)
- 대화 흐름(Conversation Flow): 버튼을 컴퓨터와 사용자 사이의 대화와 유사한 순서로 배치해요. 사용자에게 필요한 동작이나 당신이 원하는 동작을 먼저 물어본 다음, 관련된 위험을 제시하세요.
- 내비게이션 흐름(Navigation Flow): 예를 들어, 버튼이 돌아가기를 나타낸다면, 이전 단계로 간다는 뜻이 되도록 왼쪽에 배치해야 해요.
버튼 그룹 (Button Group)
버튼 그룹 사이에 공간이 없으면 토글 버튼(Toggle Button)과 혼동되기 쉬워요.
여러 버튼이 그룹을 이룰 때, 버튼 사이에 공간을 두고 한 줄로 정렬하세요.
버튼 그룹핑 (Grouping Buttons)
화면에 버튼이 너무 많을 때, 관련된 버튼을 함께 모으고 그 그룹에 유사한 디자인을 사용할 수 있어요. 버튼 중 하나가 주 동작이라면 여전히 강조를 사용할 수 있어요.
중요도 순서로 버튼 접기 (Collapse buttons in the order of importance)
버튼이 같은 그룹에 있으면 그 사이에 디바이더(divider)를 추가할 필요가 없어요.
모든 버튼을 평평하게 표시: 공간을 사용해 다른 그룹을 분리하거나, 디바이더를 사용해 유사한 버튼을 그룹화할 수 있어요.
라벨 (Label)
동사(verb)를 사용해야 해요.
라벨은 버튼을 클릭했을 때 무슨 일이 일어날지 사용자에게 명확히 알려 줘야 해요.
- 동사(verb)를 사용해야 해요 (드롭다운 버튼 제외)
- 맥락과 관련되고 간결해야 해요.
Ant Design은 기본 라벨로 "OK / Cancel"을 사용하지만, 다음 방법을 사용해 라벨 텍스트를 커스터마이징할 수도 있어요.
-
동작 결과를 설명하세요.
Publish, Login, Register.
-
주 동작이 부정적 의미라면, 그 결과를 강조하세요.
Are you sure to delete it? Delete / Cancel