데이터 기반 UI/UX 디자인은?
디자인 독학하기 06
UI/UX 디자인 경험을 공유합니다 :)
[Contents]
01 A/B/C 테스트로 가장 좋은 디자인 시안 찾기
1_ KPI 정하기
2_ 퍼널(Funnel) 설계하기
3_ A안 디자인하기
4_ B안과 C안 디자인해 A/B/C 테스트하기
5_ A/B/C 테스트, 그 결과는?
02 [미션] 회원가입 화면에 도달시켜라
03 글 쓰다 정립한 UI/UX 디자인 방법론, '마이크로 퍼널 분석(Micro Funnel Analysis)'
04 참고 자료
작은 앱 프로젝트
많은 기능과 서비스를 갖추고 있는 슈퍼 앱들 사이에서 단순함을 가장 큰 목표로 하는 '작은 앱'이 사람들에게 어떠한 의미로 다가갈지 연구하는 '작은 앱 프로젝트'를 진행하고 있습니다.
최근 UI/UX 디자인과 데이터는 떼려야 뗄 수 없는 관계라는 생각이 들었다. 내 디자인의 결과로 쌓이는 데이터를 분석하면 할수록, 데이터가 UI/UX 디자이너와 사용자가 '지속해서' 소통할 수 있는 좋은 방법이라는 확신이 들고 있기 때문이다.
인터뷰를 할 수도 있지만, 비용과 시간이 만만치 않게 든다. 생각보다 유의미한 인사이트(Insight, 통찰)를 이끌어내기가 쉽지 않으며 꾸준히 하기도 어렵다. 많은 사람을 대상으로 한 인터뷰는 더더욱 어려운 게 현실이다.
데이터가 사용자와 소통하는 좋은 창구가 되려면 '꾸준히' 관찰하고 분석하는 게 중요하다. 어떤 데이터를 어떤 목적을 갖고 볼지 고민하는 것도 중요하다. 나는 주 단위로 데이터를 관찰하며 내 의도대로 사용자가 서비스를 경험하고 있는지 분석하고 있다. 이를 통해 문제점을 파악하거나 인사이트를 이끌어낸다. 다소 엉뚱한 실험을 해보기도 한다.
데이터 분석은 UI/UX 디자이너가 사용자와 소통하는 좋은 방법이다.01 A/B/C 테스트로 가장 좋은 디자인 시안 찾기
2020년 1월 들어 우리 팀은 2019년 8월 초까지 서비스했었던 iOS(아이폰) 앱을 다시 운영하기 시작했다. 2019년 8월 중순에 새로운 웹 서비스를 만들기 시작하면서 iOS 앱 서비스를 중단했었는데, 두 서비스를 합치기로 결정했기 때문이다.
기존에 운영했던 앱의 가장 큰 문제점은 사용자가 우리 앱의 가치를 깨닫기 힘들다는 점이었다. 다른 어떤 앱에서도 찾아볼 수 없는 독특한 서비스를 제공하고 있어서, 사용자가 앱을 이해하지 못할 가능성이 무척 높다. 나는 목표를 아래와 같이 정했다.
목표: 우리 앱이 주는 가치를 쉽게 이해시키자.
1_ KPI 정하기
목표는 언제나 데이터로 측정할 수 있어야 한다. 우리 팀은 '사용자가 모바일 옷장에 옷을 1개 등록'했을 때 우리 앱이 주는 가치를 이해했다고 보고, 그 등록률을 KPI(Key Performance Indicator, 핵심 성과 지표)로 정했다.
우리 앱에는 사용자가 옷을 바닥에 놓고 A4 용지와 함께 찍으면, 옷의 사이즈를 자동으로 측정해 옷 사진과 사이즈를 '모바일 옷장'이란 곳에 보관해주는 기능이 있다. 모바일 옷장에 옷을 등록하면 수많은 온라인 쇼핑몰에서 그 옷의 사이즈와 가까운 옷들만 찾아주는 '사이즈 검색'이란 기능을 쓸 수 있게 된다. 사이즈 검색 기능을 쓰면 따로 수선할 필요가 없는 기장(총길이)의 바지를 찾는다거나, 원하는 핏의 상의를 찾는 일 등이 무척 쉬워진다.
이처럼 사용자가 사이즈 검색이란 핵심 기능을 쓰려면 모바일 옷장에 옷을 1개 이상 등록해야 하기 때문에, 옷 등록률을 KPI로 정하게 됐다.(덧. 다른 이유들도 있지만 글의 흐름을 위해 생략합니다.)
생소한 서비스의 가치를 사용자에게 잘 전달하기 위해서는 UI/UX 디자이너의 역할이 무척 중요하다.2_ 퍼널(Funnel) 설계하기
하지만 이런 서비스는 생소할뿐더러 사용자에게 상당한 노력을 요구하기 때문에, 사용자가 우리가 원하는 목표까지 도달할 수 있도록 퍼널(Funnel)을 잘 설계해야 한다.
퍼널이란 사용자가 서비스에 들어온 시점부터 나가는 시점까지의 데이터 흐름을 뜻하는데, 서비스에 머무는 시간이 지남에 따라 사용자가 점점 줄어들어 그 모양새가 역삼각형 깔때기(Funnel, 퍼널)와 비슷해져서 퍼널이란 이름이 붙었다.
퍼널 분석(Funnel Analysis)은 사용자가 '어떤 시점에서 왜 이탈하는지' 데이터를 바탕으로 분석해 이탈을 줄이는 방법을 모색하는 사용자 분석법이다.
퍼널을 도식화한 모습.퍼널 분석이 의미가 있으려면 퍼널을 미리 철저하게 설계해야 한다. 사용자가 앱을 이용하는 흐름을 관찰해, 이를 토대로 퍼널을 설계하는 게 아니라는 뜻이다. 미리 설계한 퍼널 안에서 사용자가 행동하도록 해야 한다.
나는 사용자가 어떤 흐름(User Flow, 유저 플로우)으로 앱을 이용할지 설계하고, 그 흐름대로 잘 가고 있는지 꾸준히 관찰하면서 그 흐름대로 가는 사용자가 많아지도록 UI/UX 디자인을 발전시켜 나가는 게 중요하다고 생각한다. 즉 많은 사용자가 UI/UX 디자이너가 디자인한 흐름대로 앱을 경험하도록 설계해 앱의 가치를 자연스럽게 느끼도록 하는 게 중요하다.
우리 팀은 사용자가 앱에 '처음' 들어와 경험하게 할 '주요 퍼널'의 전반부를 아래처럼 4단계로 설계했다. 첫 번째 옷 등록 이후 과정으로 갈수록 사용자의 행동이 복잡해지고 퍼널 설계가 어려워진다. 일단 첫 번째 옷을 등록하게 하는 걸 목표로 잡고 이후 과정은 현재 KPI인 '1차 등록률'을 충분히 높인 뒤에 설계하기로 했다.
아래 주요 퍼널에서 특이한 점은 '회원가입 화면 도달'과 '회원가입 완료'를 다른 단계로 구분한 것이다. 이는 회원가입 과정에서 얼마나 이탈하는지 관찰하기 위해서다. 회원가입 완료 단계와 다음 단계인 '첫 번째 옷 등록' 사이에는 여러 과정이 있는데, 나중에는 이를 잘게 나눌 계획이다.
우리 앱에 '처음 방문한 사용자'가 경험하게 만들어야 하는 4단계로 이뤄진 주요 퍼널. 1차 등록률(KPI)을 높이는 게 현재 우리 팀의 목표다.3_ A안 디자인하기
우선 '우리 앱이 주는 가치를 쉽게 이해시키자'는 목표를 달성하기 위해 사용자가 회원가입 화면에 도달하기 전에 회원가입을 하면 얻는 게 무엇인지 명확히 인지할 수 있는 디자인을 하기로 계획을 세웠다. 단순히 위 주요 퍼널의 1단계에서 2단계로 넘어가는 사용자를 늘리는 게 아니라, 4단계까지 이탈하지 않고 자연스럽게 이어져 목표인 모바일 옷장에 첫 번째 옷을 등록하는 비율(이하 1차 등록률, KPI)이 오르도록 1단계부터 안내하는 것이다. 그래야 더 많은 사용자가 회원가입을 하고, 1차 등록률(KPI)을 높일 수 있을 거라 봤다.
이를 위해 우리 앱을 '처음' 방문하는 사용자가 가장 먼저 보게 되는 홈 화면에 사용자가 해야 할 일이 무엇인지, 그 일을 하면 무엇을 얻을 수 있는지 명확하게 보여주기로 했다. 여기서 필요한 건 '단순한 디자인'이다. 전환율을 높이는 UI/UX 디자인을 고민할 때 얻은 단순한 디자인은 전환율을 극적으로 높인다는 인사이트를 적용해 디자인하기로 한 것이다.
우선 어떤 방식으로 사용자에게 메시지를 전달할지 고민했다. 이를 고민할 때 우리 앱의 광고 메시지는 '옷 사이즈를 자동으로 측정해주고, 같은 사이즈의 옷을 찾아준다'였는데, 이 광고를 보고 앱을 설치한 사람들이 앱에서도 같은 메시지를 볼 수 있도록 하는 게 중요했다.
최종적으로 '내 바지와 같은 사이즈인 바지 찾기', '바지 사진을 찍으면 자동으로 사이즈가 측정됩니다!'라는 문구와 커다란 버튼, 아이콘으로 이뤄진 단순한 디자인으로 1차 등록을 유도하기로 했다. 원래 우리가 쓰던 문구에는 '바지' 대신 '옷'을 썼는데, 바지라는 더 구체적인 대상을 사용자에게 인지시켜 쉽게 이해할 수 있도록 했다.
이 화면에서 주인공은 '바지 사진을 찍으면 자동으로 사이즈가 측정됩니다!'라는 문구가 들어간 버튼이다.이 디자인에는 내가 의도한 아래의 3가지 시각적 장치가 숨어있다.
1) 주인공을 위해 나머지를 희생한다
빛이 빛을 내려면 어둠 속에 있어야 한다.
주인공인 '바지 사진을 찍으면 자동으로 사이즈가 측정됩니다!' 버튼(이하 주인공 버튼)을 강조하기 위해 나머지 부분을 눈에 덜 띄게 바꿨다. 상의, 하의, 아우터 아이콘을 작게 다시 그리고, 아래쪽 탭 바(Tab Bar) 아이콘도 단순하게 그려 교체했다. 무슨 탭인지 알려주던 탭 레이블도 뺐다. 주인공 버튼을 강조하기 위해 시각 잡음을 발생시킬 수 있는 요소를 최대한 없앤 것이다.
큰 목표는 주인공 버튼을 가장 눈에 띄게 바꾸는 것이었지만, '시각적 일관성'을 만들자는 목표도 있었다. 기존 아이콘들이 UI/UX 디자이너가 되고 얼마 되지 않아 그렸던 아이콘들이었기 때문에 상당히 마음에 들지 않았을뿐더러, 새로 세운 기준에 따라 그린 주인공 버튼 속 '카메라+' 아이콘을 비롯한 다른 아이콘들과 선의 두께와 모양 등이 달라 시각적 일관성이 떨어진다는 게 큰 문제였기 때문이다. 탭 바에는 두 번째 탭인 '스토어' 탭이 다른 탭 아이콘에 비해 복잡도가 높아, 다른 탭 아이콘에 비해 강조된다는 문제도 있었다.
빛이 빛을 내려면 어둠 속에 있어야 한다. 이 디자인도 마찬가지다. 주인공 외에 나머지 부분을 눈이 덜 가도록 만들어 주인공 버튼을 강조했다.
상의, 하의, 아우터 아이콘과 카메라 아이콘, 아래쪽 탭 바의 아이콘 모두가 시각적 일관성을 가지도록 기준을 세워 그렸다. 무엇보다 주인공 버튼이 가장 강조되는 게 중요했다.2) 구도와 색, 크기를 활용해 원하는 곳에 집중시킨다
구도는 독창적인 UI 디자인의 밑거름이 될 수 있다.
사용자를 조금 더 주인공 버튼에 집중시키기 위해 아이콘 아래에 '바지 사진을 찍으면 자동으로 사이즈가 측정됩니다!' 문구를 의도적으로 2열로 만들어 2번째 열이 더 길도록 배열해 삼각형 구도를 만들었다. 사용자가 이 작업을 하려면 사진을 찍어야 한다는 걸 인지시키기 위해 카메라와 + 기호를 합친 아이콘을 그려서 활용했다. 이 아이콘은 다른 아이콘보다 크게 해서 더 눈에 띄게 했고, 홀로 색도 입혀 사용자의 눈에 들어올 수밖에 없도록 했다.
UI 디자인에서 '삼각형 구도'를 쓴다는 게 다소 엉뚱한 발상일 수 있다. 이 디자인을 하고 있을 때 홈에 들어갈 내용이 없어서 스크롤이 없는 '고정된 화면'이기에 가능한 생각이었다. 구도가 사진이나 회화에서처럼 표현되지는 않지만, 이런 독특한 생각이 앞으로 디자인을 해나가며 색다르고 특별한 나만의 아이디어로 발전할 밑거름이 될 거라고 믿는다.
3) 사람은 본능적으로 움직이는 무언가가 있는 쪽으로 눈이 간다
모션(Motion, 움직임)은 사용자의 눈길을 끈다.
사용자가 주인공 버튼에 눈이 갈 수밖에 없도록 한 가지 장치를 더 추가했는데, 바로 모션이다. 길을 지나가다가 오른편 작은 문에서 갑자기 공이 튀어나오면 사람의 눈은 본능적으로 공을 향하게 된다. 나에게 튕겨오지 않더라도 위험을 감지해 본능적으로 눈이 먼저 반응하는 것이다.
UI 모션도 마찬가지다. UI 안에 움직이는 요소가 있다면 사용자의 눈은 움직이는 요소 쪽으로 갈 확률이 무척 높다. 모션이 있는 요소만 강조한다면 그 효과는 배가 된다. 나는 아래처럼 카메라+ 아이콘이 깜찍하게 움직이는 모션을 어도비 애프터 이펙트로 제작해 구현했다.(덧. 에어비앤비의 Lottie를 활용했습니다.)
데이터로 살펴본 결과는 성공적이었다. 첫 사용자의 29.9%가 주인공 버튼을 눌러 회원가입 화면에 도달했다. 이는 전체 첫 사용자의 57.6%였다. 절반 이상이 주인공 버튼을 눌러 회원가입 화면에 도달한 것이다.
무엇보다 놀라운 건 목표인 '1차 등록'이 일어난 전체 사용자 중 74.2%가 주인공 버튼을 누른 사용자였다는 점이다. 주인공 버튼을 누른 사용자들이 회원가입을 왜 해야 하는지, 무엇을 얻을 수 있는지를 다른 곳에서 회원가입 화면으로 간 사용자보다 명확하게 인지했다는 뜻이다.
우리 팀은 주인공 버튼의 가능성을 보고 1차 등록률(KPI)을 더 높이기 위해 새로운 시안을 만들어 A/B 테스트를 하기로 했다. A/B 테스트란 쉽게 말해 A와 B라는 2개의 디자인 시안을 만들어 둘 중 무엇이 더 전환율이 높은지 비교하는 실험이다. 여기서 A는 지금까지 소개한 디자인이다.
이미지라 움직이지는 않지만, 카메라+ 아이콘은 계속 움직이고 있다.4_ B안과 C안 디자인해 A/B/C 테스트하기
새로운 시안인 B안을 디자인하면서 염두에 뒀던 점은 A안보다 더 직관적으로 우리 앱이 주는 가치를 이해하게 하는 것이었다. 그 결과로 1차 등록률(KPI)이 높아질 수 있을 거라 봤다.
B안의 핵심 아이디어는 '가치를 직관적으로 전달하는 모션'이었다. B안은 A안에 쓰인 카메라+ 아이콘으로 시선을 끄는 동시에 사진을 찍어야 한다는 걸 암시하면서, 사이즈 입력 창에 자동으로 사이즈 수치가 입력되는 모션을 보여주는 디자인이다. 고심 끝에 나온 아이디어로, 아래 영상을 보면 쉽게 이해할 수 있다. 주인공 버튼을 버튼다운 버튼으로 바꿔 사용자가 버튼을 누르는 행동을 더 강하게 유도하기도 했다.
B안의 핵심은 허리단면, 허벅지단면 등 사이즈 수치가 입력되는 텍스트 필드가 자동으로 채워지는 모션이다. 사용자에게 직관적으로 가치를 전달하기 위한 디자인이다.B안을 디자인하면서 가볍게 시험해보고 싶은 파격적인(?) 디자인이 생겨서 C안까지 만들었다. 대단한 아이디어가 들어갔다기보다는 글자 크기를 무척 크게 해서 강조하면 사용자가 어떻게 반응할지 궁금해서 한번 시험해보고 싶었는데, 다행히 팀원들도 그 결과를 궁금해해 테스트해보기로 했다. 이렇게 테스트 시안이 하나 늘어 A/B/C 테스트가 됐다.
이 시안 역시 카메라+ 아이콘에는 모션이 반복된다.5_ A/B/C 테스트, 그 결과는?
A/B/C 테스트는 구글 최적화 도구(Google Optimize)를 활용해 진행했다. 현재 우리 앱의 홈 화면은 '웹'으로 설계돼 있어서 구글 최적화 도구를 활용할 수 있었다. 구글 최적화 도구를 활용하면 사용자에게 무작위로 A, B, C 중에 하나의 디자인을 보여준다. 각 시안을 본 사용자가 각각 800명쯤 됐을 때 충분한 숫자에게 테스트를 한 것으로 보고, A/B/C 테스트를 마무리했다.
세 시안에서 [홈의 주인공 버튼을 누른 비율]의 격차가 그리 크지는 않았지만, 사용자가 회원가입 화면으로 가장 많이 도달한 시안은 B안이었다. B안을 본 사용자 중 30.3%가 주인공 버튼을 눌러 회원가입 화면에 도달했다. 2번째는 C안이었는데 다소 파격적인 디자인이더라도 시도해볼 만한 가치는 있다고 느꼈다.
구글 최적화 도구(Google Optimize)를 활용해 A/B/C 테스트를 한 결과 B안이 가장 높은 전환율을 보여줬다.현재 A/B/C 테스트 결과에 따라 가장 높은 전환율을 보여줬던 B안을 홈 화면에서 쓰고 있다. 재미있는 건 A/B/C 테스트를 하는 동안 1차 등록률(KPI)이 7% 올랐으며, 홈의 주인공 버튼을 통해 1차 등록을 한 사용자가 전체 1차 등록 사용자의 90%나 된다는 점이다. 다시 말해 새로운 시안이 사용자에게 우리 앱에서 주는 가치가 무엇인지 더 잘 알려준다는 것이다. 공들였던 B안이 가장 좋은 결과를 보여줘, 뿌듯한 프로젝트로 기억에 남을 것 같다.
A/B/C 테스트에서 유의할 건 바뀌는 부분 외에 다른 부분은 바뀌면 안 된다는 점이다. A안, B안, C안을 보면 가운데 영역을 제외한 나머지 부분은 동일하다. 데이터에 영향을 줄 다른 변수를 만들면 안 된다.
A/B/C 테스트를 위해 바뀌는 부분 외에 나머지 부분은 동일하게 유지해야 한다.02 [미션] 회원가입 화면에 도달시켜라
회원가입을 쉽게 만드는 UI/UX 디자인을 깊이 고민했었던 덕분에 현재 우리 앱에서 회원가입 화면에 도달한 사용자의 약 70%가 회원가입을 한다. 주요 퍼널의 2번째 단계에서 3번째 단계로 넘어가는 비율이 약 70%라는 뜻이다.
이를 바탕으로 더 많은 사용자가 옷을 등록하게 해서 1차 등록률(KPI)을 높이려면, 충분히 전환이 많이 되는 2단계에서 3단계로 넘어가는 비율보다 상대적으로 전환이 덜 되는 1단계에서 2단계로 넘어가는 비율을 높이는 게 지금 취할 수 있는 좋은 전략이라 판단했다. 즉 앱에 처음 방문한 사용자가 회원가입 화면에 도달하는 비율을 높이는 것에 집중하자는 전략을 취하기로 한 것이다.
이를 위해 많이 쓰이고 있는 방법은 로그인을 하지 않은 사용자에게 곳곳에서 팝업이나 배너를 보여줘 회원가입을 유도하는 방법이다. 보통 쿠폰이나 할인 혜택 등으로 회원가입할 동기를 준다. 지그재그 앱은 독특한 방법을 쓰고 있어서 눈에 띄었는데, 그건 상품을 5개 '찜'한 뒤 '찜한 아이템' 탭으로 이동하면 '찜한 아이템 5개 달성!'이라는 메시지와 함께 '회원가입하면 찜한 상품을 안전하게 저장해준다'는 팝업을 띄워 회원가입을 유도하는 방법이다. 회원가입 전에 사용자의 스마트폰 저장 공간을 활용해 찜 기능을 이용할 수 있도록 하고, 회원가입을 하면 서버로 찜을 옮겨 저장해준다는 것이다.
'혜택'을 준다고 해서 가입하면 '혜택'에 제한이 있거나 쓰기 애매한 경우를 심심치 않게 볼 수 있는데, 이런 지그재그의 아이디어는 사용자에게 새로운 느낌으로 다가가 회원가입을 유도하는 좋은 방법일 수도 있겠다는 생각이 들었다. 이 팝업을 통해 회원가입을 하는 사용자가 얼마나 되는지 데이터가 궁금하다.
앱 곳곳에 회원가입을 유도하는 팝업이나 배너가 있다.우리 앱에도 이런 회원가입 유도 장치가 여러 군데 있다. 2019년 8월 iOS 앱 운영을 중단하기 전에 했던 마지막 프로젝트가 지금과 같은 '회원가입 화면에 최대한 많은 사용자를 도달시킨다'여서 그 방안으로 회원가입 유도 팝업을 활용한 것이다.
이번에는 조금 다른 방식으로 해보고 싶었다. 앞서 소개한 홈 A/B/C 테스트에서 얻은 우리 앱에서 사용자에게 제공해주는 가치가 무엇인지 정확히 인지시키면 사용자를 더 많이 전환시킬 수 있다는 인사이트를 활용해 보고 싶었던 것이다.
핵심은 맥락에 맞는 메시지다. 사용자는 우리 앱을 둘러보기도 하고 이런 저런 버튼을 눌러보기도 할 것이다. 내 아이디어는 사용자가 앱의 어디에 있는지에 따라 각 맥락에 적절한 메시지를 전달해 앱에서 사용자에게 제공해주는 게 무엇인지 정확히 인지시키자는 것이다.
예를 들어 사용자가 쇼핑을 위해 상품 목록 화면에 도달했을 때, 그 화면에서 쓸 수 있는 우리 앱의 특별한 기능인 '사이즈 검색'을 아래와 같이 소개하는 식이다. 여기서 핵심은 사용자가 옷을 찾으러 쇼핑하는 화면에 들어왔을 때 '사용자의 사이즈에 맞는 옷만 찾을 수 있다'라고 말해주는 맥락에 맞는 메시지다.
3번 설명에서는 '주르륵'이라는 수식어를 의도적으로 넣어 살아있는 문장을 만들었다. 무거울 수 있는 문장의 무게를 조금이나마 줄이려 했다.위 전체 팝업에서 맥락을 연결하는 메시지 외에 신경 쓴 부분은 크게 2가지다. 첫 번째는 사용자 중심 글쓰기(UX Writing)다. 제목을 크게 강조해 사용자에게 자연스러운 맥락을 전달하고, 내용에서는 사용자가 해야 할 행동을 간결하게 설명해야 했다.
특히 어려웠던 건 사용자가 무엇을 해야 사이즈에 맞는 옷만 찾을 수 있는지 설명하는 1~3번 부분이다. 먼저 1번과 2번 설명은 단순한 문장 2개로 서로가 연결돼 술술 읽히도록 문장을 구사해, 사용자가 무엇을 하면 되고(1번) 그 결과로 무엇을 얻을 수 있는지(2번) 명확하게 안내했다.
3번 설명은 사용자에게 이해시키기가 상당히 어렵다고 생각했다. 지금 이 팝업에서 이어지는 행동 그 이후의 행동을 알려주고 있기 때문이다. 따라서 이 부분은 이 팝업 안에서는 설명만 해주고, 사진 촬영을 마친 사용자의 옷 사이즈 측정이 끝났을 때 아래처럼 새로운 알림으로 연결시켜 자연스럽게 기능을 쓸 수 있도록 했다. 3번 설명에서 이미 설명해줬다고 하더라도 사용자는 기억하지 못한다. 사용자가 자연스럽게 원하는 목표에 도달할 수 있도록 '흐름'을 디자인해야 한다.
사용자가 자연스럽게 원하는 목표에 도달할 수 있도록 흐름을 디자인해야 한다.두 번째는 행동 유도 이미지다. 좋은 한 장의 이미지는 긴 글보다 메시지를 쉽게 전달할 수 있다고 생각한다. 사용자가 '사이즈에 맞는 옷만 찾기 위해' 해야 하는 행동을 이미지로 표현했다.
이 이미지는 먼저 사용자가 본인의 옷 사진을 촬영해야 한다는 걸 암시하고 있다. 스톡 사진(스마트폰을 들고 있는 손)과 앱 화면을 합성했으며, 빛(조명)을 고려해 그림자를 그려 자연스럽게 합성하려 노력했다. 이 이미지 위에 '내 옷 촬영'이라는 맥락에 맞는 텍스트를 적은 CTA(Call-To-Action, 행동 유도) 버튼을 걸쳐 넣어 사용자가 해야 하는 행동을 더 명확하게 만들었다.
사용자가 해야 할 행동을 이미지로 표현해 사용자의 행동을 유도했다.세세하게는 사용자가 누르지 않았으면 하는 X 버튼은 사용자가 쉽게 누를 수 있는 엄지 영역(Thumb Zone, 엄지존) 바깥 오른쪽 위에 배치했다.
최근 이 X 버튼에 대한 흥미로운 실험을 해봤는데, 진짜 X 버튼이 누르기 힘든 곳에 있으면 글이 길어 내용 전달이 잘 되지 않는 화면이라도 잘 누르지 않는지에 대한 실험이었다. 데이터로 본 결과 38.4%가 엄지 영역에 있는 CTA 버튼을, 61.6%가 X 버튼을 눌렀다. 내용 전달이 잘 되지 않는 화면에서는 누르기 어려운 곳에 있는 X 버튼일지라도 많은 사용자가 누른다. 이 말은 누르기 쉬운 엄지 영역에 CTA 버튼이 있다고 해서 무조건 많이 누르는 건 아니라는 뜻이다. 내용이 맥락에 맞고, 사용자가 쉽게 이해할 수 있도록 구성돼 있어야 CTA 버튼도 제 기능을 한다.
아래가 실제로 이를 실험한 팝업이다. 이번에 새로 디자인한 팝업과 그 흐름에는 사용자들이 어떻게 반응할지 궁금하다.
사용자가 누르기 쉬운 곳에 CTA 버튼(바지 사진 찍기)이 있더라도 사용자에게 메시지를 명확히 전달하지 못한다면 누르기 힘든 곳에 있는 X 버튼을 더 많이 누른다.사용자가 우리 앱에서 가장 마지막 화면에 도달하면 생소한 기능(버튼) 2개를 만난다. 화면 아래쪽 탭 바에 있는 '보관'과 '내 옷과 비교'라는 기능이다. 이 둘은 사용자가 회원가입(로그인)을 하지 않으면 쓸 수 없다. 따라서 회원가입을 하지 않은 사용자가 이 기능을 이용하려고 버튼을 누르면 로그인을 해야 한다는 팝업이 뜬다.
문제는 이 기능이 사용자에게 무엇을 제공하는지 알려주지 않은 채 로그인하라고 하면 사용자의 반감을 살 수 있다는 점이다. 로그인을 하지 않으면 기능을 쓰지 못하게 막고 로그인을 유도하는 건 많은 앱에서 일반적으로 쓰는 방법이라 사용자들에게 익숙할 수 있지만, 그럼에도 사용자가 느끼는 감정은 나쁠 수 있다.
나는 여기에도 A/B/C 테스트에서 얻은 우리 앱에서 사용자에게 제공해주는 가치가 무엇인지 정확히 인지시키면 사용자를 더 많이 전환시킬 수 있다는 인사이트를 활용해 보기로 했다. 먼저 사용자가 이 화면에 처음 도달했을 때 튜토리얼을 통해 각 기능이 무엇인지 설명해주고, 호기심을 불러일으킨다. 사용자가 관심이 생겨 버튼을 눌러 기능을 실행시키면 로그인(회원가입)을 유도한다.
튜토리얼에서 염두에 둔 핵심은 각 버튼이 무슨 기능을 하는지 알려주는 동시에 각 버튼의 위치를 시각적으로 인지시켜주는 것이다. 이를 위해 튜토리얼에 각 버튼 위치를 가리키는 화살표 모션을 넣었다. 또한 탭 바에 있는 아이콘을 크게 확대해 이미지로 활용했다. 모양을 한 번 더 인지시키기 위해서다. 사용자 중심 글쓰기(UX writing) 역시 신경썼다.(덧. 이 화면에는 찜 기능도 있다. 이는 많은 앱에 있는 기능이라 사용자가 익숙할 거라 생각해 튜토리얼에서 뺄지 말지 고민했지만 각 기능의 균형을 위해 찜 기능도 튜토리얼에 포함시켰다.)
사용자가 튜토리얼을 보고 호기심이 생겨 각 버튼을 눌렀을 때에는 아래처럼 팝업 메시지를 보여줘 기능을 쓰기 위해 로그인(회원가입)이 필요하다는 것을 알려준다. 튜토리얼 없이 기능을 쓰지 못하게 막고 로그인을 하게 하는 것보다 훨씬 자연스럽게 로그인을 유도할 수 있다고 생각한다. 그 결과로 사용자가 로그인(회원가입)을 할 가능성이 더 높아질 수 있다.
그런데 이 화면은 우리 앱 구조에서 가장 끝단에 있기 때문에 사용자가 이미 로그인을 했을 수도 있다. '내 옷과 비교' 기능은 로그인이 돼 있더라도 모바일 옷장에 옷이 등록돼 있어야 하기 때문에, 이를 누른 사용자에게는 아래와 같이 맥락에 맞는 팝업을 보여줘 안내했다.
맥락에 맞는 메시지는 사용자가 UI/UX 디자이너가 의도한 행동을 하게 할 가능성을 높인다.03 글 쓰다 정립한 UI/UX 디자인 방법론
'마이크로 퍼널 분석(Micro Funnel Analysis)'
UI/UX 디자인 경험들을 글로 옮기다 보면 경험에서 얻은 깨달음이 정리되고 깊어지는데, 이번 글을 쓰면서 새로운 인사이트를 얻어 흥미로운 개념을 정의했다. 바로 '마이크로 퍼널 분석(Micro Funnel Analysis)'이란 개념으로, 데이터 기반의 UI/UX 디자인 방법론이다.
마이크로 퍼널 분석(Micro Funnel Analysis): 사용자가 UI를 쓰는 흐름들을 세세하게 나눠 각 흐름의 데이터를 관찰하고 분석하며 UX를 개선하는 데이터 기반 UI/UX 디자인 방법론.
UI: User Interface, 사용자 인터페이스
UX: User Experience, 사용자 경험
마이크로 퍼널은 앞서 봤던 퍼널과는 다르다. 그 퍼널이 비즈니스적으로 유효한 결과를 내기 위한 퍼널이라면, 마이크로 퍼널은 데이터를 바탕으로 UI/UX를 디자인하기 위해 사용자의 행동 흐름을 부분적으로 파고들어 세세하게 쪼갠 퍼널이다. 마이크로 퍼널 '분석'은 각 마이크로 퍼널들의 UX를 데이터를 기반으로 개선해 나가며 전환율(Conversion Rate) 또는 잔존율(Retention, 리텐션)을 향상시키는 것을 목표로 한다.
특별하지만 생소한 기능이 대부분인 우리 앱의 특성상 이런 방법론은 꼭 필요하다. 어떤 기능을 사용자가 이해하지 못하는지, 그 이유는 무엇인지 세세하게 살펴볼 필요가 있기 때문이다. 섬세하게 사용자 경험(UX)을 개선한 마이크로 퍼널들이 모여 좋은 경험을 주는 앱이 될 수 있다.
사실 이 방법론은 이미 실무에서 활용하고 있지만, 어떤 용어로 정의를 내리지는 않았어서 명확하게 손에 잡히는 느낌이 없었다. 글을 쓰면서 갑자기 정리된 생각이라 아직 방법론 자체가 구체적이지는 않다. 앞으로 실무에 적극적으로 적용해 보면서 발전시켜볼 생각이다.
마이크로 퍼널 분석이 내비게이션 바에 대한 UI/UX 디자인 가이드를 만들 때 계획을 세웠던 '나만의 사고 방식으로 UI/UX 디자인의 개념을 정립하는 일'의 시작이 될 수도 있겠다는 생각이 든다.
마치며
매주 월요일 아침, 회의에서 공유할 데이터를 분석해 그 속에서 인사이트를 끄집어내는 일은 상당히 즐겁습니다. 제가 의도한 대로 사용자가 반응하는지 살펴보는 건 사용자와 소통하고 있다는 느낌을 줍니다. 이 느낌이 좋아 UI/UX 디자인에 데이터를 더 심도있게 활용하는 방법을 고민하고 있었는데, 이 글을 쓰면서 '마이크로 퍼널'이라는 좋은 답을 찾아낸 것 같습니다.
처음에는 잘 몰랐지만, 저희 앱은 참 신기한 앱입니다. 색다른 구조로 유일한 서비스를 제공하고 있다고 생각합니다. 사람들에게 생소해서 비즈니스적으로 푸는 데 어려움이 많기는 하지만요. 그렇지만 어떤 사용자들에게는 유용하다는 건 분명합니다.
UI/UX 디자이너로서는 특별한 앱을 디자인하며 색다른 경험을 사용자에게 전한다는 자부심을 가져도 되지 않을까 생각합니다. 하지만 아직 저는 제가 디자인한 앱을 사람들에게 소개하는 게 부끄럽습니다. 스스로 부족하다고 느끼기 때문입니다. 지금은 iOS(아이폰)에서만 서비스하고 있기도 하고요. 친구들이나 IT 업계 동료들을 만날 때 '내가 디자인하는 앱은 이거야'라고 자부심을 갖고 말할 수 있을 때까지 더 열심히 해봐야겠습니다.(끝)
작은 앱 프로젝트
많은 기능과 서비스를 갖추고 있는 슈퍼 앱들 사이에서 단순함을 가장 큰 목표로 하는 '작은 앱'이 사람들에게 어떠한 의미로 다가갈지 연구하는 '작은 앱 프로젝트'를 진행하고 있습니다.
04 참고 자료
1. 위키피디아(Wikipedia) 퍼널 분석(Funnel Analysis)
2. 위키피디아(Wikipedia) Conversion Funnel
3. 브런치 작가 Joe님의 글 '퍼널 분석(Funnel Analysis), 개념 잡기'
4. 위키피디아(Wikipedia) A/B 테스트(A/B testing)
5. 구글의 최적화 도구(Google Optimize)
6. 범용 데이터 분석 도구로 유명한 GA(Google Analytics, 구글 애널리틱스)
7. 퍼널 분석(Funnel Analysis)을 비롯한 다양한 데이터 분석을 할 수 있는 Amplitude
