본문 바로가기

HIG

HIG Patterns) Loading 이해하기

반응형

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

 

Loading - Patterns - Human Interface Guidelines - Design - Apple Developer

Loading While content loads, avoid showing a blank or static screen that might make people think your app or game is sluggish or frozen. Best practices Show content as soon as possible. If you make people wait for loading to complete before displaying anyt

developer.apple.com

HIG Patterns 중 Loading에서 가장 중요한 것은 

앱의 콘텐츠가 로딩 중일때, 빈 화면이나 정적인 화면을 제공하지 않는 것이다. (앱이 느리거나 움직이지 않는다고 생각할 수 있다)

 

Loading에서 몇 가지 좋은 안들을 제시해주었다. 

 

1. 최대한 빨리 콘텐츠를 보여줘라(Show content as soon as possible.)

 

앱 내 컨텐츠를 로딩이 완료될 때까지 기다리게 하지 말라는 내용이다. 

아직 콘텐츠를 전부 로드하지 못했다면 텍스트, 그래픽, 애니메이션으로 표시하고 로드됐다면 요소를 바꾸라고 말한다. 

그리고 가능하다면 미리 다음 콘텐츠를 로드하라고 말한다. 

 

넷플릭스 앱을 보면 상당히 많은 양의 이미지를 보여줘야 한다. 

이를 이미지가 전부 나타날 때까지 유저를 기다리게 하는 것이 아니라,

대체 텍스트나, 애니메이션 등으로 대체하고 이미지가 로드됐다면 교체해주는 것을 알 수 있다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. 콘텐츠가 로드부터 완료하는데까지 얼마나 걸리는지 명확하게 알려줘라(Clearly communicate that content is loading and how long it might take to complete)

 

바로 로딩이 되는 경우가 이상적이지만 로딩이 한두 시간 이상 걸리는 경우가 있다.(큰 파일 다운로드, 업데이트.. 등)

이런 경우 진행률, 시간이 얼마나 걸릴지 아는 경우에는 Progress Indicator로 표시하고 

진행률을 정확히 알 수 없을 때는 indeterminate progress indicator를 표시하라고 말한다. 

https://developer.apple.com/design/human-interface-guidelines/components/status/progress-indicators

 

Progress indicators - Status - Components - Human Interface Guidelines - Design - Apple Developer

Progress indicators Progress indicators let people know that your app isn’t stalled while it loads content or performs lengthy operations. Some progress indicators also give people a way to estimate how long they have to wait for something to complete. A

developer.apple.com

다음과 같은 indicator들을 활용하면 좋다!

 

3. 로딩이 어쩔수 없이 오래 걸린다면, 사람들이 기다리는 동안 볼 수있는 것을 제공해라 (If loading takes an unavoidably long time, consider giving people something to view while they wait)

 

기다리는 동안 게임의 힌트를 제공하거나, 짧은 비디오 등을 보여주면서 앱을 사용하는 동안 몰입이 깨지지않고 기다리는 시간이 지루하지 않게끔 하는 것이 좋다.(그리고 로딩 시간을 표시하자)

 

4. 로딩 화면을 커스터마이징하는 것을 고려해라(Consider customizing loading screens.)

 

방금 위에서 보여줬던 Progress indicator도 괜찮지만 앱이나 게임 스타일에 벗어날 수 있기 때문에 더욱 몰입감 있는 경험을 디자인해보는 것도 좋다고 말한다!

 

게임 하스스톤의 게임 로딩화면을 보면 일반적인 indicator를 보여주는 것이 아닌 앱의 분위기에 맞게끔 로딩화면을 커스텀한 것을 볼 수 있다!

 

 

 

 

 

 

 

 

 

그리고 마지막으로 

WatchOS, 애플 워치에서는 되도록 indicator를 표시하지 않는 것이 좋다.(표시가 안나게끔 빠르게 로딩할 수 있도록!)

애플 워치 유저는 즉각적인 반응을 기대하기 때문에 되도록 바로바로 피드백이 오게끔 해야한다고 한다. 

1~2초 정도가 걸리면 어쩔 수 없이 indicator를 붙여주자!

만약에 watch os를 개발하다가 많은 로딩시간이 걸린다면 아마 리젝사유가 되지않을까...생각한다. 

 

 

 

처음 HIG를 읽었는데 사실 읽고보면 이렇게 하는게 맞지!라고 당연하게 여겼던 것 같다. 근데 막상 개발을 하다보면 의외로 놓치게 되는 경우가 있었던 것 같다. 이제부터 api를 통신하거나 이미지를 로드해야할 경우 꼭 indicator를 고려해보도록 하겠다!! 

반응형

'HIG' 카테고리의 다른 글

HIG Components) Progress indicators 이해하기  (0) 2022.12.15
HIG(Human Interface GuideLines) 읽어보기  (0) 2022.12.12