Creative Dialogue

June 8, 2017 /디자인 /

모바일 내비게이션의 기본 패턴

사용자가 내비게이션 앱을 처음 사용할 때 사용자는 앱의 어느 지점에서나 원하는 기능을 사용할 수 있어야 합니다. 탁월한 내비게이션이라면 사용자가 원하는 위치로 정확히 안내해야 합니다. 그러나 화면이 작다는 한계가 있고 화려한 기능보다는 콘텐츠를 우선시해야 한다는 점 때문에 탁월한 내비게이션을 구현하는 것이 결코 쉽지가 않습니다.

이러한 문제를 해결하기 위해 다양한 내비게이션 패턴이 고안되었지만 여러 사용성 문제로 인해 여전히 어려움을 겪고 있습니다. 이 게시물에서는 모바일 앱의 5가지 기본 내비게이션 패턴을 살펴보고 각 패턴의 장단점을 살펴보겠습니다.

햄버거 메뉴

모바일 화면은 공간이 제한적이기 때문에 필요한 요소를 간결하게 잘 배치해야 합니다. 햄버거 메뉴(또는 사이드 드로어)는 화면 공간을 절약하기 위한 요소 중 가장 일반적으로 사용되는 모바일 내비게이션 패턴 중 하나입니다. 드로어 패널을 사용하면 화면 왼쪽 너머로 내비게이션을 숨기고 사용자가 필요할 때만 표시할 수 있습니다.

기본 상태에서는 햄버거 메뉴와 메뉴 속 모든 콘텐츠가 숨겨진 채로 유지됩니다.

 

주요 특징

햄버거 메뉴는 눈에 잘 띄지 않는다는 단점으로 인해 내비게이션의 메인 메뉴로 권장되지 않습니다. 그러나 이 패턴이 보조 내비게이션 옵션으로는 적합할 수 있습니다. 보조 내비게이션 옵션은 특정 상황에 한해 사용자에게 중요한 대상 또는 기능을 제공합니다. 또한 보조 역할을 하므로 사용자가 필요할 때 유틸리티를 신속하게 찾을 수 있을 정도로만 눈에 덜 띄는 위치로 배치할 수 있습니다. 햄버거 아이콘 뒤에 이러한 옵션을 숨김으로써 디자이너는 너무 많은 옵션으로 인한 사용자의 부담감을 방지할 수 있습니다.

우버(Uber)는 이러한 목적으로 햄버거 아이콘을 사용합니다. 모바일 차량 예약 서비스를 제공하는 우버 앱의 메인 화면에는 차량 요청과 관련한 필수 요소가 집중적으로 배치되어 있으므로 “결제”, “내역” 또는 “설정”과 같은 보조 옵션을 표시할 필요가 없습니다. 그러한 옵션은 자주 사용하지 않으므로 햄버거 아이콘 뒤에 숨겨 사용자에게 깔끔한 화면을 제공합니다.

장점

  • 다수의 내비게이션 옵션
  • 내비게이션 메뉴의 주요 이점은 작은 공간에 많은 내비게이션 옵션을 포함할 수 있다는 것입니다.
  • 깔끔한 디자인
  • 햄버거 메뉴를 사용하면 디자이너는 옵션을 메인 화면에서 사이드 메뉴로 옮길 수 있으므로 화면 공간을 확보할 수 있습니다. 사용자가 메인 콘텐츠에 집중하기를 원할 때 이 패턴은 특히 유용할 수 있습니다.

단점

  • 눈에 잘 띄지 않음
  • 가시성이 좋아야 사용성이 높아집니다. 내비게이션 메뉴가 숨겨져 있으면 사용자가 자주 이용하지 않을 가능성이 있습니다. 이 내비게이션 유형은 점차 표준화되어 많은 모바일 사용자가 흔히 접할 수 있게 되었지만 여전히 많은 이들이 쉽게 사용하고 있지 않습니다.
  • 플랫폼 내비게이션 규칙과 충돌
  • 햄버거 메뉴(머티리얼 디자인(Material Design, 구글의 디자인 가이드)에서 “내비게이션 드로어“라고도 칭함)는 안드로이드에서 거의 표준처럼 자리 잡았지만, iOS에서는 이를 구현할 경우 기본 내비게이션 요소와 충돌하므로 내비게이션 막대에 과부하가 발생할 수 있습니다.

이미지 출처: lmjabreu

  • 햄버거 아이콘에는 컨텍스트가 반영되지 않습니다. 즉, 햄버거 메뉴를 통해 사용자가 앱에서 현재 사용 중인 부분을 한눈에 알 수 없습니다. 현재 사용하고 있는 부분에 대한 정보를 확인하려면 다시 햄버거 아이콘을 클릭해야만 하므로 사용자가 다소 불편을 겪을 수 있습니다.

가시성이 좋아야 사용성이 높아집니다. 햄버거 메뉴는 사용자가 앱에서 현재 사용 중인 부분을 가립니다.

  • 원하는 화면으로 이동하려면 추가 동작이 필요합니다. 특정 페이지에 도달하려면 적어도 두 번은 눌러야 합니다. (메뉴 아이콘을 한 번 누른 다음 또 다른 옵션을 눌러야 함)

  • 내비게이션 옵션의 우선순위를 정하십시오. 기능이 많은 복잡한 내비게이션의 경우, 메뉴를 숨기면 그만큼 사용하기가 어려워집니다. 많은 실제 사례에서 메뉴 옵션을 잘 보이게 노출할수록 사용자 참여도와 만족도가 높아진 것으로 나타났습니다. 그렇다면 모바일 디바이스에서 가시성을 위해 중요한 요소가 무엇일까요? 이 질문에 대한 답은 사용자에게 중요한 것이 무엇인지를 파악하면 쉽게 알 수 있습니다.

레드부스(Redbooth)가 햄버거 메뉴에서 하단의 탭 막대로 변경한 결과 사용자 이용 시간이 증가했습니다. (이미지 출처: 루크 로블르스키(LukeW))

  • 우선순위가 높은 내비게이션 옵션의 수가 많지 않은 경우 탭 또는 탭 막대를 사용하는 것을 고려해 보십시오.

유튜브(YouTube)에서는 한 번만 누르면 핵심적인 기능의 주요 요소가 제공되므로 여러 기능 사이를 신속하게 전환할 수 있습니다. (출처: 루크 로블르스키(Luke Wroblewski))

  • 정보 아키텍처를 검토하십시오. 우수한 앱일수록 사용자의 집중력이 높아집니다. 기능이 많은 복잡한 앱의 경우 기능을 크게 두 가지(또는 그 이상)로 분리하여 간단한 앱 여러 개로 나누는 것이 좋습니다. 페이스북(Facebook)은 복잡성 문제를 해결하기 위해 메신저(Messenger) 앱을 출시했습니다. 기능을 줄이면 메뉴 옵션의 수가 줄어들고 햄버거 메뉴를 굳이 사용할 필요가 없어집니다.

탭 막대

탭 막대 패턴은 데스크탑 디자인에서 기인했습니다. 탭 막대에는 비교적 적은 수의 요소가 포함됩니다. 각 요소는 유사한 중요성을 지니며 앱 어디에서나 바로 액세스 가능해야 합니다.

 

탭 막대는 내비게이션을 숨길 필요 없이 바로 액세스할 수 있고 관련 아이콘에 대한 정보를 제공합니다.

 

주요 특징

탭 방식 내비게이션은 최상위 내비게이션 옵션의 수가 비교적 적은(최대 5개) 앱에 이상적입니다. 탭 막대는 한 번만 누르면 핵심적인 기능의 주요 요소가 제공되므로 여러 기능 사이를 신속하게 전환할 수 있습니다.

트위터(Twitter)에서는 탭 막대를 사용하면 해당 항목과 관련된 화면으로 바로 이동할 수 있습니다.

 

장점

탭 막대는 사용자가 앱에서 현재 사용 중인 부분을 손쉽게 알 수 있도록 합니다. 적절한 시각적 요소(아이콘, 레이블 및 색상)를 통해 사용자는 현재 사용 중인 부분을 한눈에 파악할 수 있습니다.

이미지 출처: Ramotion

탭 막대는 고정되어 있으므로 내비게이션이 사용자가 보고 있는 페이지와 상관없이 계속 표시됩니다. 사용자는 앱의 모든 메인 뷰를 명확하게 보고 한 번의 클릭으로 액세스할 수 있습니다.

또한 엄지손가락이 쉽게 닿을 수 있는 위치에 있으므로 디바이스를 한 손에 들고 있는 경우에도 하단 내비게이션을 손쉽게 이용할 수 있습니다.

UX 매거진(UXmag)에 따르면 엄지손가락이 닿는 영역에 내비게이션을 배치하는 것이 이상적인 것으로 나타났습니다.

단점

내비게이션 옵션의 수가 제한적입니다. 앱에 5개 이상의 옵션이 있는 경우 탭 또는 내비게이션 막대에 이를 모두 추가하여 터치하기 적당한 크기로 배치하는 것이 어려울 것입니다.

탭 막대에 5개 이상의 옵션을 사용하지 마십시오.

iOS와 안드로이드에 있는 탭 막대 옵션의 위치와 로직은 서로 다릅니다. 두 플랫폼의 경우 UI와 사용성에 대한 규칙과 지침이 서로 다르므로 각 플랫폼용 탭 막대를 디자인할 때는 이 점을 고려해야 합니다. 탭은 안드로이드의 경우 화면 상단에 표시되고 iOS의 경우 화면 하단에 표시됩니다. 안드로이드의 경우 탭이 화면 상단에 표시되는 이유는 하드웨어 하단에 컨트롤 막대가 이미 있기 때문일 가능성이 큽니다. 이 규칙이 해당되지 않는 모바일 웹 사이트의 경우에는 탐색에 사용되는 디바이스가 안드로이드이건 iOS이건 상관없이 일관성을 유지해야 합니다.

적절한 위치와 로직을 설정하면 각 플랫폼의 다른 앱과도 일관된 경험을 유지하고 동작과 보기 전환 사이에서 일어날 수 있는 혼동을 방지할 수 있습니다. 이미지 출처: 구글(Google)

  • 손쉽게 누르거나 클릭할 수 있을 정도로 터치 범위를 크게 만드십시오. 각 하단 내비게이션 동작 범위의 너비를 계산하려면 보기의 너비 값을 동작의 수로 나눕니다. 또는 모든 하단 내비게이션 동작을 가장 큰 동작의 너비로 만듭니다.

대부분 사용자의 경우 터치 범위가 10x10mm일 때 편안하고 안정적으로 누를 수 있습니다. 이미지 출처: UXmag

  • 내비게이션 옵션의 순서를 정하십시오. 사용자는 탭 막대에서 원하는 특정 순서가 있습니다. 첫 번째 탭 항목은 앱의 홈 화면이어야 하며 탭의 순서는 사용 흐름의 우선순위 또는 논리적 순서를 반영해야 합니다. 탭 중 하나는 항상 활성화되어 시각적으로 강조되어야 합니다.
  • 아이콘의 사용성을 테스트하십시오. 아래 예와 같이 앱 디자이너가 의미를 파악하기 어려운 아이콘을 사용할 경우 사용자가 해당 기능에 대한 정보를 알 수 없습니다. 이러한 상황이 발생하지 않도록 하려면 5초 규칙을 사용하여 아이콘을 테스트하십시오. 아이콘의 기능이 무엇인지 고민하는 데 5초 이상 걸린다면 해당 아이콘은 그 의미를 효과적으로 전달할 수 없는 것입니다.

Bloom.fm 앱의 탭 막대에는 추상적인 아이콘으로 채워져 있습니다.

  • 아이콘이 5초 규칙을 벗어나면(즉, 의미가 명확하지 않은 경우) 텍스트 레이블이 필요합니다. 오프라인 환경에서도 특정 상징을 표시하기 위해 아이콘만 사용하는 것은 거의 드문 일입니다. 대부분의 아이콘은 사용에 관한 표준화된 의미를 갖고 있지 않기 때문에 의미를 명확하게 전달하기 위해서는 텍스트 레이블이 필요합니다. 이를 통해 사용자는 아이콘을 누르기 전에 해당 기능을 명확하게 파악할 수 있게 됩니다.

텍스트 레이블을 사용하여 하단 내비게이션 아이콘에 대해 짧고 유의미한 정의를 제공합니다.

 

우선순위+” 패턴

우선순위+” 패턴은 가장 중요한 내비게이션 요소를 노출하고 “더 보기” 버튼 뒤에 비교적 덜 중요한 항목을 숨기는 방식으로 구성되는 내비게이션을 설명하기 위해 마이클 샤나글(Michael Scharnagl)이 만들었습니다.

 

주요 특징

이 패턴은 콘텐츠가 많은 앱, 다양한 섹션이나 페이지가 많은 웹 사이트(예: 뉴스 웹 사이트 또는 대형 쇼핑몰)에 적합한 솔루션입니다. 가디언(The Guardian)은 섹션 내비게이션에 “우선순위+” 패턴을 사용합니다. 사용자가 “모두(all)” 버튼을 누르면 덜 중요한 항목들이 표시됩니다.

가디언은 섹션 내비게이션에 “우선순위+” 패턴을 활용합니다. 이미지 출처: bradfrost

 

장점

  • 이 패턴은 내비게이션 옵션의 우선순위를 정하여 가장 빈번하게 이용되는 내비게이션 옵션을 표시합니다.
  • 이용 가능한 화면 공간을 효율적으로 사용합니다. 공간이 커지면 그만큼 노출되는 내비게이션 옵션의 수가 늘어나므로 가시성과 사용자 참여도를 높일 수 있습니다.
  • 이 메뉴는 적응형으로 고안되었습니다. 패턴을 변형하지 않고도 화면에 맞는 최적의 크기로 조정할 수 있습니다.

단점

  • 중요한 내비게이션 옵션을 가릴 가능성이 있습니다. “우선순위+” 패턴을 사용할 경우 디자이너는 내비게이션 항목의 상대적 중요성을 고려해야 합니다. 디자이너가 선정한 우선순위가 높은 항목은 실제로 사용자가 가장 많이 찾는 항목이 아닐 수도 있습니다.

 

플로팅 액션 버튼

UI 위에 둥둥 떠 있는 원형 아이콘으로 된 플로팅 액션 버튼을 가리키면 색상이 바뀌고 이를 선택하면 추가 메뉴가 생깁니다. 모든 안드로이드 사용자에게는 익숙한 요소이며 머티리얼 디자인의 특징적인 요소이기도 합니다. 앱 인터페이스 위에 떠 있음으로써 보다 원활한 사용자 동작을 제공한다고 구글은 설명합니다.

플로팅 액션 버튼

 

주요 특징

플로팅 액션 버튼의 디자인은 사용자가 대부분 특정 동작을 수행할 것이라는 전제를 바탕으로 합니다. 버튼 하나로 앱의 핵심적인 기능을 강조함으로써 동작을 통해 사용될 해당 기능의 의미를 부각시킵니다. 예를 들어 음악 앱에서 ‘재생’ 버튼을 플로팅 액션 버튼으로 디자인할 수 있습니다.

앱 사용을 위한 특징적인 동작에 플로팅 액션 버튼을 사용하십시오. 이 경우 재생 버튼을 통해 사용자에게 음악 앱의 정체성을 각인시킵니다.

이 버튼을 통해 사용자의 다음 동작을 자연스럽게 파악할 수 있습니다. 구글에서 실시한 사용자 리서치에 따르면 사용자가 이 버튼을 사용의 방향성을 찾는 툴로 받아들인다고 합니다. 대부분의 사용자는 다운받은 앱을 처음 실행할 때처럼 익숙하지 않은 화면을 접하는 경우 앱을 탐색하기 위해 플로팅 액션 버튼을 사용할 것입니다. 따라서 디자이너는 사용자가 이용했으면 하는 가장 중요한 동작의 우선순위를 정하게 됩니다.

 

장점

  • 중요한 동작의 이정표 역할을 하므로, 디자이너의 입장에서는 사용자가 이용했으면 하는 가장 중요한 동작의 우선순위를 정하기 위한 좋은 수단이 됩니다.
  • 화면 공간을 작게 차지하며, 탭 막대와 비교해볼 때 전체 행을 차지하지 않습니다.
  • 이 버튼의 경우처럼 시각적으로 뛰어난 UI 요소라고 해서 무조건 사용성을 개선한다는 보장은 없습니다. 그러나 시각적 요소의 영향을 받은 감정 또한 사용자 경험의 한 부분입니다. 사용자가 시각적으로 매료되어 만족스럽게 앱을 사용하면 긍정적인 사용자 경험(UX) 효과를 만들어 낼 것입니다.
  • 사용 효과가 향상됩니다. 스티브 존스(Steve Jones)의 연구에 따르면 사용자가 처음 플로팅 액션 버튼을 이용할 때 다소 불편함을 느끼는 것으로 나타났습니다. 그러나 사용자가 단 한 번이라도 이 요소를 사용하여 작업을 성공적으로 완료하게 되면 기존의 액션 버튼보다 훨씬 효율적으로 이용할 수 있습니다.

단점

  • 플로팅 액션 버튼은 사용자가 콘텐츠를 이용할 때 방해가 될 수 있습니다. 이 버튼은 컬러풀하고 양각 방식으로 격자의 틀에 벗어난 형태로 눈에 띄게 디자인됩니다. 사용자의 주의를 끌기 위한 용도로 디자인되었지만 때로는 이 버튼의 존재 자체가 주요 콘텐츠 이용을 방해할 수 있습니다.

빨간색 버튼이 배경에 비해 눈에 확연히 띄며 사용자의 시선을 끕니다. 이미지 출처: 폴 판 오이에(Paul van Oijen)

  • 콘텐츠를 가릴 수 있습니다. 구글의 지메일(Gmail) 앱을 예로 들어보겠습니다. 아래 예시를 보면 플로팅 액션 버튼이 마지막 이메일 항목에서 “즐겨찾기”를 표시하는 별표와 수신 시간 정보를 가리고 있습니다. 사용자가 이 가려진 정보를 보려면 매번 스크롤해야 합니다.

  • 아이콘만 있는 내비게이션으로 정확한 의미 전달이 어려울 수 있습니다. 플로팅 액션 버튼은 아이콘이 포함된 원형으로 구성된, 텍스트 레이블 없이 아이콘만 있는 버튼입니다. 이때 문제는 아이콘의 해석이 다양할 수 있으므로 정확한 의미를 파악하기가 어렵다는 것입니다. 아래 예시에 있는 연필과 같은 간단한 동작 아이콘도 앱마다 다른 의미를 내포할 수 있습니다.

동일한 아이콘이지만 다른 의미를 지닙니다. “지메일이나 인박스(Inbox) 앱에서는 ‘작성’을 의미하지만 스냅시드(Snapseed) 앱에서는 ‘편집’을 의미합니다. 이 경우 컨텍스트를 통해 동작을 이해할 수 있습니다.

  • 시각적으로 두드려져 보여 사용에 불편함을 초래할 수 있으므로 화면당 하나만 사용하십시오.

한 화면에 여러 개의 플로팅 액션 버튼을 한 번에 표시해서는 안 됩니다. 이는 시각적 혼란을 방지하기 위해서입니다.

  • 모든 화면에 중요한 동작이 있는 것은 아니므로 화면마다 하나씩 만들 필요는 없습니다.
  • 플로팅 액션 버튼은 주로 긍정적인 동작에 사용됩니다. 이 버튼에는 특징적인 기능만이 포함되므로 만들기, 즐겨찾기, 탐색, 검색 등과 같은 긍정적인 동작에 사용됩니다. 그러므로 삭제와 같은 소거식 동작에는 사용하지 마십시오.

  • 플로팅 액션 버튼은 일련의 구체적인 동작으로 대체될 수 있습니다. 이는 우선순위의 상위권에 속하지는 않지만 여전히 중요한 세트를 표시하는 데 유용할 것입니다. 에버노트(Evernote)와 같은 앱은 가장 중요한 사용자 동작에 플로팅 액션 버튼을 사용하여 컨트롤을 간소화합니다.

이미지 출처: 애니쉬 챈드런(Anish Chandran)

  • 화면 간의 전환 기능도 향상시킬 수 있습니다. 플로팅 액션 버튼의 시각적 특징은 둥근 모양으로만 한정되지 않습니다. 사용자가 화면 간에 손쉽게 이동할 수 있도록 하는 변형 속성을 추가할 수 있으며 확장, 전환 및 반응을 적용할 수 있습니다.

이미지 출처: 애니쉬 챈드런

 

전체 화면 내비게이션

이 게시물에서 설명한 다른 패턴을 사용하는 경우 내비게이션 시스템이 차지하는 공간을 최소화하고자 하지만 전체 화면 패턴은 정반대의 방식을 활용합니다. 이 내비게이션 방식은 일반적으로 홈 페이지를 내비게이션 전용으로 사용할 때 적합합니다. 사용자는 위아래로 스크롤하면서 점차적으로 누르거나 스와이프하여 추가 메뉴 옵션을 표시할 수 있습니다.

이미지 출처: 스매싱 매거진(Smashing Magazine)

 

주요 특징

이 패턴은 작업 기반이나 방향 기반의 웹 사이트 및 앱에 효과적입니다. 사용자가 단일 세션에서 내비게이션 계층 구조의 한 지점에만 머무르는 경향이 있는 경우에 특히 유용합니다. 사용자를 광범위한 개요 페이지에서 세부 정보 페이지로 이동하게 함으로써 사용자가 원하는 정보를 빠르게 얻고 개별 섹션의 콘텐츠에 집중할 수 있습니다.

옐프(Yelp)의 전체 화면 내비게이션 옵션

장점

  • 전체 화면 내비게이션 패턴은 단순함과 일관성이 필요한 앱에 가장 적합합니다. 사용자의 부담을 줄이면서 대량의 정보를 일관된 방식으로 구성하고 정보를 표시할 수 있습니다. 사용자가 이동할 위치를 결정하면 전체 화면 공간을 콘텐츠로 채울 수 있습니다.

단점

  • 많은 정보를 표시하는 만큼 공간을 많이 차지합니다. 내비게이션 옵션 외의 콘텐츠를 표시할 수 없습니다.

  • 햄버거 메뉴를 사용하여 보조 기능을 숨기고 주요 경험을 우선시하십시오.

이미지 출처: 드리블(Dribbble) / 해당 앱: 쿠클리(Cookly)

 

제스처 기반의 내비게이션

2007년 6월 29일에 모바일 업계에 큰 변화가 있었습니다. 애플(Apple)이 사상 처음으로 완전한 터치스크린 스마트폰을 출시한 순간부터 터치스크린의 상호작용은 모바일 디바이스의 가장 중요한 요소가 되었습니다.

이미지 출처: 애런 웨이드(Aaron Wade)

 

제스처는 디자이너들 사이에서 급속도로 널리 활용되었으며, 다양한 제스처 컨트롤이 포함된 수많은 앱이 디자인되었습니다.

제스처 기반의 일정 관리 앱, 클리어(Clear)

 

오늘날 모바일 앱의 성공은 제스처가 사용자 경험에서 얼마나 잘 구현되는지에 따라 좌우됩니다.

 

주요 특징

이 패턴은 사용자가 특정 콘텐츠의 세부 정보를 손쉽고 직관적으로 탐색하고자 할 때 유용합니다. 사용자는 이 패턴을 통해 내비게이션 메뉴보다 콘텐츠에 더 많은 시간을 할애할 것입니다. 표준 메뉴 대신 컨텍스트 내 제스처를 사용하는 이유는 이것이 훨씬 더 매력적이기 때문입니다. 예를 들어 사용자가 페이지 콘텐츠를 볼 때 카드를 눌러 자세히 살펴볼 수 있습니다.

이러한 유형의 내비게이션을 통해 사용자는 관심 있는 여정을 탐색할 수 있습니다. 표준 메뉴에는 이처럼 매력적인 효과가 수반되지 않습니다. 이미지 출처: Ramotion

 

장점

  • UI의 복잡성을 줄여줍니다. 제스처를 중심으로 앱을 제작하면 미니멀한 인터페이스를 구축할 수 있고 중요한 콘텐츠에 비중을 두면서 화면 공간을 절약할 수 있습니다.
  • UI가 자연스럽습니다. 루크 로블르스키가 9개국 40명의 사용자를 대상으로 삭제, 스크롤 및 확대/축소와 같은 28개의 작업에 대한 제스처를 직접 만들도록 한 연구에 대해 설명합니다. 그는 제스처가 다양한 문화 및 경험 속에서 유사한 경향을 보이는 것을 발견했습니다. 예를 들어 “삭제”에 대한 제스처를 만들 때 대부분의 참가자들은 국적에 상관없이 개체를 화면 밖으로 드래그했습니다.
  • 제스처는 특정 제품만의 차별화된 기능이 될 수 있습니다. 틴더(Tinder)는 제스처 기반의 내비게이션 개념을 널리 대중화하였으며 기본적으로 스와이프 제스처를 통해 제품의 정체성을 확립했습니다.

단점

제스처 기반의 내비게이션은 눈으로 볼 수 있는 것이 아닙니다. UI를 디자인할 때 중요한 규칙 하나는 바로 가시성입니다. 수행 가능한 모든 동작을 메뉴로 표시함으로써 사용자의 눈에 쉽게 띌 수 있게 해야 합니다. UI를 시각적으로 표시하지 않으면 깔끔하고 매력적일 수는 있지만 많은 사용성 문제가 발생할 수도 있습니다.

사용자의 수고가 늘어납니다. 대부분의 제스처는 쉽고 자연스럽게 사용 방법을 익히거나 기억할 수 없습니다. 제스처 기반의 내비게이션을 디자인하는 경우 UI를 심플하게 만들어야 애플리케이션의 사용성이 높아집니다. 적절한 시각적 힌트와 단서가 없으면 사용자가 앱을 이용할 때 혼란을 겪을 수 있습니다.

  • 인터페이스 사용 관련 방법을 새롭게 제공하지 않아도 되도록 사용자에게 최적화된 경험을 제작하십시오. 우수한 제스처 기반의 내비게이션을 디자인하려면 먼저 모바일 환경에서 다뤄지는 제스처의 현 상황을 살펴보십시오. 예를 들어 이메일 앱을 디자인하는 경우 이메일 제스처에 스와이프 기능을 활용할 수 있습니다. 해당 제스처가 많은 사용자에게 이미 익숙할 가능성이 크기 때문입니다.

  • 인터페이스의 사용 방법을 안내할 때는 사용자의 컨텍스트에 맞는 학습법을 제공하십시오. 내용이 길고 정적이며 직설적인 튜토리얼은 피하고 사용자의 현재 활동과 관련된 정보만을 간결하게 포함하는 것이 좋습니다.

푸딩 몬스터(Pudding Monsters)는 애니메이션에 손을 등장시켜 사용자에게 새로운 시나리오를 소개합니다.

 

3D 터치

3D 터치는 애플의 아이폰(iPhone) 6S 및 6S 플러스 모델에서 처음 소개된 압력을 활용한 터치 메커니즘입니다. 이를 통해 몇 가지 새로운 상호작용이 가능해졌는데, 애플은 이를 두 가지 주요 범주로 정의합니다.

  • 빠른 동작
  • 3D 터치를 통해 사용자는 특정 앱을 누르지 않고도 홈 화면에서 바로 해당 앱의 특정 동작을 수행할 수 있으므로 iOS 홈 화면은 앱을 단순히 나열한 것 이상의 기능을 갖추게 됩니다. 앱 아이콘을 길게 누르면 빠른 동작 목록이 표시됩니다. 예를 들어 카메라 아이콘을 길게 눌러 바로 셀카 찍기로 이동하거나 메시지 앱에서 자주 연락을 주고받는 사람과의 대화 창으로 즉시 이동할 수 있습니다.

카메라, 메시지 및 지도 앱에서 3D 터치를 통해 빠른 동작 바로 가기

  • 픽 앤 팝(Peek and Pop)
  • 앱 내에서 전체 콘텐츠를 보기 전에 3D 터치를 통해 콘텐츠를 미리 보고 관련 동작을 수행할 수 있습니다. 목록 내 메일 메시지와 같은 콘텐츠를 길게 누르면 해당 콘텐츠의 미리 보기가 나타납니다.

3D 터치로 누르면 즉시 이메일의 미리 보기가 나타나고 손가락을 떼자마자 사라집니다. 이미지 출처: 기즈모도(Gizmodo)

 

주요 특징

3D 터치를 통해 가장 자주 이용하는 동작을 매우 쉽게 수행할 수 있습니다. 3D 터치를 데스크탑 컴퓨터의 키보드 단축키처럼 생각하면 됩니다. 따라서 더욱 빠르게 반복 작업이 가능합니다. 3D 터치를 사용하면 몇 단계를 건너뛰거나 불필요한 단계를 생략할 수 있습니다.

홈 화면에서 바로 카메라 앱의 셀카 찍기, 비디오 녹화 또는 기본 사진 찍기와 같은 일반적인 기능을 이용할 수 있습니다. 이미지 출처: 기즈모도

그러나 키보드 단축키의 경우와 마찬가지로 3D 터치를 통해서만 사용 가능한 기능을 만들어서는 안 됩니다. 사용자는 3D 터치 없이도 일반적인 방식으로 앱을 사용할 수 있어야 합니다.

장점

  • 바로 가기 동작인 3D 터치를 사용하면 앱 내에서 여러 단계를 건너뛸 수 있으므로 많은 시간을 절약할 수 있습니다.
  • 3D 터치는 인터페이스를 간소화함으로써 빠르고 간편한 상호작용을 가능하게 합니다. 이를 통해 디자이너와 개발자는 인터페이스를 간단하게 만들고 사용자에게 향상된 기능을 제공할 수 있습니다.

단점

  • 사용자가 빠른 동작이 있는 앱을 기억해야 합니다. 3D 터치는 아직 iOS에서 흔하게 사용되고 있지 않습니다. 일부 앱에만 3D 터치를 적용하고 있는데, 사용자는 때때로 3D 터치가 적용되지 않은 앱에서도 3D 터치 바로 가기를 사용할 수 있기를 기대합니다.

 

혁신적인 내비게이션 패턴

사람들은 화면이 큰 스마트폰을 선호합니다. 크기가 큰 스마트폰은 이제 주변에서 흔히 볼 수 있습니다. 그러나 화면이 클수록 사용성이 떨어지기 쉬우며 사용자 경험을 향상시키기 위해서는 커진 화면에 맞게 디자인(및 특히 내비게이션)을 조정해야 할 필요성이 커집니다.

이미지 출처: 루크 로블르스키

 

이 문제를 해결하기 위해 디자이너는 새로운 내비게이션 솔루션을 모색해야 합니다. 몇 가지 혁신적인 솔루션은 최근 게시된 기사 “하단 내비게이션 인터페이스“에서 확인할 수 있습니다. 그 중 한 가지 해결책은 아다(Ada)라는 건강 관련 앱에서 찾을 수 있습니다. 이 앱의 인터페이스 레이아웃은 햄버거 메뉴가 있는 기본 인터페이스의 미러(mirror) 이미지입니다. 보통 다른 앱에서 상단에 위치하고 있는 모든 요소가 아다 앱에서는 사용자가 편리하게 이용할 수 있도록 하단 영역에 배치되어 있습니다.

iOS용 아다의 시작 화면

 

두 번째 해결책은 한 손으로 탐색 가능한 내비게이션 원칙을 적용하는 통화 앱의 개념입니다. 사용자는 전화를 걸거나 문자 메시지를 전송할 때 한 손만 사용하는 경향이 있으므로 이는 통화 및 문자 메시지 앱에 유용합니다.

이미지 출처: cuberto

 

결론

모든 앱 디자이너는 사용자가 손쉽게 탐색할 수 있는 앱을 구성하는 데 초점을 두어야 합니다. 즉, 신규 사용자를 포함한 모든 앱 사용자가 앱을 탐색하는 방법을 손쉽게 알 수 있어야 합니다. 제품 사용법이 쉬울수록 사용 가능성이 커지므로 이는 앱 디자이너가 간과해서는 안 될 중요한 요소입니다.

원문보기

 

 

 

디자인. 프로토타입. 공유. 모두가 가능한 하나의 올인원 앱 Adobe XD.

웹사이트 및 모바일 앱을 디자인하고  프로토타이핑하고 공유할 수 있는 최초의 올인원 툴인 Experience Design CC(베타)를 사용하면 아이디어 구상에서 프로토타이핑에 이르는 과정을 신속하게 진행할 수 있습니다. 베타 버전을 테스트해 보시고, 여러분의 피드백을 공유해 주십시오.  다운로드 받기 

 

 

 

 

닉 배비치

닉 배비치(Nick Babich)는 개발자로, 기술에 열정적이며 UX에 큰 애착을 가지고 있습니다. 그는 지난 10년 동안 전문 소프트웨어 개발 업계에 몸담았으며 그의 다양한 관심 분야 중 광고, 심리학 및 영화에 조예가 깊습니다.

 

 

 

 

 

디자인

Join the discussion