Animation for Attention and Comprehension

애니메이션에는 다음과 같은 목적이 있다.

  • 주의를 끌거나 변화를 보여주기
  • 재미있고 즐겁게 하기. 어린이나 청소년을 위한 사이트는 애니메이션에 소리도 따른다(이런 효과는 사용자의 주의를 분산시키지만, 어린 사용자들은 보통 덜 목표지향적이기 때문에 이런 것에 덜 짜증을 낸다).
  • 최근 트렌드를 따르는 것처럼 보이기.

애니메이션을 넣으려면 다음 질문을 모두 곱씹어보라.

  1. 사용자의 주의: 애니메이션이 나타나면 사용자는 어디를 바라본다고 생각하는가?
  2. 애니메이션의 목적이
    • 사용자의 주의를 끌기 위함인가? 애니메이션을 보고 사용자가 즉각 알아채고 조치를 취해줘야 하는 것인가?
    • 연속적인 변화를 보여줘서 변화를 보여주려는 것인가?
    • 사용자의 시야에 들어온 것들 사이의 관계를 나타내려는 것인가?
  3. 애니메이션의 빈도: 한 세션 동안 얼마나 자주 이 애니메이션을 보게 되는가?
  4. 애니메이션의 시작:
    • 사용자가 직접 애니메이션을 시작해야하는가?
    • 페이지가 로드 된다거나 해서 간접적으로 시작되는가?

사용자의 주의를 끌기 위한 애니메이션

시야의 둘레에서 감지되는 움직임은 본능적으로 시선을 끈다. 이것은 신경을 관심 있는 쪽으로 쓰게 되는 상향식 처리의 한 사례다. (하향식 처리는 목적에 따라 신경을 쓰는 것.) 이것은 들판의 뱀이나 어렴풋한 포식자, 혹은 먹잇감을 찾기 위해 태고적부터 형성된 반응이다.

웹 페이지의 경우 시야의 주변부는 F자 패턴에서 벗어나는 곳이다. 오른편에서 깜빡거리는 이미지나 비디오 광고는 상업적 목적을 위해 주변부 시야를 활용하는 가장 흔한 예다(그리고 이것의 남용은 배너 무시나 우측 레일 무시를 낳는다). 그러나 선의로 만든 애니메이션도 신경을 분산시키고 짜증을 유발할 수 있다(클리피, 듣고 있나?). 화면의 테두리에 관련 컨텐트나 관련된 활동, 라이브 채팅을 나타나게 하는 것도 실제로는 팝업만큼 신경을 분산시키거나, 사용자가 바라지 않을 수도 있다.

Olark 사이트에서는 홈페이지가 로드되자마자, 화면 우측 하단에 “How can we help?”가 미끄러져 들어오고 그 위로 바로 “Hey, We’re Olark Chart”라는 풍선이 뜬다. 사용자에게 존재감은 확실히 부각하지만, 주요 콘텐츠를 소비하는 1차적 과제에서 신경을 분산시켜버린다.

움직이는 물체로 주의가 옮겨지는 속도는 움직이는 대상의 활동성에 달려있다. 애니메이션의 속도나 위치 변화의 양, 가장 중요하게는 그 움직임이 스스로 추동하는 것처럼 보이는지의 여부가 이를 결정한다. 그래서 페이드나 천천히 움직이면 주의를 덜 끈다.

Festival Marketing의 사이트는 스크롤을 내리면, 화면 우측에서 위로 가기 버튼이 아래에서 빠른 속도로 나타난다. 이것은 사용자의 주의를 분산시키고, 메인 컨텐츠를 읽는 1차적 과제를 방해한다.

반면 어떤 사이트는 위로 가기 버튼을 위치 변화 없이 페이드 인으로 나타나게 해서 주의를 덜 분산시킨다.

주의를 끄는 것이 목표라면 슬라이딩으로 큰 효과를 거둘 수 있고, 1차적 과제에서 주의를 분산시키지 않은 채 기능을 제공하려는 것이 목표라면 위치 변화가 없는 애니메이션이 제격이다. (사실 애니메이션이 없는 것이 가장 덜 주의를 분산시키며, 더 좋은 선택이다).

이해를 돕는 애니메이션

시야 안에서 벌어지는 움직임은 시야 밖에서만큼 주의를 끌지 않는다. 그래서 이런 애니메이션은 UI 요소 간 관계나 변화 등을 이해하는 데 도움이 되게끔 고안할 수 있다.

예를 들어 폼 요소에 조건에 따라 입력해야되는 입력란이 있으면, 조건에 따라 애니메이션으로 입력란을 나타났다 사라지게했다 하는 것이다.

UI 요소간의 관계를 드러내고자 한다면, 애니메이션은 0.1초 안에 시작해야 한다. 그래야 관련이 있다는 느낌이 난다.

빈도

일반적인 사용자가 한 번 사이트를 방문해서 얼마나 자주 애니메이션을 보게되는지 생각해보라. 너무 긴 애니메이션을 자주보면 짜증난다.

숨겨진 내비게이션을 애니메이션으로 나타나게 하는 것은 최악이다. 숨겨진 내비게이션도 이미 나쁜 데, 매번 애니메이션도 봐야한다면 사용자는 곧장 짜증낼 것이다.

정리: 애니메이션은 조심히 써라

애니메이션은 강력하지만, 사용자의 집중력과 시간을 낭비할 수 있다. 애니메이션은 조금씩 쓰고, 의미가 있을 때에만 써야 한다.