GNB 개선하기
GNB 개선으로 이탈률 줄이기
Overview
GNB는 웹사이트 전반에 공통으로 적용되는 요소이며, 페이지 간의 전환을 하는 중요한 영역이다. 페이지 간의 전환뿐만 아니라 고객이 원하는 페이지를 쉽게 찾고 이동할 수 있어야 하며 하위 메뉴간의 위계, 서비스 신청과 같은 서비스의 직접적인 목표와도 맞닿아있기 때문에 사용자 경험과 서비스에 큰 영향을 미친다.
GNB 개선을 첫 업무로 맡게 되어 신규 사용자의 관점에서 느낀 점과 데이터를 살펴보며 개선 방향을 잡아보았다.
문제 정의
1. 메뉴 배열 순서
기존 GNB는 요금안내 - 서비스 - 고객지원 - 견적문의 - 공지/이벤트 - 채용 순으로 이뤄져 있었다. 이미 풀필먼트에 대해 자세히 알고 있지 않은 이상, 메인 페이지에서 서비스에 대한 궁금증을 해소하긴 어려웠다. 실제로 서비스 신청한 고객 중에서도 풀필먼트가 일반 택배 서비스와 비슷한 줄 알고 신청한 사례도 있었기 때문에, 요금 정보를 첫 번째로 제공하기보다 서비스에 대한 이해를 도와주는 게 우선이 되어야 한다고 생각했다.
2. '서비스' 하위 메뉴
제공하는 서비스의 종류와 범위가 늘어나며 서비스 하위 메뉴가 하나씩 추가되고 있었다. 너무 많은 선택지가 나열되어있다 보니 메뉴를 선택하는 데에 어려움을 느꼈다.
추가로, 유지보수가 원활한 개선안을 생각해야 했다. 서비스의 범위는 앞으로 더욱 확장될 텐데 그때마다 한 줄씩 메뉴가 추가되는 건 바람직하지 않으니까요.
3. PC - 햄버거 메뉴
GNB가 있음에도 명확한 이유 없이 햄버거 메뉴가 같이 사용되고 있었다. GNB에 없는 메뉴가 햄버거 메뉴에는 존재하는 등 정보제공 측면에서도 혼란스러움을 느꼈고, 메뉴 그룹핑과 네이밍도 달라 통일성이 필요했다.
햄버거 메뉴 내의 클릭수는 '로그인/회원가입'이 가장 높았다. 이를 통해 대다수의 기존 유저들이 햄버거 메뉴를 클릭하는 이유는 로그인하기 위해서라는 가설을 세웠고, 로그인을 위한 불필요한 뎁스도 줄이기로 했다.
4. 모바일 - '서비스' 하위 페이지 간의 단절
모바일에서 가장 큰 문제점은 10개의 '서비스' 하위 페이지 간 연결이 없다는 점이다. PC는 GNB가 상단 고정이 되어 있고 호버 했을 때 하위 메뉴가 나오지만, 모바일은 매번 햄버거 메뉴를 클릭한 후 하위 메뉴를 다시 선택해야 하는 번거로운 점이 있었다.
문제 해결 과정
1. 기존 데이터 살펴보기
먼저 사용자들의 관심을 파악하기 위해 사용자별 GNB 클릭수를 확인하고, 메뉴의 중요도를 높음, 중간, 낮음으로 나눠 메뉴별 중요도와 클릭수를 함께 파악했다. GNB와 햄버거 메뉴 구조를 살펴보며 메뉴 그룹핑과 네이밍 등 어떠한 차이점이 있는지도 조사했다.
2. 메뉴 요소 & 배열 순서 고민하기
이후 해당 아티클을 참고하며 메뉴 배열 순서를 고민했다.
"웹사이트 전체의 이탈률을 낮추는 데에는 여러 가지 방법이 있지만 그중 하나는 웹사이트 방문자들을 이탈률이 상대적으로 적은 페이지로 유도하는 것입니다. 웹사이트 방문자들은 리스트의 중간에 위치한 항목보다 처음과 끝에 위치한 항목을 더 많이 클릭하는 경향을 가졌다고 합니다. 그렇기에 GNB 리스트의 양 끝에 다른 메뉴보다 중요하고, 더 많은 클릭을 받아야 하는 메뉴를 배치하는 것이 필요합니다.
개선 전-후 메뉴 요소 및 순서사이트에 들어온 사용자가 먼저 서비스에 대한 이해를 한 후, 실제 이용 후기를 보고 서비스에 관심이 생긴 경우 이벤트와 요금에 대한 정보를 찾는 흐름으로 보여주고자 했다. '요금안내'는 서비스 신청을 결정하는 데에 중요한 요소이며, 사용자들의 관심이 높기 때문에 순서의 영향을 가장 덜 받는 메뉴다.
중요도가 높은 '서비스 소개'와 '요금안내' 사이에 중요도가 낮은 '고객후기', '이벤트'를 배치함으로써 메뉴를 전체적으로 훑어볼 수 있게끔 했다. 추가로, B2B 서비스이다 보니 판매자가 자신의 물건을 믿고 맡길 수 있는지, 회사 자체에 대한 신뢰도 중요하다고 생각하여 '회사소개'도 GNB에 노출하기로 했다.
디자인 과정
서비스 하위 메뉴 중 가장 중요한 4개 메뉴를 메인으로 노출하고, 그다음 순위인 3개 메뉴를 가로로 배치했습니다. 그 외는 메뉴별 카테고리에 따라 LNB로 구성했다.
이 시안은 그룹핑을 더 단순화하면 좋겠다는 피드백을 받았다. 메뉴의 개수는 줄어들었지만 텍스트가 많아 메뉴 선택에 대한 어려움은 여전히 존재했고, 메뉴가 늘어났을 때 유지보수도 어려웠다. 또한, 모바일에서 불편함을 느꼈던 하위 페이지 간의 단절을 해결하기에도 한계가 있다고 생각했다.
최종 개선안
서비스 하이어라키 재구성
서비스에 대한 정보와 사용자 분류의 가장 큰 범위인 국내/해외를 기준으로 크게 특장점, 국내 풀필먼트, 해외 풀필먼트로 그룹핑했다. 기존 10개의 메뉴가 노출됐던 것을 3개로 줄여 메뉴 선택의 어려움을 줄이고자 했다. 각각 하위 메뉴에 해당하는 세부 메뉴들은 LNB로 노출하여 가시성을 높였다.
견적문의, 서비스 신청 버튼 강조
사용자가 견적문의를 남기면 영업팀이 사용자와 직접적인 커뮤니케이션을 하며, 서비스 신청까지 이어지기 때문에 견적문의는 중요도가 높은 요소다. 기존 네 번째 메뉴에 위치하던 견적문의를 서비스 신청 버튼 옆에 배치하여 주목도를 높였다.
서비스 신청 버튼은 기존 라인 스타일을 면 스타일로 변경하여 강조했다. 또한, 활용도가 떨어지고 명확한 이유 없이 사용되고 있던 햄버거 메뉴와 프로필 아이콘도 제거했다.
모바일 - '서비스' 하위 페이지 간의 연결
각각 하위 메뉴에 해당되는 세부 메뉴들을 탭으로 노출하여 PC와 같은 구조를 적용했고, 매번 햄버거 메뉴를 클릭하지 않아도 서비스 내에 다른 페이지들은 손쉽게 넘나들 수 있게 설계했다.
개선 결과
1. 전체 - 이탈률 22.33% 감소
개선 전 후 한 달간의 데이터를 비교해봤을 때 PC, 모바일을 합쳐 전체 이탈률이 22.33% 감소했다. 특히 모바일은 이탈률 18.39% 감소로 확연한 차이를 보였다.
2. 모바일 - 페이지에 머문 시간 25.21% 상승
모바일의 경우 페이지에 머문 시간이 25.21% 상승했다. 이탈률 감소와 더불어, 여러 페이지를 탐색하기 쉬운 환경이 되었기 때문에 자연스레 페이지에 머문 시간도 증가한 것으로 보인다.
아쉬웠던 점
1. GTM 세팅이 되어있지 않아 실제 서비스 신청 버튼의 클릭률이 높아졌는지 파악할 수 없었다.
2. PC 이탈률 감소는 예상보다 적은 수치였고, 페이지에 머문 시간은 오히려 감소했다. 이에 대한 이유와 사용 패턴 등을 알고 싶었지만 어떠한 것을 봐야 하는지 파악하는 데에 부족함이 있었다.
추가 개선 방향
1. GNB를 호버 하면 GNB 전체 하위 메뉴를 한 번에 보여주는 방법으로 A/B 테스트를 진행해보고 싶다.
2. 메뉴 구조를 살펴보니 홈페이지 전반적으로 페이지가 많다는 느낌을 받았다. 추후 GNB 메뉴뿐만 아니라 페이지별 통폐합도 진행하여, 메뉴를 더욱더 간결하게 구성하고자 한다.
