🐜 사용자의 길잡이가 되는 메뉴 디자인

모바일 앱에서 햄버거 아이콘을 누르면 열 손가락으로는 셀 수 없는 여러 메뉴가 나와요. 한 서비스의 메뉴 체계는 사용자에게 어떤 페이지가 있는지 알려주는 정도의 역할을 한다고 생각하기 쉽지만, 실은 그것보다 더 중요한 역할을 떠안고 있죠. 서비스의 구조, 정체성, 핵심 용어와 개념, 그리고 이 서비스가 어떤 이용 패턴을 사용자에게 제공하는지를 알려주거든요. 메뉴에 들어갈 용어와 위계, 레이아웃 등을 구축하는 일은 아주 중요해요.

오늘은 닐슨노먼그룹이 발행한 메뉴 디자인 체크리스트를 번역했어요. UX 라이팅이 개입하는 레이블링과는 조금 다른, 제품 디자인 측면의 내용이지만 '메뉴'라는 개념을 체계적으로 이해하기 좋은 글이에요.

이 아티클에는 '내비게이션'과 '메뉴'라는 용어가 모두 등장하는데, 헷갈리기 쉬운 두 개념을 명확하게 정의해 드릴게요.

먼저 내비게이션(navigation)은 웹사이트나 앱에서 사용자가 원하는 곳으로 이동할 수 있게 돕는 시스템 전체를 의미해요. 사이트맵, 검색창, 메뉴 등 모든 이동 수단을 포함하는 큰 개념이에요.

반면 메뉴(menu)는 내비게이션의 한 요소로, 보통 링크나 버튼을 체계적으로 정리해 놓은 목록을 말해요. 웹사이트 상단의 메인 메뉴, 햄버거 메뉴, 드롭다운 메뉴 등이 여기에 속하죠.

쉽게 말해 내비게이션은 '길찾기 시스템' 전체이고, 메뉴는 그 시스템을 구성하는 '이정표'와 같은 역할을 한다고 볼 수 있어요.

 그럼 오늘도 재밌게 봐주세요.

2. 메뉴는 예상되는 위치에 두세요

사용자는 특정 메뉴를 화면의 특정 영역에서 찾기를 예상합니다. 이러한 사용자의 예상을 디자인 이점으로 활용하세요.

이 글을 읽다 보면 리서치, 디자인, 마케팅 분야와 겹치는 부분도 발견할 수 있을 거예요. 각기 다른 방식으로 전문화된 분야들이지만, 모두 ‘우리가 누구를 왜 돕고 있는지 이해하는’ 것에 깊은 관심을 갖고 있다는 점을 생각하면 놀랄 일은 아니죠. 그 이해를 위해 사용하는 기법도 비슷비슷하고요.

메뉴 텍스트는 배경과 즉시 구분할 수 있어야 찾기가 쉽습니다.

놀라울 정도로 많은 디자이너가 색상 대비 가이드라인을 신경 쓰지 않아요. 사용자는 디지털 공간을 탐색하는 것만으로도 충분히 혼란스러운데, 메뉴를 읽기 위해 눈을 찌푸려야 한다니요.

큰 화면에서는 메가 메뉴*나 서브 메뉴를 열 때 화면 전체를 가리지 마세요. 메뉴의 가시성과 가독성이 중요하긴 하지만, 열린 메뉴가 화면 전체를 차지해서는 안 됩니다. 열린 메뉴는 고유한 URL을 가진 별도 페이지가 아닌, 콘텐츠 위에 떠 있는 일시적이고 동적인 UI의 한 요소입니다.

* mega menu: 단순한 세로 목록이 아닌 확장 가능한 드롭다운 메뉴(wikitionary)

(화면 전체를 가리면) 일부 사용자는 일시적으로 방향 감각을 잃고, 메뉴를 연 것이 아니라 실수로 새 페이지로 이동한 것으로 착각할 수 있습니다. 또 어떤 사용자는 사이트 구조에서 현재 자신이 어디에 있는지 인식하는 데 어려움을 겪을 수도 있습니다.(모바일 기기에서는 불가피하게 이 가이드라인을 어겨야 할 수도 있습니다.)

“내가 지금 어디에 있는 거지?"는 사용자가 성공적으로 서비스를 탐색할 때 답해야 하는 기본적인 질문 중 하나입니다. 사용자는 이 중요한 질문에 답하기 위해 메뉴(그리고 브레드크럼*과 같은 다른 내비게이션 요소)의 시각적 단서에 의존합니다.

* breadcrumb: 접속 중인 메뉴를 위계순으로 표시해사용자가 현재 위치를 파악하고 상위 또는 하위 페이지로 이동할 수 있게 도와주는 UI 요소예요. 헨젤과 그레텔에서 빵 부스러기를 떨어트려 집으로 가는 길을 표시한 이야기에서 착안한 용어예요.

사용자는 흔히 홈페이지가 아닌 다른 경로로 진입하기 때문에, 사용자의 위치를 알려주는 것은 내비게이션 메뉴의 가장 중요한 역할 중 하나예요. 현재 위치를 표시하지 않는 것은 웹사이트 메뉴에서 가장 흔하게 볼 수 있는 실수입니다.

사람들이 관련 제품을 자주 비교하거나 한 섹션 안에서 여러 작업을 완료하려고 할 때, 사용자가 계층 구조를 위아래로 왔다갔다하며 이동(pogo sticking)하게 하지 말고, 로컬 내비게이션 메뉴로 근처 페이지를 볼 수 있게 하세요.

사용자가 무엇을 찾는지 파악하고, 친숙하고 관련성 있는 카테고리 레이블을 사용하세요. 메뉴는 멋진 신조어나 자곤, 또는 추상적인 상위 개념으로 분류하는 게 아닙니다. 콘텐츠, 기능 또는 리소스를 명확하게 설명하는 용어를 고수하세요.

시각 요소로 긴 메뉴의 정보 전달력을 높이세요(선택적으로). 이미지, 아이콘, 제한된 색상 사용은 익숙하지 않은 옵션의 이해(또는 구분)를 돕고, 메뉴를 스캔하기 쉽게 만듭니다. 하지만 이러한 요소는 텍스트 레이블을 대체하는 것이 아닌 이를 보조하는 추가 요소이어야 합니다. 텍스트 레이블은 접근성과 사용성을 위해 명확하게 제공되어야 합니다.

너무 작거나 서로 가까이 붙어 있는 메뉴는 모바일 사용자에게 큰 불편을 줄 뿐만 아니라, 크게 디자인된 화면을 사용하기 어렵게 만듭니다.

이런 기호를 사용하여 새 페이지로 바로 연결되는 항목과 누르면 서브 메뉴가 열리는 항목을 구분할 수 있습니다. 메뉴가 클릭하거나 탭할 수 있는 것처럼 보이지 않으면 사용자는 서브 메뉴가 있다는 것조차 알아채지 못할 수 있습니다.

✅ 스탠포드 대학교 홈페이지는 서브 메뉴가 열리는 항목 옆에 캐럿 아이콘(▼)을 표시하여 페이지로 직접 연결되는 메뉴 항목(Research 같은)과 서브 메뉴가 열리는 항목(Program 같은)을 잘 구분했습니다.

❌ 메뉴 뒤의 이미지 배경은 대비를 감소시켜 가독성을 떨어뜨립니다.

마우스오버는 모든 환경에서 사용할 수 있는 게 아니에요. 터치스크린 사용자나 주로 키보드로 기기를 조작하는 사용자는 마우스오버 상태에 숨겨진 콘텐츠에 접근할 수 없습니다. 커서를 올려야 메뉴가 활성화된다면 대체 방법도 함께 제공해야 해요.

기기나 입력 방식에 상관없이 일관되고 신뢰할 수 있는 인터랙션 패턴을 갖는 것이 좋습니다. 커서를 올려야 활성화되는 메뉴는 실수로 열리거나 사라지는 경우가 있어 모든 사용자가 불편을 느낄 거예요.

14. 다단계 계단식 메뉴를 피하고, 대신 메가 메뉴나 랜딩 페이지를 활용하세요

단순한 드롭다운 메뉴는 1단 내비게이션에서는 잘 작동하지만 2단부터는 불편해집니다. 2단 이상의 내비게이션에선 드롭다운을 권장하지 않는데, 잘못된 서브 메뉴를 선택하거나 메뉴가 완전히 닫힐 리스크가 높아지기 때문이에요.

서브 메뉴가 여러 단계로 나뉘어 있다면 2~3단의 메뉴까지 보여줄 수 있는 큰 메가 메뉴를 사용하거나, 하위 메뉴를 선택할 수 있는 중간 경유 페이지(루팅 페이지)로 사용자를 보내세요.

❌ R Studio는 드롭다운 메뉴에서 계단식 구조를 사용하고 있습니다. 이런 메뉴는 물리적으로 조작하기 어렵고, 사용자가 메뉴에서 이탈해 메뉴가 완전히 닫히거나 잘못된 항목을 선택하는 경우가 많이 발생해요.

긴 페이지의 아래쪽에 내려간 사용자는 상단 메뉴로 돌아가기 위해 지루한 스크롤을 반복해야 할 수도 있습니다. 스크롤 후에도 창 상단에 계속 보이는 고정식 메뉴는 이 문제를 해결할 수 있으며, 특히 작은 화면에서 유용해요.

16. 자주 사용하는 명령에 쉽게 접근할 수 있도록 최적화하세요

드롭다운 메뉴의 경우, 가장 자주 사용하는 항목을 위쪽에 배치하세요. 사용자의 마우스나 손가락의 이동 거리를 줄일 수 있습니다.

❌ Adobe의 CXM 웹사이트에는 우리가 아는 내비게이션이 전혀 없고, 대신 사용자를 페이지 아래 임의의 지점으로 이동시키는 캐러셀이 있습니다. 어디로 이어지는지 모르는 캐러셀을 사용자가 클릭할 이유는 거의 없어요.

물론 새로운 유형의 메뉴가 사용자 경험을 개선하는 경우도 있습니다. 햄버거 메뉴처럼요. 아니면 서비스에 적용된 신기술이 기존 기술과 너무 달라서, 저희가 제시한 체크리스트를 적용하기 어려운 경우도 있어요. 그러나 이런 경우는 극히 드물고, 대부분의 인터페이스가 이 체크리스트를 준수해 사용성을 높일 수 있을 거예요.