App architecture - Modality

Modality은 디자인 기술로, 사용자가 현재 접하는 내용(화면) 분리돈 모드에서 내용을 보여주며 이를 나가기 위해 확실한 동작을 요구한다.

내용을 Modality로 보여주면 다음과 같은 효과를 얻을 수 있다.

 

1. 사람들이 독립적인 작업이나 밀접하게 관련된 옵션들에 집중할 수 있게 해준다.

2. 사용자에게 매우 중요한 정보를 확실히 주고, 필요한 경우 바로 동작하도록 할 수 있게 한다.

iOS는 앱 내 특정 상황에 사용할 수 있도록  alerts, activity views(share sheets)

와 

action sheets를 제공한다.

앱에서 사용자 지정 모달 콘텐츠를 표시하려면 다음 Presentation 스타일 중 하나를 사용할 수 있다.

 

1. Automatic : 기본적인 프레젠테이션 스타일을 사용
2. Fullscreen : 이전 View를 덮고 닫기 버튼이 필요하다. - 디바이스의 스크린에 대응하는 스타일
3. Popover : 수평으로 규칙적인 환경에서는 팝오버를 제공하고 컴팩트한 환경에서는 Sheet를 제공한다.
4. Page sheet and form sheet : 이전 View를 부분적으로 가린다. 
5. Current context : 특정 이전 View를 가린다. - present를 지시하는 View에 대응하는 스타일
6. Custom : 사용자 정의 애니메이션을 사용하여 사용자 정의 컨테이너에 콘텐츠를 표시한다.

Page sheet and form sheet

 

popover

 

 

[Sheet]

시트 프레젠테이션 스타일은 아래 깔린 내용을 부분적으로 가리는 카드 모양의 스타일이며, 가려지지 않은 부분은 어둡게 처리되어 그 부분의 상호작용(터치 등)을 방지한다. (가려진)이전 부모 뷰의 맨 상단 혹은 이전의 카드는 현재 카드 뒤에서 보여지며, 사용자들이 현재 카드를 열기 전에 이미 진행하고 있던 일을 기억할 수 있게 돕는다. 

 

아래의 방법으로 사용자는 Sheet를 제거할 수 있다.

• 스크린을 위에서 아래로 스와이프
• 카드 내용이 최상단으로 스크롤 되었을 때, 스크린을 아래서 어디로든 스와이프
• 버튼 탭

---

[Fullscreen]

풀스크린 프레젠테이션 스타일은 전체 화면을 덮는 스타일이다. 이전의 화면은 완전히 가려지고, 시각적 방해를 최소화한다. 사용자는 버튼을 탭함으로서 풀스크린 모달 화면을 제거할(벗어날) 수 있다. 

 

풀스크린 모달은 비디오, 사진, 카메라 뷰와 같은 몰입도 높은 내용이나, 문서에 마크업을 하거나 사진을 수정하는 등 전체 화면을 쓸 만한 가치가 있는 복잡한 일을 수행할 때 사용하자.

---

말이 되는, 맥락에 맞는 모달을 사용하자. 

선택을 하도록 사용자들의 주의를 끌어야하거나, 현재 수행중인 일과 다른 일을 하는 경우에만 모달 경험을 만들자. 모달 경험은 현재 맥락에서 벗어나게 하며, 닫기 위한 동작을 필요로 합니다. 즉, 확실한 이득을 주는 경우에만 사용하는 것이 중요하다.

 

중요하고, 이상적으로 실행 가능한 정보를 전달하하기 위해 알람은 유보하자. 

일반적으로 알람은 무언가가 잘못되었기 때문에 나타난다. 알람은 경험을 중단 시키며 닫기 위해 탭을 요구 하므로, 사용자로 하여금 그 방해가 정당한 것임을 느끼게 하는 것이 중요하다. Alerts 참고

 

모달에서 수행하는 일을 간단하게, 짧게, 좁은 범위에 초점을 맞추도록 하자.

모달에서 수행하는 일이 너무 복잡하면, 사용자는 모달 내용을 접했을 때 이전에 하던 일이 무엇이었는지 혼란을 느낄 수 있다. 사용자들은 길을 잃고 이전의 단계를 다시 밟아나갈 수 있기 때문에 특히 위계가 있는 화면을 포함시키지 않도록 주의하자. 만약 모달에서 수행하는 일이 여러 화면을 포함한다면, 위계를 따라 하나의 길만 만들고, 완수하기 위해 명확한 길을 제공하자. 일을 완수하는 것 외에는 다른 어떤 Done(완료) 버튼을 사용하지 마라.

 

항상 모달 화면을 없앨 수 있는 버튼을 포함시키자.

Done(완료)나 Cancel(취소)버튼을 사용할 수 있다. 버튼을 포함하면, 모달 화면이 보조기술을 사용하기 쉽고, 화면 닫기 제스처에 대한 대안을 제공할 수 있다.

 

모달 뷰를 닫기 전 사용자에게 확인을 받아 데이터 손실을 막자.

사용자가 화면을 닫기 위해 제스처를 쓰든 버튼을 누르든, 그 행동이 사용자가 만든 내용을 손실시킬 수 있다면, 상황을 설명할 수 있는 액션 시트를 만들어 사용자들이 해결할 수 있도록 하자.

 

팝오버 상단에 카드를 보여주지 말자.

팝오버 안에 카드를 배치할 수는 있으나, 팝오버의 상단에는 아무것도 나오지 말아야 한다. (알람을 제외하곤) 팝오버 내에서 액션을 취한 후 카드를 보여줘야하는 드문 경우엔, 카드를 보여주기 전에 팝오버를 닫자. 

 

기본적으로 모달에서 어떤 일을 수행하는지 알려주는 제목을 표시하자.

사용자들이 모달 내 임무를 접했을 때, 그들은 이전 맥락에서 나와 전환된 것이므로 이 새로운 내용이 무엇인지 확실하게 하는 것이 좋다.

화면의 다른 부분에 임무가 무엇인지 적절히 묘사하거나 가이드를 제공하는 텍스트를 보여줄 수도 있다.

 

당신의 앱과 모달 화면을 서로 잘 어울리게 해라.

모달 화면이 네비게이션 바를 포함한다면, 이는 당신의 앱 안에 있는 네비게이션 바의 모습과 같은 것을 사용해야 한다.

 

당신의 앱과 맥락이 맞는 모달 화면 전환 스타일을 선택해라.

당신의 앱과 잘 어울리는 전환 스타일을 사용하고, 현재 내용이 바뀌었다는 것을 잘 알릴 수 있도록 해라. 기본 전환 스타일은 모달 화면을 아래서 위로 수직 상승시키며, 사라질땐 아래로 내려간다. 앱 전체에 모달 전환 스타일은 일정하게 사용해라.