버튼 내비게이션 디자인 UX 원칙
닉 바비치의 [버튼 내비게이션 디자인 UX 원칙] 소개하고자 합니다.
디자인은 단순히 시각적으로 아름답게 보이는 것에 그치지 않습니다. 모든 디자이너가 반드시 인식해야 할 점은, 디자인이 사용자가 제품에 얼마나 몰입하고 상호작용 하는지를 결정한다는 것입니다. 웹사이트나 애플리케이션에서 디자인은 대화와도 같습니다. 내비게이션은 이러한 대화의 핵심 요소로, 사용자가 원하는 정보를 쉽게 찾지 못한다면 그 사이트나 앱의 품질이 아무리 뛰어나더라도 의미가 없게 됩니다.
1. 시작해봅시다
내비게이션 UI 패턴은 우수한 사용성을 향한 필수적인 요소입니다. 최신 인터랙션 내비게이션 디자인을 살펴보면, 성공적인 디자인은 기본 원칙을 완벽하게 준수하고 있음을 알 수 있습니다. 고정관념에서 벗어난 창의적인 접근이 종종 좋은 결과를 가져오지만, 때로는 반드시 지켜야 할 규칙이 존재합니다. 다음은 훌륭한 모바일 내비게이션을 구현하기 위한 네 가지 중요한 원칙입니다.
1) 간단하게 만든다
내비게이션 시스템이 간단해야 하는 이유는 사용자가 쉽게 이해하고 사용할 수 있어야 하기 때문입니다. 좋은 내비게이션은 마치 ‘보이지 않는 손’처럼 작용하여, 사용자가 원하는 정보를 자연스럽게 찾도록 도와줍니다. 이를 위해서는 모바일 사용자가 자주 수행하는 Task를 기반으로 내비게이션과 콘텐츠의 우선순위를 설정해야 합니다. 이렇게 하면 사용자는 직관적으로 필요한 작업을 수행할 수 있으며, 불필요한 혼란을 줄일 수 있습니다. 결과적으로, 간단하고 명확한 내비게이션은 사용자 경험을 향상시키고, 애플리케이션의 효율성을 높이는 것 입니다.
2) 잘 보이게 만든다
Jakob Nielsen의 말처럼, 무언가를 인식하는 것이 기억하는 것보다 쉽다는 점은 디자인에서 중요한 원칙입니다. 사용자가 액션과 옵션을 쉽게 인식할 수 있도록 시각적으로 명확하게 제시하면, 기억해야 할 정보량이 줄어들어 사용자 경험이 개선됩니다. 내비게이션은 사용자가 필요할 때 언제든지 접근할 수 있어야 하며, 예상되는 상황뿐만 아니라 다양한 상황에서도 유용해야 합니다. 이렇게 함으로써 사용자는 원하는 정보를 쉽게 찾고, 효율적으로 작업을 수행할 수 있습니다. 결과적으로, 직관적인 내비게이션은 사용자 만족도를 높이고, 애플리케이션의 전체적인 사용성을 향상시킵니다
3) 명확하게 만든다
내비게이션 기능은 사용자에게 추가적인 설명 없이도 직관적으로 이해되어야 합니다. 이는 사용자가 외부의 도움 없이도 A지점에서 B지점으로 가는 방법을 쉽게 파악할 수 있음을 의미합니다. 예를 들어, 쇼핑카트 아이콘은 결제나 아이템 조회를 위한 명확한 시각적 식별자로 작용합니다. 사용자는 쇼핑카트 버튼을 클릭함으로써 필요한 액션을 취할 수 있으며, 이 과정에서 복잡한 탐색을 고민할 필요가 없습니다. 이렇게 명확하고 간결한 내비게이션은 사용자 경험을 향상시키고, 효율적인 작업 수행을 돕습니다. 결과적으로, 직관적인 내비게이션은 사용자가 원하는 행동을 쉽게 취할 수 있도록 인도하는 중요한 역할을 합니다.
4) 일관성 있게 만든다
내비게이션 시스템은 어디서나 일관되게 유지되어야 합니다. 사용자가 페이지마다 내비게이션의 위치나 형태가 달라지면 혼란을 느낄 수 있기 때문입니다. 일관된 액션은 사용자에게 예측 가능한 경험을 제공하여, "최소 놀람의 법칙"을 따르게 됩니다. 이는 사용자가 예상한 대로 행동할 수 있도록 만들어, 콘텐츠에 몰입하고 원활하게 상호작용할 수 있게 돕습니다. 일관성 있는 내비게이션은 사용자의 신뢰를 구축하고, 사이트나 앱을 더욱 효과적으로 탐색할 수 있도록 해주어 궁극적으로 사용자 경험을 향상시킵니다.
2. 엄지손가락을 염두하고 디자인한다
1) 사용자 의존도
Steven Hoober 연구에 따르면, 49%의 사람들이 모바일 기기를 사용할 때 엄지손가락 하나에 의존하여 작업을 수행하고 있다고 밝혀냈습니다. 이는 사용자가 기기를 조작할 때 손의 움직임이 제한되어 있음을 나타냅니다.
2) 도달 가능한 영역
연구에서는 모바일 화면에서 엄지손가락이 닿는 부분을 색상으로 구분하여 표시하였습니다.
(1) 초록색 영역
사용자가 쉽게 도달할 수 있는 부분으로, 엄지손가락을 자연스럽게 움직여서 접근할 수 있는 영역입니다.
(2) 노란색 영역
약간 손가락을 뻗어야 접근할 수 있는 부분으로, 조금의 노력이 필요하지만 여전히 손쉽게 사용할 수 있는 영역입니다.
(3) 빨간색 영역
디바이스를 잡은 방향을 바꿔야 도달할 수 있는 부분으로, 이곳은 사용자가 불편함을 느끼거나 손이 쉽게 닿지 않는 곳입니다.
3) 모바일 앱의 접근성을 위한 디자인 고려사항
(1) 맥락의 다양성
사용자들이 앱을 사용하는 상황은 다양합니다. 어떤 사용자는 두 손을 사용하여 스마트폰을 잡고 있을 수 있지만, 모든 상황에서 항상 그렇게 할 수 있는 것은 아닙니다. 즉, 한 손만 사용할 수 있는 상황도 많다는 점을 고려해야 합니다.
(2) 한 손으로의 접근성
디자인할 때, 사용자들이 어느 손으로든 한 손만으로도 UI를 쉽게 이용할 수 있도록 해야 합니다. 이는 다양한 사용자들이 편리하게 앱을 사용할 수 있도록 돕는 중요한 요소입니다.
(3) UI 요소 배치
상위 레벨의 주요 액션(예: 메뉴, 설정)과 자주 사용하는 기능(예: 메시지 전송, 사진 촬영 등)은 화면 하단에 배치하는 것이 중요합니다. 하단에 배치하면 엄지손가락이 자연스럽게 닿을 수 있어 사용자들이 손쉽게 조작할 수 있습니다.
(4) 편리한 인터랙션
최종적으로, 디자인은 사용자들이 한쪽 손과 한쪽 엄지손가락으로도 편리하게 상호작용할 수 있도록 구성되어야 합니다.
4) 하단 내비게이션의 중요성과 사용자 경험 최적화
(1) 사용자의 접근성
향상 동일한 중요도의 목적지를 하단 내비게이션에 배치하면, 사용자가 원하는 기능이나 정보를 쉽게 찾고 접근할 수 있습니다. 이는 사용자 경험을 개선하고, 앱을 더 직관적으로 사용할 수 있게 합니다.
(2) 일관된 내비게이션
하단 내비게이션에 여러 중요 목적지를 배치하면 사용자가 앱 내에서 일관된 탐색 경험을 할 수 있습니다. 사용자는 특정 기능이나 정보에 접근하기 위해 복잡한 절차를 거치지 않고, 즉시 원하는 곳으로 이동할 수 있습니다.
(3) 중요 기능 강조
동일한 중요도를 가진 여러 목적지를 하단 내비게이션에 배치함으로써, 사용자에게 이 기능들이 모두 중요하다는 메시지를 전달할 수 있습니다. 이는 사용자가 각 기능을 놓치지 않도록 도와줍니다.
(4) 사용자 흐름 최적화
사용자가 자주 사용하는 기능이나 페이지를 쉽게 찾을 수 있도록 하여, 앱 사용의 흐름을 최적화합니다. 이로 인해 사용자는 더 빠르게 원하는 작업을 수행할 수 있게 됩니다.
(5) 편리한 조작
하단 내비게이션은 손이 쉽게 닿는 위치에 있기 때문에, 사용자들이 손쉽게 여러 기능에 접근할 수 있습니다. 이는 특히 한 손으로 앱을 사용할 때 큰 장점이 됩니다.
5) 적절한 터치 타깃 크기를 설정
(1) 사용자 편의성
터치 타깃의 크기를 충분히 크게 설정하면 사용자가 쉽게 클릭하거나 터치할 수 있습니다. 너무 작은 타깃은 사용자가 정확하게 터치하기 어렵게 만들어, 불편함을 느끼게 할 수 있습니다.
(2) 오작동 방지
가로 세로 7mm 이하의 작은 터치 타깃은 사용자가 의도하지 않은 곳을 터치할 가능성을 높입니다. 이는 사용자에게 혼란을 초래하고, 앱 사용 시 실수를 유발할 수 있습니다.
(3) 접근성 향상
다양한 사용자들이 앱을 사용할 때, 손의 크기나 힘, 정밀도는 다를 수 있습니다. 큰 터치 타깃은 모든 사용자에게 보다 접근하기 쉬운 환경을 제공하여, 더 많은 사람들이 편리하게 앱을 사용할 수 있도록 합니다.
(4) 터치 인식 정확성
마이크로소프트가 추천하는 9mm 이상의 터치 타깃은 손가락의 터치 인식을 더욱 정확하게 하여, 사용자가 원하는 기능을 쉽게 실행할 수 있도록 돕습니다.
(5) 사용자 만족도 향상
편리하고 정확한 터치 경험은 사용자 만족도를 높이며, 앱에 대한 긍정적인 인식을 형성하는 데 효고적입니다. 이는 사용자 유지율을 높이는 데도 도움이 됩니다.
3. 탭 바
탭 바는 앱의 핵심 기능을 직관적이고 빠르게 접근할 수 있게 해, 사용자 경험을 향상시키는 데 큰 역할을 한다.
(1) 탭 바의 역할
많은 앱들이 탭 바를 통해 사용자에게 가장 중요한 기능이나 페이지를 쉽게 접근할 수 있도록 제공합니다. 탭 바는 화면의 하단에 위치하며, 사용자가 자주 사용하는 기능을 한눈에 볼 수 있게 합니다.
(2) 빠른 탐색
페이스북의 예를 들면, 사용자는 핵심 기능(예: 홈, 친구, 알림, 메시지 등) 사이를 빠르게 전환할 수 있습니다. 이는 사용자가 원하는 기능으로 즉시 이동할 수 있게 해, 앱 사용의 효율성을 높입니다.
(3) 단순한 조작
한 번의 탭으로 원하는 기능에 접근할 수 있도록 설계되어 있어, 사용자는 복잡한 메뉴를 탐색할 필요 없이 직관적으로 앱을 사용할 수 있습니다.
(4) 사용자 친화성
탭 바는 사용자가 자주 사용하는 기능을 쉽게 찾을 수 있도록 도와줍니다. 이로 인해 사용자들은 앱을 더 편리하게 사용하게 되며, 긍정적인 인상을 형성할 수 있습니다.
4. 하단 내비게이션 디자인 시 고려해야 할 3가지
내비게이션은 유저가 가고 싶어 하는 곳으로 가게 해주는 운송 수단이라고 할 수 있습니다. 하단 내비게이션은 동일한 중요도를 가진 상위 레벨의 목적지를 보여주는 데 사용되어야 합니다. 이런 목적지는 앱에서 어디에 있든 직접적으로 접근할 필요가 있는 곳이어야 합니다. 잘 만든 하단 내비게이션 디자인은 다음 세 가지 룰을 따릅니다.
1) 가장 중요한 목적지만 보여준다
(1) 하단 내비게이션에서 5개 이상의 목적지를 보여주는 건 피한다.
- 터치 정확성 감소: 탭 타깃이 서로 너무 가까이 배치되면 사용자가 원하는 탭을 정확하게 터치하기 어려워집니다. 이는 오작동을 유발하고 사용자에게 불편함을 초래할 수 있습니다.
- 복잡성 증가: 내비게이션의 목적지가 많아질수록 앱의 전반적인 복잡성이 증가합니다. 사용자는 너무 많은 선택지 앞에서 혼란을 느낄 수 있으며, 원하는 기능을 찾는 데 시간이 더 걸릴 수 있습니다.
- 사용자 경험 저하: 복잡한 내비게이션은 사용자 경험을 저하시킬 수 있습니다. 사용자가 원하는 기능에 쉽게 접근하지 못하면, 앱에 대한 불만이 증가하고 사용자가 이탈할 가능성이 높아집니다.
- 명료성 유지: 적절한 목적지 수를 유지함으로써 내비게이션이 더 명료하고 직관적으로 느껴지게 됩니다. 사용자들은 쉽게 이해하고 사용할 수 있는 인터페이스를 선호하므로, 이는 전반적인 사용자 만족도를 높이는 데 효과적입니다.
(2) 스크롤할 수 있는 콘텐츠는 피한다
- 작은 화면에서의 공간 절약: 부분적으로 숨겨진 내비게이션은 작은 화면에서 많은 옵션을 제공할 수 있는 방법처럼 보입니다. 화면 공간을 효율적으로 활용할 수 있어, 다양한 내비게이션 옵션을 포함할 수 있습니다.
- 스크롤의 비효율성: 그러나 스크롤 가능한 콘텐츠는 사용자가 원하는 옵션을 보기 위해 추가적인 스크롤 동작을 수행해야 합니다. 이 과정은 직관적이지 않을 수 있으며, 사용자가 원하는 기능을 찾는 데 시간이 걸리게 만듭니다.
- 사용자 경험 저하: 사용자가 자주 사용하는 기능이나 정보를 찾기 위해 스크롤해야 할 경우, 불편함을 느끼고 사용자 경험이 저하될 수 있습니다. 특히, 즉각적인 접근성을 중시하는 모바일 환경에서는 이러한 비효율성이 더욱 두드러집니다.
- 탐색의 복잡성 증가: 스크롤을 통해 접근해야 하는 내비게이션은 사용자가 탐색하는 데 혼란을 줄 수 있습니다. 사용자는 원하는 기능을 찾기 위해 여러 번 스크롤해야 할 수 있으며, 이는 앱 사용의 흐름을 방해합니다.
2) 현재 위치 전달하기
앱 메뉴에서 가장 흔하게 발생하는 한 가지 실수는 사용자에게 현재 위치를 알려주는 데 실패한다는 것입니다. “나는 지금 어디에 있는가?”는 사용자가 성공적으로 길을 찾기 위해 반드시 대답할 수 있어야 할 기본 질문 중 하나입니다. 사용자는 A지점에서 B지점까지 어떻게 가는 것인지 외부의 안내 없이 한눈에 알 수 있어야 합니다. 적절한 시각적 단서(아이콘, 레이블, 색상 등)를 사용하여 아무 설명이 필요 없도록 내비게이션을 만들어야 합니다.
(1) 아이콘
하단 내비게이션의 아이콘은 사용자가 쉽게 이해할 수 있도록 신중하게 선택하고 디자인해야 하며, 기능을 숨기지 않도록 해야 합니다.
- 아이콘의 소통 역할: 하단 내비게이션의 액션은 아이콘을 통해 사용자에게 정보를 전달해야 합니다. 아이콘은 직관적이고 빠른 인식을 돕는 요소로, 사용자가 원하는 기능을 쉽게 이해할 수 있도록 해야 합니다.
- 보편적인 아이콘의 한계: 일부 아이콘은 사용자에게 잘 알려져 있지만, 이러한 보편적인 아이콘은 검색, 이메일, 프린트와 같은 특정 기능에 국한되어 있습니다. 이는 일반적으로 사용되는 아이콘이 많지 않다는 것을 의미합니다.
- 기능 숨김 문제: 앱 디자이너가 아이콘 뒤에 기능을 숨기는 경우가 많습니다. 사용자가 아이콘을 보고 어떤 기능인지 즉시 이해하지 못하면, 앱 사용이 어려워질 수 있습니다. 이는 사용자 경험을 저해하고, 사용자가 원하는 기능에 접근하는 데 걸리는 시간을 늘릴 수 있습니다.
- 직관성 부족: 아이콘이 의미하는 바를 즉시 이해할 수 없으면, 사용자는 혼란스러움을 느끼고 앱 사용에 대한 불만이 커질 수 있습니다. 이는 특히 모바일 환경에서 더욱 두드러지며, 사용자가 원하는 작업을 수행하는 데 방해가 됩니다.
- 명확한 아이콘 디자인 필요: 따라서, 아이콘은 그 기능을 명확하게 전달할 수 있도록 디자인되어야 합니다. 사용자들이 쉽게 인식하고 이해할 수 있는 아이콘을 사용하는 것이 중요하며, 이를 통해 앱의 접근성과 사용성을 높일 수 있습니다.
(2) 색상
하단 탭 바에서 서로 다른 색으로 만든 아이콘과 텍스트 레이블을 사용하는 건 피해야 합니다. 대신, 간단한 규칙을 따릅니다. 앱의 주요 색상으로 하단 내비게이션 액션(레이블과 아이콘 포함)을 칠해줍니다
- 일관성 유지: 서로 다른 색상의 아이콘과 텍스트 레이블을 사용하면, 사용자에게 혼란을 줄 수 있습니다. 일관성 있는 색상 사용은 시각적으로 통일감을 주어 사용자가 내비게이션 요소를 쉽게 인식하고 이해할 수 있도록 돕습니다.
- 주요 색상 활용: 앱의 주요 색상으로 하단 내비게이션 액션을 칠하면, 브랜드 정체성을 강화할 수 있습니다. 동일한 색상을 사용함으로써 사용자는 앱의 기능을 보다 쉽게 기억하고, 각 기능을 시각적으로 연결짓게 됩니다.
- 가독성 향상: 명확하고 일관된 색상 사용은 가독성을 높입니다. 사용자가 아이콘과 레이블을 쉽게 구별할 수 있게 되어, 원하는 기능에 빠르게 접근할 수 있습니다.
- 사용자 경험 개선: 색상이 일관되면 사용자가 앱을 사용할 때 더 편안함을 느끼고, 탐색이 쉬워집니다. 이는 전반적인 사용자 경험을 개선하고, 사용자가 앱을 더 자주 사용하도록 유도합니다.
- 시각적 혼란 방지: 서로 다른 색상이 혼합되면 시각적 혼란을 초래할 수 있습니다. 사용자가 각 아이콘의 의미를 파악하는 데 어려움을 겪게 되어, 원하는 기능에 접근하기 위해 더 많은 시간을 소모하게 됩니다.
하단 내비게이션에 색을 입혔다면, 흰색 혹은 검은색으로 현 위치의 아이콘과 텍스트 레이블을 만들어야 합니다.
- 명확한 시각적 구분: 흰색 또는 검은색으로 현재 위치의 아이콘과 텍스트 레이블을 만들면, 배경색과의 대비가 강해져 사용자가 자신의 위치를 쉽게 인식할 수 있습니다. 이는 탐색 시 혼란을 줄이고, 사용자가 현재 어떤 메뉴나 기능에 있는지를 명확하게 알 수 있도록 돕습니다.
- 일관된 디자인: 하단 내비게이션의 색상 규칙을 따름으로써 디자인의 일관성을 유지할 수 있습니다. 주요 색상으로 나머지 아이콘과 레이블을 만들고, 현재 위치를 강조하기 위해 흰색 또는 검은색을 사용하는 것은 전체적인 디자인을 조화롭게 만들어 줍니다.
- 사용자 경험 향상: 사용자가 현재 위치를 쉽게 식별할 수 있으면, 앱 탐색이 더 원활해집니다. 이는 사용자 경험을 개선하고, 사용자가 원하는 기능으로 즉시 이동할 수 있도록 도와줍니다.
- 시각적 강조: 흰색이나 검은색은 강한 시각적 효과를 제공하여 사용자의 주목을 끌 수 있습니다. 이러한 색상은 사용자에게 현재 위치가 중요하다는 메시지를 전달하며, 다른 옵션과의 차별성을 부각시킵니다.
- 접근성 향상: 명확한 대비는 다양한 사용자, 특히 시각적으로 민감한 사용자에게 더 나은 접근성을 제공합니다. 색상 대비는 정보 전달의 효율성을 높이며, 모든 사용자가 앱을 쉽게 사용할 수 있도록 도와줍니다.
오른쪽: 검정 혹은 흰색으로 아이콘과 레이블을 적용했습니다.
(3) 텍스트 레이블
텍스트 레이블은 내비게이션 아이콘에 짧고 의미 있는 정의를 보여줘야 합니다. 두 줄로 써지거나 잘릴 수도 있는 긴 텍스트 레이블은 피해야 합니다. 메뉴 요소는 훑어보기 쉬워야 합니다. 사용자는 해당 요소를 탭 했을 때 무슨 일이 벌어질지 정확히 이해할 수 있어야 합니다.
- 명확한 의사소통: 텍스트 레이블은 내비게이션 아이콘의 기능을 짧고 의미 있게 설명해야 합니다. 사용자가 각 아이콘을 보고 어떤 기능이 있는지 즉시 이해할 수 있도록 돕는 것이 중요합니다.
- 가독성 유지: 긴 텍스트 레이블은 화면에서 잘리거나 두 줄로 나뉘어 가독성을 저하시킬 수 있습니다. 이는 사용자가 텍스트를 읽는 데 불편함을 느끼게 하고, 기능을 이해하는 데 어려움을 초래할 수 있습니다. 짧고 간결한 레이블은 정보를 명확하게 전달하는 데 효과적입니다.
- 훑어보기 쉬운 구조: 메뉴 요소는 훑어보기 쉬워야 하며, 사용자가 원하는 기능을 빠르게 찾을 수 있어야 합니다. 명확하고 간결한 텍스트 레이블은 사용자가 탐색할 때 더 빠르게 인지할 수 있도록 도와줍니다.
- 예상 가능한 행동: 사용자가 내비게이션 요소를 탭했을 때 어떤 결과가 발생할지 명확히 이해할 수 있어야 합니다. 이는 사용자가 앱을 사용할 때 불안감을 줄이고, 더 자신감 있게 탐색할 수 있게 합니다.
- 사용자 경험 향상: 명확한 텍스트 레이블과 아이콘 조합은 사용자 경험을 향상시킵니다. 사용자가 각 요소의 기능을 쉽게 이해하고, 원하는 작업을 신속하게 수행할 수 있도록 돕는 것입니다.
(4) 타깃 사이즈
- 접근성 향상: 타깃 버튼이 충분히 크면 사용자가 쉽게 탭하거나 클릭할 수 있습니다. 이는 특히 모바일 환경에서 중요한데, 작은 버튼은 오작동을 유발할 수 있으며, 사용자에게 불편함을 줄 수 있습니다.
- 버튼 크기 계산: 하단 내비게이션 버튼의 너비를 계산할 때, 전체 화면 너비를 액션 수로 나누는 방법은 각 버튼이 균등하게 배치되도록 합니다. 이는 사용자가 각 버튼을 쉽게 인식하고 접근할 수 있도록 도와줍니다.
- 균형 잡힌 디자인: 모든 하단 내비게이션 액션을 가장 큰 액션의 너비에 맞추면 디자인의 균형을 유지할 수 있습니다. 이는 시각적으로 일관성을 제공하여 사용자에게 더 좋은 인상을 줄 수 있습니다.
- 탐색의 용이성: 버튼이 충분히 크고 균등하게 배치되면 사용자는 원하는 기능을 쉽게 찾고 사용할 수 있습니다. 이는 탐색의 효율성을 높이고, 사용자 경험을 향상시키는 데 기여합니다.
안드로이드 가이드라인에서는 모바일에서 다음과 같은 수치를 따를 것을 추천하고 있습니다.
(5) 탭에 붙은 뱃지
탭 바 아이콘에 해당 화면 혹은 모드와 관련되어 새로운 정보가 있음을 알려주는 뱃지를 붙일 수도 있습니다.
- 정보 전달: 뱃지는 특정 화면이나 모드에서 새로운 정보가 있음을 직관적으로 사용자에게 전달합니다. 사용자는 뱃지를 통해 해당 아이콘이 현재 어떤 상태인지, 또는 새로운 알림이 있다는 것을 쉽게 인식할 수 있습니다.
- 즉각적인 주목: 뱃지는 시각적으로 눈에 띄기 때문에 사용자의 주목을 끌 수 있습니다. 이는 사용자가 중요한 업데이트나 알림을 놓치지 않도록 도와줍니다.
- 탐색 효율성 향상: 뱃지를 통해 사용자는 어떤 기능이나 화면에 새로운 정보가 있는지를 빠르게 알 수 있습니다. 이를 통해 사용자는 필요한 정보를 더 효율적으로 찾고 탐색할 수 있습니다.
- 사용자 참여 증대: 새로운 정보가 있음을 알리는 뱃지는 사용자가 앱에 더 많이 참여하도록 유도할 수 있습니다. 예를 들어, 메시지, 알림, 업데이트 등은 사용자가 해당 기능을 확인하도록 유도하여 앱의 사용 빈도를 높일 수 있습니다.
- 시각적 피드백 제공: 뱃지는 사용자에게 피드백을 제공하는 역할을 합니다. 사용자는 특정 아이콘이 활성화된 상태인지, 새로운 내용이 있는지를 즉각적으로 확인할 수 있어, 더 나은 사용자 경험을 제공합니다.
3) 따로 설명할 필요가 없는 내비게이션을 만든다
사용자 여정 동안 사용자를 가이드하는 ‘보이지 않는 손’처럼 느껴져야 좋은 내비게이션입니다. 결국, 사람들이 찾을 수 없다면 아무리 매력적인 콘텐츠고 아무리 멋진 기능이라도 다 무용지물이 되는 것입니다.
(1) 행동
하단 내비게이션 아이콘은 사용자를 명확하게 안내하고, 혼란을 방지하며, 직관적인 피드백을 제공해야 합니다.
- 직접적인 탐색: 하단 내비게이션 아이콘은 사용자가 목표 목적지로 직접 안내해야 합니다. 이를 통해 사용자는 원하는 기능이나 정보를 신속하게 찾을 수 있으며, 탐색의 효율성이 높아집니다.
- 혼란 방지: 아이콘을 탭했을 때 다른 메뉴나 팝업이 열리지 않도록 하는 것은 사용자 경험을 단순화하는 데 중요합니다. 사용자가 원하지 않는 요소가 열리면 혼란을 초래하고, 앱 사용의 흐름이 방해 받을 수 있습니다.
- 명확한 피드백: 탭을 클릭했을 때 관련 화면으로 즉시 전환되거나 현재 화면이 새로고침 등 사용자에게 명확한 피드백을 제공해야 합니다. 이는 사용자가 자신의 행동에 대한 결과를 즉각적으로 인식할 수 있도록 도와주기 때문입니다.
- 탭 바의 역할 한정: 하단 내비게이션의 주요 목적은 탐색이므로, 탭 바를 통해 추가적인 컨트롤을 제공하는 것은 적합하지 않습니다. 만약 추가적인 기능이나 조작이 필요하다면, 툴바와 같은 다른 UI 요소를 사용하는 것이 좋습니다. 이는 각 요소의 역할을 명확히 하고, 사용자 경험을 최적화하는 데 효과적입니다.
(2) 일관성을 고수한다
- 일관성 유지: 가능한 한 어디를 가든 동일한 탭을 보여주는 것은 사용자에게 시각적 안정성을 제공합니다. 이는 사용자가 앱을 탐색할 때 일관된 경험을 느끼게 하여, 각 화면에서의 기능을 쉽게 이해하고 기억할 수 있도록 돕습니다.
- UI 안정성: 탭 바가 갑자기 사라지면 사용자에게 불안정하고 예측 불가능한 UI를 제공하게 됩니다. 이는 사용자가 앱을 사용할 때 혼란을 초래하고, 필요한 기능을 찾는 데 어려움을 겪게 만들 수 있습니다.
- 접근성 향상: 탭 바가 지속적으로 표시되면 사용자는 항상 원하는 기능에 쉽게 접근할 수 있습니다. 특정 기능이 사용 불가능하더라도 탭이 남아있으면 사용자는 그 기능을 기대할 수 있으며, 이를 통해 앱의 탐색이 더 매끄럽게 진행됩니다.
- 명확한 안내 제공: 만약 특정 탭의 기능을 사용할 수 없다면, 그 이유를 사용자에게 명확히 설명해야 합니다. 예를 들어, Dropbox의 경우 오프라인 파일을 업로드할 수 없는 상황에서 그 방법을 빈 화면에 안내함으로써 사용자에게 필요한 정보를 제공합니다. 이는 사용자가 앱 사용에 대한 이해도를 높이고, 불만을 줄이는 데 효과적입니다.
(3) 스크롤에 따라 탭 바를 숨긴다
만일 해당 스크린이 스크롤할 수 있는 피드라면, 탭 바는 사람들이 새로운 콘텐츠를 보기 위해 스크롤을 하는 동안은 숨겨져 있다가 다시 상단으로 가려고 하면 보이도록 만들 수 있습니다.
- 화면 공간 최적화: 스크롤할 수 있는 피드에서는 콘텐츠가 주된 관심사이기 때문에, 탭 바를 숨김으로써 사용자에게 더 많은 화면 공간을 제공할 수 있습니다. 이는 사용자가 콘텐츠에 집중할 수 있도록 도와줍니다.
- 사용자 경험 향상: 사용자가 스크롤을 하면서 새로운 콘텐츠를 탐색할 때, 탭 바가 숨겨져 있으면 시각적으로 방해받지 않게 됩니다. 따라서 콘텐츠를 보다 매끄럽게 소비할 수 있습니다.
- 탭 바의 가시성 조절: 사용자가 화면의 상단으로 스크롤할 때 탭 바가 다시 나타나면, 이는 사용자가 쉽게 탐색할 수 있는 경로를 제공합니다. 사용자는 원하는 기능으로 빠르게 이동할 수 있으므로, 탐색의 효율성이 높아집니다.
- 인터랙션의 직관성: 탭 바가 다시 나타나는 것은 사용자가 현재 위치에서 다른 화면으로 이동하고자 할 때 직관적인 피드백을 제공합니다. 이는 사용자에게 자연스러운 탐색 흐름을 유지하는 데 도움이 됩니다.
- 혼란 방지: 탭 바가 지속적으로 보이면 사용자가 콘텐츠에 집중하는 데 방해가 될 수 있습니다. 이를 방지하기 위해 스크롤 시 탭 바를 숨기는 것은 사용자의 혼란을 줄이고, 더 나은 사용자 경험을 제공합니다.
(4) 시각적 즐거움
뷰 사이에 왔다 갔다 전환할 때 옆으로 넘기는 모션을 이용하는 건 피해야 합니다. 활성화된 화면과 비활성화된 화면 사이의 전환은 크로스페이드(fross-fade) 애니메이션을 이용해야 합니다.
- 사용자 인식의 명확성: 옆으로 넘기는 모션을 사용하면 사용자가 화면 간의 전환을 명확하게 인식하기 어려울 수 있습니다. 특히, 사용자가 어떤 화면에서 어떤 기능을 사용하고 있는지를 혼동할 수 있습니다.
- 부드러운 전환: 크로스페이드 애니메이션은 활성화된 화면과 비활성화된 화면 사이의 전환을 부드럽게 만들어 줍니다. 이 방식은 사용자에게 자연스럽고 일관된 경험을 제공하며, 화면 간의 변화가 덜 갑작스럽게 느껴지게 합니다.
- 시각적 안정성: 크로스페이드 애니메이션은 사용자가 화면 전환 시 시각적으로 안정감을 느끼게 합니다. 이는 사용자가 콘텐츠에 더 잘 집중할 수 있도록 돕고, 전환 과정에서의 혼란을 줄여줍니다.
- 탐색의 연속성: 화면 간의 전환이 부드럽고 자연스럽게 이루어지면, 사용자는 탐색이 끊기지 않고 연속적으로 진행되고 있다는 느낌을 받을 수 있습니다. 이는 전반적인 사용자 경험을 향상시키는 데 기여합니다.
- 브랜드 일관성: 애니메이션 스타일이 일관되면 앱의 브랜드 이미지와 사용자 경험이 강화됩니다. 크로스페이드와 같은 부드러운 전환 효과는 프로페셔널하고 세련된 느낌을 주어 사용자에게 긍정적인 인상을 남길 수 있습니다.
5. 픽토리얼 아이콘: 창의적인 내비게이션
디스플레이의 크기는 사용자와 의사소통하는 데 가장 큰 문제가 됩니다. 메뉴 아이콘을 픽토리얼 아이콘(pictorial icons)을 사용하는 것은 모바일 스크린 공간 전략이라는 문제의 가장 흥미로운 솔루션 중 하나입니다. 아이콘의 모양은 공간을 효율적으로 활용하면서도 사용자가 어디로 가게 될지 설명해줍니다. 내비게이션을 간단하고 이용하기 쉽게 만들어줄 주면서도, 여러분을 다른 경쟁자와 차별화할 수 있는 여지를 줍니다.
구글 머티리얼 디자인은 이런 식의 내비게이션을 ‘플로팅 액션 버튼’이라는 용어로 부릅니다. UI 위에 떠있는(floating) 원형 아이콘으로 모션이 담겨 있습니다.
Tumblr도 멋진 픽토리얼 아이콘을 적절한 레이블과 함께 보여줍니다. 이 아이콘들은 앱을 스크롤하면 편리하게 사라집니다.
다만, 플로팅 액션 버튼의 배치와 아이콘 사용에 대한 주의 깊은 설계는 사용자 경험을 최적화하는 데 중요합니다.
- 플로팅 액션 버튼의 문제: 플로팅 액션 버튼이 콘텐츠를 덮어버리면, 사용자는 화면의 중요한 정보나 기능을 보지 못하게 됩니다. 이는 사용자가 앱 내에서 필요한 정보를 찾는 데 방해가 되며, 사용자 경험을 저해할 수 있습니다.
- 액션 발견의 어려움: 사용자가 특정 액션을 취해야만 다른 가능한 액션을 발견하도록 만드는 것은 비효율적입니다. 이는 사용자가 앱을 탐색하는 데 불편함을 느끼게 하고, 원하는 기능을 찾는 데 불필요한 시간을 소모하게 합니다. 사용자 경험은 직관적이어야 하며, 모든 기능에 쉽게 접근할 수 있어야 합니다.
- 아이콘의 기억력 문제: 많은 리서치 결과에 따르면 아이콘은 종종 기억하기 어렵고 효율적이지 않습니다. 사용자가 아이콘의 의미를 즉시 이해하지 못하면, 원하는 기능을 찾는 데 시간이 걸리고 혼란을 초래할 수 있습니다.
- 보편적인 아이콘의 한계: 일부 보편적으로 이해되는 아이콘(예: 프린트, 닫기 등)은 사용자가 쉽게 인식할 수 있지만, 이 외의 아이콘은 직관적이지 않을 수 있습니다. 따라서 모든 아이콘을 명확하고 직관적으로 디자인해야 하며, 사용자에게 혼란을 주지 않도록 해야 합니다.
- 레이블의 중요성: 아이콘 옆에 레이블을 붙이는 것은 사용자에게 추가적인 정보를 제공하여 이해를 돕습니다. 이는 사용자가 각 아이콘의 기능을 쉽게 인식하고, 앱을 더욱 효율적으로 사용할 수 있도록 합니다.
결론
내비게이션은 일반적으로 사용자를 사용자가 원하는 곳으로 데려다 주는 운송수단과 같습니다. 항상 사용자, 퍼소나를 생각하고, 그들이 앱을 이용할 때 가질 목표를 생각해야 합니다. 그다음에, 그들의 목표에 도움이 되는 방향으로 내비게이션을 만들어야 합니다. 여러분은 사용자를 위해 디자인하고 있는 것입니다. 그들은 제품을 이용하기 쉬울수록, 더 많이 이용하려고 할 것입니다.
![[UX원칙#21] 버튼 색상 적용 UX 원칙 가이드라인 의 썸네일 이미지](https://cdn.maily.so/xp5aiy1ghjwo774aks5hlnh62eof)
![[UX원칙#23] 아이콘 VS 버튼 레이블의 UX 원칙 가이드라인 의 썸네일 이미지](https://cdn.maily.so/4abm8mxrxqu5n710t426v6keqxkl)
![[UI/UX 원칙 #8] 버튼 UI 디자인의 스타일 진화와 가이드의 썸네일 이미지](https://cdn.maily.so/j35opf44bust093dmjivg88bhtou)
의견을 남겨주세요