좋은 버튼 만들기
이 글은 WIX의 디자이너 DOMAS MARKEVICUS이 쓴 "Designing the perfect button"을 번역한 글입니다.
구글의 버튼 디자인 원칙: Identifiable, Findable, Clear
Clear 한 버튼 만들기
버튼은 자신이 어떤 일을 하는지 어떤 해석의 여지도 없이 분명하게 전달해야 한다. 이 버튼을 클릭했을 때 어떤 일이 벌어질 지를 정확히 알려주는 것이 글자의 역할이다.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUS이미지 왼쪽: 버튼을 클릭하면 어떤 일어날 지 글자가 알려준다.
이미지 오른쪽: 버튼을 눌러보기 전에는 이 버튼이 어떤 용도인지 알 수 없다.
때로는 버튼에 들어가야 할 메시지가 많아서 텍스트와 아이콘이 의미가 달라야 할 때가 있다.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUS이미지에서 “More Actions”은 여기서 more action을 찾을 수 있다고 말하지만 아이콘은 이 화살표를 클릭하면 드롭 다운으로 메뉴가 펼쳐진다고 알려준다.
케이스 스터디
Wix의 primary CTA에는 텍스트만 있었다. secondary CTA는 텍스트 없이 버튼으로만 인식되었다. 업데이트 이후 우리는 아이콘으로만 된 버튼을 텍스트 버튼, 또는 텍스트 + 아이콘 버튼으로 바꿨다.
바뀌기 전, “Create New Folder”버튼은 아이콘만 나왔다.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUS아이콘만 있던 버튼에 글자를 추가했다. 이 작은 변화가 “Create New Folder”의 클릭율을 현저히 끌어 올렸다.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUSFindable한 버튼 만들기
액션은 사용자들이 찾을 수 있다고 생각한 곳에 위치해야 한다. 핵심 action은 언제나 상단에, 눈에 잘 띄어야 한다. 내비게이션 action은 중립적이나 눈에 잘 보여야 한다. 중요도가 낮은 action은 (“delete”같은) 팝오버 아래 숨겨져도 좋다.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUS이미지 왼쪽: 버튼에 글자가 있어 눈에 잘 띈다.
이미지 오른쪽: 자리가 충분한 데도 아이콘만 있어서 버튼의 목적이 불분명하다.
tool action은 내비게이션 버튼과 같은 레벨에 있으면 안된다. 사용자들은 맥락과 상관없는 곳에서 버튼을 찾지 않는다. 아래 이미지에서 “Category Manager”가 그렇다. “More Actions”은 이 메뉴가 action을 제공할 거라고 말하지만 여기에 내비게이션 버튼이 있다는 것은 알려주지 못한다.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUSidentifiable한 버튼 만들기
사용자들은 인터페이스의 어떤 부분이 글자인지, 어떤 부분이 클릭이 가능한지 쉽게 이해할 수 있어야 한다.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUS이미지 왼쪽: "Learn more"는 색과 위치로 버튼임을 보여준다.
이미지 오른쪽: 본문과 섞여 있어 "Learn more"가 버튼인지 알 수 없다.
버튼으로 잘 인식되고 눈에 잘 띄려면: 글자, 컨트라스트, 모양을 활용하라.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUS검은색은 배경색이 있을 때 좋다. 밑줄은 클릭할 수 있다는 사실을 명확히 알려준다.
글자
버튼의 글자는 의도를 전달한다. 분명하고, 예측 가능하고, 쉽게 쓰자. 액션을 촉구하려면 동사가 들어가는 것이 좋다. 동사는 이 버튼을 클릭했을 때 다음 단계가 무엇인지를 알려준다.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUSCase Study
Wix의 Photo Studio Team 에서 수행한 A/B test에서 버튼이 텍스트와 함께 보일 때 사용자들이 더 참여한다는 것을 보여줬다. 아이콘 온리, 아이콘 밑에 텍스트, 그리고 아이콘 옆에 텍스트 3가지 버전을 테스트했다. 텍스트가 들어간 버전이 최종 승리.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUS이미지 왼쪽: 잘 작동했지만 레이아웃에 적합하지 않아 새롭게 시도했다.
이미지 오른쪽: above the fold에 보이게 축약 버전으로 바꿨는데 탭의 이용이 현저히 줄어들었다.
테스트에 실패해서 원래대로 복귀했다. 최초의 문제를 해결했고 탭 사용이 약간 증가했다.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUS글자에 상황을 반영하라
버튼 글자는 맥락을 반영해야 한다. 사용자가 어떤 액션이 있는지를 알리자. 예를 들어 alert modal은 빠르게 나타나서 레이아웃을 바꾼다. 그러므로 어떤 일이 벌어지는지 명확히 알려야 한다.
아래 이미지는 클릭했을 때 무슨 일이 일어나는지를 설명하지 않는다. 상황을 이해하려면 사용자가 이전의 액션을 기억하고 있어야 한다.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUS아래 이미지는 두 개의 버튼이 각각 어떤 역할을 하는지 분명히 보여준다. 타이틀과도 잘 매치된다.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUS아이콘
아이콘은 사용자들이 맥락을 이해하도록 돕지만 잘못 해석될 여지가 있다. 글자만큼 행동을 촉구하지도 못한다. 따라서 아이콘 단독 버튼은 주의해서 사용하자.
아이콘 버튼은 사용자가 정기적으로 사용해서 외우고 있는 프로페셔널 프로그램에서 적합하다. 아이콘 옆에 텍스트가 있으면 더 눈에 잘 띈다.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUS“Edit” 은 사용자들의 주의를 집중시킨다. 마우스 호버하면 레이블이 나타나 이 버튼이 어떤 일을 하는지 알려준다.
Case Study
왼쪽 이미지보다 오른쪽에 텍스트와 아이콘을 함게 쓴 것이 더 많은 참여를 이끌었다. 오른쪽 이미지에서 사용자들은 페이지를 떠나는 버튼이 무엇이고 어떤 버튼에서 더 많은 옵션을 볼 수 있는지를 이해한다.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUS하이어라키
몇 개의 액션은 항상 사용되고, 어떤 것은 가끔만 사용된다. 모든 버튼은 잘 발견되어야 하지만 모두 똑같은 정도로 주목받을 필요는 없다. 좋은 하이어라키를 창출하는 몇 가지 방법이 있다.
배치
가장 중요한 액션은 가장 눈에 잘 띄는 위치에 있어야 한다. Wix에서는 오른쪽 코너의 페이지 상단이다.
왼쪽에서 오른쪽으로 쓰는 언어권에서 사용자들은 왼쪽부터 읽는다. 그 이유로 주요 call to action은 오른쪽에 있다. 사용자들은 모든 옵션을 알 때 행동을 결정한다. 심리학자 Herman Ebbinghaus에 따르면 sequence의 가장 처음과 마지막 요소를 가장 잘 기억한다. 이런 경향을 serial position effect 라고 부른다.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUS가장 중요한 액션인 “Save”와 “Cancel”은 항상 잘 보이게 상단 오른쪽에 위치한다.
강조
버튼은 버튼으로 인식되기 위해 강조 기법을 쓴다. 그러나 모든 버튼을 똑같은 수위로 강조할 필요는 없다. 한 페이지에 핵심 action은 하나다. 그 외의 것은 2차, 3차 액션으로 분류한다.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUS스타일
각각의 버튼은 의도대로 스타일되어야 한다. 스타일들의 합이 디자인 랭귀지이다. 일반, 내비게이션, 소셜 공유, 업로드 등 버튼에 각각 저마다의 스타일을 주자. 브랜드마다도 고유의 버튼 스타일이 있다.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUS크기
큰 버튼은 크고 여유많은 레이아웃에, 작은 버튼은 작고 북적북적한 곳에 둔다.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUS요약
버튼의 하이어라키: primary, secondary, least important
- primary: 가장 큰 콘트라스트, 핵심 목표에 필수적인
- secondary: 화면에서 인식 가능하다, 핵심 목표를 보조한다.
- least Important: 아이콘 버튼에 숨겨진, 핵심 목표와 크게 연결되지 않는다.
primary, secondary, tertiary 버튼을 화면에서 확인해보자.
이미지 출처. Designing the perfect button, DOMAS MARKEVICUS