🍳 완벽한 버튼을 만드는 레시피

 이번 주는 캡처프레이즈에 뜻깊은 한 주였어요.

  

완벽한 버튼 디자인하기  | (원문 링크)

 버튼은 인터랙티브 디자인의 주요 요소예요. 인터페이스가 조금만 복잡해지더라도 하나의 웹사이트에 수백개의 버튼이 들어갑니다. 많은 곳에서 버튼 클릭을 성공의 지표로 삼기도 하고요. 그래서 버튼이 어떻게 작동하고 사용자를 어디로 안내하는지 사용자에게 전달하는 건 중요해요. Wix의 디자인 시스템에서 버튼 관련 내용은 수년간 아주 미세하게 가다듬어져 왔어요.

 사용자는 버튼을 통해 제품을 다루고 목표를 달성해요. 버튼은 사용자가 인터페이스를 탐색하고 자유롭게 활동하도록 돕고요.

 가끔 버튼에 서로 다른 의미를 가진 텍스트와 아이콘이 포함돼야 할 때도 있어요.

 “More Actions ▾”에서 텍스트는 ‘정보가 더 있다’는 사실만을 나타내는 반면 아이콘은 '버튼을 클릭했을 때 더 많은 정보가 나타난다'는 사실만을 전달하고 있어요.

 Wix OS 팀은 2019년 버튼의 하이어라키를 바꾸기로 결정했어요. Wix가 처음 시작했을 때 디자인 시스템에는 ‘주요 CTA 버튼에만 텍스트를 넣을 것’이라고 돼 있었어요. 보조 버튼에는 아이콘만 넣을 수 있었고요. 디자인 시스템을 바꾸면서 아이콘만 있던 모든 버튼을 텍스트 버튼, 혹은 텍스트 + 아이콘 버튼으로 바꿨어요. 특히 “Create New Folder” 버튼은 바뀐 뒤 아주 높은 클릭율을 보여줬어요. 옆에 같이 있던 버튼도 지표가 많이 개선되었고요.

 “Create New Folder”의 클릭률이 주요 목표에 영향을 미치지 않으면서 크게 증가했어요.

 이 버튼에 아이콘만 있었을 땐 아주 소수의 사람들만이 이 버튼을 눌렀어요.  

 위 예시처럼 작업을 수행하는 버튼과 사용자를 안내하는 버튼을 함께 두지 마세요. 사용자가 거기 있을 거라고 예상하지 못 할 거니까요. “Category Manager” 버튼이 맥락과 맞지 않는 게 보이시죠? “More Actions”라고 돼 있는 곳엔 “Action” 버튼만 두는 게 좋아요.  

 사용자가 어떤 컴포넌트가 상호작용하고 어떤 게 반응하지 않는 건지 쉽게 이해해야 해요. Wix는 중요한 액션을 담은 컴포넌트엔 파란색을 써요. 밝은 파란색은 오로지 버튼 뒤쪽의 배경색으로만 쓸 수 있어요.

 어떤 때에는 배경색과 맞지 않아 버튼에 파란색을 쓸 수 없기도 해요. 이럴 땐 텍스트의 모양이나 주변과의 대비가 버튼을 인식 가능한 것으로 보이도록 해줘요. Web Content Accessibility Guidelines에 나온 텍스트 대비를 적용하면 대다수의 사용자가 알아보는 버튼을 만들 수 있을 거예요.

 배경이 다채로울 땐 검은색을 적용하는 게 효과적이에요. 밑줄까지 처리해 두면 이게 반응하는 텍스트라는 게 너무나도 명확해져요.  

 텍스트는 버튼을 설명하는 핵심 요소예요. 버튼 텍스트는 명확하고 예측 가능하고 간단해야 해요. 동사로 시작하는 게 좋습니다. 어떤 일이 일어나는지 알려줌으로써 사용자가 다음 단계를 예측하게 하니까요. 나이에 상관없이 이해할 수 있는 쉬운 말을 쓰세요.  

 Wix의 Photo Studio 팀이 진행한 A/B 테스트에서 사용자가 텍스트가 있는 버튼에 더 잘 반응한다는 결과가 나왔어요. 아이콘만 있는 버튼, 아이콘 아래에 텍스트가 있는 버튼, 아이콘 옆에 텍스트가 있는 버튼의 3가지 타입으로 테스트했고 텍스트가 있는 버튼의 결과가 더 좋았어요.

 이 두 버전으로 테스트했는데 실패했고, 다른 레이아웃으로 다시 테스트해봤어요.  

 위 사진이 최종적으로 결정된 버전이예요. 이 버전으로 탭 사용을 약간 증가시켰어요.

 이 테스트로 텍스트가 버튼을 명확하고 활발하게 만드는 데 중요하다는 역할을 한다는 것이 확실해진 거죠.

 위 예시의 두 버튼은 각각이 어떤 기능을 하는지가 너무나도 명확해요. 메인 버튼은 알럿의 타이틀을 반영하고 있고요. 아주 정확한 알럿 메시지네요.  

 반면 이 예시는 버튼을 눌렀을 때 어떤 일이 일어나는지 설명되어 있지 않아요. 사용자는 다음 상황을 예측하기 위해 머리를 굴려야 해요.

 “완료했습니다” 혹은 “두 사용자가 동시에 편집할 수 없습니다”와 같이 사실만 전달하는 모달에서는 “확인”, “예, 알겠습니다”와 같은 버튼을 써도 괜찮아요.

 사이드바의 UI를 테스트했을 땐 사용자가 화살표 아이콘이 있는 드롭다운 버튼에 더 많이 반응한다는 결과를 확인했어요.

 즉 텍스트와 아이콘이 함께 사용될 때 맥락을 매끄럽게 만드는 데 도움이 된다는 뜻이에요. 적절한 아이콘이 추가된다면 사용자는 무엇이 페이지를 벗어나는 버튼이고 무엇이 더 많은 정보를 표시하는 버튼인지 금방 눈치채겠지요.  

 저희의 제품이나 포토샵과 같은 응용프로그램은 여러 작업이 동시에 수행되는 경우가 많아요. 일부 작업은 항상 작동되어야 하고 어떤 건 아주 가끔 쓰이죠. 모든 버튼이 사용자의 눈에 아주 잘 들어와야 하는 건 아니지만, 모든 버튼이 검색되도록 해야 해요. 필요한 모든 작업을 쉽게 찾을 수 있다는 게 바로 좋은 하이어라키를 가진다는 거예요. 좋은 하이어라키를 만드는 여러 요령이 있어요.

① Placement

 가장 중요한 작업은 가장 잘 보이는 곳에 있어야 해요. Wix에선 오른쪽 위 코너 부분이 그런 곳이죠. 버튼은 아래에 있을 수록 눈에 덜 들어와요.

 우리는 글을 왼쪽에서부터 오른쪽으로 읽기 때문에 가장 중요한 CTA는 오른쪽 가장자리에 배치하는 게 좋아요. 사용자는 모든 버튼과 옵션을 한 번씩 훑어본 뒤 비로소 액션을 취할 수 있어요. 심리학자 에빙하우스가 말하길, 가장 처음과 끝에 있는 요소들이 잘 기억된다고 해요. UX 디자인에 흔히 쓰이는 ‘계열위치효과’가 바로 이거죠.

 보시다시피 가장 중요한 버튼인 “Save”와 “Cancel”은 오른쪽 위에 있어서 항상 눈에 띄어요.

 버튼의 크기도 제각각 조절할 수 있어요. 큰 버튼은 되도록 큰 공간에 쓰고, 작은 버튼은 작은 공간에서 쓰세요.

 정보의 위계가 잘 잡힌 페이지일수록 사용자가 안정감을 느끼고 더 잘 이해할 거예요. 예를 들어 Wix Seating Map Builder를 보면, 다양한 속성의 버튼이 조화를 이루고 주요 버튼, 보조 버튼, 중요하지 않은 버튼이 명확하게 분류된 걸 보실 수 있어요.

• 주요 버튼: 대비를 가장 크게 줬고, 사용자의 목적 달성에 꼭 필요
• 보조 버튼: 쉽게 알아볼 수 있고, 사용자의 목적 달성을 보조
• 중요하지 않은 버튼: 아이콘 버튼을 눌러야 드러나며 사용자의 목적 달성과 관련 없음

 각 버튼에는 사용자의 명확한 이해를 돕는 텍스트가 써져 있어요. 아이콘도 가장 보편적인 걸로 넣어 놨고요.

/

 이 아티클은 Wix 팀의 많은 디자이너가 경험을 통해 배운 내용을 담았어요. 모두에게 감사드립니다.

글쓴이의 커리어가 궁금해요!