CTA 버튼이란?
- call to action.
회원가입, 로그인, 결제 등 사용자의 반응을 유도하기위해 배치한 버튼.
취소 버튼은 라인으로만 만드는 것이 좋다(내생각ㅋㅋ)
버튼의 계층 구조
메신저의 버튼을 만들 때, "보내기" 버튼 만큼은 다르게 디자인 되어야 한다.(강조)
- "입력" / "마이크" / "파일첨부"의 기능들은 영향도 면에서 유저가 컨트롤 할 수 있고, 실수가 있더라도 undo할 수 있습니다.
그러나, 영향도가 높은 "메시지 보내기"와 같은 기능은 다른 방식으로 디자인이 되어야 합니다.
왜냐하면, 메신저와 같은 서비스는 유저가 보낸 메시지 내용에 따라 메신저의 핵심 경험인 "관계"에 영향을 미치기 때문에 유의도를 높혀 유저로 하여금 잘 인지할 수 있도록 돕는게 필요합니다.
유의도를 높히게 되면 사용자로 하여금 "실수하는 경험"을 줄일 수 있습니다. 요즘 메신저들은 그렇게 디자인 해도 실수를 하니 보내기 취소 기능을 도입하고 있기도 하죠.
(이건 인스타에선가 본 댓글인데 퍼왔습니다.)
버튼 사이즈
- pc 기준 height 48px이면 큰 버튼이다.
고스트 버튼
나는 이게 disabled 버튼인줄 알았다. 아니었다.
고스트 버튼은 테두리로만 만들어진 버튼이다.
고스트 버튼은 CTA 버튼으로 사용하는걸 추천하지 않는다.(면으로 채워진 버튼보다 약함)
연구
결제수단 추가 화면
이 화면에서 국내결제, outside of korea는 언제든 선택될 수 있는 버튼이기 때문에 고스트 버튼으로 만들었다.(유저가 의도적으로 선택하지 않은 버튼)
근데 보다시피 정보가 입력되지 않아 결제수단 등록을 할 수 없는 상태다.
이 경우에는 선택할 수 없는 버튼이기 때문에 disabled로 처리하는게 맞을까,
고스트 버튼으로 만드는게 맞을까?
여기에 2가지 고민이 있다..
-
고스트 버튼으로 만든다면 위의 초록 버튼의 논리와 맞지 않는다.
언제든 눌릴 수 있는 버튼이 아니기 때문이다.(회색으로 빼면 될까?) -
사진처럼 disabled 버튼으로 만들면 너무 부정적이여보인다.
영원히 저기에 초록불이 들어오지 않을 것 같다.
한 번 테스트를 해보자.
왼쪽이 디스에이블드, 오른쪽이 고스트.
어떤 것이 더 자연스러운가...!
고스트 버튼은 텍스트 오퍼시티를 좀 낮춰봤더니 괜찮은 것 같다.(폰트가 아직 두꺼운 것 같기도)
일단 이 화면은 입력란이 다 박스로 되어있어서 왼쪽이 나은 것 같지만.. 다른 화면에서도 테스트를 좀 해봐야겠다.
+ 강한(진한) 그레이 버튼은 비활성화 버튼처럼 보일 수 있다. 연~한 그레이로 빼주자,
요즘 트렌드는 고스트 버튼을 많이 쓰는듯 하다. 회색 테두리에 검정 텍스트로.
- 취소, 비활성화는 그레이
- 일반 버튼은 고스트
