[HIG] Loading 🔄

Human Interface Guidelines 원문 해석과 함께 사례 분석을 추가해서 작성한 글입니다.

📍 Human Interface Guidelines

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

컨텐츠가 로딩중일 때,

비어있거나 고정되어 있는 화면은 사용자가 보기에 앱이 멈췄다는 느낌을 줄 수 있습니다.

이런 부분은 사용자에게 혼란을 줄 수 있고, 잠재적으로 사용자의 이탈을 이끌기도 합니다.

 

1. Make it clear when loading is occurring

SoundCloud

최소한 돌아가는 모션 등으로 무언가 일어나고 있음을 보여줘야 합니다.

명확한 진행 정도를 보여주는 것은 사용자가 얼마나 더 기다려야 하는지 보여주기 때문에

더 좋은 방법이 될 수 있습니다.

 

2. Show content as soom as possible

사용자들이 기대하고 있는 화면을 보기 전에 컨텐츠 로딩을 기다리게 하지 말아야 합니다.

화면을 즉시 보여주고, placeholder 텍스트나 그래픽, 애니메이션을 통해

아직 컨텐츠를 사용할 수 없는 곳을 나타냅니다.

컨텐츠가 로드되면 placeholder를 교체하고,

애니메이션이 재생 중이거나 사용자가 상위 레벨 또는 메뉴를 탐색할 때과 같이

가능할 때마다 background에서 컨텐츠를 로드해주세요.

최대한 로딩을 짧게~!

 

3. Educate or entertain people to mask loading time

로딩이 되는 동안 서비스에 대한 내용을 보여주거나 즐겁게 하여

로딩 시간을 재미 또는 교육 요소로 덮을 수 있도록 해주세요

쿠키런 로딩 화면

 

4. Customize loading screens

로딩 화면을 커스텀 해주세요

기본 progress indicator은 보통 괜찮지만, 간혹 앱에 맞지 않다는 느낌이 들 수 있습니다.

앱이나 게임의 스타일에 맞는 맞춤형 애니메이션과 요소들을 통해

더 몰입감 있는 경험을 디자인 해보세요

자세한 사례는 아래서 ⬇️

 

📍사례

💭 커스텀 로딩

배달의 민족

배달의 민족 로딩

배달의 민족에서는 보이는 것과 같이

기본 progress indicator가 아닌 커스텀한 로딩을 보여주고 있습니다.

음식 배달이라는 주요 서비스에 맞게

여러가지 음식과 배달에 관련된 일러스트를 띄워주며

앱이 멈춘 것이 아닌, 컨텐츠 로딩 중임을 보여주고 있습니다.

 

 

펫프렌즈

펫프렌즈 로딩

펫프렌즈 또한 보통의 인디케이터가 아닌

서비스의 특성에 맞는 커스텀 로딩을 사용하고 있습니다.

 

 

와디즈

와디즈 로딩

와디즈에서는 커스텀 로딩과 함께

상단에 로딩 진행 정도를 표현해주는 progress indicator를 함께 사용하고 있습니다.

 

💭 스켈레톤을 사용한 로딩

최근 정말 많은 앱들이 가운데 로딩 인디케이터를 통해 로딩을 보여주는 것이 아닌 스켈레톤을 많이 사용하고 있습니다.

(왼) Google Drive (가운데) Youtube (오) Airbnb

스켈레톤을 많이 사용하는 이유는

미리 컨텐츠가 어떤 식으로 보여질지에 대한 힌트를 주기 때문이라 생각합니다..

앞으로 나오게 될 컨텐츠를 미리 예상할 수 있기 때문에 지루함을 줄여줄 수 있습니다 .. 

또한 보통 가운데에 작게 표시되는 로딩 인디케이터 보다 더 넓은 화면을 차지하여 로딩을 표현하기 때문에

텅 빈 듯한 느낌이 덜 든다고도 생각이 드네요..🤯

 

---

스켈레톤 사용한 예시🙂

스켈레톤 사용하는 방법도 나중에 정리해서 올려봐야겠네요.. 

https://github.com/yangsubinn/Test-iOS/blob/master/Skeleton/Skeleton/ViewController.swift

GitHub - yangsubinn/Test-iOS: 이것 저것 다 테스트해보는 레포🕊