[인터랙션]_재미있는 로딩 애니메이션

2013.06.17 00:24inspiration movie
by Youri Kim

지난 번에는 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 등이 해결해 주고 있으나 디자이너의 작은 배려로 좀 더 나은 사용자 경험을 제공할 수 있으리라 생각합니다.

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

1 2 3 4 5 6 7 8 9 10 ··· 16