푸터(Footer) 영역의 UX 데이터 분석하기
푸터(Footer)의 역할과 UX 개선 사례
푸터(Footer)란 무엇일까요?
사이트 최하단에 있는 영역으로 보통 저작권 정보나 개인정보처리 방침, 이용약관처럼 정책 페이지 링크를 두는 경우가 많습니다. 대다수 사이트에서는 그저 남들이 다 하니까 ‘관습적’으로 만들어두고는 이내 방치해버리곤 하는데요, 푸터를 어떻게 효과적으로 설계하여 사이트 전환율에 기여할 수 있을까요? 또 이렇게 설계한 푸터 영역의 데이터는 어떻게 분석할 수 있을까요?
푸터(Footer)가 지니는 기본적인 5가지 역할
뷰저블에서는 푸터의 역할을 크게 5가지로 나누었습니다. 삼성 닷컴과 아마존 닷컴, 국내외 주요 사이트들을 예시로 설명해 드릴게요!
(1) 다른 페이지로의 이동을 유도하여 사용자가 이탈하는 것을 예방합니다.
스크롤 하여 정보가 끝나버리면 사용자는 페이지를 닫거나 뒤로 가기를 누르겠죠? 추가 정보를 계속해서 제공한다면 어떨까요? 해당 정보로 이동할 것입니다. 기사 콘텐츠라면 연관 기사나 최신 기사 등을 배치하고 이커머스라면 핵심 주력 제품이나 마케팅 배너, 주요 카테고리를 배치하여 계속해서 탐색할 수 있도록 동선을 유도할 수 있습니다.
이는 결론적으로 페이지 종료율(Exit Rate)을 줄이고 사이트 전체 페이지 뷰 수(PV수)를 높여줍니다. 나아가 사이트 전체 체류 시간을 증가시키며 SEO(검색엔진 최적화)에 기여합니다. 검색엔진 최적화란 구글이나 네이버가 사이트를 일련의 자사만의 기준을 갖고 평가하여 검색 결과에 상위 노출시켜주는 걸 의미하는데요, 이탈률이나 종료율, 사이트 내부 PV수 등이 중요하다고 일컬어지고 있습니다.
(2) 마케팅 배너 또는 중요도가 높은 페이지를 배치하여 전략적으로 홍보합니다.
사이트 규모가 방대한 경우 푸터 영역을 전략적인 공간으로 활용할 수 있습니다. 사이트를 끝까지 내려서 보았다는 것은 ‘충성도 높은 고객’일 확률이 높고, 이들을 위한 특별하고 개인적인 정보를 배치할 수 있죠. VIP처럼 멤버십 등급이 높은 고객을 위한 혜택이나 이벤트 정보를 제공할 수 있습니다.
대표적인 예시로 세포라 닷컴에서는 멤버십 회원을 위한 혜택 정보를 배치하고 가입을 유도합니다.
(3) 주요 수상 내역 로고를 배치하여 신뢰도와 브랜드 인지도를 확립할 수 있습니다.
웹 접근성 보호 인증 마크, 개인정보 우수 사이트 로고 등 주요 수상이나 인증 내역을 배치하여 기업과 사이트 전체의 신뢰도를 확보할 수 있습니다. 혹은 신생 스타트업의 경우 기업의 로고나 브랜드 로고를 다시 한번 배치하여 인지도를 높이는 방법도 자주 활용됩니다.
SSG닷컴에서는 위해 ‘상품차단시스템 운영매장’ 인증 로고와 온라인 쇼핑협회 정회원사 로고를 게재하여 신뢰도를 높이고 있습니다.
쿠팡에서도 마찬가지로 개인정보보호 관련 인증마크를 게재하여 이커머스 사이트에서 가장 크리티컬한 이슈 중 하나인 정보보안에 대해 고객에게 신뢰도를 부여하고 있습니다.
(4) 글로벌 사이트의 경우 언어설정을 변경하거나 타 국가 페이지로 이동할 수 있습니다.
언어 설정은 중요도가 최상위로 높지는 않지만, 사이트에 꼭 배치해야 하는 정보입니다. 이 경우 푸터에 설정할 수 있습니다. 혹은 타 국가 사이트를 놓을 수도 있고, 여러 개의 그룹사가 있는 경우 타 그룹사(계열사)의 링크를 드롭다운 리스트로 배치하는 것도 효과적입니다.
11번가는 SK텔레콤 자회사인데요, 관련 계열사인 행복스토어나 SK텔레콤, 기프티콘 등의 사이트를 드롭다운 리스트로 배치하고 있습니다.
GS SHOP에서는 텐바이텐 사이트 로고를 링크로 배치하였네요!
(5) B2C 사이트의 경우 B2B 고객을 위한 페이지로 이동하는 통로로 활용할 수 있습니다.
이커머스를 예로 든다면 B2C는 사이트에서 직접적인 매출을 올려주는 고객이고 B2B는 사이트에 물건을 등록하거나 협력업체로 등록하여 물건을 판매하고 싶은 제조업자라 할 수 있습니다. 보통 이커머스에서는 B2C 사이트를 따로 만들어두고 푸터 영역에 B2B 고객을 위한 링크를 배치하는 경우가 많습니다. 별도 도메인을 파지 않고도 효과적인 통로로 활용할 수 있죠.
올리브영에는 푸터에 ‘가맹점 개설문의’와 ‘상품입점 및 제휴링크’를 게재하였습니다. 이 외에도 아래 샌드박스 네트워크 사이트처럼 주주들을 위한 IR 공고 링크를 게재하는 경우도 많습니다.
기타 FAQ나 고객센터, 채용공고 링크를 게재하기도 합니다.
전체 사이트 페이지가 10개 미만이라면 모든 사이트맵을 실어도 상관없겠지만 1,000페이지 이상 되는 큰 규모라면 전략적인 푸터 정보의 우선순위 설정이 필요합니다.
푸터(Footer) 개선으로 상품 구매 건수가 향상된 사례
영국의 패션 이커머스 서비스인 RADLEY에서는 푸터를 갖고, A/B테스트를 실시하였습니다. A 안은 푸터에 기본적인 이용약관이나 검색창, 카드 결제 수단 등을 배치하였다면, B 안에서는 사이트를 조망할 수 있는 카테고리를 배치한 것이죠. 페이지의 길이는 더 길어져 사용자가 스크롤 해야하는 수고는 늘어났지만, 오히려 B 안에서의 구매 전환율이 23.77%, 방문자당 매출이 15.99%나 증가하였다고 합니다. (상세 기사 보러 가기)
현재는 지속적해서 UX를 개선하는 사이트답게, 좀 더 진화된 UI를 구현하여 카테고리 GNB를 스티키바로 고정하고 푸터에는 브랜드 신뢰도와 연관된 정보들(기업에서 활동 중인 사회 혁신 및 윤리적 활동들)과 기업에서 운영 중인 SNS 로고 링크를 기재해 두었습니다.
여러분의 사이트에서 고객이 어떤 정보 콘텐츠를 중요시 여길까요? 자사 사이트에 효과적인 푸터가 설정되어있는지를 점검하고 A/B 테스트로 효과를 검증해보세요! 물론 뷰저블에서도 A/B 테스트 기능을 제공하고 있습니다. 성과 분석 방법에 대해 더 자세히 알아볼까요?
뷰저블로 푸터 UX 데이터 성과 분석하기
(1) 스크롤 히트맵과 어텐션 그래프로 PV도달율과 체류 시간의 변화 측정하기
먼저 스크롤 히트맵으로 하단 푸터 영역의 PV 도달율이 올라갔는지를 살펴보세요. 이와 함께 해당 영역의 체류 시간이 올라갔는지를 살펴보며 성과를 측정할 수 있습니다. 링크가 없어 클릭이 일어나지 않는 푸터 영역이더라도, 사용자가 정보를 인지하고 확인한다면 ‘체류 시간’이 발생할 수밖에 없기 때문입니다.
뷰저블에서는 페이지 별 체류 시간을 제공할뿐만 아니라 높이에 따른 영역별 체류 시간을 제공하는 특화된 기능이 마련되어 있습니다.
(2) 클릭 히트맵과 탭 히트맵으로 링크 클릭(탭) 수 측정하기
푸터에 배치한 링크로 얼마나 전환(=이동)하는지를 성과 측정할 수 있습니다. PC 사이트라면 클릭 히트맵의 클릭 수로, 모바일 사이트라면 탭 히트맵의 탭 수로 비교 가능하죠. 동일한 푸터 영역 내 클릭 수가 얼마나 증가하였나요? 단순히 클릭 수로 비교하기보다 전체 PV중 클릭한 비중을 의미하는 ‘Click PV Rate’로 살펴보면 더욱 효과적입니다.
또한, 왼쪽 두번째 Analytics 메뉴의 ‘사용자 흐름 분석’ 기능을 활용하여 내부 페이지로 얼마나 많이 이동하였는지, 이탈(Exit)한 사용자는 얼마나 감소하였는지를 비교해볼 수 있습니다. 푸터 영역을 통해 사용자가 페이지 탐색을 멈추지 않고 계속해서 돌아다니는지를 성과 측정해봅시다!
이 모든 것은 A/B 테스트 메뉴에서 간단히 설정하여 비교할 수 있습니다. 요금제 상관없이 무료로 A/B 테스트 기능을 기본 제공하고 있으니 꼭 활용해보세요.
뷰저블에서는 Split 방식이라 불리는 A/B 테스트 기능을 제공합니다. 변수라 불리는 비교 대상을 1개로 설정하여 2개의 URL을 따서 동일한 기간 내에 동일한 PV를 이동시켜 효과를 비교분석해볼 수 있는 분석 기법입니다. 타사와 다르게 숫자가 아닌 히트맵으로 성과를 비교해볼 수 있습니다. (A/B테스트 기능 알아보러 가기)
나아가, 위 영국 RADLEY 사례처럼 매출액이나 구매전환율의 증감율 등에도 푸터 개선을 통해 영향이 있었는지를 부수적인 지표로 함께 살펴볼 수 있습니다.
푸터는 웹 사이트 사용성을 높이는 역할을 합니다. 웹 사이트의 사용성이 전반적으로 올라가면 간접적인 SEO(검색엔진 최적화) 효과는 물론이고 구매 전환율 향상에도 기여합니다.
지금까지 푸터를 그저 만들어두고는 방치해두고 계셨다면, 이번 기회에 한 번 더 점검하고 개선하여, 뷰저블로 성과까지 추적해보세요!
숫자 대신, 히트맵으로 시작하는 데이터 분석!
서비스의 중요한 고객들의 데이터를 한 눈에 보세요!
UX with Beusable.
