5월: 알면 알 수록 심오한 ‘버튼’의 세계
Not Benjamin Button
주로 프로덕트를 디자인하며 배운 점을 기술하며, 회사 내부의 사업, 기획, 프로덕트 기능에 대해서는 언급하지 않을 예정입니다. (언급하더라도 출시된 기능 위주)
웹은 몇 개월 질질 끌었던 것에 비해 모바일 앱은 1주일 안에 디자인/설계를 마칠 수 있었다. (GUI 완성도 <MVP 만드는 데 집중했다..^^). 제플린에 설계한 화면을 올리니 갓갓개발자님께서는 모바일 버전을 며칠 만에 개발하셨다(뚝딱!). 후에 모바일 유저 피드백을 어드민 등 다양한 창구로 들을 수 있었다.
모바일이 개발되고 며칠 후, 프론트엔드 개발자님은 나를 불러서 “이 텍스트 버튼, 버튼인지 모르셨다는 사장님 피드백이 있어요.”라고 말씀하셨다.
버튼을 버튼인 줄 몰랐다니, 디자이너로서 이런 수치가 있을 수 있나! 일단 내가 왜 텍스트 버튼을 사용했는지에 대한 변명을 하겠다. 아래는 초반 UI이다. (보안상 부분만 캡처했습니다)
(초반 UI) 카드 상단에 조그맣게 있던 텍스트 버튼이 화면에서 내가 해결해야 했던 과제가 있었다.
카드가 vertical로 여러 개가 한 번에 보여야 한다 (적어도 3개)
But, 카드 안 모든 중요정보가 보여야 한다 (중요정보가 양적으로 많았음)
이 말은 하나의 카드 안에 정보가 많아 카드가 커질 수밖에 없는데, 이 와중에 한 화면 안에 최대한 많이 카드가 보여야 한다는 뜻이다.
친구끼리는 싸움시키지 말아요~~
이게 무슨 창과 방패 같은 말인고. 그러나 나는 정보를 정말 정말 정말 콤팩트하게 최소 중요정보로 줄여서 카드크기를 작게 만드는 데 성공했다. 문제는 카드 안에 ‘방문 확인’과 ‘노쇼’ 버튼이었다. 사장님들은 예약 장부에 손님 방문 여부를 단순히 확인차 기록하신다. 이 버튼들은 평소 예약 장부를 쓰시던 것과 동일한 경험을 주기 위해 생긴 것이었다. CTA 버튼은 아니었지만, 회사 내부에서는 이 버튼이 필요하다는 의견이 있었다.
그러나 가뜩이나 카드 안에 정보도 많았기 때문에 이것들을 위한 버튼 공간이 충분하지 않았다. 카드가 여러 개인데, 카드마다 버튼이 달려있는 것도 어색했다. 그래서 울며 겨자 먹기로 텍스트 버튼을 상단 남은 공간에 배치했다.
텍스트 버튼 색상이 거무튀튀한 것도 버튼으로 인식하기 어려운 이유 중 하나였다. 긍정적(방문) 버튼과 부정적(노쇼) 버튼가 있었는데, 누르고 난 후 상태를 색상으로 보여주었기에 텍스트 버튼에 쉽사리 색상을 넣을 수 없었다.
(초반 UI) 누르고 난 후 상태를 색상으로 표시했기에..이런저런 이유들로 회사에 설명하고 배포했지만, 실제 고객님들은 버튼인 줄도 몰랐다는 것이다~! (으악~!)
그날, 브런치에서 텍스트 버튼을 다룬 글을 읽고 바로 텍스트 버튼을 아웃라인 버튼으로 바꿨다. (원문)
‘텍스트 버튼은 어떻게 사용성을 해치는가’라는 제목의 글에서는 이렇게 말한다:
1. 텍스트 버튼은 누르기 힘들다
영역이 작고 모호해서 누르기 힘들다텍스트 버튼은 솔리드 버튼에 비해 타깃 영역이 작고 모호하기 때문에 정확하게 누르는 데 유저의 노력이 많이 든다.
2. 텍스트 버튼은 인식하기 어렵다
형태가 위 텍스트랑 차이가 없어 인지하기 어렵다텍스트 버튼은 솔리드 버튼에 비해 위 텍스트와 형태 차이가 없다. 따라서 유저가 버튼임을 인지하는 데 어려움을 겪는다.
사실 ‘방문 여부' 상태 변화 말고는 큰 기능이 없다고 생각했기 때문에 텍스트 버튼으로 만든 것도 있었다. 그러나 역시 ‘진리의 말’은 이번에도 들어맞았다. ‘유저가 맞고, 내 생각은 틀렸다!’ 아웃라인 버튼으로 바꾸자마자 사장님들이 버튼을 정말 잘 누르셨다. 중요도가 떨어지더라도 필요한 기능이었고, 명확한 형태의 버튼으로 만들어야 했었다. (아래는 해당 UI가 없어서 대충 만든 것)
정말 잘 누르시더라고…이 글을 쓰면서 나를 혼란스럽게 한 텍스트 버튼이 있었는지 생각해봤다. 1초 만에 떠오른 건, 바로 미디엄! 글을 쓰기 시작하기 전 미디엄의 기능들을 탐색하고 있었는데, 이곳의 텍스트 버튼이 나를 혼란에 빠뜨렸다! (브런치 글을 미디엄에서도 연재 중입니다~ 홍보하기 ^^) https://maljiri777.medium.com/
이거요 이거저 버튼을 누르면 해당 글 전문을 읽을 수 있다. 그러나 미디엄의 신규 유저였던 나는 저것을 버튼으로 인식하는데 조금 시간이 걸렸다. 텍스트 밑에 텍스트가 배치되어 형태 구분이 어렵기 때문이리라.
버튼은 기본적이면서 중요한 UI인데, 그동안 학부 프로젝트에는 경시했던 요소였다. 메인화면의 레이아웃이나 기능 기획이 더 중요한 평가 기준이었다. 그러나 실무에서는 사소해 보이는 버튼 하나가 유저의 행동을 크게 좌우할 정도로 버튼의 역할이 정말 중요했다. 전환율, 매출과 가장 크게 연관되어 있기 때문이다. 형태는 인식하기 쉽게, 라벨은 명확하게 선정해야 유저가 클릭할 만한 CTA 버튼이 완성된다.
버튼에 대해서는 정말 배운 것이 많지만, 다음 편에서 더욱 자세히 다루겠다. 많관부~!
참고한 글들
https://brunch.co.kr/@monodream/22
