HIG : Loading, Modality (Feat. 파파고와 의역으로 인한 오역파티)

Apple Developer : Human Interface Guidelines
(Feat. 파파고와 의역으로 인한 오역파티)

🥪 Loading

Content가 로딩이 될 때, 비어있거나 멈춰있는 화면이 마치 앱이 정지되어있는 것처럼 보일 수 있다.
이는 사용자들이 앱을 사용하지 않게 되는 원인이 되기도 한다.

1) Make it clear when loading is occurring

로딩이 발생한다는 것을 명확하게 해준다.

최소한 무언가가 발생한다는걸 소통하는 Activity spinner를 보여줘야한다. 사용자가 어느정도 로딩 시간을 기다려야하는지 예측할 수 있는 명백한 progress를 보여주는 것이 더 좋다.

2) Show content as soon as possible.

Content가 곧 가능하다는 것을 보여줘야한다.

원하는 화면이 보이기 전까지 content를 로드하기위해 사용자를 기다리게 하지않는다.
화면을 즉각적으로 보이게하고 content가 아직 사용할 수 없는 곳에 placeholder text, grahics 혹은 animation들을 사용하여 식별할 수 있게한다.
content를 로드할 때 placehoder 요소들로 대체한다. 애니메이션이 재생 중이거나 사용자가 level 또는 메뉴를 탐색하는 동안과 같이, 가능한 한 백그라운드에서 예정된 콘텐츠를 미리 로드한다.

3) Educate or entertain people to mask loading time.

로딩 시간을 mask하기 위해서 사람들에게 흥미나 알려줄 거리들을 제공한다.

(로딩하는 동안의 지루함을 감소시키라는 뜻 같다)
게임 플레이, 오락 비디오 시퀀스 또는 흥미로운 placeholder graphics에 대한 hint를 표시하는 것을 고려한다.

4) Customize loading screens.

로딩 화면을 커스텀마이징 한다.

진행률을 보여주는 것이 일반적으로 괜찮긴 하지만, 때때로 앱의 맥락과 맞지 않는다고 느껴질 수 있다. 앱이나 게임의 스타일에 맞는 맞춤형 애니메이션과 요소를 통해 보다 몰입적인 경험을 설계하는 것을 고려한다.

---

🌮 Modality

Modality는 cotent를 종료하기 위해 명시적인 액션이 필요한 임시 모드로 표시하는 디자인 기술이다.

(* 모달(Modal)이란 사용자의 집중을 끌기 위해 사용하는 화면전환 기법)

1. 사람들이 self-contained task나 밀접하게 연관된 옵션의 set에 집중하는 것을 도와준다.
2. 사람들이 중요한 정보을 확실하게 하고, 필요한 경우 실행하게 한다.

다양한 시스템이 정의된 modal 경험을 가능하게 하기 위해 iOS는 alerts, activity view, share sheets 및 action sheet를 제공한다.


앱에서 modal content를 표시하기 위해서 아래와 같은 presentation 스타일들 중 하나를 사용할 수 있다.

(1) Automatic
default presentation style(일반적으로 Sheet)을 사용한다.

(2) Fullscreen
이전 보기를 포함하며, 해제 버튼이 필요하다.

(3) Popover 수평인 환경에서는 Popover를, 콤팩트한 환경에서는 Sheet를 제시한다. (Popover는 컨트롤이나 영역을 탭할 때 화면의 다른 콘텐츠 위에 나타나는 일시적인 보기를 뜻한다.)

(4) Page sheet and form sheet
이전 보기를 부분적으로 다룬다. (Sheet는 사용자가 현재 context에서 벗어나지 않고 상위 뷰와 관련된 개별 태스크를 수행할 수 있도록 도와준다.)



(5) Current context
특정 이전 보기를 포함한다.

(6) custom
사용자 정의 애니메이션을 사용하여 사용자 정의 컨테이너에 내용을 표시한다.

( NOTE )
현재 context modal view style을 사용하여 split view pane, popover, 또는 전체 화면이 아닌
다른 보기 내에 modal content을 표시하는 경우, 소형 환경에서 modal content을 표시할 때
Sheet를 사용하여 전환한다.

👇 split view

1) Use modality when it makes sense.

합당한 이유가 있을 때 modality를 사용한다.

현재 업무와 다른 선택을 하거나 작업을 수행하는 데 사용자의 주의를 집중하는 것이 중요한 경우에만 modal experience을 만든다. modal experience는 사람들을 현재 상황에서 벗어나게 하고 무시해야 하는 행동을 요구하기 때문에, 분명한 이점을 제공할 때만 그것을 사용하는 것이 필수적이다.

2) Reserve alerts for delivering essential — and ideally actionable — information.

필수적이고 실행 가능한 정보를 전달하기 위해 alert를 예약한다.

일반적으로 무언가가 잘못되었기 때문에 alert이 나타난다.
alert은 현재 경험을 방해하고 무시할 탭이 필요하기 때문에 사용자가 느끼기에 침입이 정당하다고 느끼는 것이 중요하다.

3) In general, keep modal tasks simple, short, and narrowly focused.

일반적으로 modal 작업을 단순하고, 짧고, 좁게 초점을 맞춘다.

modal task가 너무 복잡하면, 사람들은 modal context에 들어갈 때 일시 중단된 작업을 잃어버릴 수 있다.
앱 내에서 앱처럼 느껴지는 modal experience을 만들지 않도록 주의해야한다.

특히, 사람들이 자신의 단계를 원래 작업으로 되돌리는 방법을 잊어버릴 수 있기 때문에
modal task 내에서 견해의 계층을 표시하는 것을 경계해야 한다.
modal task에 하위 보기가 포함되어야 하는 경우 계층을 통과하는 단일 경로와 완료 경로를 제공한다.
완료 button을 작업 완료 이외의 다른 작업에 사용하지 않는다.

4) Consider using a fullscreen modal style for immersive content or a complex task.

몰입형 콘텐츠 또는 복잡한 작업에 fullscreen modal style을 사용하는 것을 고려해라.

전체 화면 모달 경험은 산만함을 최소화하므로 비디오,
사진 또는 카메라 보기를 표시하거나 문서를 표시하거나 사진을 편집하는 것과 같은 여러 단계의 작업을 수행할 수 있다.

5) Always include a button that dismisses the modal view.

modal view를 해제하는 button을 항상 포함한다.

예를 들어 완료 또는 취소를 사용할 수 있다. button을 포함하면 보조 기술에서 modal view에 액세스할 수 있으며 해제 제스처 대신 사용할 수 있다.

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

필요한 경우 modal view를 닫기 전에 확인을 받아 데이터 손실을 방지한다.

해제 제스처를 사용하거나 보기를 닫기 위해 button를 사용하든 상관없이, 사용자가 생성한 내용이 손실될 수 있는 경우 해당 상황을 설명하고 해결 방법을 제공하는 조치 Sheet를 제시한다.

7) Make it easy to identify a modal view’s task.

modal view의 작업을 쉽게 식별할 수 있다.

사람들이 modal view에 들어갈 때, 그들은 이전 context에서 벗어나 바로 돌아가지 않을 수 있다. modal view의 작업 이름을 지정하는 제목이나 작업을 설명하거나 지침을 제공하는 추가 텍스트를 제공하면 사용자가 앱에서 자신의 위치를 유지하도록 도울 수 있다.

8) Coordinate the modal view’s appearance with your app.

앱과 modal view의 모양을 조정한다.

예를 들어, modal view에 navigation bar가 포함되어 있는 경우, modal view는 앱의 navigation bar과 동일한 모양을 사용해야 한다.

9) Choose a modal transition style that makes sense in your app.

앱에서 의미가 있는 modal 전환 스타일을 선택한다.

앱과 조정하고 임시 context 이동에 대한 인식을 높이는 전환 스타일을 사용한다.
기본 전환은 화면 아래쪽에서 modal view를 수직으로 밀어올렸다가 해제되면 다시 아래로 이동한다.
앱 전체에서 일관된 modal 전환 스타일을 사용한다.