마이크로 인터랙션
잘 만든 앱 디자인의 비밀
UX 플래닛 기사의 번역 요약글입니다.
의역이 많습니다.
https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf#.5qj7m9pu3
잘 나가는 제품은 두 가지를 잘한다.
1. 기능: 사용자를 끌어들인다.
2. 디테일: 사용자를 계속 이용(남아있게)하게 한다.
마이크로 인터랙션이란?
제품 이용 시 하나하나의 사사로운 피드백을 세밀하게 제공하는 것.
-행위에 결과를 피드백으로 제공
-각각의 목표를 수행
-향상된 조작
-사용자의 행위나 에러방지를 위한 시각화된 결과 제공
*역 역자: 예를 들면 버스 단말기에 카드 접촉 시 소리와 나간 금액이 표시. 시각과 청각을 통해 피드백 전달.
모바일폰에서 진동 모드로 변경하면 화면에서도 같이 진동임을 알림을 표시.
클릭이 가능한지 보여주는 인터페이스 애니메이션(올려놓으면(hover) 색이 변하는 버튼)마이크로 인터랙션이 먹히는 이유
마이크로 인터랙션은 사용자가 기대하는 자연적인 업무수행 흐름에 맞춰 디자인됩니다.
사용자는 즉흥적으로 자신의 행동(버튼 클릭)에 대한 결과를 알고 싶어 하고 시각적인 효과를 통해 재미를 가져다줍니다. 마이크로 인터랙션은 시스템이 어떻게 구동되는지 효과적인 가이드를 제공하기도 합니다.
적절한 기회를 찾아라
마이크로 인터랙션의 강점은 사용자의 행동 유발 가능한 어떠한 곳에도 적용할 수 있다는 것에 있습니다.
시스템 상태 알림:
(제이콥 닐슨의 사용성 휴리스틱 법칙) "사용자에게 항상 현재 상태를 알려줘라."에 근거해 보면 사용자는 항상 자신의 상태를 알고 싶어 합니다. 그런데 경우에 따라 시간이 필요한 경우가 있고 완료되어야만 알 수 있는 경우가 있습니다.
인터페이스는 항상 사용자에게 어떠한 상황에 있는지 알려줘야 합니다.
혹은 사용자가 어디에 있는지 알려줘야 합니다.메모: 사용자를 지루하게 만들면 안 됩니다. 항상 사용자에게 어떤 상황에 있고 어디에 있는지 표현해 줘야 합니다. 예) 로딩바
변화 강조:
사용자에게 알림을 하는 경우 반듯이 사용자가 이를 인지해야 합니다.
사용자의 시선을 끌고 주목시키기 위해 애니메이션이 효과적인 방법이 될 수 있습니다.
하지 말아야 것들: 다양한 케이스에 애니메이션 효과가 사용자의 주목을 끌기 위해 사용되는데 주의할 점은 작고 심플하고 세밀하게 구현해야 합니다.
콘텍스트 유지:
자연스럽게 화면 구성 요소의 배치에 변화를 내비게이셔널(이동 가능한) 콘텍스트 사이에 사용자 전환을 설명하는 경우 모션을 사용합니다. 특히 모바일 디바이스나 스마트워치에 적용되어야 하는데 수많은 정보를 한 화면에 담기 불가능하기 때문입니다.
*번역이 어렵네요 하단의 이미지를 보시면 좀 더 명확하게 이해할 수 있습니다.
구글 머테리얼 디자인메모: 화면 간의 명확한 내비게이션 유지: 사용자가 어디서 어디로 시작하고 끝나는지 이해할 수 있습니다. 2개 이상의 비주얼 요소가 한 화면에 노출되는 경우 명확하게, 자연스럽게 그리고 쉬워야 합니다.
통합 테마의 경우 하나의 인터랙션으로 만들어야 합니다.
입력 필드의 시각화:
데이터 입력은 모든 애플리케이션에 있어 중요한 부분입니다. 마이크로 인터랙션은 이러한 경우에 있어 특별한 경험을 제공할 수 있습니다. 기존에 존재하는 요소(예: 신용카드)를 통해 사용자에게 효과적인 피드백을 제공할 수 있습니다.
메모: 마이크로 인터랙션은 정보 노출(reveal information)과 사용자의 목표 도달(예: 카드 등록)을 위한 도움이 됩니다.
해야 할 것:
마이크로 인터랙션은 사용자 경험에 공감대를 형성할 수 있을 만큼 사용자가 실제로 상호작용을 할 수 있는 강력한 영향력이 있습니다. 그러나 애니메이션은 사용자의 목표와 의도에 적합해야 합니다.
그리고 오래가는 디자인이 되어야 합니다.
특히 사용자에게 경험하는 마이크로 인터랙션이:
혹시 사용자가 100번째 볼 때는 귀찮아하는 게 아닌지?
범용적으로 명확하고 눈에 거슬리는 건 아닌지? 확인해 봐야 할 것입니다.
메모: 사용자는 거대한 틀안의 사용자 인터랙션에서 행동하기 때문에 감정에 초점을 맞춥니다.
콘텍스트와 사용자 리서치, 반복 사용되는 디자인을 위해 설계를 해야 합니다.
기억해야 할 것들
-마이크로 인터랙션은 사용자에게 피드백, 알람 및 가이드 제공을 위한 촉매 역할을 수행합니다.
-마이크로 인터랙션은 짧은 시간 내에 정보를 주고받는 경우 사용자가 지루하거나 방해받지 않도록 시간을 절약시켜줘야 합니다. 얄밉지만 센스 있게 사용자의 의도를 잡아내야 합니다.
-마이크로 인터랙션 뒤에 감춰져 있는 사용자 의도와 콘텍스트를 이해하는 것은 더 정교하고 효과적으로 만들 것입니다.
-마이크로 인터랙션은 오랫동안 지속 가능해야 합니다. 사용자에게 처음에만 흥미를 주고 나중에는 그러한 것들(마이크로 인터랙션) 번거롭게 받아들이는 디자인이 되어선 안됩니다.
-휴머니티(인문학, 인간미)를 마이크로 인터랙션에 더함으로 시각적 발란스를 제공할 수 있습니다.
애니메이션은 사용자가 실생활에 경험하는 것과 같이 자연스럽게 녹여들 수 있도록 제공되어야 합니다.
정리
배려하는 디자인.
얼마나 많은 사람들이 자신의 모바일 기기를 가지고 일하고 공통되는 관점들을 당신이 이런 작은 조각들을 디자인할때에 반영이 되는지 생각해 보시길 바랍니다.
공통되는 관점들을 당신이 이런 작은 조각들을 디자인할때에 반영한다.
사소하지만 각각의 모든 세밀한 디테일은 사람과 소프트웨어 간(human computer interaction)의 인터랙션을 쉽게 이용할 수 있는 성공의 열쇠가 됩니다.
훌륭한 디자인은 마이크로 인터랙션에서 기능 제공까지 "full-stack"이 되어야 합니다.
*full-stack: 다양한 계층에서 최대한 많은 경험을 가진
이상용:
UX 디자이너입니다.
ultra0034@gmail.com
페이스북 '디자인' 페이지를 운영하고 있습니다.
충남대학교에서 UI 디자인을 가르치고 있습니다.
블로터 아카데미에서 가끔 강의를 하고 있습니다.
