H.I.G: Human Interface Guideline(스위프트 하이) - Onboarding

HIG: Human Interface Guideline (=사용자 인터페이스 지침서)

즉, 절대적으로 이 지침을 따라야 한다는 것이 아니라 앱 개발과 디자인에 있어 "권장"하는 내용이다.

무분별한 백지개발로 퀄리티가 낮은 앱이 개발되는 것을 예방하고, 어느 정도 일정한 패턴과 형식을 가진 앱을 개발하기를 바라는 마음에서 만들어진 지침이다.

 

https://www.youtube.com/playlist?list=PLLFDewH7eSVxGMERS4CrwkDXXYZoE5mVZ 

온라인 독서모임

오늘 공부한 내용은 '스위프트 하이 유튜브 온라인 독서모임'의 'Onboarding', 'Loading', 'Modality'이다.

현재 개발 중인 앱에서 고려했던, 앞으로 고려해야할 내용들이기에 우선적으로 공부하게 됐다.

 

 

Onboarding (오리엔테이션, 튜토리얼 개념)

<요약>

1. Onboarding: 흔히 처음 앱을 사용하거나 업데이트 후 새로운 기능을 설명할 때 나타나는 페이지 (Gitget앱의 위젯만드는 법 설명 등)

2. 앱 이용에 도움을 주기 위해 사용되는 기능

3. Launch screen에서 첫 화면으로 전환될 때, 사용자들이 바로 앱을 사용할 수 있게 만들 것.

   (Onboarding이 반복해서 나오지 않게 하고, 스킵가능하도록 만들 것)

4-5. 사용자가 언제 설명이나 도움이 필요한지 예상하고, 한 번에 모든 기능을 설명하기보다 해당 기능을 사용할 때 설명하는 방법이 더 유용할 수 있다.

6. 직관적인 디자인으로, 별도의 설명이 하지 않는 것이 더 좋다.

7. 앱을 직접 이용하면서 배우도록 만들어라. 필요하다면 애니메이션을 사용하고, 스크린샷은 지양해라.

 

<Onboarding 설명>

1. 흔히 처음 앱을 사용하거나 업데이트 후 새로운 기능을 설명할 때 나타나는 페이지로 우측 이미지를 참고하면 될 것 같다. ( 애플 HIG공식문서 Onboarding 이미지 )

 

2. 사용자가 앱을 설정하기 위해 이용하는 것이 아닌, 주로 앱을 즐길 수 있도록 도움을 주기 위해 사용되는 기능이다. 사용자가 일일히 기능을 확인하는 것보다, 미리 설명해주면 사용자는 앱을 사용할 때 고마움과 편리함을 느낄 것이다. 그러니 Onboarding에 licensing detail(자격 세부사항)이나 setup(설정)을 넣어서 사용자가 앱에 대해 알 수 있는 기회를 없애지 말자.

 

3. Launch screen에서 첫 화면으로 전환될 때, 사용자들이 바로 앱을 사용할 수 있게 만들어라. 튜토리얼이나 intro sequence(인트로 순서) 등의 페이지는 사용자가 스킵할 수 있도록 하고, 앱을 다시 켰을 때 자동적으로 계속 보여주면 사용자 경험에 좋지 않다. 

( 나는 이 기능을 아는데 또 설명해?, 필요할 때만 보여줘 제발..! )

 

4. 앱을 처음 사용 시 모든 기능을 설명하는 방식보다, 기능을 처음 사용할 때 보여주는 방식이 사용자경험에 있어 더 유용하다.

 

5. 유저가 언제 도움이 필요할지를 예상해라. 예를 들어, 게임에서는 캐릭터가 움직이지 않을 때나 게임을 일시정지 했을 때 유용한 팁을 제공할 수 있다. 또한 언제든 사용자가 스킵하거나 주의깊게 보지 않아 놓친 내용을 다시 볼 수 있도록 해주면 좋다.

 (Onboarding페이지라고 해야할지 모르겠지만, 인터넷 연결이 끊기면 Reconnecting 또는 인터넷 환경을 확인하세요. 등의 화면이 나온다.)

 

6. 초심자에게 가이드를 제공하는 것은 좋지만, 좋지 못한 디자인을 교육으로 대체하려 하지 마라.(‘UI 적당히 만들고 나중에 onboarding으로 알려주면 되지!’라고 생각하지 마라.) 어찌됐든 앱을 직관적으로 만들어라. 직관적인 디자인이라면 굳이 튜토리얼같은 교육도 필요없다. 앱 가이드가 너무 많이 필요한 것 같다면, 앱 디자인을 다시 검토해라. 그 디자인이 최선인가?

 

7. 재밌게 알 수 있도록 만들어라. 설명서를 읽는 것보다 직접 하면서 배우는 게 더 재밌고 효과적이다.(핸드폰을 설명서 보면서 배우기보다 직접 만지면서 배우는 사람이라면 공감할 것이다.) 앱을 사용하는 과정 속에서 차근차근 익힐 수 있게 상호작용(interactivity)하거나 애니메이션을 사용해라. interactive를 나타내는 스크린샷(멈춰있는 사진)을 보여주는 것은 지양해라.

 

 

스위프트 하이에서 해석해준 내용을 내 방식대로 조금 더 각색했다. HIG는 어려운 게 아니라 당연히 고려되어야 할 내용을 다시 한 번 상기시켜준다는 느낌인 것 같다.

 

<HIG공식문서링크 - Onboarding>

https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/onboarding/

Onboarding - App Architecture - iOS - Human Interface Guidelines - Apple Developer