알게, 느끼게, 행동하게
이번 글에선 고객의 행동을 이끌어 내기 위해 어떻게 ‘화면의 목적’을 정해야 할지 고민했던 경험에 대해 이야기해 보려고 합니다.
이런 내용을 담았어요.
화면의 목적을 어떻게 정할 수 있는지
화면의 목적을 설정하는 것이 왜 중요한 지
이런 분들에게 도움이 될 것 같아요.
화면의 목적을 뚜렷하게 정해서 작업한 경험이 없는 프로덕트 디자이너
목적이 불분명한 화면을 어떻게 개선해야 할지 고민인 기획자
추가되는 기능의 페이지나 플로우를 새롭게 그려내야 할 때, 어떻게 처음 시작하시나요? 왠지 모르게 어렵고 복잡한 화면을 개선하려고 할 때, 어떻게 기획하시나요? 이전에 저는 비슷한 기능의 레퍼런스를 찾아 우리 기능에 끼워 맞추는 식으로 화면을 그렸었는데요. 그렇게 하다 보니 그럴듯해 보이기만 하고, 어떤 가치에 방점이 찍힌 건지 모를 애매하고 어려운 화면이 된다고 느꼈습니다. 그 이유를 고민해 보니 가장 중요한 ‘화면의 목적’은 차치한 채, 그저 따라만 했기 때문이더라고요. 그래서 내가 만드는 화면에서 소구해야 하는 가치는 무엇인지에 따라 목적을 정해두고 디자인하기로 했습니다. 그럼 화면의 목적은 어떻게 정해야 하는 걸까요?
고객이 어떤 행동을 하길 바라나요?
우리가 어떤 프로젝트를 진행할 때, 고객이 어떤 행동을 하기를 염두에 두기 마련입니다. 예를 들어 고객이 프리미엄 서비스를 정기 구독하길 바라고, 새로운 일정을 등록하길 바라고, 회원 가입하길 바라고, 장바구니에 물건을 담길 바라고, 게시물을 공유하길 바랍니다. 우리가 해야 할 일은 그 행동을 쉽게 할 수 있도록 화면을 설계하는 것입니다.
하지만 고객이 그 행동을 하게 만들겠다고 무작정 CTA 버튼만 크게 강조하거나, 모든 혜택을 강조해서 덕지 덕지 붙여 넣는다거나, 혹은 그 두 가지를 모두 다 해버린다면, 단기적으로 어떤 성과를 가져올지 몰라도 장기적으로는 고객에게 나쁜 경험을 누적시키게 될 것입니다. 그러니 우리가 해야 하는 건 ‘강요’가 아니라 ‘유도’입니다. 어떻게 하면 고객 본인이 원해서 그 행동을 하게 될지를 알아보기 위해, 그 행동까지의 과정을 작게 쪼개서 따라가보기로 했습니다.
고객에게 바라는 행동 : 사업자향의 카드를 새로 발급받는다.
캐시노트는 사장님들에게 카카오 채널톡 메시지를 발송하여 사업자향의 카드들을 확인할 수 있는 페이지로 랜딩 시키고 있습니다. 사장님들에게 카드들을 소개해 주고 그 카드를 발급받게 하기 위함입니다. 사장님들은 ‘채널톡 메시지 확인’부터 ‘카드를 발급받는’ 최종 행동에 이르기까지, 이런 단계들을 거치게 됩니다.
그리고 이런 단계들은 인지, 감정, 행동으로 나눌 수 있습니다.
또 각 단계가 이뤄지게 되는 화면별로 묶어보면 다음과 같습니다.
그럼 각 화면에서 가장 중요하게 다뤄져야 할 단계가 무엇인지 파악할 수 있게 됩니다.
이제 각 화면의 목적을 정하기가 쉬워집니다.
1. 카카오 채널톡 메시지
사장님이 사업자향 카드에 대해 처음 접하는 지점인 만큼, 호기심이 생기도록(감정) 하는 것을 목적으로 합니다. 이것이 충족되면 사장님은 카드에 대해 더 알아보기 위해 카드 소개 페이지로 이동하게 됩니다.
2. 카드 소개 페이지
카드들에 대해 더 알아보고 싶어 할 정보들을 알려주는(인지) 것을 목적으로 화면을 설계합니다. 그러면 특정 카드에 대해 매력(감정)을 느끼고, 특정 카드의 상세페이지로 진입(행동) 하게 됩니다.
3. 카드 상세 페이지
해당 카드의 혜택과 장점들을 알려주는(인지) 것을 목적으로 화면을 설계합니다. 마찬가지로, 혜택 정보가 제대로 인지되고 나면 이 혜택이 매력적(감정)이라고 느끼게 될 것입니다. 이것이 달성되면 우리가 바라는 최종 행동인 ‘카드사 페이지에서 카드 발급받기’가 일어나기 쉬워집니다.
목적에 맞게 화면 개선하기
앞선 내용을 바탕으로 ‘카드 소개 페이지’를 개선해 보려 합니다. 목적이 세워졌으니 어떻게 그려야 할지 방향성이 생겼습니다. 사장님들이 카드를 고를 때 가장 매력적이라 느끼는 정보가 무엇인 지 파악하고, 인지하기 쉽게 보여주기만 하면 되니까요. 그래서 사장님이 고정적으로, 혹은 자주 사용하고 있는 사용처 중심으로 카드의 혜택을 보여주기로 했습니다. 이런 해결 방법이 정해지자 카드 소개 페이지는 다음과 같이 개선되었습니다.
[AS-IS]
나열된 정보의 위계가 명확하게 보이지 않습니다. 모든 것을 알려주려고 하다 보니 정보가 중복되고, 혼란을 가중시킵니다. 그러다 보니 카드와 CTA 명의 관계도 불분명합니다.
[TO-BE]
화면의 목적에 맞게, 사장님들에게 소구가 잘 될 혜택들이 눈에 잘 보입니다. 목적이 정해지니 정보의 우선순위도 명확하게 표현되었습니다.
다른 사례 살펴보기
‘인지’가 선행되면 ‘감정’과 ‘행동’이 자연스럽게 따라오긴 하지만, 그렇다고 모든 화면의 목적이 ‘인지’가 되어서는 안됩니다. 서비스에 따라 상황에 따라 ‘감정’과 ‘행동’이 화면의 가장 중요한 목적이 되기도 합니다. 다른 프로덕트들로 몇 가지 사례를 들어보겠습니다.
부킹닷컴과 에어비앤비는 모두 숙소 예약 서비스를 제공합니다. 이 프로덕트들의 홈 화면을 비교해 보면, 각각의 서비스가 어떤 가치에 방점을 찍었는지 확인할 수 있습니다. 부킹닷컴의 홈 화면은 객실 정보와 가격, 위치, 평점 등의 정보가 카드의 절반 이상을 차지하는데, 고객들에게 객실에 대한 정보를 <인지>시켜주는 게 목적이기 때문입니다. 반면 에어비앤비의 홈 화면은 숙소 사진을 중심으로 화면이 구성되어 있는데, ‘이 숙소에 묵고 싶다’ , ’얼른 여행을 떠나고 싶다’라는 <감정>을 일으키게 하는 것이 목적이기 때문입니다.
한편 에어비앤비의 검색 화면은 고객이 해야 하는 행동을 바로 할 수 있도록, 입력 섹션이 ‘장소-일정-인원’의 순서로 차례차례 포커싱 되며 나타납니다. 숙소 검색에 필요한 입력값을 채워야 하는 <행동>이 이 페이지의 목적이기 때문입니다. 이처럼 같은 도메인이나 같은 서비스에서도 인지, 감정, 행동 중 어떤 것을 목적으로 두냐에 따라 다른 화면이 나타나게 됩니다.
지금까지 화면 목적 지정의 필요성과 목적을 정하는 저만의 방법, 그리고 목적에 따라 어떻게 화면이 구성이 되는지 캐시노트를 포함한 여러 사례들을 통해 이야기해 보았습니다. 여러분이 담당하고 있는 프로젝트 화면의 목적은 무엇인가요? 고객에게 정보를 알게 하기 위함인가요, 느끼게 하기 위함인가요, 행동하게 하기 위함인가요? 물론 화면의 목적을 인지, 감정, 행동의 세 가지로 나누는 저만의 방법이 정답은 아닙니다. 하지만 어떤 방법론을 통해서든, 화면의 목적을 먼저 정한 후에 화면을 디자인하는 경험을 해보시길 바랍니다.
