[패턴] 실행하기, 온보딩, 로딩, 모달형식, 피드백, 데이터 입력하기, 도움말 제공하기

실행하기

실행은 누군가 앱을 열 때 시작되고, 초기 다운로드가 포함되며, 첫 화면이 준비됐을 때 종료된다.

 

모범사례

1) 즉시 실행하기: 사람들은 앱과 바로 상호작용하기를 원하며 몇 초 이상도 기다리지 못하는 경우도 있다.

2) 실행 화면 제공하기: 앱이 시작되는 순간 실행 화면을 표시 -> 첫 화면으로 신속하게 대치 

3) 시작 화면이 필요한 경우 온보딩 흐름 시작 부분에 표시하기

• 시작화면은 제공해야 하는 브랜드와 기타 정보를 간결하게 전달하는 그래픽
• 온보딩 환경을 제공하지 않으면 실행이 완료되자마자 시작 화면이 표시될 수 있음

4) 이전에 나갔던 위치에서 계속 진행할 수 있도록하기: 가능한 한 이전 상태를 세부적으로 복원하기.

• ex) 가장 최근에 사용한 위치로 보기를 스크롤, 이전에 나갔을 때와 동일한 상태 및 위치로 윈도우 표시

실행화면

실행 경험을 중요시 하지 말 것: 실행 화면의 유일한 기능은 빠르게 실행되고 즉시 사용가능하다는 느낌을 주는 것

실행 화면은 앱의 첫 화면과 거의 동일하게 디자인하자: 실행 화면과 첫 화면 사이에 불쾌한 깜박임이 없도록.

첫 화면에 텍스트가 표시되더라도 시작 화면에 텍스트를 포함하지 말 것: 실행화면의 콘텐츠는 변경되지 않아서 표시된 모든 텍스트가 현지화되지 않는다.

광고하지 말 것: 실행 화면은 브랜드 홍보를 위한 것이 아니다. 앱의 첫 화면에 고정된 부분이 아니라면 로고 또는 기타 브랜드 요소를 포함하지 말자.

https://developer.apple.com/kr/design/human-interface-guidelines/launching

---

온보딩

온보딩을 통해 사람들이 앱을 빠르게 사용하도록 지원할 수 있다.

온보딩이 필요한 경우라면 빠르고 재미있으며 선택이 가능한 방식으로 디자인하자. 가능한 경우 실행이 완료된 후 온보딩이 이루어지며 이는 실행 경험의 일부가 아니다.

 

모범사례

1) 상호작용을 통해 가르칠 것: 배우는 작업을 실제로 수행할 수 있을 때 정보를 더 잘 파악하고 유지할 수 있다. 가능한 한 사람들이 작업 테스트, 기능 파악, 메커니즘 시험 등이 가능한 대화식 온보딩 경험을 제공하자.

2) 단일 온보딩 흐름 대신 상황별 팀 모음을 제공: 새로운 정보를 접하기 전에 단일 작업이나 작업에 집중하게 되므로 학습 효과를 높일 수 있다. 인터페이스의 특정 영역을 참조하는 지침 콘텐츠가 있는 경우 해당 영역 근처에 지침을 표시하자. ex) 개발자 지침을 보려면 TipKit의 내용을 참조하십시오.

3) 온보딩 흐름 요건을 제시해야 하는 경우 사람들이 많은 정보를 외울 필요가 없는 간단하고 즐거운 경험으로 디자인할 것: 너무 많이 가르치려고 하면 사람들은 부담을 느끼고 배운 내용을 기억하지 못할 가능성이 높다.

4) 튜토리얼을 따로 제공해야 할 타당한 이유가 있다면 선택사항으로 만드는 것을 고려하자: 처음 실행했을 때 튜토리얼을 건너뛴 경우 다음번 실행시 다시 표시하지 말자. 그 대신, 나중에 쉽게 찾아 볼 수 있도록 만들자. ex) 앱의 도움말, 계정 또는 설정 영역에서 튜토리얼을 제공할 수 있다.

5) 온보딩 콘텐츠가 제공된 경험에 충실하도록 유지할 것: 사람들은 온보딩 흐름을 시작하여 앱에 대해 배우며, 시스템이나 기기를 사용하는 방법을 배울 필요는 없다.

 

추가 콘텐츠

필요한 경우 시작 화면을 간략히: 경험이 늦어진다는 느낌이 들지 않도록 간결하게

대량 다운로드로 온보딩에 방해가 되지 않도록: 사람들은 온보딩 흐름에 참여하든 건너뛰든 관계없이 앱을 처음 시작하자마자 사용하고 싶어한다. 앱과 상호작용을 시작하기 전에 다운로드가 완료될 때까지 기다릴 필요가 없도록 소프트웨어 패키지에 충분한 미디어 및 기타 콘텐츠를 포함하는 것이 좋다. 

온보딩 흐름에서 사용권 세부사항을 표시하지 말자: App Store가 계약 및 고지사항을 표시하도록 하여 사람들이 앱 또는 게임을 다운로드하기 전에 해당 사항을 읽을 수 있도록 하자. 이러한 항목을 온보딩 흐름에 포함해야 하는 경우, 경험을 방해하지 않는 균형 잡힌 방식으로 통합하자.

 

추가요청

필요하지 않은 설정 흐름이나 사용자화 단계를 미룰 것: 추가 구성을 수행하지 않고도 앱과 바로 상호작용 할 수 있도록 합리적인 기본 설정 제공하자.

비공개 데이터 또는 리소스에 접근해야 앱을 작동시킬 수 있는 경우 온보딩 흐름에 권한 요청을 통합하자: 온보딩 흐름 중에 요청하면 사람들에게 권한이 필요한 이유와 권한 부여에 따른 이점을 보여줄 수 있다. 또는 사람들이 개인 데이터나 리소스를 활용하는 특정 기능에 처음 접근할 때 권한 요청을 제출하자. 

사람들이 먼저 앱을 경험한 후에 평가나 구매를 요청할 것: 사람들은 앱에 참여할 기회가 주어졌을 때 이러한 요청에 긍정적으로 응답할 가능성이 더 높다.

 

https://developer.apple.com/kr/design/human-interface-guidelines/onboarding

---

로드하기

최고의 콘텐츠 로딩 경험은 사람들이 인식하지 전에 완료된다.

 

모범 사례

무엇이든 최대한 빨리 표시할 것: 콘텐츠가 로드될 때 위치 지정자 텍스트, 그래픽 또는 애니메이션을 표시

콘텐츠가 로드될 때까지 기다리는 동안 앱에서 다른 작업을 할 수 있도록 할 것: 백그라운드에서 콘텐츠를 로드하면 사람들에게 다른 동작에 대한 접근 권한을 부여하는 데 도움이 될 수 있다. 

어쩔 수 없이 로드 시간이 길어진다면 사람들이 기다리는 동안 볼 수 있는 흥미로운 콘텐츠를 제공하자

 

진행 과정 표시하기

콘텐츠가 로드 중이고 완료될 때까지 얼마나 걸리는지 명확히 알릴 것: 로드가 얼마나 걸릴지 아는 경우 확정 진행 과정 표시기를, 모르는 경우 미확정 진행 과정 표시기를 사용한다.

사용자 설정 로드 보기를 고려하자: 대부분 표준 진행 과정 표시기로 충분하지만 경우에 따라 동떨어져 보일 수 있다.

 

다운로드 저장하기

다운로드한 자산이 사람들의 콘텐츠 공간을 침범하지 않도록 할 것: 특히 대규모 앱의 경우, 사람들의 미디어나 사진과 같은 중요한 콘텐츠가 몰려있는 곳에 다운로드한 자산을 저장하지 말자. 가능한 경우, 주문형 리소스 또는 Background Assets를 활용하자.

 

https://developer.apple.com/kr/design/human-interface-guidelines/loading

---

모달형식

모달 형식은 콘텐츠를 분리된 전용 모드로 표시하는 디자인 기술로서, 상위 보기와의 상호작용을 방지하고, 닫으려면 명시적인 동작이 필요하다.

콘텐츠를 모달형식으로 표시하면 다음과 같은 이점이 있다.

• 사람들이 중요한 정보를 받고, 필요하면 조치를 취할 수 있음
• 사람들이 최근 동작을 확인하고 수정할 수 있는 옵션을 제공함
• 사람들이 이전 진행 상태를 놓치지 않으면서 개별적이고 초점이 맞춰진 작업을 수행할 수 있도록 함
• 사람들에게 깊이 있는 경험을 선사하거나 복잡한 작업에 집중할 수 있도록 도움

모범 사례

1) 명백한 이점이 있을 경우에만 콘텐츠를 모달 형식으로 표시할 것: 모달 경험은 사람들을 현재 맥락에서 벗어나게 하며 닫으려면 동작이 필요하므로, 집중이 필요하거나 콘텐츠 또는 기기에 영향을 주는 선택을 하는 경우에만 모달 형식을 사용해야 한다.

2) 모달 작업을 가능한 한 간단하고, 짧고, 간결하게: 너무 복잡하면 특히 모달 뷰가 이전 진행 상태를 가리는 경우에는 사람들이 이전의 작업을 제대로 기억하지 못할 수 있다.

3) 앱 안의 앱처럼 느껴지는 모달 경험을 만들지 않도록 유의: 모달 작업 내에서 계층 보기를 표시하면 사람들이 이전 단계로 돌아가는 방법을 찾지 못할 수 있다. 

4) 심층적인 콘텐츠 또는 복잡한 작업의 경우, 전체 화면 모달 스타일을 사용하는 것을 고려하자: 전체 화면으로 제공할 경우 방해 요인을 최소화할 수 있다.

5) 언제나 모달 뷰를 닫을 수 있는 명확한 방법을 제공할 것: 일반적으로 사람들이 익숙한 플랫폼 구조를 따르는 것이 좋다. iOS에서는 탐색 막대에서 버튼을 찾으려 하거나 아래로 쓸어내리려고 한다.

6) 필요한 경우, 사람들이 모달 뷰를 닫기 전에 확인을 거쳐 데이터 유실을 피할 수 있도록 하자.

7) 모달 뷰의 작업을 식별하기 쉽게 만들 것: 모달 뷰 작업의 이름을 지정하는 제목, 또는 작업을 설명하거나 지침을 제공하는 추가 텍스트를 제공하면 사람들이 앱에서 위치를 파악하도록 도울 수 있다.

8) 다른 모달 뷰를 표시하기 전에 사람들이 기존 모달 뷰를 닫도록 하자: 동시에 여러 모달 뷰를 표시하도록 허용하면 시각적으로 어수선해지고, 앱이 산만하고 정돈되지 않은 것처럼 보일 수 있다. 

 

https://developer.apple.com/kr/design/human-interface-guidelines/modality

---

피드백

피드백을 통해 사람들은 진행 중인 작업 확인, 다음에 수행 가능한 작업 파악, 동작의 결과 이해, 실수 방지가 가능하다.

피드백은 다음과 같은 사항에 대한 정보를 전달할 수 있다.

• 어떤 항목의 현재 상태
• 중요한 작업 또는 동작의 성공 또는 실패
• 부정적인 결과를 발생시킬 수 있는 동작에 대한 경고
• 실수 또는 문제가 될 수 있는 상황을 해결할 수 있는 기회

모범사례

1) 모든 피드백에 대해 접근성 확보: 여러 방식으로 피드백을 제공하자. ex) 색상, 텍스트, 사운드 및 햅틱을 사용하여 피드백을 제공하면 사람들이 기기를 무음 상태로 두거나, 화면을 보지 않거나, VoiceOver를 사용하더라도 피드백을 받을 수 있다.

2) 인터페이스에 상태 피드백을 통합하는 것을 고려: 상태 피드백이 대상 항목 근처에서 제공되면 동작을 수행하거나 현재 위치를 떠나지 않고도 중요한 정보를 확인할 수 있다. ex) iOS의 Mail앱은 메일상자 화면의 도구막대에서 최근 업데이트를 설명하고 읽지 않은 수를 표시하여, 너무 눈에 띄지는 않지만 사람들이 원할 경우 쉽게 찾을 수 있도록 정보를 제공한다.

3) 중요한 정보(가능하면 동작을 취할 수 있는 정보)를 전달할 때 경고 사용: 기본적으로 경고는 현재 작업을 중단하도록 디자인되므로, 정보의 중요도와 중단 수준을 고려해야 한다.

4) 되돌릴 수 없는 데이터 유실이 예기치 않게 발생 가능한 작업을 사람들이 실행할 때 경고할 것: 이와 반대로, 사람들이 수행하는 동작의 예상되는 결과가 데이터 유실일 경우에는 경고하지 말자. ex) Finder는 매번 사람들이 파일을 버릴 때마다 경고하지 ㅇ낳는다. 

5) 적합한 경우, 중요한 동작 또는 작업이 완료되었음을 확인: ex) Apple Pay 거래 성공을 확인해주는 피드백. 일반적으로 이러한 유형의 확인은 충분히 중요한 활동에 대해서만 사용하는 것이 좋다. 보통의 경우에는 실패했을 때만 알려주면 된다.

6) 명령을 수행할 수 없을 경우, 관련 내용을 표시하고 이유를 설명: ex) 목적지를 지정하지 않고 경로 요청을 하면 지도 앱은 동일한 위치에서 출발 및 도착하는 경로를 제공할 수 없다고 설명한다.

 

https://developer.apple.com/kr/design/human-interface-guidelines/feedback

---

데이터 입력하기

사람들로부터 정보를 받아야 할 경우, 실수하지 않고 쉽게 정보를 제공할 수 있도록 디자인하자.

• 사람들이 제공해야 하는 데이터의 양이 최소화되도록 가능한 한 많은 정보를 사전에 수집하기
• 사람들이 자신이 원하는 입력 방식을 선택할 수 있도록 사용 가능한 모든 입력 방식 지원하기

모범사례

1) 가능하면 시스템에서 정보 가져오기: 자동으로 가져올 수 있는 정보 또는 허락을 받아 가져올 수 있는 정보를 입력하도록 요청하지 말자

2) 필요한 데이터를 명확하게 표현: ex) 텍스트 필드에 'username@company.com'과 같이 프롬프트를 표시하거나 '이메일'과 같이 정보를 설명하는 안내 레이블을 제공할 수 있다. 또한 적절한 기본값으로 필드를 미리 완성하여 의사 결정 과정을 최소화하고 입력 속도를 높일 수 있다.

3) 필요한 경우 보안 텍스트 입력 필드를 사용: 민감한 데이터가 필요하다면 사람들이 입력할 때 입력한 내용을 가리는 필드를 사용하자.(주로 각 문자를 작은 단색 원으로 표시) SecureField 참조

4) 절대로 암호 필드를 미리 채우지 말 것: 항상 사람들에게 암호를 입력하도록 요청하거나 생체 인증 또는 키체인 인증을 사용하자. 계정 관리하기 참조

5) 가능할 경우, 텍스트 입력을 요구하는 대신 선택 항목 제공: 옵션 목록에서 항목을 선택하는 것이 더 쉽고  효율적이다.

6) 가능한 한, 사람들이 드래그 앤 드롭 또는 붙여넣기를 통해 데이터를 제공할 수 있도록 할 것

7) 필드 값을 동적으로 확인: 값이 입력될 때 곧바로 값을 확인하고 문제가 감지되자마자 피드백 제공하면 오류를 바로 수정할 수 있다. 숫자 형식자는 숫자 형식 값만 허용하도록 텍스트 필드를 자동으로 구성하므로 숫자를 입력받을 때는 숫자 형식자 사용을 고려하자.

8) 데이터 입력이 필요할 경우, 계속 진행하려면 필요한 데이터를 제공해야 한다는 사실을 사람들이 이해할 수 있도록 할 것: '다음', '계속' 버튼을 포함하는 경우 필요한 데이터를 입력한 후에만 버튼을 사용할 수 있도록 하자.

 

https://developer.apple.com/kr/design/human-interface-guidelines/entering-data

---

도움말 제공하기

모범사례

1) 사람들에게 필요한 도움말 유형을 앱 작업에서 제공: 작업을 간결하게 설명하는 인라인 보기를 표시하여 사람들이 간단한 한 두 단계의 작업을 수행하도록 도울 수 있다. 복잡하거나 다중 단계 작업을 지원할 경우, 튜토리얼을 제공하는 편이 좋다. 일반적으로, 사람들이 현재 수행하는 동작이나 작업과 직접적으로 연관된 도움말을 제공하고, 쉽게 닫거나 거부할 수 있도록 하자.

2) 도움말 콘텐츠에는 연관성 있고 일관적인 언어 및 이미지를 사용: 지침은 항상 현재 맥락에 적합해야 한다. ex) iPhone에서 버튼을 클릭하거나 Mac에서 메뉴를 탭하게 하는 내용을 작성하지 말자.

3) 모든 도움말 콘텐츠를 포용적으로 만들 것: 포용성 참조

4) 표준 구성요소 또는 패턴 동작에 대한 설명으로 도움말 콘텐츠를 부풀리지 말 것: 특정한 동작이나 작업에 대해서 설명하자. 긴 설명은 애니메이션이나 그래픽으로 안내하자.

 

팁 만들기

팁은 앱의 기능을 사용하는 방법을 간결하게 설명하는 작고 순간적인 보기로, 새롭거나 분명하지 않은 기능을 가르쳐 주거나 작업을 더 빠르게 완수하는 방법을 찾을 수 있게 도와주는 좋은 방법이다.  TipKit 참조

1) 앱의 사용자 인터페이스에 가장 적절한 팁 유형을 사용

• 중요한 정보를 가리지 않으려면 인라인 팁 표시
• 콘텐츠 흐름을 중단하지 않으려면 팝오버 팁 표시 -> 팁이 이미 하이라이트된 기능을 가리키므로 이미지는 빼는 것을 고려하자

2) 간단한 기능에 대해 팁을 사용: 세 번 이상의 동작이 필요한 기능은 팁을 사용하기에는 복잡할 수 있다.

3) 팁을 짧고, 수행 가능하고, 매력있게 만들 것: 팁의 목표는 사람들이 새로운 기능을 사용해 보도록 하는 것.

4) 의도한 대상에게 팁이 표시되도록 규칙을 정의: 모든 사람이 팁을 볼 필요는 없다. 팁이 언제 나타날 지 제어하고, 적합한 사람에게만 팁을 표시하자. 

5) 사람들이 기능과 연관 지어 생각하는 이미지가 있을 경우, 이를 팁에 포함하는 것을 고려하자: ex)팁에 별표가 있으면 즐겨찾기와 연관되어 있음을 알 수 있다.

6) 버튼을 사용하여 사람들을 정보 또는 옵션으로 안내

 

https://developer.apple.com/kr/design/human-interface-guidelines/offering-help