큰 마트에 들어서면 천장마다 '신선식품', '생활용품', '계산대'라고 적힌 안내판이 걸려 있다. 손님은 그 판을 따라 곧장 원하는 통로로 간다. 웹사이트의 메뉴가 바로 그 안내판이다. 그런데 많은 작은 회사 홈페이지는 안내판을 예쁘게 만드는 데만 신경 쓰다가, 정작 손님이 어디로 가야 하는지 말해 주는 본래의 일을 놓친다. 메뉴에서 길을 잃은 손님은 두 번 헤매지 않는다. 그냥 창을 닫는다.
1. 메뉴 항목은 다섯에서 일곱 개 안으로 줄인다
넣고 싶은 페이지를 다 메뉴에 걸면 손님은 오히려 아무것도 고르지 못한다. 선택지가 많을수록 판단이 느려지고, 느려진 판단은 이탈로 이어진다.
- 핵심만 남긴다. 회사소개·서비스·후기·문의처럼 손님이 실제로 찾는 항목만 상단에 둔다.
- 덜 중요한 건 아래로 내린다. 채용, 이용약관, 협력사 같은 페이지는 화면 맨 아래(푸터)로 보내면 충분하다.
- 비슷한 건 묶는다. 항목이 정 많다면 '서비스' 아래에 하위 메뉴로 접어 넣어 상단을 가볍게 유지한다.
2. 메뉴 이름은 회사의 말이 아니라 손님의 말로 짓는다
'솔루션', '비즈니스 인사이트', '원스톱 케어' 같은 이름은 만든 사람에게만 뜻이 통한다. 손님은 그 안에 무엇이 있는지 알 수 없어 클릭을 망설인다.
손님이 머릿속으로 쓰는 단어를 그대로 메뉴에 얹어야 한다. '가격', '오시는 길', '자주 묻는 질문'처럼 뜻이 곧바로 보이는 이름이 화려한 이름보다 훨씬 많이 눌린다. 좋은 메뉴 이름은 설명이 필요 없는 이름이다.
3. 지금 어디에 있는지 늘 보여 준다
낯선 건물에서 '현재 위치'가 찍힌 안내도를 보면 마음이 놓인다. 웹사이트도 마찬가지다. 손님이 지금 어느 페이지에 있는지 알 수 없으면 방향 감각을 잃고 불안해진다.
- 현재 메뉴를 강조한다. 지금 보고 있는 페이지의 메뉴 항목에 색이나 밑줄로 표시를 남긴다.
- 로고는 반드시 첫 화면으로 잇는다. 왼쪽 위 로고를 누르면 홈으로 돌아가는 건 손님이 이미 알고 기대하는 약속이다.
- 깊은 페이지엔 이동 경로를 남긴다. '홈 > 서비스 > 로고 디자인'처럼 지나온 길을 보여 주면 손님이 언제든 되짚어 나갈 수 있다.
4. 모바일에서는 엄지손가락을 기준으로 다시 짠다
작은 회사 손님의 대부분은 휴대폰으로 들어온다. 데스크톱에서 가로로 늘어놓은 메뉴를 그대로 줄여 놓으면 글자가 겹치고 버튼이 손가락을 비껴간다.
모바일에서는 메뉴를 햄버거 아이콘(≡) 안에 접어 두되, 열었을 때의 버튼은 손가락으로 편히 누를 만큼 크게 만든다. 한 항목의 높이는 최소 44픽셀 이상을 확보하고, 가장 중요한 '문의하기' 버튼은 접힌 메뉴 안에 숨기지 말고 화면에 늘 보이게 고정하는 편이 낫다.
5. 정말 중요한 길은 메뉴 밖에 한 번 더 깔아 둔다
메뉴는 길을 안내할 뿐, 손님을 억지로 끌고 가지는 못한다. 그래서 계약·상담·구매처럼 매출로 이어지는 단 하나의 행동은 메뉴에만 맡겨서는 안 된다.
첫 화면 한가운데, 각 페이지 끝, 그리고 화면을 내려도 따라오는 자리에 '무료 상담 신청' 같은 눈에 띄는 버튼을 반복해 배치한다. 손님이 마음먹은 그 순간, 메뉴를 다시 뒤지지 않고도 곧장 다음 걸음을 뗄 수 있어야 한다.
결국, 메뉴는 손님을 위한 배려다
좋은 내비게이션은 손님이 그 존재를 눈치채지 못한 채 원하는 곳에 이미 도착해 있게 만든다. 반대로 나쁜 메뉴는 손님을 매대 사이에서 맴돌게 하다 지쳐 나가게 한다. 화려함이 아니라 헤매지 않게 하는 것이 메뉴가 할 일이다.
CYAN은 작은 회사 웹사이트를 만들 때 메뉴 구조부터 손님의 동선을 따라 설계한다. 지금 홈페이지에서 손님이 길을 잃고 있는 것 같다면, 어디서 막히는지부터 함께 짚어 볼 수 있다.
