회사 소개, 서비스 설명, 시공 사례, 자주 묻는 질문까지. 한 페이지에 정성껏 다 담았다. 그런데 손님에게 그 페이지를 보내면서 우리가 덧붙이는 말은 늘 똑같다. "스크롤 좀 내려 보시면 나와요."
페이지는 길게 만들면서, 그 안에서 길을 찾는 장치는 하나도 두지 않은 것이다. 손님은 지금 어디쯤인지, 앞으로 얼마나 남았는지, 원하는 항목이 이 페이지에 있기는 한지 알 수 없는 채로 엄지만 굴린다. 그러다 대개는 중간에서 멈춘다.
스크롤 막대는 안내판이 아니다
PC에서는 오른쪽 끝의 가느다란 막대가 대략의 위치를 알려준다. 하지만 손님 열에 일고여덟은 휴대폰으로 들어오고, 모바일 브라우저의 스크롤 막대는 손가락을 뗀 순간 사라진다. 남는 정보는 "아직 끝이 아니다" 하나뿐이다.
더 중요한 건 스크롤 막대가 '무엇이 남았는지'를 말해주지 않는다는 점이다. 가격이 궁금해서 들어온 손님은 회사 연혁을 지나는 순간, 이 페이지에 가격이 있는지 없는지를 스스로 추측해야 한다. 추측이 필요한 화면에서 사람은 오래 버티지 않는다.
목차는 장식이 아니라 페이지의 지도다
페이지가 화면 세 개 분량을 넘어가면 목차를 다는 편이 낫다. 목차의 진짜 역할은 이동이 아니라 예고다. 손님은 목차를 훑는 3초 동안 "여기 내가 찾는 게 있구나"를 확인하고, 그때부터 스크롤이 탐색이 아니라 목적 있는 이동으로 바뀐다.
- 항목은 4~7개로 끊는다. 열 개가 넘으면 목차가 또 하나의 미로가 된다.
- 제목을 그대로 옮기지 말고 손님의 말로 바꾼다. '연혁' 대신 '얼마나 오래 했나', '시공 프로세스' 대신 '어떻게 진행되나'.
- 돈과 연락에 관한 항목(가격, 상담 신청, 오시는 길)은 목차 위쪽에 둔다.
모바일에서는 접어서 따라오게 한다
PC라면 본문 옆 여백에 목차를 세로로 세워 두면 된다. 문제는 모바일이다. 좁은 화면에 목차를 통째로 고정하면 정작 읽을 자리가 사라진다.
모바일에서는 목차를 한 줄짜리 막대로 접어 화면 위에 붙이고, 탭했을 때만 항목이 펼쳐지게 하는 방식이 무난하다. 평소에는 지금 보고 있는 항목 이름 한 줄만 보여주면 된다. 그 한 줄이 손님에게 "나는 지금 3번 구역에 있다"를 계속 알려준다.
지금 어디쯤인지 알려주는 작은 신호
현재 위치 표시는 목차와 한 몸이다. 스크롤에 따라 목차 항목 하나에 색이나 굵기를 입혀 두면, 손님은 화면을 훑지 않고도 자기 위치를 안다. 화면 맨 위에 얇은 진행 바를 두는 방법도 있는데, 이건 글이 아주 긴 콘텐츠형 페이지에서만 의미가 있다. 제품 소개나 회사 소개에서는 오히려 불안을 키운다. 진행 바가 3%에서 멈춰 있으면 손님은 '갈 길이 멀다'로 읽는다.
앵커로 이동할 때는 목적지가 화면 맨 위에 딱 붙지 않게 위쪽 여백을 조금 남겨야 한다. 고정 헤더가 제목을 가려 손님이 소제목 없이 본문 중간부터 마주하는 일이 의외로 흔하다.
맨 위로 버튼은 마지막 배려다
페이지 끝까지 내려간 손님이 다시 상담 버튼이나 메뉴를 찾으려면, 엄지로 열 번을 쓸어 올려야 한다. '맨 위로' 버튼 하나가 그 열 번을 한 번으로 줄인다.
다만 처음부터 떠 있으면 안 된다. 한 화면 이상 내려갔을 때 나타나고, 오른쪽 아래 구석에 작게 자리 잡되 전화·카카오톡 같은 고정 버튼과 겹치지 않아야 한다. 겹쳐서 문의 버튼을 가려버리면 배려가 손실로 바뀐다.
길잡이를 달기 전에 먼저 할 일
솔직히 말하면, 목차가 꼭 필요한 페이지는 대개 너무 긴 페이지다. 길잡이를 붙이기 전에 한 번은 물어봐야 한다. 이 내용이 정말 한 페이지에 다 있어야 하나. 회사 소개와 서비스 안내와 가격을 각각의 페이지로 나누면 목차 없이도 손님이 길을 잃지 않고, 검색 노출에도 유리하다.
페이지를 나눌 수 없는 이유가 분명할 때(광고 랜딩, 단일 상품 상세, 원페이지 사이트) 비로소 목차와 위치 표시와 맨 위로 버튼이 제 값을 한다. 순서가 바뀌면, 미로에 안내판만 늘리는 셈이 된다.
CYAN은 페이지를 하나 더 만들기 전에 그 페이지가 손님의 어떤 질문에 답하는지부터 정리합니다. 지금 운영 중인 홈페이지에서 손님이 어디쯤 멈추고 있는지 궁금하시다면, 편하게 문의 주세요.
