들어가며
햄버거 버튼과 메뉴 아이콘을 사용하면서 전반적인 메뉴 UI에 대한 정리도 해보면 좋겠다는 생각이 들었다. 단순히 메뉴/메뉴창이라고 불리는 Navigation Drawer는 앱과 웹이라는 플랫폼을 가리지 않고 널리 쓰이고 있는 UI인데, 오늘 아티클을 통해 개념과 어떻게 구성되어 있는지 정리해 보고자 한다.
목차
🧭 Navigation Drawer는 어떤 상황에서 선택해야 할까?
🧭 Navigation Drawer 사용 시 체크해야할 점
🧭 Navigation Drawer?
Navigation Drawer은 소위 '메뉴창'이라고 불리는 UI로, 앱이나 웹 사이트에서 주요 기능이나 정보를 리스트 형식으로 보여주는 형태이다. 해당 UI의 목적은 사용자들이 앱이나 웹 사이트의 다양한 목적지에 쉽게 접근할 수 있도록 하는 것이다. Navigation Drawer는 주로 왼쪽에 배치하며, 아이콘과 텍스트(Lable)를 함께 사용하여 사용자가 아이콘을 클릭했을 때 도달하는 목적지를 표시하여 쉽게 인지할 수 있게 디자인하는 것이 중요하다.
🧭 Navigation Drawer은 어떤 상황에서 선택해야 할까?
이전 아티클 주제인 햄버거 아이콘에 대해 포스팅하면서 햄버거 아이콘에 대한 사용성 이슈에 대해 소개했습니다. 햄버거 아이콘의 사용성 이슈라고는 했지만 엄밀히 말하면 Navigation Drawer의 사용성 이슈라고 하는게 더 정확한 의미이겠다. (🔗 햄버거 버튼과 친구들로 알아보는 다양한 메뉴 아이콘)
사용성에 관한 논쟁거리가 있더라도 Navigation Drawer는 어떤 강점이 있어서 인터넷 환경에서 메이저가 되었는지 살펴보고자 한다.
첫번째는 5개 이상의 주요 기능(최상위 레벨의 목적지)가 있을 경우 사용하기 적절하다. 보통 App에서는 프로덕트의 메인 기능이나 사용자가 자주 사용할 것 같은 기능을 앱 하단에 바텀 네비게이션 (탭바)로 배치한다. 하지만 프로덕트가 5개 이상일 때, 모든 기능을 하단에 배치하기가 불가능하다. 따라서 Navigation Drawer을 통해 중요하지 않은 기능을 숨기고, 사용자들이 주요 기능에 더 집중할 수 있도록 유도한다.
두번째는 2개 이상의 계층 구조를 가지고 있을 때이다. 기능 간의 계층구조가 있을 때 Navigation Drawer는 이를 명확히 표현할 수 있는 좋은 방법이다. Navigation Drawer를 통해 사용자는 기능 간의 관계를 쉽게 이해하고, 효율적으로 탐색할 수 있다. 이커머스에서 상품 카테고리를 Navigation Drawer로 처리하는 것이 좋은 예시라고 할 수 있다.
마지막으로는 독립적인 기능/정보 간의 빠른 탐색을 위해서이다. 정보를 리스트로 제공하여 사용자들이 빠르게 원하는 기능이나 정보를 쉽게 스키밍 할 수 있다.
🧭 Navigation Drawer 인터렉션
- 아이콘이 사이드 시트(Side Sheet)에 가리지 않고 계속 노출된다면 애니메이션 처리하는 것이 좋다. 햄버거 버튼을 클릭했다면 X버튼으로 변경시키고, 우측 화살표로 처리했을 경우, 반대 방향으로 변하게 처리한다.
- 좌측 사이드 시트가 노출되므로 왼쪽에서 오른쪽 방향으로 사이트 시트가 노출되도록 처리한다. 사이드 시트가 우측에서 노출될 경우는 반대로 적용한다.
- 사이드 시트가 아닌 스크림(Scrim) 영역, 혹은 백그라운드를 클릭했을 경우 사이드 시트를 접는다. 이 때, 애니메이션은 사이드 시트가 열릴 때와는 반대로 처리한다.
이러한 인터랙션 설계는 사용자들이 Navigation Drawer를 쉽게 이용하고 이해하게 도와주고, 부드러운 애니메이션과 시각적인 피드백은 사용자 경험을 향상시킨다.
🧭 Navigation Drawer 사용 시 체크해야할 점
✔️ 기능이나 정보를 잘 알아볼 수 있는지
Navigation Drawer를 사용할 때 가장 중요한 점은 사용자들이 기능과 정보를 잘 파악할 수 있도록 설계하는 것이다. 각 항목에 명확하고 직관적인 아이콘과 텍스트를 사용하여 사용자들이 각 기능을 쉽게 인식하고 접근해야 한다. 사용자들이 Navigation Drawer를 열었을 때, 어떤 기능들이 제공되고 어떤 정보들이 노출되는지 명확하게 확인할 수 있어야 한다.
✔️ 노출되는 정보가 잘 구조화되어 있고 정리가 되었는지
Navigation Drawer에 노출되는 정보를 간결하고 구조화된 형태로 정리하여 사용자들이 쉽게 원하는 정보를 찾을 수 있어야 한다. 예를 들어 기능이나 정보를 카테고리나 그룹화된 형태로 제공하면 사용자들이 빠르게 원하는 정보를 탐색하고 접근할 수 있다.
✔️ 상황에 맞게 Navigation Drawer를 보이게 하고, 숨길 수 있는지
Navigation Drawer는 항상 노출되는 것이 아닌 필요한 상황에 맞게 보이거나 숨길 수 있어야 한다. 사용자들이 Navigation Drawer를 원할 경우에만 열 수 있도록 하거나, Navigation Rail과 같이 간략한 버전으로 보여줄 수 있는 기능을 제공하여 사용자들이 각자의 편의에 맞게 사용할 수 있게 해야 한다.
'👾 UI・UX 용어 아카이빙' 카테고리의 다른 글
| 브레드 크럼 | Bread Crumbs (0) | 2023.08.02 |
|---|---|
| FNB(=Footer)에 들어가야 할 정보 (0) | 2023.08.01 |
| 웹사이트 Navigation Bar의 종류 (GNB, SNB, LNB, FNB) (0) | 2023.07.31 |
| 햄버거 버튼 외 다양한 메뉴 아이콘 (0) | 2023.07.25 |
