Detail is the Core – UI Animation & Interaction

사용자의 Context가 복잡해지고 수 많은 디바이스와 컨텐츠가 쏟아져나올 수록 중요한 것은 Simplicity인 것 같다. 그럼 가장 좋은, 잘 만들어진 것은 결국 다 비슷해지나? 하지만 그 차이를 만드는 것이 있으니 그것은 경험의 detail, 즉 interaction이다.

그 중에서도 UI Animation에 대해서 정리해보려고 한다. 보통 Brand 또는 Identity하면 logotype, CI같은 시각적인 디자인을 말하지만, 이미 사운드 – Mac과 Window의 부팅 사운드와 같은 – 도 그 영역에서 인정받고 있다. 나는 거기에 잘 만들어진 일관된 UI Animation, UI Motion은 그 중요성을 갈 수록 더해가고 있다고 생각한다.

Simple is the Best, Less is More 다 맞는 말이다. 좋은 디자인이 되려면 핵심에 집중하고 꼭 필요하지 않은 것은 제거하는 것이 좋다. 그리고 거기에 적절한 = 의미에 맞는 UI Animation이 세련되게, 재밌게 적용된다면 결과물의 완성도를 확실하게 끌어올리고 identity를 만들어낼 수 있다고 생각한다.

여기까지는 내가 평소에 늘 하던 생각이다. 하지만 실제 디자인/개발의 프로세스에서 그런 부분은 간과되거나 별로 주목받지 못하는 것이 사실이다. 멋진 디자인 스타일을 만들고 적절한 기능과 Task flow를 구성하는 것 만도 시간이 부족하니까. 그래서 뭔가 정리된, 좋은 사례들을 살펴보면서 좋은 UI Animation, 적절한 interaction을 디자인하는 시간을 줄여보고, 필요할 때 설득의 도구가 될 만한 내용을 정리해보려고 한다.

 

>Meaningful Transitions

이 사이트의 제목, 참 마음에 든다. Meaningful. 적절하다.
다양한 종류의 UI Animation을 카테고리로 나눠서 정리하고 설명을 하고 있다. 또한 Motion의 규칙에 대한 가이드도 정리하고 있기 때문에, 이 내용들을 기준으로 삼는다면 디자이너-기획자-개발자 간의 커뮤니케이션에 충분히 도움이 될 수 있다.

* update : 위의 사이트는 폐쇄되었다. 대신 구글의 Material Design Guide에서 동일한 챕터가 있어서 링크한다.
>Google Material Design : Meaningful Transitions

>JQuery UI와 같은 라이브러리들도 있지만, 좋은 UI Animation을 제공한다고 할 수는 없다. 그런 점에서 다음의 2개 라이브러리는 아주 훌륭한 레퍼런스들이다.

> A Collection of Page Transitions
> Effeckt.CSS

A Collection of Page Transitions은 >GitHub에서 자료를 받을 수 있으며, 간단한 >소개와 Tutorial도 볼 수 있다.

Effeckt.CSS 역시 다양한 UI Animation을 소개하고 있으며 >GitHub에서 자료를 볼 수 있다.

그리고 UI Animation의 패턴을 모아놓고 있는 곳이 몇 군데 있다.

> CAPPTIVATE.co
>Use Your Interface

마지막으로 PXD에서 관련해서 잘 정리해놓은 글을 링크한다. 이 글의 많은 링크들을 PXD의 글에서 참고했음을 밝힌다.
>PXD : User Inferace의 애니메이션 & 트랜지션

[번역] UX is not UI by Erik Flowers

최근에 SNS에 떠돌아다닌 UX is not UI라는 이미지가 있었습니다. 많은 분들이 동감을 하기 때문에 퍼진 것일텐데, 과연 어떤 내용을 더 담고 있는지 보려고 이 글을 번역합니다. 저 스스로는 UX가 뭐지? 라는 커다란 질문에 대한 답을 할 깜냥은 안되지만, 설명하는데 도움이 될 수 있을 것 같습니다. 결국, 디자인은, Problem Solving입니다.

>원문 보기

 

————————

UX is not UI

Dec 15, 2012 /  by Erik Flowers / @Erik_UX / View Original

 

“UX is the intangible design of a strategy that brings us to a solution.”

UX has become a neologism. When something has “good UX” it is an implied meaning of having the core components of UX (research, maybe a persona, IA, interaction, interface, etc etc…). It’s not really necessary or desirable to tack the word design onto the end anymore. It’s a distraction and leads people down a parallel but misguided path… the path to thinking that UX = User Interface Design.

UX는 신조어가 되었다. ‘good UX’를 가졌다고 할 때 그것은 UX의 핵심 구성 요소들(리서치, 퍼소나, IA, interaction, interface 등등)을 가지고 있다는 의미를 암시한다. UX라는 단어 뒤에 더이상 design이란 단어를 불이려고 할 필요가 없다. 그러면 오히려 초점을 흐리고 비슷하지만 다른 길, UX와 User Interface Design이 같다고 여기도록 사람들을 오해하게 만든다.

I was inspired to write this post after viewing Elisabeth Hubert’s (@lishubertpresentation at the Future of Web Design 2012 conference in Prague. She says in the presentation quite clearly:

이 글은 프라하에서 있었던 Future of Web Design 2012 컨퍼런스의 Elsabeth Hubert의 프리젠테이션을 보고 영감을 받아 쓰여졌다. 그녀는 프리젠테이션이서 명확하게 다음과 같이 말했다.

The interface is not the solution.

인터페이스는 해결책이 아니다.

That’s the true heart of the battle between UX and those who only want UI – or don’t know the difference.

이 문장은 UX와 단지 UI만 원하거나 그 차이를 모르는 사람들 간의 논쟁에서 아주 중요한 점이다.

How UX people see UX

UX is an acronym for “user experience.” It is almost always followed by the word “design.” By the nature of the term, people who perform the work become “UX designers.” But these designers aren’t designing things in the same sense as a visual or interface designer. UX is the intangible design of a strategy that brings us to a solution.

UX는 사용자 경험의 준말이다. 보통은 뒤에 ‘디자인’이 따라온다. 그 단어로부터 자연스럽게 그런 일을 하는 사람들은 ‘UX designer’가 되었다. 그러나 그런 디자이너들은 실제로는 비주얼이나 인터페이스 디자이너와 같은 디자인을 하지 않는다. UX는 문제의 해결책으로 이끄는 무형의 전략을 디자인하는 것이다.

Many UX designers have started to re-label themselves as UX Architects, UX Engineers, or UX Strategists. Some have even dropped the word “user” altogether and just (more…)

Factor for Real Touch

이전 글(>진짜 Touch를 생각하자)에서 언급한 것처럼, Touch를 다루는 기획자, 개발자, 디자이너들이 생각할 것들이 많습니다. 관련해서 그려본 마인드맵입니다. 오른쪽 빨간 요소들은  UX, UI에 대한 것들이고 왼쪽의 노란 요소들은 Touch UI가 제대로 구현되기 위해 필요한 HW/SW 요소들입니다. Touch에 대해 모든 요소들이 다 있는 건 아니고, 다만 기본이지만 실제로 놓치기 쉬운 것들입니다.