제목: UI Animation: Please Use Responsibly

원문: https://uxdesign.cc/ui-animation-please-use-responsibly-e707dbdb12d5

지난 몇년간 프로토타입 툴이 터져나왔는데, 이것은 디자이너들에게 세부적인 인터렉션을 만들 수 있는 기회를 주게 되었다. 디자이너는 이 틀울 배우는데 몇시간이나 몇일을 쓰고 있다. 그러나 많은 디자이너들이 프로토타이핑 툴의 선택의 기술적 세부사항에서 놓히고있는게 있다. 디자이너들은 몇걸음 뒤로 물러서서 애니메이션의 목적과 목표가 무엇인지 질문을 던저여한다. 어떤 의도로 애니메이션을하면 모션은 의사소통을위한 도구로서 사용된다. 디자이너들은 사용자에게 방해가되는 경박한 애니메이션 사용을 피해야한다.

디자이너들은 디자인 문제를 해결하기위한 이점으로서 애니메이션을 사용해야한다. 예를들어 계속성을 보여준다던지 들어가고 나오는 애니메이션을 통한 오브젝트 사이에 관계를 보여준다던지 하는 것들이 있다. 선택에대한 개선을 위해 인식 로드(cognitive load)를 줄임으로서 의미있는 애니메이션은 사용자를 기쁘게하고 정보를 제공한다.

인식 로드는 작업을 완료하기위해 필요한 정신적 노력의 양을 말한다. 위키피티아에서 "큰 인식 로드는 작업 완수에 부정적인 영향을 줄 수 있다"고 말하고 있다. 사용자가 사이트에 들어와있을때, 그들은 정보를 넘치도록 받는다. 그 결과 '터널 시야'라고 알고있는 선택적 태도를 가지는데, 화면에서 그들이 작업하고 있는 부분에 직접적으로 집중한다는 의미이다. 따라서 사용자는 화면에 있는 모든것을 보지는 않을 것이다.

디자이너로서, 사용하기 쉬운 인터페이스를 만드는 것은 중요한 일이다. 이것은 사용자가 작업을 완수하는데 드는 정신적인 노력을 가볍게 해준다. 디자이너들은 이런점을 어떻게 애니메이션으로 달성할 수 있을까? 우리가 모션을 잘 사용할때, 이것은 사용자 피드백과 효과적으로 소통하여 사용자 혼란을 줄여준다. 추가적으로 사용자 생각을 없애므로서, 페이지의 "액션을 부른다"던지 그런 더 중요한 것들에 주의를 기울일 수 있게 된다.

NNgroup은 "애니메이션을 써서 효과적인 방법은 사용자의 시선을 끄는 것이다"고 말했다. 사용자의 시선을 끌게되면 스크린과 화면안의 요소들 사이의 계층과 관계를 보여주는데 집중시켜 가이드를 할 수 있게 해준다는 이점이 있다.

애니메이션은 사용자 화면에 바로 놓이면 안된다. NNgroup 글에서는 주변의 뷰 중에 움직임은 주변의 잠재적 위험을 인식하는 생물학적 특성덕분에 사용자 시선을 빠르게 끌 수 있다. 그러나 사용자가 정의된 사이즈의 사이드바나 헤더에 있는 전형적인 베너나 팝업에 주목하지 않으려고 해왔는데, 디자이너들은 UI와 애니메이션이 이 패턴을 밟지 않도록 반드시 확신해야한다. 디자이너들은 한번에 최소한의 모션만하고, 관련된 정보가 있을것이라 사용자가 생각하는 위치에 요소를 애니메이션하여 무분별한 베너를 피할 수 있다.

화면에서 페이지 요소가 로드되는 순서를 애니메이션하는 것은 페이지의 시각적 계층을 보여줄 수 있다. 미묘한 애니메이션을 이용하여 페이지의 레이아웃을 사용자게게 보여줄것이고 인식 로드를 줄이는 것에 초점을 맞출 수 있다.

추가적으로 다른 요소에대해 같은 애니메이션을 사용하여, 그 요소들이 그룹화되있고 비슷한 동작을 취한다는 이해를 돕는데 도움이될것이다. 사람의 마음은 항상 새로운 패턴을 찾고있다.

미시 인터렉션(microinteraction, 한 오브젝트의 이동)과 거시 인터렉션(macrointeraction, 오브젝트 사이의 이동)에서의 모션은  사용자 문맥을 제공하고 시스템을통한 지속성을 보여준다. 또한 모션은 새로운 인터렉션이나 제스처를 사용자에게 가르쳐줄 수 있다. 잘 사용된 애니메이션은 정보들이 어떻게 맞아떨어지는지 빠르게 이해할 수 있게 해주며 결과적으로 더 나은 결정을 할 수 있게 해준다.

애니메이션은 발견할 수 있게 해주는 능력을 가지고있다. 상태간의 트랜지션은 한 오브젝트의 기능을 소통할 수있게 한다. 예를들어, 메뉴 아이콘이 닫기 아이콘으로 바뀌어서 사용자에게 같은 버튼이 두 동작을 완료한다는 것을 보여준다.

애니메이션은 사용자가 공간적 정보의 마음의 지도를 만드는데 도움을 준다. 작은 화면에서는 이것이 중요하다. 한 사용자가 화면미로안에서 쉽게 길을 잃어버릴 수 있다. 예를들어 사용자가 오른쪽으로 계속 스와이핑하여 페이지 깊숙히 들어간다. 몇몇 사용자는 왼쪽으로 스와이핑하여 메인페이지로 돌아갈 수 있다는 것을 발견할 것이다. 발견가능성을 보장하기위해, 애니메이션과함께 시각적인 행동유도성(affordances)이 사용되어야 한다.

애니메이션은 인터렉티브한 적응을 도와준다. 적당한 시점에 적절한 것을 사용자에게 보여줌으로서, 디자이너들은 진행하는 것을 보여준다(Designers are creating progressive disclosure). 진행 모습은 사용자가 봐왔던 잡다한 것을 줄여서 시스템을 이해하기 쉽게 만들어준다. 앱이 어떻게 동작하는지 새로운 컨텐트를 배우는동안 정밀한 애니메이션은 편하게해준다. 결과적으로 이것은 사용자에게 무엇이 중요한지 기억하는데 도움이 된다.

애니메이션은 사용자가 기쁘고 사용자 경험을 증진시키는데 멋진 방법이다. 그러나 애니메이션으로 사용자를 기쁘게하기전에 디자인너들은 사용자의 기본 기대를 충족시켜줘야하고 깨진것을 번저 제거해야한다. 그렇지않으면 즐거움이 없는 애니메이션을 느낄것이다. 애니메이션의 빈도(frequency), 지속(duration), 속도(speed)는 사용자의 시스템 이해에 영향을 준다. 이것이 왜 디자이너들이 애니메이션을 만들때 심사숙고해야하는지 그 이유다.

기쁨을 위한 애니메이션 추가를위한 적절한 장소는 그들이 원하는 것을 보여주면서 놀라게 해줄때이다. 예를들어 무료 배송같은 것들이다. 애니메이션은 사용자에게 방해가 되지 않아야한다.

디자이너는 사용자에게 이 애니메이션이 얼마나 자주 나타날지 생각해야한다. 첫번째로 보여지는 애니메이션은 신선하고 사용자를 기쁘게할 수도 있지만, 신선함과 기쁨은 그 후에 성가신것이 될수 있다. NNGroup은 사용자 테스트 세션동안 다음을 찾아냈다. 참가자들이 말한 내용이다: "이 [애니메이션]은 처음 보기엔 멋지지만 지금은 성가신것이 되었다"

디자이너는 사용자들이 애니메이션을 기다리다가 그 작업을 포기하기 전에 얼마나 기다릴 수 있는지 알아야한다. NNGroup 연구는 100ms까지는 사용자에게 나타나야함을 보여준다. 애니메이션이 좀 길게 걸린다는 것을 파악하고, 그 시간 범위는 150ms에서 350이다. Val Head에 따르면 일반적인 애니메이션 가이드라인은 200ms에서 500ms 사이에 실행되는 것이다. 그 목적은 애니메이션이 자연스럽게 보이게 만들기 위함이다. 사용자들은 보기에 친숙한 것으로 식별하기때문에 결국 디자이너의 결정에 달려있다. 애니메이션이 얼만큼의 빠르기로 실행되어야하는지 적당한 선이 있는데, 너무 빨리 빠르면 사용자가 너무 느리게 놓칠 수 있으며, 너무 느리면 사용자는 시스템이 느리다고 인식 할 수 있습니다.

애니메이션의 전반적인 속도는 성능의 인지에 영향을 줄 수도 있다. 느린 애니메이션은 전반적인 시스템이 느리다고 생각하게 만들 것이다. 그러나 지연을 숨기고 사용자가 인지하는 성능 증가를 유지하기위해 애니메이션을 사용할 수도 있다.

로딩 애니메이션은 시각적 피드백과 함께 나타나 사용자를 잡아둔다. 결과적으로 사용자는 기다리는 시간을 더 짧게 느낀다. 애니메이션의 사이클 수는 지각하는 속도를 높힐 수 있다. 페이스북은 스켈래톤 컨텐트 로딩 애니메이션을 가지고 있다. 이것은 전통적인 로딩 스피너로 만든 우아한 솔루션이다. Viget의 연구에서는 사람들이 일반적인 애니메이션보다 브랜드로된 로딩 이미지에대해 더 길게 기다릴 것이라는 점을 발견했다.

디자이너들은 애니메이션 접근성을 고려해야한다. 무질서하게 개별적인 모션은 현기증나고 지겹고 혼란스럽게 만들 수 있다. iOS7에서 화면 이동(transition)이나 백그라운드로 가는 애니메이션을 선택적으로 끌 수 있게 해놓은 이유이다. 백그라운드에있는 방식은 포그라운드보다 더 천천히 움직이는 시간차 스크롤은 올바르게 사용되지 않는다면 혼란을 만들 수도 있는 모션의 예시이다. 이것을 해결하기 위해서는, 디자이너들이 '큰' 동작의 애니메이션을 자동으로 실행시키지 않도록 해야한다. 사용자들이 애니메이션을 시작한다면 좀 더 준비되있을 것이고 방심한 틈을타 당하지 않을 것이다.

웹 접근성는 애니메이션이 적용된 컨텐트를 확인하는것이 텍스트 형태로 표현되는 것을 추천한다; 시각적으로 감소된 컨텐트와 무질서하게 사용자에게 접근하는 것을 접근하게 해준다. 디자이너들은 영향이 없는 사용자들이 그 작업흐름을 빨리하기위해 애니메이션을 끌 수 있어야한다는 상황도 알고 있어야한다. 제일 좋은 방법은 W3C 가이드라인에 따른 애니메이션 접근성을 만들기 위해서는 Web Accessibility를 확인하라.

디자이너들은 마음속에 아래 습관들을 기억하고 있어야한다.

목표 : 애니메이션이 사용자에게 전달하고 싶은 것이 무엇인가?

초점 : 사용자의 현재 초점이 어디인가? 사용자가 찾고 있는 것이 무엇인가?

모션의 메카닉:

빈도 : 애니메이션을 얼마나 자주 실행하나?

지속 : 애니메이션을 얼마나 길게 실행하나?

속도 : 애니메이션을 어떤 속도로 실행하나?

발생 : 어떻게해서 애니메이션이 발생하나? 사용자 동작으로부터? 아니면 자동적으로?

접근성 : 사용자가 애니메이션을 껐을때 어떻게 사용자 경험에 영향을 줄 것인가?

디자이너들은 체크리스트의 항목으로 모션 스타일 가이드를 만들고 싶어할 것이다. 컨텐트와 시각적인것은 스타일 가이드가 있으며, 리스트에 애니메이션을 추가함으로서, 디자이너들은 전반적으로 일반적인 경험을 만들고 싶어한다. Google의 Material design and Slaesforce의 Lightning Design은 좋은 예시 자료이다.