웹사이트에 들어온 고객은 가장 먼저 메뉴를 봅니다. 메뉴는 매장의 안내판과 같아서, 고객이 어디로 가야 원하는 정보를 만나는지 알려주는 역할을 합니다. 그런데 많은 작은 회사 사이트가 메뉴 항목을 욕심껏 늘어놓거나, 회사 내부에서만 쓰는 용어로 이름을 붙입니다. 그 결과 고객은 원하는 정보를 찾지 못한 채 뒤로가기 버튼만 누르다 떠납니다. 메뉴를 정리하는 5가지 원칙을 살펴봅니다.
1. 메뉴 항목은 5~7개를 넘기지 않는다
사람이 한눈에 비교하며 판단할 수 있는 항목 수에는 한계가 있습니다. 메뉴가 열 개를 넘어가면 고객은 전부 읽기를 포기하고 감으로 아무 데나 누릅니다. 회사·서비스·포트폴리오·블로그·문의처럼 핵심 5~7개로 압축하세요. 비슷한 항목은 하나로 묶고, 자주 찾지 않는 페이지(채용 공고, 이용약관 등)는 푸터(맨 아래 영역)로 내리면 상단 메뉴가 한결 가벼워집니다.
2. 메뉴 이름은 '우리 용어'가 아니라 '고객 용어'로
회사 입장에서는 멋져 보이는 단어가 고객에게는 암호처럼 느껴질 때가 많습니다. '솔루션', '비전', '컨택트' 같은 표현보다 고객이 머릿속에서 떠올리는 그대로의 말이 잘 읽힙니다. 무엇을 파는지는 '서비스'나 '제품', 가격이 궁금하면 '요금 안내', 연락하고 싶으면 '문의하기'처럼 직관적으로 적으세요. 메뉴 이름을 정할 때는 '고객이 이 단어를 검색창에 칠까?'를 기준으로 삼으면 좋습니다.
3. 가장 원하는 행동은 메뉴 오른쪽 끝 버튼으로
모든 메뉴 항목을 똑같은 글자로 나열하면, 정작 고객이 눌러야 할 행동이 묻힙니다. 문의·예약·견적 요청처럼 회사가 가장 바라는 한 가지 행동은 메뉴 맨 오른쪽에 색이 들어간 버튼으로 따로 빼두세요. 시선은 왼쪽에서 오른쪽으로 흐르기 때문에, 메뉴를 다 읽고 난 고객의 눈이 자연스럽게 그 버튼에 머뭅니다.
4. 지금 어느 페이지에 있는지 항상 보여준다
고객은 사이트를 둘러보다 길을 잃습니다. 현재 보고 있는 메뉴 항목에 밑줄이나 다른 색으로 표시해 '지금 여기에 있다'는 신호를 주세요. 페이지가 여러 단계로 깊어진다면 '홈 > 서비스 > 웹사이트 제작'처럼 경로를 보여주는 이동 흔적(브레드크럼)을 더하면, 고객이 한 번에 원하는 단계로 되돌아갈 수 있습니다.
5. 모바일 햄버거 메뉴도 손가락을 배려한다
이제 방문자의 절반 이상이 휴대폰으로 들어옵니다. 작은 화면에서는 세 줄 아이콘(햄버거 메뉴)으로 접는 경우가 많은데, 이때 버튼은 손끝으로 충분히 누를 수 있을 만큼 크게, 항목 사이 간격은 넉넉하게 잡아야 합니다. 또한 메뉴를 열고 닫는 동작이 한 번의 터치로 끝나야 하며, 닫기 버튼이 어디 있는지 한눈에 보여야 답답함이 없습니다.
메뉴는 적게 보여줄수록 잘 찾힌다
좋은 메뉴는 화려한 메뉴가 아니라 고객이 헤매지 않는 메뉴입니다. 항목을 줄이고, 고객의 말로 이름 붙이고, 가장 중요한 행동을 도드라지게 하는 것만으로도 고객이 정보를 찾는 길이 한결 짧아집니다. CYAN은 작은 회사의 웹사이트를 만들 때, 화면을 그리기 전에 '고객이 무엇을 찾으러 오는가'부터 정리합니다. 메뉴 구조가 막막하게 느껴진다면, 지금 사이트에서 고객이 가장 많이 누르는 버튼이 무엇인지부터 살펴보는 것이 첫걸음입니다.