Microinteractions: 좋은 앱의 비밀
[번역][UX][UI][Mobile] 효과적인 마이크로 인터렉션 사용법
이 글은 Babich.biz에서 Nick Babich 의 "Microinteractions: The Secret of Great App Design"을 번역한 글입니다.
좋은 서비스는 두 가지에 강하다: 특징(features)과 디테일. 특징은 사람들을 당신의 서비스로 불러 모은다. 디테일은 그 사람들을 머무르게 한다. 사실상 디테일이야말로 우리의 앱을 경쟁에서 돋보이게 해준다.
마이크로인터렉션은 가장 기분 좋은 피드백을 주는 최고의 기법 중 하나이다. 이는 human-centered design approach로 이끌고, 유저가 주된 초점이 된다. 가끔 장신구나 부차적으로 여겨지곤 하는 마이크로인터렉션은 유저에게 때론 굉장한 행복을 느끼게 해준다. 디자이너로서는 마이크로인터렉션이 안보인다는 것을 알아차리는 것이 그것을 디자인하는 만큼이나 중요하다. 당신은 항상 '인간적'인 관점에 서서 사용자가 목표에 도달할 수 있게 도와주어야 한다.
그래서, 마이크로인터렉션은 무엇인가?
마이크로인터렉션은 서비스에 있는 작은 테스크를 담당하는 프로덕트의 순간순간들이다.
Dan Saffer의 Microinteractions이라는 책에서 설명됐듯이 이런 작은 디테일이 중요한 기능을 구현한다:
- 액션에 대한 피드백을 제공한다
- Individual task를 완성하게 해준다
- 조종하는 느낌을 증가시켜준다
- 유저가 액션의 결과를 볼 수 있게 해 주고 에러를 막아준다
구체적인 마이크로 인터렉션의 사례는 이렇다:
- 아이폰의 음소거를 누를 때 진동 노티피케이션과 음소거 아이콘이 디스플레이에 같이 보인다.
- 클릭했을 때 반응하는 인터페이스 애니메이션 (누르면 색깔이 변하는 버튼)
Source: Dribbble.왜 마이크로 인터렉션은 효과적인가?
마이크로 인터렉션은 인간의 "acknowledgement", "인정"이라는 자연스러운 본능을 어필하기 때문에 효과적이다. 유저는 지속적으로 자신의 액션이 받아들여졌는지 알 수 있고, 꾸준히 보여지는 리워드를 기쁘게 받아들인다. 또한 마이크로 인터렉션은 유저가 어떻게 시스템을 이용할 수 있는지 가이드해주는 역할을 한다.
기회 발견하기 (Identifying Opportunities)
마이크로 인터렉션의 묘미는 여러 부분들에 어떤 방식으로든 끼워 넣어질 수 있다는 것이다. 일반적으로는 아래의 부분들에서 자주 나타나는 걸 볼 수 있다:
시스템 상태 보여주기
Jacob Nielson 의 첫 'usability heuristic principle'에 따르면, 유저에게 무슨 일이 일어나고 있는지 항상 알려줘야 한다. 유저는 바로 반응을 갖길 기대할 것이다. 하지만 액션이 완료되기 전, 앱도 시간이 필요한 상황들이 종종 있지 않은가? 인터페이스는 유저가 무슨 일이 벌어지고 있는지에 대해 항상 알려야 한다.
Progress Bar for uploading and downloading. Source: Dribbble.또는 유저가 어디에 있는지를...
Scrolling Bar Progress결론: 유저가 지루하지 않게 하라 - 유저에게 진행상태를 알려주고 보여주어라 (예를 들어, 로딩바는 유저의 참여도를 높이고 혼란을 막아준다)
변화 강조하기 (Highlight Changes)
가끔 우리는 유저가 볼 수 있도록 노티피케이션을 보여줘야 한다. 애니메이션도 도와줄 수 있다. 이는 유저의 관심을 끌 것이고 당신이 중요하게 생각하는 것을 간과하지 못하게 할 것이다.
New incoming message. Source: Dribbble.결론: 많은 경우에 애니메이션 효과는 중요한 것을 유저에게 알리기 위해 사용되기도 한다. KISS principle에 따라, 마이크로 인터렉션은 작고 간단해야 한다.
흐름 (Context) 유지하기
모션을 사용해서 유저가 Navigational contexts 사이를 부드럽게 이동할 수 있도록 하고, 스크린에 있는 요소들의 배열 변화를 설명하라. 이는 한 스크린에 많은 정보를 담기 힘든 모바일 디바이스나 스마트 워치에 특별히 더 효과적이다.
Material Design결론: 다른 페이지들 사이의 분명한 내비게이션을 유지해서 유저가 무엇이 어디서 나타났는지 잘 이해할 수 있도록 해라. 두개의 다른 시각 상태에서의 이동은 명확하고, 부드럽고, 쉬워야 한다. 하나의 테마로 묶어라 - 모든 인터렉션을 하나의 테마로 연결 지어야 한다.
입력(Input) 시각화하기
데이터 입력은 어떤 앱이라도 가장 중요한 요소 중 하나이다. 그리고 마이크로인터렉션은 이런 프로세스를 좀 더 '특별하게' 만들어준다. 이미 있는 요소들을 이용해서 피드백을 전달할 수 있다.
Source: Dribbble.결론: 마이크로 인터렉션은 정보를 발견하고 유저가 목표에 도달할 수 있도록 도와준다.
행동하게 만들기
마이크로 인터렉션은 유저가 실제로 '인터렉트'하게 촉진시키는 힘을 가지고 있다. 그들은 사용자 경험에 '공감'을 불어넣는다. 하지만 이런 시각 단서나 애니메이션이 유저에게 알맞게 쓰이도록 해야 한다. 또한 수명에 대해서도 명심해야 한다 - 그 마이크로 인터렉션을 100번째 사용하면 지겨울지, 아니면 명확하고 지나치지 않게 적당한지를 고민해보아야 한다.
결론: 유저 인터렉션에 있어 큰 역할을 차지하는 유저 감정에 집중하라. 콘텍스트와 유저 리서치에서 끌어내서 반복적인 사용을 위해 디자인하라.
기억할 점들
- 마이크로인터렉션은 피드백, 노티피케이션, 명령 처리를 통한 인터렉션의 촉진제로서의 역할을 한다.
- 마이크로 인터렉션은 정보를 지루하지 않고 유저를 방해하지 않는 선에서 정보를 전달함으로써 시간을 아껴주어야 한다. 마치 '윙크'를 날리듯, 유저의 관심을 끌어야 한다.
- 유저와 마이크로 인터렉션의 전체적인 흐름을 꾀고 있는 것은 더욱더 당신의 앱을 깔끔하고 효과적으로 만들어줄 것이다.
- 마이크로 인터렉션의 '장기적인 생존'이 가능해야 한다. 처음엔 재밌어 보일 수 있는 것들이 100번째로 사용했을 때는 지겹게 느껴지기도 한다.
- 마이크로 인터렉션에 '인간성/인간미'을 불어넣고, 시각적 하모니에 집중하라. 마이크로이터렉션이 살아나기 위해서는 모션이 유동성 있게 느껴져야 한다.
결론 :
세심하게 디자인하라. 어떻게 사람들이 디바이스를 사용하고, 작은 것들을 디자인할 때에도 사람들의 일반적인 생각 패턴을 반영하라. 디테일의 하나하나에 관심을 갖고 바라보는 것이 Human-Computer Interaction을 성공적으로 구현할 수 있는 열쇠가 될 것이다. 굉장한 디자인은 기능적인 파트에서부터 마이크로 인터렉션까지 하나의 패키지, full-stack으로서 나타나야 한다.
