UI 스피너 로딩 - UI seupineo loding

사용자가 이탈하지 않게끔 하고 싶다면 사용자가 능동적으로 참여하는 웹페이지와 경험을 만들고 싶다면

loading 애니메이션과 skeleton UI를 사용할 수 있다.

스피너와 로더는 전통적으로 콘텐츠를 로드하는데 시간이 걸린다는 것을 사용자에게 알리는 방법이었습니다. 이 방식은 훌륭하지만, 점차 빠르게 대체되고 있는데요. Skeleton UI는 대기 시간이 아닌 진행 상황에 초점을 맞추고 로딩 시간의 불만을 줄이기 때문에 기존 로더 UI를 대체하고 있습니다

UX적인 관점에서는 사용자는 콘텐츠가 페이지에 로드되는 동안 계속 참여해야 이탈률이 낮아진다고 봅니다. 그래서 기존의 스피너는 콘텐츠가 로드되기 전에 사용자를 참여시키는 아이디어는 훌륭한 UI였습니다. 하지만 대부분의 사용자는 시계처럼 돌고 있는 더미 애니메이션 스피너를 쳐다보는데 지루함을 느꼈는데요. 이는 더 나은 UI에 대한 고민으로 이어졌습니다. 사용자에게는 단순히 대기만 하는 것이 아니라 목표를 향해 나아가고 있음을 보여줘야 했습니다. 우리가 무작정 기다리는 신호등보다는 남은 시간을 알려주는 신호등이 덜 지루한 것처럼요.

유튜브 웹사이트에 접근하면 초기에 유튜브 영상이 로딩되기 전에 아래와 같은 화면을 본 적이 있을 겁니다. 이를 흔히 skeleton UI라고 합니다. 사용자들에게 어떤 형태로, 데이터와 화면이 그려질 것인지 보여주는 Skeleton UI는 따로 Component를 만들어 관리할 만큼 많이 사용되고 있는데요. 요즘 많은 웹사이트에서 지루한 대기 시간을 줄이기 위해 Skeleton UI를 이용하고, 일반적으로 흰색 배경과 반짝이는 CSS 애니메이션을 사용합니다.

아래의 페이스북 페이지를 보면 두 화면 모두 실제 콘텐츠를 로드하지 않았지만, Skeleton UI가 반영된 화면이 더 풍부해 보이고 반응이 더 좋아 보이는 반면 빈 페이지는 사용자에게 느리게 보입니다. 실제 콘텐츠는 동일한 속도로 로드되지만, Skeleton UI 화면은 보다 나은 사용자 경험을 제공합니다.

여기서 중요한 것은 Skeleton은 가능한 콘텐츠와 같아야 한다는 것입니다. 너무 다른 형태의 Skeleton을 보여주다가, 다른 화면을 보여주면 사용자 입장에서는 당황할 수도 있거든요.

물론 Skeleton UI도 만능인 것은 아닙니다. 중요한 것은 내가 만드는 서비스에서 어떤 UI가 사용자 경험에서 더 좋을지 고민해보는 것입니다. 때로는 단순한 로딩바가 더 의미 있을 수도 있기 때문입니다.

Skeleton UI는 사용자에게 단순 기다림이 아니라 사용자가 콘텐츠 로드하는 시간동안 목표로 향해 나아가고 있다는 것을 알려주는 경험이다.

This space intentionally left blank.

지난 번에는 3D 효과 트랜지션을 공유드렸습니다. 재밌게 보셨나요? 오늘은 로딩 애니메이션에 대해 공유할까 합니다.

종종 동영상 리써치를 하다보면 버퍼링이 느려 막연히 모니터에 멍때리며 기다리고 있는 상황이 생기곤합니다. 참 아까운 시간이지요.
이렇듯 사용자 액션과 액션 사이에는 정보를 업데이트하기 위한 공백 시간이 생기곤 합니다. 이 때 생기는 (절대)시간에 비해 사용자가 느끼는 체감 시간을 줄여줄 수 있는 방법은 없는 것일까요.

연구에 의하면 프로그래스 바의 골(ribbings)이 뒤로 움직이는 것이, 앞으로 움직일 때보다 체감시간을 줄여준다고 합니다.

-프로그래스 바의 골이 뒤로 이동               -프로그래스 바의 골이 앞으로 이동

요즘 흔히 볼 수 있는 로딩 스피너는 빨리 돌아갈수록 체감시간이 줄어든다고 하고요.

-빠름                                        -느림

위 사례를 볼 때, 모션효과를 어떻게 주느냐에 따라 사용자의 체감시간이 달라진다는 것을 알수 있습니다. 그래서 오늘은 디자이너의 작은 배려로 사용자의 체감시간을 줄여줄 수 있는 다양한 로딩을 공유하려합니다.

시각적 유희로 풀어낸 로딩애니메이션
아래의 사례들은 그래픽 요소의 움직임이 시각적으로 재미있는 로딩 애니메이션입니다.

1. Loader wip_gif animation
그래픽 디자이너 Marcel이 작업한 로딩 애니메이션입니다.
아래 예시처럼 유기적인 움직임에 앞뒤로 가속도를 주면 체감시간이 더 줄어듭니다. 움직임 자체가 재미있어서 전 몇 번을 더 보게 되네요.

from : Marcel

출처 : http://blaufasan.tumblr.com/post/40087967598/loader-03-wip-http-drbl-in-govq

2. App loader_gif animation
GUI 디자인 스타일을 로딩 화면에도 동일하게 적용한 사례입니다. 그래픽 아이덴티티는 확실히 어필하겠네요.

from : Peter Had

출처 : http://dribbble.com/shots/946595-Loader/attachments/106847

3. Animation loading_gif animation from : Jordi Verdu

출처 : http://dribbble.com/shots/963799-Animation-Loading-gif?list=users

로딩 시 아이덴티티 어필

4. Animated uploading
아래 사례는 와인 정보를 공유하는 어플리케이션인 Sipp의 로딩애니메이션입니다.
사용자가 선호하는 와인 정보와 함께 별점을 공유할 때 나타나는데요. 모션 자체에 큰 효과가 들어간 것은 아니지만 어플리케이션의 아이덴티티는 확실히 어필하네요.

from : Eric Hoffman

출처 : http://dribbble.com/shots/395607-Animated-Uploading-gif-For-Sipp-iPhone-App?list=users

5. Super Sync Sports
아래 영상은 Super Sync Sports 라는 웹 연동 게임 어플리케이션을 소개하는 영상입니다.

client / agency : Google Creative Lab
illustration : Rami Niemi, Agent Pekka
digital production : Weir+Wong
film production : No Mint
creative collaborator : Rafael Rozendaal

출처 : http://www.agentpekka.com/moving-image/rami-niemi-and-chrome-super-sync-sports/

아래의 영상은 PC 상에서 보여지는 Super Sync Sports 웹페이지의 로딩화면 입니다. 인트로 로딩화면은 다분히 플래쉬 기반 웹스럽네요. 여기서 재미있는 로딩 애니메이션은 각 게임 항목으로 진입하는 로딩 애니메이션입니다.

출처 : http://chrome.com/supersyncsports/
위 사이트로 가시면 직접 체험하실 수 있습니다. 크롬과 익스플로어 다 지원이 되지만 크롬을 추천합니다.

6. Every Last Drop

출처 : http://everylastdrop.co.uk/
위 사이트로 가시면 로고로 만든 로딩 애니메이션과 함께 parallax scroll을 체험하실 수 있습니다.

로딩 시 최소 정보 제공

7. Pinterest
아래 영상은 pinterest 웹 사이트의 로딩화면 입니다. pinterest는 최근 업데이트 된 이후 이미지를 불러올 때 이미지 컬러와 함께 링크된 정보를 제공하고 있습니다. 링크 주소가 중요한 정보는 아니지만, 이전의 공백으로 비워두는 방식보다 좋은것 같네요. 주정보(이미지)가 보여지기 전에도 계속 정보를 제공받는 다는 느낌이 듭니다.

http://pinterest.com/

8. Ampergram
Ampergram은 다양한 텍스트 디자인을 경험할 수 있는 사이트입니다. 빈 공백에 알파벳을 입력하면 사진으로 촬영된 해당 알파벳을 랜덤하게 띄워주는 사이트인데요. 로딩 시 선택한 알파벳이 무엇인지에 대한 기본적인 정보를 제공해 줍니다.

http://ampergram.com/
위 사이트로 가시면 직접 체험하실 수 있습니다.

데이터가 로딩되는 시간은 UI 설계시 간과되는 경우가 많습니다. 그러나 실제로 서비스를 경험할 때 사용자에게 큰 영향을 미치는 부분이지요. 사용자가 input을 입력했을 때 적절한 반응이 없다면, 본인의 input이 정상적으로 입력되었는지 혼란을 느낄 뿐 아니라, 서비스 자체에 불신이 생기기 쉽상이니 말입니다. 이러한 방면에서 loading spinner, progressbar 등이 해결해 주고 있으나 디자이너의 작은 배려로 좀 더 나은 사용자 경험을 제공할 수 있으리라 생각합니다.

[참고##영감 동영상##]