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

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

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

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

 

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

온라인 독서모임

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

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

 

<요약>

1. Loading: 진행되고 있는 상태

2-3. 빈 화면이나 멈춰있는 화면은 사용자에게 렉이 걸린 듯한 이미지를 연상하므로, HIG는 진행 중이라는 것을 명확히 보여주는 것을 지향함

4. 사용자가 원하는 화면을 보여주기 전, 컨텐츠를 사용자가 기다리도록 하지 마라. 기다려야 한다면 Placeholder, Graphics, Animation 등을 이용해 이용할 수 있는 부분은 먼저 이용할 수 있게 만들어라.

5. Loading time동안 사용자가 지루해하지 않도록 유익하거나 재밌는 정보를 제공해라.

   (League of Legends 게임 로딩화면: 알고 계셨나요?~~)

6. 스플레쉬 이미지는 몰입형 장르에서 세계관 정보 전달 등의 목적으로 주로 사용되며, 사용자 경험에 유익하다고 판단되면 사용해도 좋다!

<Loading>

1. 흔히 '로딩 중'이라고 하면, 무언가 진행되고 있는 상태일 때 사용하는 말이다.

 (우측 이미지에서도 음악이 재생(진행 중)이라는 의미에서 ProgressBar를 사용했다. - Apple HIG공식문서 Loading이미지)

 

2. 컨텐츠를 보여줄 때, 빈 화면이나 멈춰있는 화면은 사용자에게 렉이 걸렸다는 인상을 줄 수 있다. 따라서, 어떠한 프로세스가 진행 중이라는 것을 표현할 수 있는 ProgressBar 등을 사용하면 좋다.

 (우측 이미지에서 음악이 재생 중임에도 ProgressBar가 없다면 음악이 얼마나 남았는지 진행 중인지 사용자가 직관적으로 판단하기 어렵고 불편하다.)

 

3. 로딩 중임을 확실하게 알려줘라. 더 좋은 방법은 명확한 Progress를 보여주는 것이다. 그러면 사용자들은 얼마나 기다리면 되는지를 알 수 있다.

 

4. 이용 가능한 컨텐츠를 보여줘라. 사람들이 원하는 화면을 보기 전, 컨텐츠에 대해 사용자가 기다리도록 만들지 마라.(LaunchScreen에 딜레이를 넣을 필요가 없는 이유.) 아직 사용할 수 없는(Not available) 컨텐츠임을 알리고, 대신 그래픽, 애니메이션, 플레이스홀더(Placeholder)를 이용해서 사용할 수 있는 부분은 먼저 사용할 수 있도록 만들어라. (예시: 네이버의 일부 화면에 딜레이가 생긴다고 전체를 이용할 수 없으면 불편하기 때문에, 해당부분을 제외한 곳에서는 정상 작동하도록 하거나 딜레이가 생긴 곳에 그래픽이나 애니메이션 등을 주어 사용자가 시간을 효율적으로 사용할 수 있도록 만들어라 라는 의미)

 

5. Loading time을 가리기 위해 유익하거나 재밌는 정보를 제공해줘라.

  (예를들어, 게임 접속 중 화면에 나오는 게임 관련 정보 제공이 있다. ‘알고계신가요? ~~’

<리그오브레전드 게임 로딩 화면 중 게임 세계관 정보 제공 문구>

6. 스플래쉬 이미지를 사용해도 되는 장르.

 - 몰입형 타입의 앱(게임 등)에서는 스플래시 앱이나 이미지를 사용할 수 있다.

 - 게임을 함에 있어 어떠한 스토리나 세계관을 사용자에게 알려주기 위한 방법으로 사용.

 - 사용자에게 도움이 된다면! 사용해도 괜찮다.

 - 스플래쉬 이미지가 무엇인지 잘 이해가 되지 않는다면, Apple HIG 공식문서를 참고하자.

(메이플 스토리에서 세계관 설명하는 영상 등이 스플레쉬 이미지라고 생각하면 좋을 것 같다.) - 영웅, 아란 등 선택 시 나오는 스토리

 

 

<HIG공식문서링크 - Loading>

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

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

<리그오브레전드 Loading이미지 출처 블로그>

https://m.blog.naver.com/sweetk2ss/221223944447

롤 로딩 중 도움말 & 알고 계셨나요 모음