Navigation과 Modality

이 글은 Human Interface Guideline을 읽고 정리한 글입니다. 

---

# Modality

해당 화면에서 추가적인 작업이 필요한 경우 사용하는 화면 전환 (화면의 흐름과는 무관)

-> Modality는 보통 아래에서 위로 화면이 올라옴.

 

모달리티의 기능

• 사람들이 독립적인 작업이나 콘텐츠와 밀접히 관련된 옵션 세팅에 집중할 수 있도록 도와줌
• 사람들이 중요한 정보를 받을 수 있도록 보장하며, 만약 필요하다면 조치를 취하게 된다

다양한 시스템 정의 모달 경험을 가능하게 하기 위해 iOS는 alert, activity views, share sheets, action sheet를 제공한다.

만약 커스텀 모달 컨텐츠를 보여주려면 다음과 같은 보여주기 방식을 사용할 수 있다.

• Automatic: default presantation style이다. 일반적으로 시트이다.
• Fullscreen: 이전에 보이던 뷰를 덮는다. 해제 버튼이 필요하다.
• Popover: 수평으로 평평한 환경이면 팝오버를 보여주고, 좁은 환경이면 시트를 보여준다.
• Page sheet and form sheet: 이전 뷰를 부분적으로 가린다.
• Current context: 특정한 이전 뷰를 가린다.
• Custom

 

<Modality를 사용할 때 유의할 점>

• Use modality when it makes sense (필요할 때 Modality를 사용해라)

현재와 다른 작업을 선택하거나 수행하는데 다른 사람들의 주의를 집중시키는 것이 중요한 경우만 모달 사용
모달 경험은 사람들을 현재 상황에서 벗어나게 하고 해제할 Action이 필요하므로 명확한 이점이 있을 때만 사용하는 것이 중요하다.

• Reserve alerts for delivering essential — and ideally actionable — information

일반적으로 경고는 뭔가 잘못된 경우 나타난다. 왜냐하면 경고는 현재 사용 경험을 해치고, 취소를 클릭해야 하기 때문이다. 사람들이 이를 받아들일 수 있도록 하는 것이 중요하다.

• In general, keep modal tasks simple, short, and narrowly focused

만약 모달 task가 너무 복잡하면 사람들이 모달에 들어가면서 현재 하고 있던 작업을 놓칠 수 있다.
앱 내에서 앱처럼 느낄 모달을 만들지 않도록 하자. 특히, 모달 작업 내에서 뷰의 계층구조를 표시하는 것을 주의하라. 사람들은 원래의 작업으로 돌아가는 방법을 잊어버릴 수도 있다.

작업 완료 이외의 다른 목적으로 완료 버튼을 사용하지 않도록 하자.

• Consider using a fullscreen modal style for immersive content or a complex task

복잡한 작업이나 몰입하는 컨텐츠를 해야하는 경우 fullscreen modal style을 고려하자.

비디오, 사진 또는 카메라 보기를 표시하거나 문서에 마크업 또는 사진 편집과 같은 다단계 작업을 해야 하는 경우 fullscreen이 적합하다.

• Always include a button that dismisses the modal view

예를 들어 Done 이나 Cancel 을 사용해야 한다.

버튼을 포함하면 '모달 뷰’가 assistive technologies에 접근할 수 있고 dismissal 제스처에 대해 대안을 제공한다.

• When necessary, help people avoid data loss by getting confirmation before closing a modal view.

사람들이 dismiss 제스처를 사용해서 뷰를 닫는 것과 관계 없이 해당 작업으로 인해 사용자가 생성한 컨텐츠가 손실될 수 있는 경우, 이 상황을 설명할 수 있는 action sheet 를 보여주고 해결 방법을 제공해야 한다.

• Make it easy to identify a modal view’s task

사람들이 모달 view에 들어가면 이전 상황에서 전환되어 바로 돌아가지 않을 수도 있다.

modal view의 task에 대해 이름을 제공하면 계속 앱에 있을 수 있도록 도와줄 수 있다.

• Coordinate the modal view’s appearance with your app

만약 modal view에 navigation bar가 포함되어 있다면, 반드시 앱의 navigation bar와 동일해야 한다.

• Choose a modal transition style that makes sense in your app

앱과 조화로운 전환 스타일을 사용하면, 일시적인 컨텍스트 전환에 대한 인식을 향상시킬 수 있다.

default 전환은 수직으로 위로 올라오고 닫을 때는 다시 아래로 슬라이드 한다.

 

---

# Navigation

계층적 구조의 화면 전환

-> 보통 오른쪽에서 왼쪽으로 화면이 전환됨

 

사람들은 앱이 그들의 기대 미치지 않을 때까지 앱의 navigation에 대해 인지하지 못하는 경향이 있다.

프로그래머는 네비게이션에 사람들이 신경을 쓰지 않아도 앱의 구조와 목적을 보여줄 수 있도록 Navigation을 구현해야 한다.

진행은 자연스럽고 친숙하게 느껴져야하며 인터페이스를 지배하거나 콘텐츠에서 초점이 멀어지도록 하면 안된다.

iOS에선 대표적으로 3가지 진행 방식을 제공한다.

• Hierarchical Navigation → 메일, Setting에서 사용

원하는 결과에 도달할 때까지 화면 당 한 번만 선택을 할 수 있다. 다른 결과를 보려면 다시 스텝을 뒤로 돌리거나 아예 처음부터 선택해야 한다.

• Flat Navigation → Music, App store에서 사용

다양한 컨텐츠 카테고리 별 전환이 가능하다.

• Content-Driven or Experience-Driven Navigation → 대부분 일반적인 앱, Books, Games 등

콘텐츠를 자유롭게 이동할 수 있다.

 

<Navigation을 사용할 때 유의할 점>

• Always provide a clear path

사람들은 항상 앱에서 어떻게 다음 스텝으로 가야 하는지 알아야 한다. navigation style에 관계 없이 콘텐츠 경로는 논리적이고, 예측가능하며 따라가기 쉬워야 한다.

일반적으로 각 화면 당 하나의 path를 제공해야 한다. 만약 다양한 contexts를 화면에서 봐야 한다면 action sheets, alert, popover, modal view를 사용하는 것을 고려해보라.

• Design an information structure that makes it fast and easy to get to content

최소한의 탭, 스와이프, 화면을 요구하는 정보 구조를 만들어라.

• Use touch gestures to create fluidity

최소한의 마찰로 쉽게 인터페이스를 이동할 수 있도록 만들어라.

ex) 화면 측면에서 스와이프하여 이전 화면으로 돌아가기

• Use standard navigation components

가능하면 표준 navigation control(page controls, tap bars, segmented controls, table view, collection views, split views)을 사용해라.

유저들은 이미 이런 컨트롤에 익숙하고, 앱을 탐색하는 법을 직관적으로 알 수 있다.

• Use a navigation bar to traverse a hierarchy of data

navigation bar의 제목은 현재 hierarchy에서 어디에 있는지를 보여준다. 그리고 back 버튼은 쉽게 이전 위치로 갈 수 있도록 해준다.

• Use a tab bar to present peer categories of content or functionality

tap bar를 사용하면 현재 위치에 관계없이 쉽고 빠르게 category를 이동할 수 있다.

• On iPad, use a split view instead of a tab bar

큰 화면에선 tab bar보다 split view가 낫다.

• Use a page control when you have multiple pages of the same type of content

page control은 사용가능한 페이지 수와 현재 활성화된 페이지를 명확하게 전달한다.

 

---

정리

그럼 Modality와 Navigation은 각각 언제 사용하는 것이 좋을까?

 

내가 생각한 바는 다음과 같다. 

Modality는 화면의 흐름과는 관계가 없지만 추가적인 작업이 필요한 경우 사용을 하면 된다. 

Navigation의 경우 계층 구조로 관계된 컨텐츠로 들어갈 때 사용하면 된다.