brunch

매거진 UX 디자인의 모든 것

라이킷 163 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Aug 31. 2016

마이크로 인터랙션 베스트 사례

UX 디자인 배우기 #24

Today UX 아티클

VisualHierarchy에 게재된 글 Microinteractions – what they are, how they work, and best practices를 소개하고자 합니다.

마이크로 인터랙션은 모던 디자인에서 빼놓을 수 없는 중요한 최신 UX 트렌드라고 합니다. 마이크로 인터랙션은 다음과 같은 몇 가지 역할을 한다고 합니다:

상태나 피드백 소통하기

특정 액션에 대한 결과를 보여주기

조작 도와주기

마이크로 인터랙션이 전반적인 디자인 구조와 경험을 결합시켜 준다는 사실을 놓치고 마이크로 인터랙션을 간과하기 쉽다고 합니다. 마이크로 인터랙션은 유저가 인터페이스를 돌아다닐 수 있도록 도와주고, 다음과 같은 기본적인 기능을 수행할 수 있도록 도와주는 작은 커뮤니케이션 도구라고 합니다.

자신의 액션에 대한 피드백 혹은 결과 소통

개별적이거나 단발적인 태스크(기기 연결, 포스트 링크걸기 등) 성취

설정 조작

오류 방지

마이크로 인터랙션은 매우 포멀하게 이용될 수도 있지만, 매우 재미있게 활용될 수도 있다고 합니다. 잘만 활용하면 경험을 더 즐겁게 만들어주고, 브랜드 인지를 강화시켜주는 역할도 할 수 있다고 합니다.

마이크로 인터랙션: 어떻게 작동하는 것인가?

모든 마이크로 인터랙션은 트리거(trigger), 룰(rules), 피드백(feedback), 모드와 루프(modes/loops) 등 4가지 기본 요소를 갖추고 있다고 합니다:

1) 트리거: 액션이 시작되게 해주는 방아쇠로 클릭, 탭, 플리킹, 알림 소리 등이 있다고 합니다.

2) 룰: 마이크로 인터랙션이 발생하는 조건을 미리 정한 것이라고 합니다.

3) 피드백: 트리거로 인해 룰에 따라 마이크로 인터랙션이 성공적으로 작동하고 있음을 보여주는 것이라고 합니다.

4) 루프와 모드: 마이크로 인터랙션의 마지막 단계에 나타나는 것으로, 루프의 목적은 마이크로 인터랙션의 길이를 정하는 것인 반면, 모드는 유저가 프로세스를 지속할 수 있도록 도와주는 덜 중요한 액션을 처리한다고 합니다.

마이크로 인터랙션의 엄청난 성공에는 여러 이유가 있다

이 글에서는 마이크로 인터랙션이 성공한 이유로 5가지를 꼽습니다.

유저가 자신이 한 행동의 결과를 바로 알 수 있어 계속 작업하도록 동기 부여를 해준다고 합니다.

어떻게 작동하는 것인지 직관적인 요소와 힌트를 주어 안내를 간소화한다고 합니다.

습관 루프를 강화하고 구체적인 행동 패턴을 만들어주는 시각적 효과를 통해 사용자 경험이 보상을 받는다고 합니다.

유저는 보통 웹사이트가 웹 트렌드를 따라주길 기대하는데, 이런 부분을 충족해준다고 합니다.

오늘날 디자인은 그 어느 때보다 인간 중심적이기 때문에 디바이스가 인간 친화적인 방식으로 작동하게 해주는 인터랙션을 요구한다고 합니다.

마이크로 인터랙션 모범 사례

시스템 상태를 보여주기

제이콥 닐슨에 따르면 유저는 언제나 어떤 일이 벌어지고 있는지 알아야 하고, 자신이 취한 행동이 성취되었을 때 즉각적인 반응을 받아야 한다고 합니다. 예를 들면 흥미로운 배경 그래픽이나 비트 전송률, 사운드, 파일 전송률 등을 보여주어 유저가 진행 과정을 이해할 수 있게 해줘야 한다고 합니다.

변화 강조하기

많은 디자이너들이 액션 버튼을 더 작게 만들어 공간을 절약하는 것이 좋다고 생각하지만, 유저가 행동을 할 수 있도록 버튼을 명확하게 보여주고, 가야 할 방향을 알려주는 애니메이션을 보여주면 좋다고 합니다.

맥락 유지하기

모바일이 가장 중요한 시대이기 때문에 모바일에 시각적이면서도 중요한 정보를 빠트리지 않고 넣는 방법을 찾아야 한다고 합니다. 마이크로 인터랙션을 활용하면 전체 프로세스를 이해하고 중간에 유저가 길을 잃지 않게 해주는 데 도움이 된다고 합니다.

독특한 레이아웃 이용하기

마이크로 인터랙션을 이용하면 익숙하지 않거나 독특한 레이아웃을 혼란 없이 받아들일 수 있다고 합니다.

행동 유도

마이크로 인터랙션을 이용하면 유저가 버튼을 클릭하거나 콘텐츠를 공유하거나 더 읽도록 유도할 수 있다고 합니다.

인풋 시각화

데이터 입력은 앱 디자인 작업의 퀄리티를 결정하는 가장 중요한 요소라고 합니다. 마이크로 인터랙션을 이용하면 데이터 입력이 지루한 프로세스를 보다 즐겁게 만들어 줄 수 있다고 합니다.

라이브 튜토리얼 도입하기

유저는 애니메이션을 정말 좋아하기 때문에 교육 수단으로 완벽해야 한다고 합니다. 긴 가이드와 설명서를 주는 대신, 제품의 중요 기능과 필요한 컨트롤을 비디오로 강조해보라고 합니다.

모바일 마이크로 인터랙션

유저 인터페이스의 주요 능력은 유저에게 지속적으로 피드백을 업데이트해주는 것이라고 합니다. 때문에 인터페이스는 마이크로 인터랙션에 의존할 수밖에 없다고 합니다.

모바일 기기에서는 ‘끌어내려서 새로고침’이 가장 유명한 애니메이션인데, 이런 애니메이션을 써서 생기를 불어넣을수록, 유저는 더 지루해하지 않는다고 합니다.

또한 모션과 시각적 단서 덕분에 유저는 자신이 입력한 것의 의미를 즉시 이해할 수 있고, 앱에 대해 통제권을 가지고 있다고 느낀다고 합니다.

특히, 고려해봐야 할 인터랙션은 아래와 같이 한 번에 여러 기능을 수행하게 해주는 모핑 아이콘이라고 합니다. 모핑 아이콘은 정보성을 띄면서도 시각적으로 즐겁고, 모바일 기기처럼 작은 화면에도 적용할 수 있어 좋고 합니다.

디자인의 인터랙션 룰은 언제나 같다

작은 스크린에 맞춰 디자인한다고 해서 앱의 기능성을 희생해서는 안되며, 주요 디자인 룰을 지켜야 한다고 합니다. 공간이 줄어든다 해도 다음과 같은 룰을 계속 지켜야 한다고 합니다.

목적이 있는 디자인: 유저를 인터뷰하고 퍼소나를 만들면서 찾은 디자인의 목적과 목표를 잊지 말아야 한다고 합니다.

사용성: 사용성은 아무리 강조해도 지나치지 않다고 합니다. 매력보다 중요한 것이 사용성이고 여기엔 예외가 없다고 합니다.

어포던스와 시그니파이어: 어포던스는 기능을 나타내는 반면, 시그니파이어는 어포던스가 있음을 보여준다고 합니다. 예를 들어 문장이 파란색이고 밑줄이 있으면(시그니파이어), 클릭하면 다른 페이지로 연결된다는 것을 보여준다고 합니다(어포던스). 시그니파이어는 유저가 생각하지 않고도 직관적으로 따라갈 수 있도록 만들어야 한다고 합니다.

매끄러운 학습 곡선: 앞서 말했지만 유저는 내비게이션 패턴을 직관적으로 따라갈 수 있어야 한다고 합니다. 때문에 유저가 익히기 쉽고 익숙한 패턴을 써야 한다고 합니다.

피드백과 반응 시간: 피드백은 액션이 끝났는지 아닌지 이해하도록 도와주기 때문에 중요하다고 합니다. 피드백은 인간미가 있으면서도 친화적으로 만들고, 닐슨 노만 그룹 가이드라인에서 추천하는 타이밍에 제공해야 한다고 합니다.