Nick Babich의 글 Tabs for Mobile UXDesign 소개하고자 합니다.
탭(tab)은 모바일 UI 구성 요소 중 가장 널리 사용되는 요소 중 하나입니다. 탭은 사용자가 동일하게 중요한 몇 가지 뷰 사이를 신속하게 이동할 수 있도록 도와주며, 실제 현실의 요소를 모바일 애플리케이션과 웹으로 효과적으로 가져오는 역할을 합니다. 적절히 활용된다면, 탭은 사용자 경험 향상에 기여하는 훌륭한 인터페이스 컨트롤로 평가 받습니다.
1. 개념
1) 훌륭한 메타포
UI에서 메타포는 사용자와 애플리케이션 간의 친밀감을 높여주는 아이디어나 요소입니다. 인터페이스에서 사용되는 탭은 카드형 카탈로그 서랍의 인덱스 카드에서 유래한 ‘탭’이라는 보편적인 개념을 바탕으로 하고 있어, 훌륭한 메타포로 평가됩니다. 이는 실제로 많은 사람들이 익숙한 현실의 대상을 활용한 것입니다.
적절히 활용된다면, 탭은 훌륭한 관습(convention)이 되며 다음과 같은 역할을 수행할 수 있습니다.
(1) 탭은 컨트롤로서 매우 직관적이며 사용하기 간편합니다. 잘 설계된 탭은 시각적 표현을 통해 현재 사용자의 위치를 명확하게 나타냅니다.
(2) 컨텐츠 조직(organization)을 개선하는 데 탭은 효과적입니다. 탭은 컨텐츠를 의미 있는 섹션으로 나누면서도 적은 스크린 공간을 차지합니다. 많은 경우, 탭은 표시되는 내용과 시각적으로 연결되어 있어, 활성화된 탭과 그 공간 간의 연관성이 강화됩니다. 이로 인해 사용자는 쉽게 관심 있는 내용에 접근할 수 있습니다.
(3) 시각적 일관성을 부여합니다. 사용자가 가장 중요한 내용에 쉽고 빠르게 접근할 수 있도록 돕는 UI 디자인이 훌륭한 디자인이라 할 수 있습니다. 이를 위해서는 사용자 인터페이스 디자인에서 특정 방식으로 보여주고자 하는 내용의 우선순위를 정하는 것이 중요합니다.
2) 탭과 내비게이션 바의 차이
이 둘은 일반적으로 동일한 디자인을 공유하지만, 인지적으로는 상당한 차이를 가지고 있습니다. 탭은 서로 관련된 요소로 인식되는 반면, 내비게이션 바는 그러한 관계가 없습니다.
사용자는 내비게이션 바를 클릭할 때, 현재 보고 있는 화면과는 관련이 없는 다른 화면으로 이동할 것이라고 예상합니다.
반면 사용자는 탭을 클릭할 때, 동일한 화면 내에서 상위 탭이나 현재 열린 탭과 관련된 데이터를 볼 것이라고 기대합니다. 완전히 다른 화면에서 관련 없는 데이터가 나타날 것이라고는 예상하지 않습니다.
3) 탭은 언제 사용해야 하는가
연관 화면 그룹을 보여줄 때
(1) 내용의 관련성
한 세트의 탭에 포함된 모든 내용은 서로 관련이 있어야 하며, 이는 사용자가 탭을 통해 일관된 정보를 기대하도록 돕습니다. 탭이 관련된 주제를 다룰 때, 사용자 경험이 더 매끄럽고 이해하기 쉬워집니다.
(2) 상호 배타성
각 탭의 내용은 서로 다른 정보를 제공해야 합니다. 즉, 각 탭이 고유한 주제를 다루어야 하며, 사용자가 다른 탭을 클릭할 때마다 새로운 정보를 얻을 수 있어야 합니다.
(3) 사용 사례
탭은 주로 사용자가 '같은 맥락 안에서 화면 전환을 보여줄 때'에 활용됩니다. 이는 사용자가 관련된 정보를 쉽게 탐색하도록 돕는 방식입니다.
(4) 예측 가능성
사용자가 특정 탭을 선택했을 때, 자신이 찾고자 하는 내용을 쉽게 예측할 수 있도록 하는 것이 중요합니다. 이를 위해 탭은 논리적인 컨텐츠 단위로 잘 묶여 있어야 하며, 사용자는 탭을 클릭함으로써 기대되는 정보를 빠르게 이해할 수 있어야 합니다.
스코프 바 또는 필터를 보여줄 때
사용자가 검색하고 싶어 하는 ‘분명하게 정의되었거나 전형적인 카테고리’가 있을 때는 탭을 스코프 바(scope bar)로 이용하는 것이 유용할 수 있습니다.
(1) 명확한 정보 구조
사용자가 특정 카테고리를 쉽게 인식하고 접근할 수 있도록 도와줍니다. 탭을 사용하면 각 카테고리가 명확하게 구분되어 있어 사용자는 원하는 정보에 빠르게 도달할 수 있습니다.
(2) 직관적인 탐색
스코프 바 형태의 탭은 사용자가 어떤 카테고리에 속하는지 한눈에 알 수 있게 해줍니다. 이는 사용자에게 직관적인 탐색 경험을 제공하며, 필요한 정보를 찾는 데 소요되는 시간을 줄입니다.
(3) 카테고리 간 전환 용이
사용자는 탭을 통해 서로 다른 카테고리 간에 쉽게 전환할 수 있습니다. 예를 들어, 쇼핑 웹사이트에서 "의류", "전자제품", "가구"와 같은 카테고리를 탭으로 구성하면, 사용자는 원하는 카테고리를 클릭하여 관련된 상품을 신속하게 찾아볼 수 있습니다.
(4) 정보의 일관성 유지
특정 카테고리 내에서의 정보가 일관되게 제공되므로, 사용자는 각 카테고리에서 어떤 정보를 기대할 수 있는지 명확하게 이해할 수 있습니다.
또한 탭은 관련이 있지만 구분된 데이터에도 이용할 수 있습니다. 애플 앱스토어에서는 각 앱을 보는 화면에서는 ‘Details’, ‘Reviews’, ‘Related’와 같은 서브 뷰를 볼 수 있습니다.
병렬형 콘텐츠를 보여줄 때 탭을 사용하지 않는다
사용자에게 여러 탭의 콘텐츠를 동시에 보여줄 필요가 없습니다. 만일 서로 다른 정보를 비교하며 봐야 하는 병렬형 콘텐츠라면, 탭을 전적으로 이용하지 않는 것이 좋습니다. 계속 탭 사이를 왔다 갔다 하다 보면 사용자에게 단기 기억 과부하가 일어나 사용성이 떨어지기 때문입니다.
(1) 비교의 용이성
병렬형 컨텐츠는 사용자가 필요로 하는 여러 정보를 한 화면에서 동시에 보여줍니다. 이는 가격, 사양, 리뷰 등 다양한 요소를 동시에 비교할 수 있게 하여, 사용자가 더 빠르고 효율적으로 결정을 내릴 수 있도록 돕습니다.
(2) 정보의 통합
탭을 사용하면 각 탭에서 정보를 전환해야 하지만, 병렬형 콘텐츠는 관련된 정보를 하나의 화면에 통합하여 제공합니다. 이를 통해 사용자는 정보를 얻기 위해 계속해서 탭을 클릭할 필요가 없으며, 필요한 데이터를 쉽게 찾을 수 있습니다.
(3) 혼란 최소화
여러 탭을 오가며 정보를 확인하는 과정에서 사용자는 혼란을 느낄 수 있습니다. 반면, 병렬형 컨텐츠는 필요한 모든 정보를 한눈에 제공함으로써 사용자가 원하는 내용을 놓치지 않도록 합니다. 이는 정보의 이해도를 높이고, 사용자 경험을 개선하는 데 도움이 됩니다.
(4) 효율적인 탐색
병렬형 컨텐츠는 사용자가 원하는 정보를 신속하게 찾을 수 있도록 도와줍니다. 예를 들어, 제품 비교 페이지에서 여러 제품의 정보를 나란히 보여줌으로써 사용자는 각 제품의 장단점을 쉽게 파악할 수 있습니다.
2. 탭 UX 원칙 14가지
원칙1. 탭은 상단에 배치한다
(1) 자연스러운 시각적 흐름
사용자는 일반적으로 화면을 위에서 아래로 읽는 습관이 있습니다. 탭이 상단에 위치하면 사용자는 자연스럽게 탭을 먼저 확인하고, 그 아래에 있는 내용을 쉽게 탐색할 수 있습니다. 이는 사용자 경험을 개선하고 정보의 흐름을 원활하게 합니다.
(2) 정보의 계층 구조
탭은 화면에 표시되는 콘텐츠보다 더 높은 정보 계층을 나타냅니다. 탭은 다양한 카테고리나 섹션을 대표하므로, 이들을 상단에 배치함으로써 사용자는 어떤 정보가 포함되어 있는지를 즉시 파악할 수 있습니다. 이는 사용자가 필요한 정보를 더 쉽게 찾도록 돕습니다.
(3) 집중력 유지
상단에 위치한 탭은 사용자에게 명확한 네비게이션을 제공하여, 사용자가 현재 보려는 콘텐츠에 집중할 수 있게 합니다. 하단이나 사이드에 탭이 있을 경우, 사용자는 시각적으로 혼란을 느낄 수 있으며, 필요한 정보를 찾는 데 더 많은 시간이 소요될 수 있습니다.
(4) 일관성 있는 디자인
많은 사용자 인터페이스에서 탭을 상단에 배치하는 것이 일반적입니다. 따라서 상단에 위치한 탭은 사용자에게 익숙한 디자인 패턴을 제공하여, 사용자가 쉽게 탐색할 수 있도록 합니다.
원칙2. 활성화 탭은 강조한다
(1) 사용자의 방향 감각
사용자는 앱 내에서 자신의 위치를 명확히 이해해야 합니다. "나는 어디에 있는가?"라는 질문에 대한 답이 없으면 사용자는 혼란을 느끼고, 원하는 정보를 찾는 데 어려움을 겪게 됩니다. 이는 사용자가 앱을 효과적으로 탐색하는 데 방해가 됩니다.
(2) 신뢰성 구축
사용자가 자신이 위치한 곳을 명확히 알 수 있을 때, 앱에 대한 신뢰도가 높아집니다. 반면, 현재 위치를 알 수 없으면 사용자는 앱의 사용성을 의심하게 되고, 결국 앱을 떠날 가능성이 높아집니다.
(3) 효율적인 탐색
사용자가 현재 위치를 알면, 다음 단계로 이동할 때 더 빠르고 효율적으로 결정할 수 있습니다.
(4) 피로도 감소
현재 위치를 명확히 알 수 있다면 사용자는 불필요한 탐색을 줄일 수 있습니다. 이는 심리적 피로도를 낮추게 됩니다.
원칙3. 언제나 하나의 미리 선택된 탭이 있어야 한다
(1) 명확한 상태 표시
사용자가 현재 어떤 탭을 선택했는지를 명확하게 보여줌으로써, 정보의 맥락을 이해하는 데 도움을 줍니다. 선택된 탭이 없으면 사용자는 자신이 어떤 정보를 보고 있는지 혼란스러워할 수 있습니다.
(2) 탐색의 일관성
선택된 탭이 있어야만 사용자가 앱 내에서의 위치를 인식할 수 있습니다. 이는 탐색의 일관성을 유지하고, 사용자가 다음에 무엇을 해야 할지에 대한 방향성을 제공합니다.
(3) 사용자 신뢰도 향상
선택된 탭이 없는 경우 사용자는 앱의 UI가 제대로 작동하지 않거나, 불완전하다고 느낄 수 있습니다.
(4) 정보의 연결성
선택된 탭은 사용자가 보고 있는 정보의 주제를 명확히 하여, 관련된 콘텐츠를 쉽게 찾을 수 있도록 합니다.
원칙4. 유저가 이해할 수 있는 방향으로 탭 레이블을 정돈한다
(1) 사용자 중심 디자인
탭 레이블은 사용자의 관점에서 이해하기 쉬워야 합니다. 사용자가 자연스럽게 이해할 수 있는 용어와 순서를 사용함으로써, 사용자가 원하는 정보를 더 쉽게 찾을 수 있도록 돕습니다.
(2) 탐색의 직관성
탭의 순서와 레이블이 사용자에게 직관적이어야 합니다. 사용자가 예상하는 순서대로 정보를 배치하면, 탐색이 더 쉬워지고 불필요한 혼란을 줄일 수 있습니다.
(3) 효율적인 정보 접근
사용자가 탭 레이블과 순서에 쉽게 적응할 수 있을 때, 앱에 대한 사용성이 높아집니다.
원칙5. 의미 있는 텍스트 레이블을 사용한다
(1) 쉬운 탐색
탭은 사용자에게 직관적으로 이해될 수 있어야 합니다. 쉽게 훑어볼 수 있는 구조는 사용자가 필요한 정보를 빠르게 찾는 데 도움을 줍니다. 사용자가 탭을 클릭했을 때 어떤 결과가 나올지를 명확히 이해해야 하므로, 레이블이 간결하고 명확해야 합니다.
(2) 짧고 의미 있는 레이블
텍스트 레이블이 짧고 의미가 있어야 사용자가 즉시 이해할 수 있습니다. 긴 레이블은 시각적으로 복잡하게 보일 수 있으며, 사용자가 레이블의 의미를 파악하는 데 시간을 소모하게 만듭니다. 따라서 짧고 직관적인 용어를 사용하는 것이 중요합니다.
(3) 쉬운 언어 사용
새로 만들어낸 용어보다는 일반적으로 사용되는 쉬운 언어를 사용해야 합니다. 이는 사용자에게 친숙하고 이해하기 쉬운 용어를 제공하여, 탭의 목적과 기능을 명확하게 전달합니다. 복잡한 용어는 혼란을 초래할 수 있습니다.
(4) 탭의 단순성 유지
긴 텍스트 레이블은 탭 컨트롤로서의 복잡성을 나타내며, 사용자에게 선택이 복잡하다는 신호로 작용할 수 있습니다. 탭은 간단한 정보 구조를 제공해야 하므로, 복잡한 정보를 담기에는 적합하지 않습니다. 이러한 경우에는 다른 형식의 UI 요소를 사용하는 것이 더 효과적입니다.
원칙6. 탭 레이블은 전부 아이콘을 쓰거나 전부 텍스트로 써야 한다
(1) 일관성 유지
모든 탭이 동일한 형식을 사용하면 사용자에게 일관된 경험을 제공합니다. 일관성이 있는 디자인은 사용자가 쉽게 이해하고 기억할 수 있도록 도와줍니다. 아이콘과 텍스트가 혼합되면 사용자는 어떤 탭이 무엇을 의미하는지 혼란스러워할 수 있습니다.
(2) 시각적 명확성
전부 아이콘으로 구성된 탭은 시각적으로 깔끔하고 빠르게 훑어볼 수 있는 장점이 있습니다. 반면, 전부 텍스트로 구성된 탭은 명확한 의미를 전달하는 데 유리합니다. 둘 중 하나의 형식을 사용함으로써, 사용자는 정보를 쉽게 인식할 수 있습니다.
(3) 사용자 경험 향상
아이콘과 텍스트가 혼합된 형식은 사용자가 탭의 기능을 이해하는 데 방해가 될 수 있습니다. 모든 탭이 동일한 유형으로 구성되어 있으면, 사용자는 각 탭의 기능을 더 쉽게 파악하고, 원하는 정보를 찾는 데 필요한 시간을 줄일 수 있습니다.
또한 아이콘은 ‘모양’이 아니라 그 ‘의미’를 기반으로 이용하는 것이 기본입니다.
(1) 의미 전달의 중요성
아이콘은 시각적인 요소로, 사용자가 즉각적으로 이해할 수 있는 의미를 담고 있어야 합니다. 아이콘의 모양이 바뀌더라도 그 의미가 명확하다면 사용자에게 혼란을 주지 않고, 앱의 기능을 쉽게 이해하도록 도와줍니다.
(2) 일관된 사용자 경험
아이콘의 의미가 일관되게 유지되면, 사용자는 앱 내에서의 탐색이 더 자연스럽고 직관적으로 느껴집니다. 이는 사용자가 앱을 보다 쉽게 사용할 수 있도록 하며, 긍정적인 사용자 경험을 제공합니다.
(3) 텍스트의 명확성
아이콘만으로 모든 내비게이션 옵션을 표현하는 것은 어려운 경우가 많습니다. 복잡한 기능이나 여러 선택지를 명확하게 전달하기 위해서는 텍스트가 더 효과적입니다. 텍스트는 의미를 명확하게 전달할 수 있어 사용자가 기능을 이해하는 데 도움을 줍니다.
(4) 문화적 차이
아이콘은 문화적으로 다르게 해석될 수 있습니다. 특정 아이콘이 한 문화에서는 긍정적인 의미를 가질 수 있지만, 다른 문화에서는 전혀 다른 의미로 받아들여질 수 있습니다. 이 경우 텍스트는 보다 보편적으로 이해될 수 있는 정보를 제공하여 혼란을 줄입니다.
원칙7. 탭은 여러 줄을 겹쳐서 사용하지 않는다
(1) 단순함과 명확성
한 줄로 구성된 탭은 사용자에게 시각적으로 간결하고 명확한 정보를 제공합니다. 여러 줄로 나누어지면 사용자는 어떤 탭이 중요한지 파악하기 어려워지고, 탐색이 복잡해질 수 있습니다.
(2) 탐색 용이성
탭이 한 줄로 배치되면 사용자가 필요한 정보를 쉽게 찾을 수 있습니다. 여러 줄로 나뉘면 사용자가 원하는 탭을 찾기 위해 스크롤하거나 시선을 이동해야 하므로 불편함이 발생합니다.
(3) 일관된 디자인
한 줄의 탭은 일관된 레이아웃을 유지하며, 디자인의 통일성을 제공합니다.
(4) 정보의 우선순위
만약 탭이 너무 많아 한 줄에 다 들어가지 않는다면, 정말로 필요한 기능이나 정보가 무엇인지 재검토해야 합니다. 디자인을 간소화함으로써 사용자가 가장 중요하게 생각하는 기능에 집중할 수 있도록 도와줘야 합니다.
원칙8. 탭 속의 탭을 사용하지 않는다
(1) 복잡한 구조
탭 속의 탭은 정보 구조를 복잡하게 만들어 사용자가 현재 위치를 인식하기 어렵게 합니다. 사용자는 여러 레벨의 탭을 기억해야 하므로, 어떤 탭에 들어갔는지를 추적하는 데 혼란을 겪을 수 있습니다.
(2) 탐색의 혼란
다중 레벨의 탭은 사용자가 각 탭의 내용을 쉽게 파악하기 어렵게 만듭니다. 사용자는 여러 계층의 정보를 기억해야 하므로, 이전에 어떤 정보를 보았는지 기억하기 힘들어집니다. 이는 탐색의 효율성을 떨어뜨립니다.
(3) 시각적 혼잡
탭 속의 탭은 화면을 시각적으로 복잡하게 만들어 사용자가 정보를 빠르게 인식하는 데 방해가 됩니다. 사용자가 내용을 훑어보는 데 필요한 시간을 늘리고, 그로 인해 사용자 경험이 저하될 수 있습니다.
(4) 기억의 부담 증가
사용자가 각 탭의 관계와 내용을 기억해야 하므로, 정신적인 부담이 증가합니다. 이는 사용자가 앱을 사용할 때 피로감을 느끼게 합니다.
원칙9. 탭은 충분히 크게 만든다
(1) 사용자 편의성
탭이 충분히 크면 사용자가 쉽게 클릭할 수 있습니다. 작은 탭은 손가락의 정확한 위치를 요구하므로, 실수 클릭이 발생할 가능성이 높아집니다.
(2) 접근성 향상
큰 탭은 다양한 사용자나 노인에게 더 쉽게 접근할 수 있게 합니다. 접근성이 높아지면 더 많은 사용자가 앱을 편리하게 이용할 수 있습니다.
(3) 명확한 구분
각 탭의 너비를 계산하여 균등하게 배치하면, 사용자에게 명확한 구분을 제공합니다. 이는 사용자가 어떤 탭을 선택해야 할지 쉽게 판단할 수 있도록 도와줍니다.
(4) 일관된 디자인
가장 큰 탭의 너비를 모든 탭에 적용하면 디자인의 일관성을 유지할 수 있습니다. 일관된 디자인은 사용자에게 안정감을 주고, 앱을 보다 쉽게 이해하도록 돕습니다.
안드로이드 가이드라인에서는 모바일에서 쓰는 탭에 다음과 같은 치수를 이용하라고 제안합니다.
원칙 10. 선택되지 않은 탭도 잘 보이게 만든다
(1) 기능의 인식
사용자가 선택되지 않은 탭을 명확히 인식할 수 있어야 추가적인 옵션이나 기능을 기억하고 활용할 수 있습니다. 탭이 잘 보이지 않으면 사용자는 그 기능이 존재한다는 사실조차 잊어버릴 수 있습니다.
(2) 탐색의 용이성
선택되지 않은 탭이 분명하게 표시되면 사용자는 쉽게 다른 옵션을 탐색할 수 있습니다. 이는 사용자가 다양한 기능을 탐색하고 활용하는 데 도움을 줍니다.
(3) 사용자 경험 향상
숨겨진 기능이 많을 경우, 사용자는 앱의 잠재력을 충분히 활용하지 못하게 됩니다. 명확하게 보이는 탭은 사용자가 앱을 더 잘 이해하고, 모든 기능을 활용할 수 있도록 합니다.
(4) 혼란 방지
강조되지 않은 탭이 시각적으로 사라지면 사용자는 어떤 기능이 가능한지 혼란스러워할 수 있습니다. 모든 탭이 분명하게 보일 때, 사용자는 선택할 수 있는 옵션을 명확히 인식하고, 그에 따라 행동할 수 있습니다.
반면, 하위 탭으로 구성되어 스크롤이 되는 탭(scrollable tab)은 이 원칙의 유일한 예외입니다. 하지만 여전히 스크롤이 되는 콘텐츠는 덜 효율적이긴 합니다. 원하는 옵션을 보기 위해서 한 번은 스크롤을 해야 하기 때문입니다.
원칙11. 스크롤링 방향에 따라 탭을 숨긴다
(1) 화면 공간의 제한
모바일 화면은 제한된 공간을 가지고 있기 때문에, 탭이나 버튼이 많아지면 사용자에게 보여줄 수 있는 콘텐츠가 줄어듭니다. 많은 페이지나 섹션이 있을 경우, 사용자 경험이 저하될 수 있습니다.
(2) 정보의 우선순위
사용자가 가장 중요하게 생각하는 정보를 쉽게 접근할 수 있도록 하려면, 화면 공간을 효율적으로 활용해야 합니다. 탭이나 버튼이 너무 많으면 사용자는 어떤 정보를 선택해야 할지 혼란스러워질 수 있습니다.
(3) 스크롤과 탐색의 최적화
스크롤이 가능한 피드에서는 탭 바를 숨기고 필요할 때만 보여주는 방식이 유용할 수 있습니다. 사용자가 새로운 콘텐츠를 보기 위해 스크롤할 때 탭 바가 사라지면, 화면을 더 넓게 활용할 수 있습니다. 하지만 이 방식이 사용자의 액션을 제한하지 않는지 확인해야 하며, 이를 위해 A/B 테스트가 필요합니다.
(4) 사용자 행동 분석
A/B 테스트를 통해 사용자의 반응을 분석하고, 탭 바의 숨김/표시 방식이 실제로 사용자 경험에 긍정적인 영향을 미치는지 확인해야 합니다. 사용자의 행동에 따라 최적의 디자인을 선택할 수 있습니다.
원칙12. 전환 효과로 슬라이드 애니메이션을 사용한다
(1) 탭 간의 관계 명확화
슬라이딩 애니메이션은 탭이 나란히 배치되어 있다는 느낌을 강화합니다. 사용자는 탭 간의 전환이 수평적으로 이루어짐을 직관적으로 이해할 수 있습니다. 반면, 기본 애니메이션은 더 깊은 하위 메뉴로 이동하는 것처럼 느껴질 수 있습니다.
(2) 탭 탐색의 직관성
슬라이딩 애니메이션은 사용자가 탭을 전환할 때 자연스럽고 직관적인 경험을 제공합니다. 사용자는 스와이프 제스처를 통해 쉽게 다른 탭으로 이동할 수 있으며, 이는 모바일 환경에서 사용자에게 익숙한 행동입니다.
(3) 시각적 피드백 제공
슬라이딩 애니메이션은 사용자가 어떤 탭으로 이동했는지를 시각적으로 명확하게 보여줍니다. 이는 사용자가 현재 어떤 탭을 보고 있는지를 쉽게 인식하도록 돕습니다.
(4) 사용자 참여 유도
스와이프 제스처를 이용하도록 유도함으로써, 사용자는 앱에 더 적극적으로 참여하게 됩니다. 이는 사용자 경험을 향상시키고, 앱 사용의 즐거움을 높이는 데 효과적입니다.
원칙13. 스와이프 제스처를 잊지 않는다
(1) 편리한 탐색
사용자가 UI 상단까지 올라가지 않고도 탭을 전환할 수 있으므로, 더 편리한 탐색이 가능합니다. 이는 사용자에게 편리함을 제공하고, 앱 사용의 효율성을 높입니다.
(2) 자연스러운 인터랙션
스와이프 제스처는 모바일 환경에서 매우 자연스럽고 직관적인 행동입니다. 사용자는 손가락을 가볍게 움직여 원하는 탭으로 쉽게 이동할 수 있어, 사용자 경험이 향상됩니다.
(3) 탭 간의 연속성 강조
스와이프 제스처는 탭 간의 연속성을 강조합니다. 사용자는 탭이 서로 연결되어 있다는 느낌을 받을 수 있으며, 이는 탐색을 더욱 직관적으로 만들어 줍니다.
원칙14. 일관성을 주려고 노력한다
탭의 기능을 이용할 수 없다고 해서 탭을 제거하면 안 됩니다. 만일 어떤 경우에는 탭을 제거하고 어떤 경우엔 제거하지 않는다면, 앱의 UI는 불안정하고 예측 불가능하게 될 겁니다. 최고의 솔루션은 모든 탭을 쓸 수 있게 만들되, 해당 탭의 내용을 왜 이용할 수 없는지 설명해야 합니다.
예를 들어, 만일 포스트가 하나도 없을 때, Modpost 앱의 ‘Post’ 탭 화면에는 포스트를 추가하는 방법이 보입니다. 이 기능은 Emptystate라고 불립니다.
결론
탭은 제대로만 사용하면 훌륭한 요소입니다. 상대적으로 간단한 UI 구성 요소이지만 잘못 이용하기도 매우 쉽습니다. 위의 가이드라인을 따르면 보기에도 멋지고 제대로 작동하는 앱이 될 겁니다. 훌륭한 앱은 유저가 어떤 과업이든 가능한 가장 효율적인 방법으로 성취할 수 있도록 도와주는 것입니다.
댓글
의견을 남겨주세요