랜딩페이지의 전환을 높이기 위한 UX 가이드
랜딩페이지는 온라인 마케팅을 위한 한 장의 웹페이지다. 일반적으로 검색광고, 이메일 마케팅, 온라인 광고/배너, 소셜 미디어에서 링크를 클릭하여 진입하게 된다. 랜딩페이지의 목적은 '전환convert'에 있다. 회원가입, 앱 다운로드, 제품 구매, 서비스 신청 등 하나의 분명한 목적을 가지고 있다.
통신사 공식 사이트는 '던전'이라 불릴 정도로 상품이 너무 많고 복잡해서 원하는 상품을 찾아 신청하기가 쉽지 않다. 여정 중에 다른 곳으로 빠지거나 이탈하게 되는 경우도 많다. 통신사에서 로밍 상품을 새로 하나 만들었다고 가정해보자. 여행 성수기를 맞아 야심 차게 런칭하고 이벤트도 걸고 광고도 엄청 했다. 로밍 신청을 극적으로 끌어올리려면 공식 사이트 외에 별도의 랜딩 페이지를 만들어주는 게 효율적이다. 네이버에서 '로밍'으로 검색하면 첫 번째 링크로 랜딩페이지가 노출되고, 진입해서 다른 상품 하나도 안 보고 로밍만 신청할 수 있다면 공식 페이지보다 전환율이 월등히 높아질 것이다.
원래는 공식 사이트에 정보구조가 복잡하고 상품이 너무 많아서 광고하려는 한 상품에 집중하도록 랜딩페이지를 만드는 경우가 많다. 근데 최근 많이 보이는 양상은 메인 사이트의 로그인 전 화면을 '랜딩페이지 스타일'로 만드는 경우다. 로그인 전에는 '회원가입'을 유도하며 서비스에 대해 소개하고 로그인 후에는 실제 서비스를 사용할 수 있게 분리하는 사례가 많아지고 있다.
로그인 전에는 회원가입을 유도하는 랜딩페이지 스타일, 로그인 후에는 실제 서비스랜딩페이지는 '전환'이라는 목적이 분명하기에 UX가 핵심적인 역할을 한다. 전환을 높이기 위한 전략을 행동 유도, 정보 전달력, 명확한 카피, 일관된 경험 4단계로 나누어 정리해 보았다. 그리고 각 단계의 끝에 체크리스트를 만들었다. 체크리스트의 각 항목을 양호/보통/개선필요로 나누어 평가해보고 개선이 필요한 카테고리에 집중적으로 투자하면 도움이 될 거 같다.
1. 행동 유도
랜딩페이지에는 하나의 목적만 존재해야 한다. 그게 구매든 회원가입, 서비스 신청, 상담예약이든 가장 밀고 싶은 하나의 태스크만을 위해 모든 것을 집중해야 한다.
이 핵심 태스크의 액션을 유도하기 위해 단 하나의 CTA(call-to-action) 버튼만 두어야 한다. 회원가입도 했으면 좋겠고 상담도 받게 하고 싶고 카카오톡 플러스 친구도 추가했으면 좋겠다는 생각에 CTA 버튼이 여러 개 붙으면 정작 중요한 목적이 점점 흐려질 수밖에 없다.
하나의 CTA 버튼을 만들었으면 이 버튼이 무조건 잘 보여야 한다. 페이지에 진입하자마자 한눈에 딱 보이려면 디자인은 최대한 심플해야 한다. 주의를 산만하게 하거나 전환을 방해하는 모든 요소들을 과감히 없애보자. 많이 실수하는 방해 요소가 내비게이션이다. 랜딩페이지는 마이크로 사이트와 다르다. 여기저기 둘러보며 다른 행동을 하게 두지 말고 오로지 CTA 버튼 하나에만 집중하게 하자. 집중을 방해하는 불필요한 구경거리를 너무 많이 두면 구경만 하다가 나간다. 넷플릭스는 하고 싶은 얘기는 많았으나 한 페이지 내에서 모두 설명하기 위해 내비게이션 대신 탭으로 정리하였다. 그리고 각 탭마다 서비스 소개와 함께 회원 가입을 유도하는 CTA 버튼을 지속 노출시켰다.
CTA 버튼은 잘 이해되고 액션을 유도하게 만들어야 한다. 버튼을 눌렀을 때 무슨 일이 일어날지 예측이 가능해야 하고 왜 이 버튼을 눌러야 하는지 충분히 설득이 되어야 한다. 넷플릭스는 ‘회원가입(Sign up)’이라는 말 대신 ‘한 달간 무료 이용 신청(Join Free for a Month)’이라고 구체적인 혜택을 강조하였다.
체크리스트
* CTA 버튼이 하나인가?
* CTA를 방해하는 다른 버튼이나 내비게이션이 있는가?
* CTA 버튼이 즉각적으로 잘 보이는가?
* CTA 버튼을 눌렀을 때의 결과가 예측이 가능한가?
* CTA 버튼의 텍스트가 구체적인가?
2. 정보 전달력
랜딩페이지는 빠른 시간 안에 이목을 끌고 정보를 쉽게 전달해야 한다. 블링크 테스트(Blink Test)를 통해 잘 작동하는지 확인할 수 있다. 블링크 테스트란 페이지를 5초간 바라본 후 페이지의 목적, 혜택, 취할 수 있는 액션 등에 대한 이해가 되는지 확인해보는 테스트다. 사이트를 전혀 모르는 사람에게 5초간 보여준 후 뭐 하는 사이트 같은지, 뭘 할 수 있는 거 같은지 이런저런 질문을 던져보자. 스크롤하지 않은 첫 페이지에서 이 서비스를 5초 안에 이해시켜야 한다. 그러려면 핵심적인 정보만 명확하게 전달해야 한다.
그래픽이나 이미지를 넣을 때도 신중해야 한다. 그냥 봐서 멋진 이미지보다는 서비스의 핵심을 명확하게 설명하고 전환을 하고 나면 어떤 일이 일어날지 짐작할 수 있게 해주는 이미지가 좋다.
체크리스트
* 블링크 테스트를 통과하는가?
* 이미지가 서비스의 핵심을 설명하는가?
* 폰트의 사이즈/행간/자간 및 레이아웃이 가독성을 높이는가?
3. 명확한 카피
사용자들이 이 페이지의 목적을 잘 이해하려면 디자인뿐 아니라 카피도 중요하다. 설득력 높고 구체적이고 이해가 잘 되어야 한다. 헤드라인과 서브타이틀만 읽어도 모든 내용이 이해되어야 한다. 더 많은 정보를 원하는 사람들을 위해 좀 더 자세한 본문 텍스트를 두되 대충 훑어 읽어도 용이하도록 짧고 이해가 쉬운 문장을 사용한다.
체크리스트
* 헤드라인 - 서비스의 가치를 담고 액션을 유도하는가?
* 서브타이틀 - 혜택의 장점을 간결하게 표현하는가?
* 본문 - 훑으며 읽어도 파악 가능한 쉬운 텍스트인가?
4. 일관된 경험
랜딩페이지와 공식 사이트와 광고, 이메일, 모바일 배너 등 진입한 소스의 톤 앤 매너가 일관되어야 한다. 그래야 제대로 들어왔다고 느낄 수 있고 신뢰를 준다. 폰트, 이미지, 컬러, 그래픽 스타일 등 디자인 룩도 맞추고 카피도 통일되도록 신경 쓰자.
Flinto 프로모션 배너
Flinto 프로모션 랜딩 페이지체크리스트
* 랜딩페이지 진입 소스의 카피와 랜딩페이지 헤드라인 카피가 일치하는가?
* 랜딩페이지, 진입 소스, 공식 사이트의 톤 앤 매너에 일관성이 있는가?
랜딩페이지를 디자인한 후에는 꼭 A/B 테스트를 진행하는 게 좋다. CTA 버튼의 위치/크기/텍스트, 카피의 길이/종류, 이미지 종류 등을 여러 버전으로 만들어 보고 테스트를 해보자.
A/B 테스트를 할 때는 충분한 시간과 모수를 두고 가급적 한 번에 하나의 요소씩만 비교하는 게 좋다. 버튼의 크기, 다른 헤드라인, 이미지의 위치를 테스트하고 싶다면 세 번에 걸쳐 따로 테스트해야 어느 요소가 전환에 영향을 주었는지 알 수 있다.
효율적인 페이지를 디자인하려면 많이 시도해보고 시행착오를 겪어야 한다. 다른 랜딩페이지에서는 먹히는 포맷이 내가 했을 때는 아닐 수 있다. 여러 포맷을 만들어 보고 전환율을 확인하며 테스트해야 현재 나의 상황에 가장 잘 맞는 최적의 디자인을 찾을 수 있다.
화이팅.
