By Nick Babich
원본 링크: http://babich.biz/perfect-menu-for-mobile-apps/
(원본을 번역하면서 일부 편집하였고, 개인적인 의견을 포함하였음)
모바일 환경에서 앱이든 웹이든, 사용자는 메뉴를 통해 콘텐츠를 찾고 기능을 사용한다. 이처럼 앱과 사이트에서 중요한 역할을 담당하는 메뉴가 의외로 복잡하거나, 작동하기 어렵거나, 단순히 찾기 힘든 경우를 우리는 자주 경험하곤 한다. 아래에 앱과 모바일 웹사이트를 위한 최상의 메뉴 가이드를 정리해 본다.
1. 무조건 보여줘라!
한때 국내, 해외를 막론하고 햄버거 메뉴에 대한 찬반 논란이 활발했다(현재는 햄버거 메뉴에 대한 반대론이 대세로 자리 잡은 듯). 관련 글
사실 햄버거 메뉴 자체의 문제라기 보다는 보여주지 않는 모든 것들에 대한 이슈이며, 여기에는 기능, 인터랙션, 제스쳐를 모두 포함한다. 더 나아가 단순히 UX의 문제가 아니라 불필요한 혁신이나 너무 많은 기능을 욕심내지 않도록 최초 설계 단계에서부터 종합적인 고려가 필요하다.
이 부분에 대한 내용은 추후 다시 정리하기로 하자.
이 작은 세줄짜리 버튼은 아주 사악한 존재다. 아이콘 자체에 대한 것이 아니라 아이콘 뒤에 네비게이션을 숨기는 것이 문제다.
보이지 않으면 멀어진다(Out of Sight, Out of Mind)
사랑에 대한 기본 명제.
지금까지 숨겨진 네비게이션은 작은 스크린 환경에서 선택할 수 있는 꽤나 명확한 방법이었다-스크린의 제한을 걱정할 필요 없이, 모든 네비게이션 항목을 스크롤 가능한 숨겨진 서랍에 위치시키면 됐으니까.
그러나 숨겨진 메뉴 항목을 보기 위해 탭을 한 번 해야한다는 이유만으로도, 햄버거 버튼은 너무나 비효율적이다.
서랍메뉴 예시
보이면 쓰게 된다(In Sight, In Mind)
많은 인터랙션 이론, A/B 테스트와 유수의 앱들의 사례에서, 시각적으로 노출된 메뉴 항목들이 사용자의 관심과 만족도를 높이는 것을 알 수 있다. 관련 글
이런 이유로 최근의 많은 앱들이 햄버거 메뉴로부터 벗어나 적절한 네비게이션 항목들을 항상 보이는 형태로 구성하고 있다. 여기서 중요한 점은 '보여준다'는 개념보다는 '적절한 네비게이션 항목'에 더 집중해야 한다는 것이다.
탭 바: 서랍에 숨기는 대시 네비게이션 항목들을 밖에 노출시킨다.
유튜브는 메인 페이지에 핵심 기능들을 탭으로 구성하여 각 기능 사이를 빠르게 전환할 수 있도록 만들었다.
변경된 안드로이드용 유튜브 앱
사용하지 않을 때 탭 바를 숨기는 현명한 방법이 있다. 사용자가 콘텐츠를 더 보기 위해 스크롤할 때 탭 바를 숨겼다가, 다시 상단으로 이동하기 위해 아래로 화면을 내리면 메뉴를 다시 나타나게 한다. 아래 이미지를 보면 이해하기 쉽다(현재 많은 앱들이 사용하고 있는 방법).
탭 바 숨기기
마지막으로 중요한 것 하나. 많은 디자이너들이 정렬 옵션들을 드롭다운 메뉴에 집어 넣는 실수를 한다. 이것은 위에 언급한 것과 동일한 문제를 만든다-사용자는 선택된 옵션만 본다는 사실.
나쁜 예(드롭다운 메뉴)와 좋은 예(토글 버튼). 이미지 소스: uxmovement
iOS용 토글 버튼 예시:
요약: 많은 항목들을 쑤셔 넣기 쉽다는 이유로 아직도 많은 앱들이 햄버거 메뉴를 사용하고 있지만 바람직하지 않다. 네비게이션이 복잡하고 숨겨진 메뉴는 결코 모바일에 친화적인 방법이 아니기 때문이다.
2. 현재 위치와 상태를 알려줘라!
현재 위치를 제대로 알려주지 않는 것은 사이트나 앱에 있어 가장 공통적인 실수일 것이다. "대체 내가 어디에 있는거지?"라는 원초적 질문에 대한 답변은 제대로 된 네비게이션을 위해 필수적인 요소 중의 하나다.
사용자는 이 치명적인 질문에 대한 답을 시각적 신호에서 찾는데, 때로는 그들이 보는 것이 실제로는 기대했던 결과가 아닌 경우가 있다.
아이콘
검색, 이메일, 인쇄와 같은 기능을 나타내는 보편적인 아이콘들을 사용자들은 잘 알고 있다. 불행하게도 '보편적인' 아이콘들은 사실 매우 드물다. 따라서 앱 디자이너들은 특정 기능을 표현하기 위해 때로는 인식하기 어려운 아이콘들을 만들어 내곤 한다.
Bloom.fm의 구버전 안드로이드 앱. 현재 위치가 뭘 의미하는지 정말 알기 어렵다.
색상
현재 상태는 대비되는 색상과 적절한 레이블을 사용하여 탭 바에 명확히 표현되어야 한다.
버튼 색상에 대한 좋은 예와 나쁜 예
좋은 색상 사용 예시
선택된 탭 바의 Update 항목
요약: 적절히 선택한 아이콘과 색상은 사용자들이 현재 위치를 알 수 있게 도움을 준다. 아이콘을 사용해야 한다면 반드시 사용성 테스트를 거쳐라.
3. 사용자 관점으로 구성하라!
메뉴 레이블은 항상 이해할 수 있어야 한다. 사용자들이 무엇을 찾고 있는지 파악하고, 대상 사용자들에게 익숙하고 적절한 레이블을 사용하라. 기능과 내용을 명확히 표현하는 용어를 사용하라.
사용자들은 특정한 상황에서 빠르게 사용할 수 있는 앱을 좋아한다. 그러므로 메뉴의 의미를 파악하는데 걸리는 시간을 최소화할 수 있도록 해야 한다.
iOS용 트위터 메뉴
복잡한 기능은 항상 적절한 텍스트 레이블과 같이 표기되어야 한다.
요약: 메뉴 요소는 파악하기 쉬워야 한다. 사용자들은 각 메뉴 요소를 탭했을 때 정확히 어떤 일이 일어나는 지 예상할 수 있어야 한다.
4. 사용하기 쉽게 만들어라!
너무 작거나 가까이 붙어 있는 메뉴 항목들은 모바일에서 사용성을 떨어뜨리는 주요한 요소다. 따라서 메뉴 요소들은 탭하거나 클릭하기 충분할 만큼 크게 만들어야 한다.
MIT Touch Lab의 한 연구에 따르면, 성인 검지 손가락의 평균 폭은 1.6~2cm로서, 픽셀 환산 시 45~57픽셀에 해당한다고 한다(상세한 픽셀 또는 DP 수치는 각 운영체제 가이드 참조).
평균적인 검지 손가락의 폭. 이미지 소스: uxmovement.
45~57 픽셀의 터치 영역은 검지 손가락을 충분히 포함하면서도, 탭하였을 때 정확하게 터치되었음을 알리는 시각적인 피드백을 제공할 수 있는 크기이다.
요약: 메뉴는 손가락에 친화적으로 디자인되어야 한다. 터치 영역을 평균 손가락 크기에 맞게 설계하는 것은 많은 사용자들에게 보다 나은 사용성을 제공한다.
5. 결론
사용자들이 메뉴들을 사용하게 만드는 것은 거의 모든 사이트와 애플리케이션에서 높은 우선 순위를 가지는 목표다.따라서 사용자들의 멘탈 모델에 자연스럽게 들어맞는 인터랙션 시스템을 설계하는 것은 이 목표를 달성하기 위한 기본적이며 궁극적인 조건이다. 명확한 시각적 커뮤니케이션을 통해 고객이 가진 문제를 해결하는 인터랙션 시스템을 목표로 하자.
당신의 제품을 사용하게 만드는 가장 쉬운 방법은 사용하기 쉽게 만드는 것이다. Thank you!