모바일 앱 탐색: 전체 가이드

2020년에 867억 개 이상의 앱이 다운로드되었다는 사실을 알고 계십니까? 엔터테인먼트이든 비즈니스이든, 앱은 모든 기업에 필수품입니다. 빠른 다운로드, Google Play 및 Apple App Store에는 수천 개의 앱이 있지만 모든 앱의 품질이 동일한 것은 아닙니다.

앱 탐색은 앱 품질을 정의하는 주요 특성 중 하나입니다. 탐색을 앱의 중추로 사용하여 자세히 조사하면 훨씬 더 많은 정보를 얻을 수 있습니다. 전체 가이드를 사용하여 앱 탐색에 대한 모든 것을 이해할 수 있도록 도와드리겠습니다. 탐색이 무엇인지 이해하는 것으로 시작해 볼까요?

탐색이란 무엇입니까?

앱에서 한 장소에서 다른 장소로 탐색하거나 이동하는 것은 많은 사용자에게 중요한 일상 작업입니다. 한 페이지에서 다른 페이지로 이동하든 앱에서 중요한 콘텐츠를 검색하든 탐색을 통해 사용자는 향상된 디지털 경험을 쉽게 경험할 수 있습니다. 기술 측면에서는 탐색에 더 깊이 빠져들게 됩니다. 다양한 유형의 탐색부터 시작하겠습니다.

탐색 유형

사용자가 다른 앱 화면 사이를 이동하는 데 도움이 될 수 있는 다양한 유형의 탐색이 있습니다. 이러한 유형의 탐색은 플랫폼 경제성, 콘텐츠에 탐색 동작 포함 및 다양한 탐색 구성 요소를 사용하여 구현됩니다.

주요 탐색 유형은 다음과 같습니다.

항해 방향

모든 앱의 정보 아키텍처를 기반으로 사용자가 이동할 수 있는 세 가지 방향이 있습니다. 이 세 가지 탐색 방향은 다음과 같습니다.

1. 측면 탐색

동일한 계층에 있는 화면 간의 이동을 나타냅니다. 모든 앱의 기본 탐색 구성 요소는 계층 구조의 최상위 수준에 있는 모든 대상에 대한 액세스를 제공해야 합니다. 기능에 빠르게 액세스하고 세트의 다른 항목 사이를 이동할 수 있습니다.

사용자는 두 가지 방법으로 음악 앱을 사용하여 모든 앱에 대한 액세스를 쉽게 탐색할 수 있습니다.

1. 음악 앨범에서 특정 노래까지 계층적으로 완료할 수 있습니다.
2. 노래에서 검색하고 계층 구조의 화면을 우회하여 직접 탐색합니다.

사용자는 다음 두 가지 방법으로 앱을 쉽게 역방향으로 탐색할 수 있습니다.

1. 노래가 포함된 앨범 또는 노래의 상위 계층 구조에서 위쪽입니다.
2. 사용자가 앱 화면에서 방금 노래로 이동한 경우 검색 결과 화면에 시간순으로 연결됩니다.

앱의 기본 탐색 구성 요소가 계층 구조 최상위 수준에서 모든 대상에 대한 액세스를 제공해야 하는 것처럼. 여러 최상위 대상이 있는 앱은 하단 탐색 모음, 탐색 창 등을 사용하여 측면 탐색을 제공할 수 있습니다.

탐색 창은 5개 이상의 최상위 대상에 이상적이며 일관된 탐색 경험을 위해 액세스할 수 있습니다. 하단 탐색 모음은 모바일 장치, 가시성, 위치, 지속성 등의 3~5개 대상에 대한 액세스를 제공하여 다른 대상 간에 빠르게 피벗할 수 있습니다. 또한 이러한 탭은 앱 계층 구조의 모든 수준에서 사용하여 둘 이상의 피어 데이터 세트를 제공할 수 있습니다.

2. 앞으로 탐색

앞으로 탐색에는 작업을 완료하기 위해 모든 앱의 화면 간에 세 가지 이동 유형이 있습니다. 이러한 움직임에는 다음이 포함됩니다.

• 하향: 하위 화면에서 상위 화면에서 딥 콘텐츠 액세스를 허용합니다.
• 순차: 모든 결제 프로세스와 같이 순차적 또는 순서가 지정된 화면 순서를 통해 탐색할 수 있습니다.
• 직접: 한 화면에서 다른 앱으로 직접 탐색할 수 있습니다.

전달 탐색의 구현은 다른 구성 요소를 사용하여 화면 콘텐츠에 포함됩니다. 따라서 콘텐츠 내의 링크, 하나 이상의 화면에서 인앱 검색, 다른 화면으로 이동하는 버튼, 이미지 목록, 목록, 카드 등과 같은 콘텐츠 컨테이너를 사용하여 구현할 수 있습니다.

3. 역방향 탐색

서로 다른 화면 사이에서 뒤로 이동하는 것을 말합니다. 화면 기록을 통해 시간순으로 이동하거나 앱 계층을 통해 위쪽으로 이동하는 데 도움이 됩니다. 작업 재개 또는 정보 회수 속도를 높이려면 사용자를 이전 화면 위치 및 상태로 되돌려 역방향 탐색에서 사용자 경험의 우선 순위를 지정하는 것이 중요합니다. 프라이버시를 위해 정보를 삭제하는 경우 화면의 이전 상태를 사용할 수 없는 경우 명확한 메시지를 제공해야 합니다. 또한 역방향 탐색은 계층 구조에서 자식 화면과 그 위에 있는 화면의 관계를 나타내야 합니다.

1. 역순 탐색

앱의 히스토리를 이용하여 역순으로 앱 탐색을 표시합니다. 웹 브라우저의 뒤로 버튼과 같이 사용자가 여러 앱 간에 이동하는 데 도움이 될 수 있습니다. 역시간 탐색은 동작을 추가로 정의하고 기능에 액세스하는 운영 플랫폼에 의해 제공됩니다.

2. 상향 역방향 탐색

이를 통해 사용자는 단일 앱의 계층 구조 모델에서 한 단계 위로 탐색할 수 있습니다. 최상위 화면이나 홈 화면에 도달할 때까지 작동합니다(예: 상단 표시줄의 위쪽 화살표). 위쪽 탐색은 플랫폼 지침을 더 따르는 모든 하위 화면에서 구현되어야 합니다. iOS 앱에서는 뒤로 버튼을 사용하고 Android 및 웹 앱을 사용하여 머티리얼 업 동작을 사용하여 달성됩니다.

모바일 내비게이션이란?

한 화면에서 다른 화면으로 이동하는 것은 빠른 탐색의 간단한 예가 될 수 있습니다. 모바일 탐색의 경우 사용자가 애플리케이션의 한 지점에서 다른 지점으로 이동하는 프로세스입니다. 강력한 앱의 배경이 되는 앱의 도로 시스템이라고 정의할 수 있습니다. 모바일 탐색은 빠르고 간편해야 하며 원활한 전환을 지원해야 합니다.

모바일 탐색 모범 사례

이제 사용자가 쉽게 사용할 수 있도록 몇 가지 주요 모바일 탐색 방법을 살펴보겠습니다. 잘못된 모바일 탐색은 앱의 사용성을 높여주기 때문에 고객의 손실을 초래할 수 있습니다. 다른 것들을 찾기가 쉬워지고 디자인 팀의 결과를 최대한 활용할 수 있습니다. 따라서 앱의 사용성을 더 높이거나 낮출 수 있는 모바일 탐색의 모범 사례를 살펴보는 것이 중요합니다. 상위 4개 모바일 탐색 모범 사례에 대한 간략한 목록은 다음과 같습니다.

1. 탐색은 명확하고 직관적이어야 합니다 .

모바일 장치의 감소된 공간과 증가된 상호 작용 비용으로 인해 모바일 탐색을 가능한 한 명확하고 직관적으로 만드는 것이 중요합니다. 사용성부터 대상 사용자까지 카드 정렬 테스트, 트리 테스트 및 멘탈 모델 수행이 중요합니다. 따라서 간단히 말해서 모바일 탐색은 고객과 협력하는 것이 아니라 고객과 협력해야 합니다.

2. 손가락 및 손 위치 지정

사용자는 주의가 산만하고 실망스러울 수 있으므로 느린 손가락 또는 손 위치 지정에 시간을 낭비하고 싶어하지 않습니다. 따라서 모든 모바일 탐색 앱의 링크와 버튼은 이상적인 손가락 크기와 손 위치를 고려해야 합니다. 디자이너는 모바일 앱에서 이 작지만 강력한 문제를 제거하는 멋진 버튼을 선택할 수 있습니다.

3. 콘텐츠는 읽을 수 있어야 합니다.

콘텐츠는 모바일 앱의 왕으로 남아 있지만 콘텐츠를 최대한 읽기 쉽게 만드는 것이 중요합니다. 사실적인 탐색 시뮬레이션을 제공하는 프로토타이핑 도구를 선택하는 것이 중요해졌습니다. 텍스트 기반과 햄버거 메뉴 아이콘의 최상의 조합이 될 수 있습니다.

4. 어수선함을 피하고 시각적 계층 구조를 존중하십시오.

적을수록 좋습니다. 모바일 탐색의 경우 그렇습니다. 사용자 인터페이스의 미니멀리즘 스타일에 이상적으로 작동하는 모바일 앱에는 혼란이 없어야 합니다. 콘텐츠는 특정 계층 구조에 계속 초점을 맞추고 요소의 근접성을 분석하고 시각적 이점을 위한 충분한 공간을 허용해야 합니다.

모바일 내비게이션 앱을 위한 8가지 UI 구성요소

그렇다면 모바일 내비게이션 앱이 성공하려면 무엇이 필요할까요? 함께 작동하는 다른 구성 요소를 구성하는 것은 모두 사용자 인터페이스에 있습니다. 모바일 탐색 앱을 위한 상위 8개 사용자 인터페이스 구성 요소는 다음과 같습니다.

1. 햄버거 메뉴

빠른 액세스를 위해 모바일 앱 모서리에 편안하게 배치된 세 개의 작은 수평선이 있습니다. 햄버거 메뉴는 사용자에게 더 많은 공간을 제공하기 위해 정교한 탐색을 숨기는 방법입니다. 또한 모든 주요 디자이너는 프로젝트에서 햄버거 메뉴를 한 번 이상 사용했습니다.

2. 하단 탐색

하단 탐색은 기본 및 보조 탐색 링크를 수집하기 위한 필수 표시줄입니다. 엄지손가락을 사용하여 모바일 사용자에게 빠른 탐색을 제공합니다. 다른 방법으로 장치를 잡을 필요가 없고 피로가 줄어듭니다.

3. 상위 탐색

화면 상단에 위치한 탐색 바는 사용자가 양손을 사용하면서 모바일 앱을 최대한 활용할 수 있도록 합니다. 중요한 링크를 사용자에게 빠르게 전달할 수 있습니다.

4. 카드

UI 카드는 효과적인 앱 탐색과 관련하여 최신 트렌드세터입니다. 서로 다른 모양과 크기를 사용하여 서로 다른 정보 조각을 쉽게 집계할 수 있습니다. 또한, 텍스트, 링크, 사진 등을 한 곳에서 쉽게 협업할 수 있습니다.

5. 탭

여기에는 앱의 다른 페이지로 연결되는 여러 옵션 행이 포함됩니다. 탭의 상위 테마는 동일한 컨텍스트 내에서 대체 테마를 전환하는 데 도움이 됩니다. 탭은 탐색 모음과 동일한 범주에 속하지만 기능이 다릅니다.

6. 제스처 기반 탐색

널리 사용되는 UI 구성 요소 중 하나인 제스처 기반 탐색은 효과적인 앱 탐색을 위한 기준을 높게 설정하고 있습니다. 터치, 드래그, 스와이프, 확대/축소 등과 같은 제스처는 동적이고 상호 작용하는 비교할 수 없는 사용자 경험을 제공합니다. 새로운 꿀벌이 제스처만 사용하여 앱을 탐색하는 것이 쉬워집니다.

7. 전체 화면 탐색

전체 화면 세부 정보가 필요한 제품 섹션에 이상적으로 작동합니다. 시각적 계층 구조를 사용하여 신중하게 설계된 "내비게이션 허브"라고 합니다. 자세한 제품 기능을 찾는 사용자에게 즉각적인 도움을 제공합니다.

8. 3D 터치

기술 대기업 Apple이 iPhone 홈 화면에서 직접 옵션을 제공하는 3D 터치를 출시했습니다. 전용 옵션에 대한 옵션 범위를 화면에 표시하는 탐색 바로 가기를 제공합니다. 이 기술로 시장을 선도하는 3D 터치는 이제 설계자가 앱 탐색에 포함할 수 있도록 하는 여러 스마트 장치에 사용됩니다. 또한 좋은 미리보기 방법을 제공합니다.

탐색 전환이란 무엇입니까?

탐색 전환은 홈 화면에서 세부 화면으로 이동하는 것처럼 서로 다른 화면 사이를 이동하는 과정입니다.

탐색 전환은 모션을 사용하여 앱의 서로 다른 두 화면 사이에서 사용자를 안내합니다. 움직임을 사용하여 요소 간의 관계를 나타내고 사용자의 기본 설정을 앱 계층 구조의 표현으로 지정합니다. 계층적 전환은 사용자가 앱의 계층 구조에서 한 수준 위 또는 아래로 이동하는 데 도움이 됩니다. 피어 전환은 사용자가 동일한 계층의 화면 사이를 이동하는 데 도움이 됩니다. 이 두 가지 유형의 전환을 하나씩 자세히 살펴보겠습니다.

1. 계층적 전환

사용자가 하나의 앱에서 위, 아래 등으로 이동할 수 있도록 도와줍니다. 여기에서 화면은 부모 및 자식 관계와 같은 인접 수준을 갖습니다. 포함된 자식 요소는 그 자리에서 더 확장되고 전환 패턴을 변환하는 부모 화면에서 들어옵니다. 이 모션은 부모-자식 간의 관계를 강화하고 자식 화면에 초점을 맞춥니다.

2. 동료 전환

형제 전환과 최상위 피어 전환을 포함한 두 가지 유형이 있습니다. 이 두 가지를 하나씩 이해합시다.

형제 전환: 이 전환에서 화면은 동일한 부모를 공유하여 두 화면 간의 관계를 강화합니다. 피어 화면은 한쪽에서 미끄러지는 반면 형제 화면은 반대 방향으로 화면 밖으로 이동합니다.

최상위 전환: 이 전환에서 대상은 주요 작업으로 그룹화되며 페이드 스루 전환을 사용하여 발생합니다.

안드로이드 내비게이션

안드로이드 탐색의 원리:

• 시작점과 끝점 고정
• 탐색 상태는 대상 스택으로 표시됩니다.
• 위로 버튼을 사용하면 앱이 종료되지 않습니다.
• 딥링킹은 물리적 탐색을 에뮬레이트하는 데 사용되는 기술입니다.

iOS 탐색

1. 계층적 탐색

2. 평면 탐색

3. 콘텐츠 중심 또는 경험 중심 탐색

Apple iOS 휴먼 인터페이스 지침:

• 항상 명확한 경로가 있는지 확인하십시오.
• 콘텐츠에 빠르고 쉽게 액세스할 수 있는 정보 구조를 만듭니다.
• 유동성을 얻으려면 터치 동작을 사용하십시오.
• 일반적인 탐색 요소를 사용하십시오.
• 탐색 모음을 사용하여 데이터 계층 구조를 탐색합니다.
• 탭 표시줄을 사용하여 피어 콘텐츠 또는 기능 범주를 표시합니다.
• 탭 막대 대신 iPad에서 분할 보기를 활용합니다.
• 동일한 유형의 자료로 여러 페이지가 있는 경우 페이지 제어를 사용하십시오.

10가지 훌륭한 모바일 탐색 예

빠른 예제를 통해 앱 탐색 구현을 쉽게 이해할 수 있습니다. 상위 10개 모바일 탐색 예제의 빠른 목록은 다음과 같습니다.

1. 페이스북

효과적인 모바일 내비게이션을 사용하는 가장 인기 있는 앱 중 하나입니다. 하단 탐색 모음, 상단 탐색 모음, 햄버거 메뉴 등 다양한 모바일 탐색 패턴을 결합했습니다. 회사의 기술 팀은 앱을 압도적으로 만들지 않고 다양한 탐색 패턴을 사용할 수 있도록 보장했습니다. 지속적으로 사용 가능한 버튼은 Facebook 일관성의 비밀인 5가지 다른 대상을 사용합니다.

2. 애플의 3D 터치

업계에서 3D 터치를 발명한 인기 앱입니다. 완전히 새로운 범위의 바로 가기를 만들어 다양한 사용자에게 뛰어난 사용성을 제공했습니다. 앱 탐색을 더 잘 이해할 수 있도록 다양한 사용자에게 다양한 탐색 옵션을 제공합니다.

3. 스포티파이

흥미롭게도 매력적인 사용자 인터페이스 앱 중 하나인 널리 사용되는 음악 스트리밍 비즈니스 앱 중 하나입니다. 앱 콘텐츠 전체에서 콘텐츠를 검색할 수 있는 동적 방법을 제공합니다. 사용자 인터페이스는 사용자가 다양한 기능을 최대한 활용하도록 장려했습니다. 하단 탐색 모음은 주요 앱 탐색 기능으로 앱을 중앙 집중화합니다.

4. 우버

최고 등급의 택시 모바일 애플리케이션 중 하나로 이상적으로 평가되는 Uber는 효과적이고 간단한 사용자 인터페이스 중 하나를 보유하고 있습니다. 또한 Uber Eats 및 Uber 택시 서비스 중에서 선택할 수 있는 옵션은 앱을 사용하여 쉽게 액세스할 수 있습니다.

5. 넷플릭스

독특한 앱 탐색 기능을 갖춘 가장 많이 사용되는 엔터테인먼트 앱 중 하나입니다. 사용자 인터페이스를 통해 고객은 앱 및 데스크톱 사용에 이상적인 다양한 미디어 콘텐츠를 스크롤할 수 있습니다. 말할 필요도 없이 고객은 빠른 탐색 버튼으로 콘텐츠를 탐색할 수 있습니다.

6. 틴더

온라인 데이트에 선호되는 앱 중 하나인 Tinder는 일상적인 사용을 위한 제스처 기반 탐색 기능을 제공하는 앱 탐색의 선도적인 예입니다. 고전적인 왼쪽 또는 오른쪽 스와이프 패턴은 사용자를 격려하고 즐겁게 하며 활동적으로 유지합니다. Tinder는 현대 기술 산업에서 가장 찬사를 받는 동적 앱 중 하나입니다.

7. 듀오링고

언어 학습 앱의 선두주자인 Duolingo는 다양한 언어 학습을 제공합니다. 다채로운 원형 아이콘과 설명 대시보드를 통해 모든 학습 과정 옵션에 빠르게 액세스할 수 있습니다.

8. 민트라

합리적인 가격에 양질의 쇼핑을 할 수 있는 최고의 온라인 쇼핑 앱 중 하나입니다. 사용하기 쉬운 탐색 보드를 사용하면 새로운 꿀벌이 선택에 압도되지 않고 완벽한 제품을 쉽게 찾을 수 있습니다. Myntra는 또한 하나 이상의 앱 탐색 패턴을 사용하고 있습니다.

9. 트렐로

이 웹사이트는 화면 공간을 최적화하는 창의적으로 디자인된 길쭉한 직사각형 카드로 정사각형 카드를 넘어섰습니다. 복잡한 워크플로를 단순화하고 사용자 인터페이스를 깔끔하게 유지하며 사용자가 앱 전체를 쉽게 탐색할 수 있도록 합니다.

10. 트위터

다양한 탐색 패턴을 다루는 하단 표시줄을 포함하는 둘 이상의 단일 탐색 패턴을 사용합니다. 주요 소셜 미디어 앱 중 하나인 Twitter는 트렌드 앱 탐색에 중점을 둡니다.

결론

이상으로

스마트폰 사용자의 61%는 좋아하는 앱이 사용하기 쉽고 탐색하기 쉽다는 데 동의합니다.

ThinkWithGoogle

따라서 앱 탐색이 시급합니다. 모든 것은 탐색, 다양한 유형, 모바일 탐색 등을 이해하는 것으로 시작됩니다. 모바일 탐색은 모범 사례와 모든 모바일 탐색 앱에서 꼭 있어야 하는 상위 8가지 구성 요소를 사용하여 쉽게 구현할 수 있습니다.

다음 라인은 원활한 사용자 경험의 핵심인 탐색 전환입니다. 모바일 탐색 예제의 상위 10개 예제를 통해 전용 앱 탐색의 결과를 쉽게 이해할 수 있습니다. 따라서 이 가이드를 사용하면 모든 기술 담당자가 빠르고 효과적인 앱 탐색을 준비할 수 있습니다.

앱 개발을 위해 염두에 두고 있는 프로젝트가 있으면 전문 앱 개발 팀에 연락하여 도움을 받으십시오.

앱 탐색에 대해 자주 묻는 질문

• 이미지 및 동영상: material.io, justinmind