안녕하세요 🌱 Lawn입니다 HIG 스터디 모임을 통해 공부한 내용을 정리했습니다.

🌱 Loading

콘텐츠가 로딩되고 있을 때, 빈 화면 혹은 정지 화면을 보여준다면 앱이 멈춘것 처럼 보일 수 있으며, 사용자들은 혼란 스러울 것이다.

Make it clear when loading is occurring. 

현재 로딩 진행 중임을 확실히 하자. 최소한, 무언가 일어나고 있다는 것을 사용자들에게 보여주어야 한다. 얼마나 기다려야 하는지 알수 있는 진행 상황을 알려주면 더 좋다.

Show content as soon as possible. 

내용을 최대한 빨리 보여주자 사용자들이 원하는 화면을 보여주기 전에, 로딩때문에 사용자들을 기다리게 하면 안된다. 즉시 화면을 보여주고, 내용(콘텐츠)이 아직 준비 되지 않은것을 보여주기 위해 문자 입력창, 그래픽 혹은 애니메이션을 사용하자. 가능하다면, 애니메이션이 재생되는 동안이나 사용자가 메뉴를 탐색하는 동안 배경(백그라운드)에 미리 로딩을 할 수있게 하자.

Educate or entertain people to mask loading time. 

로딩되는 시간에 사용자들에게 좋은 팁을 알려주거나 즐겁게 하자. 게임의 힌트를 보여주거나, 재밌는 비디오, 흥미로운 입력창 그래픽 등을 고려해볼 수 있다.

🍀 Comments
위의 이미지는 게임 로딩 화면인데 스플레시 이미지이다. 스플레시 이미지를 사용하면 좋은 상황은 주로 Emmersive Type(몰입형 앱, 게임, 비디오 게임)의 장르다. 예를들어, 붑 비치라는 게임에서 사용자가 사령관이 되어 상륙작전을 해야하는데 이때 이러한 상황을 사용자가 몰입하기 좋게 세계관을 알려줘야한다. 즉 하나의 앱에 몰입해서 시간을 많이 써야하는 앱같은 경우는 위와 같은 스플레시 이미지를 사용하자.

Customize loading screens. 

로딩 화면을 맞춤 설정(커스터마이징) 하자. 물론 일반적인 진행상황을 표시하는 것도 좋지만 이것은 때때로 문맥에 맞지 않게 느껴질 수 있다. 앱이나 게임의 스타일에 맞는 맞춤 애니메이션이나 요소를 통해 좀 더 몰입도 높은 UX를 고려하자. 추가 가이드는 Progress Indicators 에서 확인하자.

🌈 Loading 사례