[인터랙션]_재미있는 로딩 애니메이션
지난 번에는 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
로딩 시 아이덴티티 어필
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 등이 해결해 주고 있으나 디자이너의 작은 배려로 좀 더 나은 사용자 경험을 제공할 수 있으리라 생각합니다.
[참고##영감 동영상##]