메뉴를 숨겨놓으면 안 되는 이유
무분별한 햄버거 메뉴의 사용
본 글은 닐슨 노먼 그룹의 <Hamburger Menus and Hidden Navigation Hurt UX Metrics>를 바탕으로 구성했습니다.
요약
웹사이트의 메뉴를 숨기면 검색 가능성이 거의 절반으로 줄어듭니다. 또한 작업 시간이 길어지고 잘 인지하지 못할 수 있습니다.
숨겨진 메뉴(예: 햄버거 아이콘) 및 보이는 메뉴(예: 페이지 상단의 링크)에 대한 정량적 사용성 테스트 결과:
메뉴를 숨기면 표시되거나 부분적으로 표시되는 탐색보다 검색 가능성이 낮습니다. 탐색에 대한 힌트를 제공하지 않으면 사용자가 원하는 정보를 찾을 가능성이 줄어듭니다.
숨겨진 탐색은 휴대폰과 데스크톱 사용자 인터페이스 모두에서 보이거나 부분적으로 보이는 탐색보다 더 나쁜 사용자 경험을 제공합니다.
데스크톱에서 탐색을 숨기면 모바일보다 탐색 검색 가능성이 더 저하됩니다.
탐색을 숨기면 페이지 내 링크를 통해 직접 액세스 할 수 없는 콘텐츠에 대부분 영향을 미칩니다.
반응형 웹은 유행이라고 할 정도로 많아졌습니다. 그만큼 문제도 발생했는데 좋은 모바일 디자인을 데스크톱에 강제로 적용하는 것입니다. 모바일 디자인의 우선순위가 높다고 해서 모바일 디자인과 데스크톱 디자인을 동일하게 디자인하면 안 됩니다.
햄버거 메뉴는 모바일 디자인에서 영감을 받은 많은 패턴 중 하나입니다. 콘텐츠의 우선순위를 정할 때 디자이너는 쉽게 해결하기 위해 햄버거 메뉴를 사용하는 경우가 많습니다. 디자이너들은 편리함에 질 때가 많죠.
닐슨 노먼 그룹은 스마트폰과 데스크톱 모두에서 6개의 다른 사이트에서 작업을 완료한 179명의 참가자를 대상으로 연구를 실행했습니다.
예를 들어 참가자들에게 이런 질문을 던집니다.
“http://www.bbc.com으로 이동하여 관심 있는 자연 또는 야생 동물에 대한 정보가 있는지 확인하십시오. 흥미로운 특정 기사를 찾으면 어떤 기사인지 말씀해 주십시오."
Researcher들은 다음과 같은 5가지 지표를 설정하고 데이터를 수집했습니다.
탐색 사용: 참가자가 탐색 링크를 얼마나 사용했는지
탐색 시간: 실험 시작 시간부터 해당 작업에서 탐색을 처음 사용할 때까지의 시간
과제 난이도: 참가자의 과제 난이도 평가
콘텐츠 검색 가능성: 참가자가 사이트에서 콘텐츠를 검색할 수 있었는지 여부
작업 시간: 사람들이 작업을 완료하는 데 걸린 시간
검색 결과를 확인해봅시다.
1. 모바일과 데스크톱 모두에서 사람들은 탐색 옵션의 전부 또는 일부가 표시될 때 원하는 정보를 더 잘 찾았습니다.
2. 메뉴를 숨기거나 부분적으로 보여주는 디자인은 데스크톱보다 모바일에서 사용할 가능성이 훨씬 더 높았습니다.
메뉴를 숨기는 디자인은 데스크톱보다 모바일에서 더 일반적이기 때문에 사람들이 더 익숙하고 사용을 생각할 가능성이 더 높습니다.
데스크톱과 모바일 사용자 경험의 차이점
원하는 정보를 찾지 못하면 검색 경험을 활용해야 하는데 사람들은 모바일에서 검색하는 경험을 싫어하는 경향이 있습니다. 검색은 데스크톱에서 더 두드러집니다.(대부분의 경우)
데스크톱 사용자는 모바일 사용자보다 빠릅니다(모든 유형의 탐색 결합 시)
모바일 사용자는 평균적으로 작업을 완료하는 데 12% 더 많은 시간이 걸렸습니다.
메뉴 수가 너무 많으면 어떻게 해야 할까?
바탕 화면
탐색 옵션을 표시할 수 있는 화면 공간이 많으면 다음을 권장합니다.
데스크톱 사용자 인터페이스에서 숨겨진 탐색(예: 햄버거 아이콘)을 사용하지 마십시오.
대신 일반적으로 페이지 상단 또는 왼쪽 아래에 최상위 메뉴를 표시합니다.
코드잇 수업 탐색 페이지모바일
일반적인 권장 사항은 다음과 같습니다.
사이트에 4개 이하의 최상위 메뉴가 있는 경우 표시되는 링크로 표시합니다.
사이트에 4개 이상의 최상위 메뉴가 있는 경우 합리적인 해결책은 이들 중 일부를 숨기는 것입니다. 우리는 메뉴를 숨기면 사용성이 떨어진다는 것을 실험을 통해 증명했지만 햄버거 메뉴처럼 확장 가능한 탐색 메뉴의 유용성이 웬만한 디자인보다 훨씬 좋기 때문에 절충하는 것이 좋습니다.
작성자: 주협
익숙한 디자인만 하고 있지는 않았는지 돌아보는 계기가 되었다. 닐슨 노먼 그룹에서 진행한 실험 데이터를 통해 내 디자인의 설득 지표로 사용할 수 있을 것 같다.
<관련 글>
