31.메뉴 디자인 체크리스트 17 UX 가이드라인
요약: 사람들은 콘텐츠를 찾고 기능을 사용하기 위해 메뉴에 의존합니다. 이 체크리스트를 활용해, 메뉴가 제 역할을 하고 있는지 확인하세요.
우리는 종종 메뉴가 혼란스럽거나 조작하기 어렵거나 찾기 힘들어서 사용자가 고전하는 모습을 목격합니다. 다음의 사용성 지침을 따르면 이러한 일반적인 실수를 피할 수 있습니다.
내비게이션을 눈에 잘 보이게 만들기
1. 큰 화면에서는 내비게이션을 표시하기
이는 햄버거 메뉴(또는 모든 내비게이션 항목을 하나의 메뉴 아래에 숨기는 방식)가 데스크톱 웹사이트나 앱에는 적합하지 않다는 의미입니다. 화면에서 보이지 않으면 머릿속에서도 잊히기 마련입니다. 작은 화면에서는 제한된 공간 안에서 콘텐츠와 내비게이션을 균형 있게 배치해야 하기 때문에 햄버거 메뉴가 ‘필요한 불가피한 선택’일 수 있습니다. 하지만 넉넉한 공간이 있을 때는 메뉴를 숨겨서는 안 됩니다.
내비게이션은 단순히 길찾기 역할뿐만 아니라, 제공하는 리소스나 콘텐츠의 범위를 사용자에게 이해시키는 역할도 합니다. 내비게이션이 숨겨져 있으면, 사용자는 ‘당신이 누구이며 무엇을 하는지’ 알려주는 그 중요한 맥락 정보를 놓치게 됩니다.
2.메뉴를 예상가능한 곳에 위치 시켜라
사용자는 메뉴를 특정한 화면의 영역에서 찾으려고 기대한다. 이러한 기대가 충족되도록 디자인해라 .
메뉴 타입 / 예상 위치
1.기본 네비게이션 메뉴 / 웹사이트 = 헤더, 앱 = 스크린의 왼쪽 사이드
2.기능 또는 차순위 네비게이션 / 기본 내비게이션과 검색 영역 위, 화면 상단 근처
3.로컬 네비게이션 / 데스크탑 웹사이트에서 왼쪽사이드 근방에
4.푸터 메뉴 / 스크린 바닥에
푸터에는 투자자 정보, 채용 목록 등 주요 페르소나가 아닌 사용자를 위한 추가 카테고리를 포함해야 한다.
3. 배경과 대비되는 링크 텍스트 색상을 사용한다
메뉴 링크는 쉽게 찾을 수 있도록 배경과 명확히 구분되어야 한다.
디자이너들이 대비 지침을 무시하는 경우가 놀라울 만큼 많다. 디지털 공간에서의 탐색은 원래도 충분히 혼란스러운데, 메뉴를 읽기 위해 화면을 찡그리며 봐야 한다면 더욱 어려워진다.
4. 큰 화면에서는 메뉴가 화면을 덮지 않도록 한다
큰 화면에서는 메가메뉴(또는 서브메뉴)가 열릴 때 전체 화면을 가리지 않도록 해야 한다. 메뉴의 가시성과 가독성도 중요하지만, 열린 메뉴가 화면 전체를 장악해서는 안 된다. 열린 메뉴는 고유한 URL을 가진 별도의 페이지가 아니라, 콘텐츠 위에 잠시 떠 있는 동적이고 일시적인 UI 요소이기 때문이다.
일부 사용자는 메뉴가 열렸을 뿐인데 새 페이지로 이동했다고 착각하며 일시적으로 방향 감각을 잃을 수 있다. 또 어떤 사용자는 사이트 구조에서 현재 자신의 위치를 파악하기 더 어려워질 수 있다.
(이 지침은 모바일에서는 어쩔 수 없이 지켜지기 어렵다는 점을 유의해야 한다.)
현재 위치를 전달하기
5. 메뉴에서 사용자의 현재 위치를 표시하기
“나는 지금 어디에 있지?”는 사용자가 성공적으로 탐색하기 위해 반드시 해결해야 하는 기본적인 질문이다. 사용자는 이 중요한 질문에 답하기 위해 메뉴(그리고 브레드크럼 같은 다른 내비게이션 요소)에서 제공되는 시각적 단서를 활용한다.
내비게이션 메뉴가 수행해야 할 가장 중요한 역할 중 하나는 사용자가 현재 위치를 파악하도록 돕는 것이다. 방문자는 종종 홈페이지가 아닌 다른 페이지에서 사이트에 진입하기 때문이다.
현재 위치를 표시하지 않는 것은 우리가 웹사이트 메뉴에서 가장 자주 목격하는 가장 흔한 오류라고 할 수 있다.
6. 밀접하게 관련된 콘텐츠에는 로컬 내비게이션 메뉴를 제공하기
사용자가 관련 제품을 비교하거나 한 섹션 내에서 여러 작업을 수행해야 하는 경우가 많다면, 계층 구조를 오르락내리락하는 ‘포고스틱’ 방식으로 이동하도록 강요하지 말고 해당 가까운 페이지들을 로컬 내비게이션 메뉴를 통해 바로 보이게 해야 한다.
사용 가능한 옵션을 전달하기
7. 링크 라벨에는 명확하고 구체적이며 익숙한 단어를 사용한다
사용자가 무엇을 찾는지 파악하고, 그들에게 익숙하고 관련성 있는 카테고리 라벨을 사용해야 한다. 메뉴는 조어(만든 단어), 내부 용어, 추상적이거나 지나치게 상위 개념의 표현 등으로 ‘귀엽게 꾸미는’ 곳이 아니다. 콘텐츠, 기능, 리소스를 정확하게 설명하는 용어를 사용하는 것이 중요하다.
8. 링크 라벨은 스캔하기 쉽게 만든다
세로 메뉴는 왼쪽 정렬로 배치하고, 핵심 단어를 앞부분에 배치함으로써 사용자가 메뉴를 읽는 데 드는 시간을 줄일 수 있다.
9. 대형 웹사이트에서는 서브메뉴에 여러 단계의 내비게이션 계층을 보여준다
사용자 여정이 여러 단계의 구조를 내려가며 탐색하는 과정을 포함한다면, 메가메뉴가 한두 단계를 건너뛰도록 도와 시간을 절약할 수 있다. 모바일에서는 순차적 내비게이션을 통해 깊은 구조도 자연스럽게 탐색할 수 있다.
10. 긴 메뉴에는 시각적 단서를 사용한다
긴 메뉴에서는 시각적 요소를 활용해 **정보 냄새(information scent)**를 강화할 수 있다(선택적이고 추가적인 신호로서). 이미지, 아이콘, 제한적인 색상 사용은 익숙하지 않은 옵션의 이해(또는 구분)에 도움이 되고, 스캔하기도 쉬워진다.
하지만 이러한 요소들은 명확한 텍스트 라벨을 대체하는 것이 아니라 보조하는 역할이어야 한다. 접근성과 사용성 모두를 위해 명확한 텍스트 제공이 필수적이기 때문이다.
조작하기 쉽게 만들기
11. 메뉴 링크는 쉽게 탭하거나 클릭할 수 있을 만큼 충분히 크게 만든다
링크가 너무 작거나 서로 너무 가까이 붙어 있으면 모바일 사용자에게 큰 불편을 주며, 큰 화면 디자인에서도 불필요하게 사용하기 어려워진다.
12. 서브메뉴는 캐럿(caret) 또는 화살표 아이콘으로 명확히 표시한다
이 표시기는 직접 새 페이지로 이동하는 주요 내비게이션 항목과 서브메뉴로 확장되는 항목을 구분하는 데 도움을 준다. 만약 카테고리 이름이 클릭(또는 탭) 가능한 것처럼 보이지 않으면, 사용자는 서브메뉴가 있다는 사실조차 알아차리지 못할 수 있다.
13. 서브메뉴는 클릭으로 활성화되도록 한다(호버로 활성화하지 말 것)
호버 기능은 모든 환경에서 지원되지 않는다. 터치스크린 사용자나 주로 키보드로 상호작용하는 사용자는 호버로 숨겨진 콘텐츠에 접근할 수 없다. 메뉴가 호버로 열리도록 설정되어 있다면, 이러한 사용자에게 접근할 수 있는 대체 방법을 제공해야 한다.
장치와 입력 방식에 상관없이 일관되고 신뢰할 수 있는 상호작용 패턴을 제공하는 것이 더 낫다. 또한 호버 기반 메뉴는 실수로 활성화되거나 닫히는 경우가 있어 모든 사용자에게 불편을 초래한다.
14. 다단계 캐스케이딩 메뉴는 피하고, 대신 메가메뉴나 랜딩 페이지를 사용한다
한 단계의 드롭다운 메뉴는 잘 작동하지만, 두 단계 이상이 되면 사용자가 불편함을 느낀다. 두 단계 이상 메뉴는 잘못된 하위 카테고리를 선택하거나 메뉴가 완전히 닫히는 위험이 커지므로 매우 권장되지 않는다.
서브메뉴가 여러 단계로 구성되어 있다면, 2~3단계 정보를 적절히 지원할 수 있는 메가메뉴를 사용하거나, 추가 옵션이 있는 라우팅 페이지로 사용자를 안내하는 것이 좋다.
15. 긴 페이지에는 스티키(또는 부분 스티키) 메뉴를 고려한다
긴 페이지 하단에 도달한 사용자는 상단 메뉴로 돌아가기 위해 많은 스크롤을 해야 할 수 있다. 스크롤 후에도 뷰포트 상단에 메뉴가 계속 보이도록 하면 이 문제를 해결할 수 있으며, 특히 작은 화면에서 유용하다.
16. 자주 사용하는 명령에 쉽게 접근할 수 있도록 최적화한다
드롭다운 메뉴의 경우, 가장 자주 사용하는 항목을 드롭다운을 여는 링크 바로 근처에 배치해야 한다. 이렇게 하면 사용자의 마우스나 손가락 이동 거리가 줄어든다. (Fitts의 법칙에 따르면, 목표까지 이동하는 시간은 거리와 비례한다.)
17. 내비게이션에 혁신적이거나 기발한 패턴을 사용하지 않는다
사용자에게 멋진 효과로 감동을 주려는 시도는 메뉴를 만들 때 우선순위가 되어서는 안 된다. 클라이언트나 이해관계자가 새로운 메뉴 디자인에 잠시 감탄할 수 있지만, 사용자는 익숙한 메뉴를 통해 매력적으로 제공되는 훌륭한 콘텐츠에 훨씬 더 큰 만족을 느낀다.
물론, 때로는 새로운 유형의 메뉴가 사용자 경험을 개선하기도 한다. (햄버거 메뉴가 이러한 사례의 좋은 예다.) 또는 새로운 기술이 기존과 너무 달라서 일부 지침이 적용되지 않을 수도 있다. 하지만 이러한 경우는 드물며, 대부분의 인터페이스는 이 원칙들을 따르면 더 사용하기 쉬워진다.
정확한 내용은 아래 원문 링크를 확인해주세요.
https://www.nngroup.com/articles/menu-design/
