01. 버튼의 시각적 계층구조
Prolgue
UI디자인 시 빠질 수 없는 CTA(Call To Action), 텍스트 버튼, 아이콘 버튼 등 버튼의 종류와 명칭을 정리하고, 시각적 계층 구조를 통해 상황별로 어떤 버튼을 선택해야 할 지 판단하는 데에 도움을 주고자 한다.
버튼은 사용자의 동작을 수행하여 전환 또는 변화를 일으키는 수단이다. 프로덕트의 궁극적인 목적을 이루는 도구이기도 하며 길 잃은 사용자의 나침반이 되기도 한다.
버튼은 직관적이며 가시성이 있어야 한다
버튼은 사용자의 요구를 수행하고 상호작용을 일으켜 전환율을 높이고 기업의 매출을 증진시키는 역할을 한다. 때문에 중요한 버튼은 시각적으로 강조하여 사용자의 행위를 유도한다. 사용자의 행위를 자연스럽게 유도하기 위해서는 사용자가 버튼의 역할을 분석하고 고민하는데 할애하는 시간을 줄여야 한다.
경험을 예로 들자면, 내가 쓰는 알람 어플의 알람 화면에서는 '알람 미루기', '알람 해제' 라는 쓰임새가 상반된 두 개의 버튼이 솔리드버튼으로 존재하고 있다. 이 두 버튼은 서로 다른 컬러와 사이즈를 가졌기 때문에 따져보면 다른 형태를 가지고 있다고 할 수도 있겠다. 하지만 이 화면이 실행되는 상황이 '잠에서 막 깬 비몽사몽한 상태'라는 특수성을 고려했을 때, 이 차이점만으로 사용자가 본인의 의도에 따라 버튼을 선택할 수 있을까? 실사용자인 나의 경험으로는 잠에서 막 깬 상태에서는 버튼의 텍스트를 잘 읽지 못 한다. '알람미루기'와 '알람 해제' 두 버튼 모두 결과는 '당장의 알람을 끄는 것'으로 동일하기 때문에 사용에 혼선을 빚은 적이 많다. 화면의 중앙에 있는 '알람미루기'를 선택하면서 알람이 해제되었다고 생각하고 샤워를 하다가 중간에 알람이 다시 울린 적도 있고, 색이 눈에 띄는 '알람 해제'를 잠결에 선택한 뒤 다시 잠에 들어 늦잠을 잔 적도 있다. (따지고 보면 잠결에 화면 제일 하단에 있는 광고배너를 버튼으로 착각하고 선택하게 되는 경우가 제일 불편하다. 비즈니스적으로 광고를 포함하는 게 불가피 하다고 해도 알람화면에서 해당 위치에 고의적으로 광고를 버튼처럼 배치하는 건 블랙패턴의 일종이라고 생각한다.)
사용자를 잠에서 완전히 깨게 하는 효과를 증진시키고 싶다면 잠결에 '알람해제'를 선택하지 않게 '알람미루기'를 주 버튼으로 강조해야 하고, 외출 준비 중이나 외출 후에 알람이 다시 울려 곤란한 상황이 생긴다는 유저피드백이 많다면 '알람미루기'를 중앙에 위치한 솔리드버튼이 아닌 다른 형태로 변경하고 '알람해제'를 강조해야 할 것이다. 버튼의 형태가 사용자의 행동을 결정할 수 있다는 의미이다.
그럼에도 불구하고 이 알람어플을 계속 사용하는 이유는... 알람 사운드가 가장 시끄러운 어플이기 때문에...
버튼의 종류
시각적 중요도에 따라 버튼을 구분하자면 크게 Call to action이라는 뜻의 CTA버튼- 그 안에서도 솔리드(Solid) 버튼과 아웃라인(Outline)버튼-, 텍스트 버튼, 아이콘으로만 구성된 버튼, 비활성화된 버튼이 있다.
서비스 측, 또는 사용자 입장에서 오류를 줄이고 원하는 결과가 나오도록 사용자의 행동을 자연스럽게 유도하고 별도의 설명 없이 서비스의 주 기능을 파악할 수 있도록 돕는다.
중요도: CTA버튼(솔리드)> CTA버튼(아웃라인)> 텍스트버튼> 비활성화 버튼 // (번외) 아이콘 버튼
1. CTA 버튼 (Solid/Outline CTA)
출처: 본인CTA버튼은 콜 투 액션, 즉 (주요)행동을 부르는 버튼이다.
가입, 서비스 시작, 회원가입 등 유도하고자 하는 가장 중요한 기능에 사용되는 버튼이다. 색이 채워진 솔리드 타입, 테두리만 존재하는 아웃라인 타입이 있는데 일반적으로 솔리드 타입의 중요도가 더 높다.
최근에는 메인과 서브 컬러로 버튼의 중요도를 표현하는 경우도 늘고있는 듯 하다. 바로 위에 첨부된 사진 중 가운데 카카오페이와 우측 토스 캡쳐화면에서 확인할 수 있다. 토스를 예를 들면, 사용자 입장에선 '판매하기' 와 '구매하기' 둘 다 현재 페이지에서 비등비등하게 중요한 행동 버튼이다. 그럼에도 불구하고 위와 같이 '구매하기' 버튼이 조금 더 눈에 띄게 구분해놓은 것은, 아마도 비즈니스적으로 구매를 유도해야 하는 상황이거나 사용자가 판매보다 구매를 원하는 경우의 수가 더 많았기 때문일 것이다.
아웃라인 버튼은 페이지 내에 두 개 이상의 버튼이 위치할 경우, 1순위가 아닌 버튼들의 디자인으로 많이 사용된다. 버튼 종류 중 비교적으로 주목도가 낮은 편이기 때문이다. 한 페이지 내에 다른 버튼이 없더라도 버튼에게 크게 시선을 끌 필요가 없으면 아웃라인 버튼이 사용되기도 한다.
2. 텍스트 버튼 (Text button)
텍스트 버튼은 버튼명을 둘러싸는 아웃라인이나 색상 채움 없이 오롯이 텍스트로만 존재하는 버튼을 말한다.
다른 버튼들에 비해 상대적으로 중요도가 가장 낮다. 따라서 설명 '자세히보기'나 풋터 메뉴, 로그인 화면의 '비밀번호 찾기' 등 해당 페이지에 부가적으로 존재하는 기능을 담당한다.
일반적으로 본문보다 작은 폰트로 사용되거나(16px이하), 볼드처리 또는 언더라인으로 구분해서 사용한다. 영어로 사용될 경우 본문 텍스트와 구별하기 위해서 대문자로만 사용되는 것을 권장한다. 웹상에서 마우스 호버 효과로는 언더라인 또는 옅은 컬러로 버튼이 솔리드 처리되는 방식이 자주 사용된다.
3. 비활성화 버튼 (Inactive button)
(아. 방금 한시간 동안 쓴 글이 날아갔다. 중간저장을 생활화하자.)
비활성화 버튼은 말 그대로 사용자가 클릭해도 동작하지 않는 '죽은 버튼'을 이야기한다.
이 비활성화 상태는 일시적인 것이라 버튼이 활성화되기 위한 조건을 충족한다면 다시 활성화되는 가변적인 버튼이다. 가령 회원가입 페이지에서 아이디/비밀번호 등 필수값을 입력하지 않았거나, 본인 확인을 위한 인증번호를 기입하지 않았거나, 채팅창에서 텍스트를 입력하지 않았을 때 다음 단계로 넘어갈 수 없기 때문에 버튼이 비활성화된다. 주로 CTA버튼의 컬러를 배경색과 크게 대비되지 않는 그레이톤으로 변경하는 방식으로 표현된다.
사용자에게 필수 행동을 유도하기 위해서 버튼을 비활성화 하는 대신에, CTA 버튼을 유지하고 '필수값을 입력해주세요'와 같은 알럿을 띄우는 방법도 있다. 하지만 이와 같은 방식은 사용자의 흐름을 끊음으로써 프로세스를 방해받는 부정적인 경험을 제공한다. 대신에 비활성화 버튼을 사용하면 사용자가 알럿을 받기 전에 어떤 항목을 채웠을 때 다음 단계로 넘어갈 수 있는지 직관적으로 파악할 수 있다.
4. 아이콘 버튼 (Icon button)
아이콘버튼은 아이콘만 존재하거나, 작은 텍스트와 아이콘이 함께 도착하는 버튼을 의미한다.
버튼에 할애되는 영역이 많지 않거나 아이콘이 그 자체로 역할이 명확할 때 사용된다. 텍스트를 사용한 버튼보다 사용자가 버튼에 적힌 글씨를 읽고 역할을 파악하는 데 사용되는 시간이 적다. 반면 텍스트의 역할이 다른 버튼 형태에 비해 없거나 미약하기 때문에 통상적으로 의미가 통일된 기호를 사용해야 한다. 가령 '저장'이라는 의미의 버튼으로 플로피디스크 모양의 아이콘을 사용한다던가, '삭제'의 의미로 휴지통, '새로고침'의 의미로 순환하는 화살표기호를 사용하는 등 사용자가 별도의 학습 없이 그 기능을 이해할 수 있어야 한다. (Google material icon'에서 기본적으로 사용되는 아이콘셋을 확인할 수 있다.)
정확한 의미전달을 위해 텍스트 버튼과 아이콘을 함께 사용할 수도 있다.
출처: Google Material Icon
아이콘 버튼을 마지막에 설명한다고 해서 아이콘의 중요도가 최하위인 것은 아니다.
인스타그램을 보면 거의 모든 주요 버튼을 아이콘버튼으로 사용했다. SNS이기 때문에 한 화면에서 좋아요,댓글,공유 등 수행할 수 있는 기능이 여러 가지이며 화면에서 가장 중요한 사용자의 콘텐츠에 이목을 집중시켜야 한다. 이 많은 버튼을 모두 텍스트 기반의 버튼으로 디자인했다면 버튼만으로 화면이 가득차버리거나 사용자가 버튼을 읽는데 콘텐츠보다 더 긴 시간을 소요하게 되었을 수도 있다. 따라서 버튼에게 시선을 뺏겨 콘텐츠의 주목성을 해치게 되는 것을 우려하여 이와 같은 형태를 취한 것이 아닌가 추측된다.
Photoshop Fix 또한 사진 편집 어플리케이션이기 때문에 편집 중인 사진이 가장 넓은 영역에서 잘 보여야 한다. 하지만 '유동화','보정' 등의 편집 전문 도구는 아이콘만으로는 그 기능을 파악하기 어렵다. 따라서 위의 화면과 같이 아이콘과 텍스를 함께 제공하고 있다.
서비스와 화면의 특성을 고려하여 원하는 버튼 형태를 선택하면 될 것이다.
�� 요약
버튼은 직관적이며 가시성이 있어야 한다
버튼종류: CTA버튼(솔리드)> CTA버튼(아웃라인)> 텍스트버튼> 비활성화 버튼 // (번외) 아이콘 버튼
