마이크로인터랙션 (1) 트리거
마이크로인터랙션 사례로 보는 UX 디테일
마이크로인터랙션이란
흔히 UX는 직관적이어야 한다고 말한다. ‘사용자를 생각하게 하지 마!’라는 책 이름처럼, 아무 생각 없이도 쓸 수 있는 UX가 가장 좋은 UX이다.(이번에 리뷰하는 책이 그 책은 아니다.)
마이크로인터랙션은 그것을 가능하게 하는 디테일이다. 책에서는 제품에서 짧은 순간, 혹은 한 가지를 수행하는 작은 기능이라고 설명하고 있다. 예를 들면 회원가입 시 비밀번호를 설정해야 할 때, 어떻게 입력하게 할 것인지에도 마이크로인터랙션이 들어간다. 비밀번호를 어디에 어떻게 입력하게 할 것인가? 입력 박스는 어떻게 생겼으며 입력하기 전, 중, 후에 어떻게 반응할 것인가? 어떻게 하면 쉽게 안전한 비밀번호를 정하게 할 것인가? 비밀번호를 입력한다는 이 한 가지 행위에서의 사용자와 제품의 상호작용, 그것이 마이크로인터랙션이다.
좋은 마이크로인터랙션 디자인을 위해서는 사용자에 대한 이해와 대상 인터랙션의 맥락을 파악해야 한다.
그리고 경쟁이 심한 시장의 경우 마이크로인터랙션은 더욱 더 중요해진다고 한다. 동일한 기능의 제품이 있을 때, 제품과 관련된 경험을 통해 소비자는 제품과 브랜드를 좋아하게 되며, 그 경험은 마이크로인터랙션에 달려 있다고 말이다. 가령 구글 웹사이트에 들어갔을 때 검색창 하나만이 심플하게 있고, 무언가 입력하면 바로 검색 결과가 나오기 시작하는 경험은 검색이 필요할 땐 구글을 떠올리게 할 만큼 인상적이다.
이제부터는 마이크로인터랙션을 어떻게 디자인해야 하는지, 책에 나온 내용을 정리해보고자 한다.
마이크로인터랙션은 물론 모바일 앱에만 국한되는 개념은 아니며, 디지털 기기뿐 아니라 가위나 쓰레기통, 자전거 같은 모든 제품에 적용될 수 있다. 책에서도 여러 제품의 예시를 들고 있지만, 나는 정리하면서 내게 익숙한 모바일 앱 프로덕트 위주로 다시 예시를 찾아 보았다. 워낙 많은 내용과 예시가 있어 이번 글에 다 끝내지 못하고 여러 편으로 나누어 나올 예정이다.
+덧. 사실 UX 디자이너라면 이런 개념을 몰라도 이미 마이크로인터랙션을 녹여서 디자인하고 있을 가능성이 높다. 그래서 책을 읽으면서 너무 당연한 말들이라고 느끼기도 했지만, 이를 실무에서 얼마나 효과적으로 잘 적용하느냐는 또 어려운 일이다. 그래서 나의 디자인이 기본적인 원칙을 잘 지키고 있는지 점검하고, 좋은 예시들을 통해 훌륭한 마이크로인터랙션에 대한 영감을 받을 수 있었다. 그리고 한편으로는 본인의 디자인이 왜 좋은 디자인인지를 설명할 근거가 되어줄 수도 있을 것 같다.
마이크로인터랙션의 네 가지 요소
책에서는 마이크로인터랙션을 구성하는 요소를 네 가지로 나누어 소개하고 있다. 트리거, 동작규칙, 피드백, 순환과 모드가 그것이다.
마이크로인터랙션을 시작하는 트리거trigger
마이크로인터랙션, 즉 상호작용을 시작하게 하는 무언가이다. 버튼이나 입력 박스, 바텀 시트의 핸들과 같은 요소라고 할 수 있다.
사용자가 하고자 하는 작업의 내용, 시기, 주기 등 사용자의 필요에 따라 트리거의 어포던스, 접근성, 지속성이 결정된다.
마이크로인터랙션이 어떻게 동작하는지를 결정하는 동작규칙rule
사용자와 제품의 상호작용에서, 사용자는 제품이 어떻게 동작될지 이해하길 원한다. 즉 마이크로인터랙션의 동작규칙을 알고 싶어한다는 것이다.
간단하게는 ‘검색창에 글자를 입력하면 추천 검색어가 나타난다’와 같은 것일 수도 있고, ‘주변이 어두워지면 화면 밝기가 어두워진다’같은 것도 있다.
마이크로인터랙션의 동작 상황을 표시하는 피드백feedback
이렇게 우리가 보고 듣고 느낌으로써 시스템의 동작규칙을 이해할 수 있게 해주는 모든 것이 마이크로인터랙션의 세 번째 요소인 피드백에 해당한다.
피드백은 시각, 청각, 촉각(진동) 등 여러 형태가 될 수 있다.
마이크로인터랙션에게 영향을 미치는 상위규칙인 순환loops과 모드mode
마이크로인터랙션이 진행되면서 시간에 따라 어떤 일이 벌어지는가? 사용자가 직접 끌 때까지 상호작용이 유지되어야 하나? 아니면 어느 정도 시간이 지난 다음에 원래대로 돌아가야 하나? 다른 명령을 수행해야 하거나 조건이 바뀌면 어떻게 해야 하나?
트리거Trigger
앞서 설명한 것처럼 트리거는 상호작용을 시작하게 하는 무언가이다.
트리거는 '수동 트리거(사용자 트리거)'와 '시스템 트리거'로 나뉘는데, 수동 트리거는 사용자가 직접 누르거나 입력하는 등 조작하게 하는 트리거이며 시스템 트리거는 특정 조건이 충족되면 자동으로 구동되는 트리거이다.
트리거에서는 아래 몇 가지 원칙들을 고려하여 디자인해야 한다.
트리거 디자인 원칙
1. 트리거는 사용자의 니즈가 발생하는 그 순간, 그 곳에 등장해야 한다.
트리거는 전원 스위치처럼 항상 쓸 수 있어야 할 수도 있고, 사용자가 특수한 모드에 들어가 있을 때만 나타나야 할 수도 있다.
때문에 사용자의 니즈가 언제 어떤 상황에서 발생하는지 이해하고 트리거를 배치해야 한다.
스크롤 시 등장하는 ‘위로’ 버튼. 특히 인피니티 스크롤이 적용된 화면에서는 탐색 중에 맨 위로 돌아가고 싶은 니즈가 발생할 수 있다.2. 같은 트리거는 언제나 똑같은 행동을 해야 한다.
이는 사용자가 그 마이크로인터랙션의 동작 방식에 대해서 정확한 멘탈모델을 만들 수 있도록 해준다.
3. 마이크로인터랙션에 포함된 정보를 미리 표시하여, 굳이 클릭하지 않고도 필요한 정보를 얻도록 한다.
예를 들면 구글 크롬 아이콘에는 다운로드 건수와 진행도가 미리 표시되어, 눌러보지 않아도 알 수 있다.
구글 크롬 아이콘(Mac OS의 Dock)또한 iOS의 다이나믹 아일랜드나 위젯도 마찬가지다. 현재 진행중인 인터랙션(음악 재생)의 정보를 미리 알 수 있게 한다.
iOS의 다이나믹 아일랜드와 위젯4. 시각적 어포던스를 깨지 말라. 잘못된 어포던스를 제시하지 말라
버튼처럼 생긴 트리거라면, 버튼처럼 동작하여 사용자가 누를 수 있어야 한다.
예를 들면, 네이버앱의 그린휠은 돌릴 수 있을 것 같아 보인다. 그리고 구글캘린더의 바텀시트는 3단계로 조정이 가능한데, 바텀시트 위의 핸들은 위치에 따라 모양을 바꿔 적절한 어포던스를 제공한다.
네이버앱의 그린휠 / 구글캘린더의 바텀시트 핸들평소 불편함을 느꼈던 잘못된 예시도 찾아 보았다.
카카오웹툰 앱에서 특정 웹툰을 누르면 위아래로 펼쳐져서 나온다. 하지만 해당 페이지를 닫으려면 옆으로 쓸어넘겨야 닫힌다. 아래에서 위로 열렸기에 아래로 쓸어내리면 닫힐 줄 알았는데, 해당 제스처를 하면 다른 화면이 튀어나온다.
5. 자주 사용하는 마이크로인터랙션의 트리거일수록 찾기 쉬워야 한다.
이는 반대로 말하면 찾기 쉬운 트리거는 해당 서비스에서 자주 사용할 것으로 예측되거나, 자주 사용하라고 의도한 것이라고 해석할 수도 있다. 따라서 앱 UX를 분석할 때 해당 서비스에서 바라보는 관점을 어느정도 예측할 수 있다.
예를 들면 배달의민족 앱에서는 '배달'에 들어가서 가게를 고르고, 메뉴를 고르는 과정 내내 우상단에 홈과 장바구니가 고정으로 나타난다. 언제든 홈으로 들어가서 탐색을 재시작하거나, 장바구니로 들어가 주문을 계속할 수 있게 하기 위함이다. 아마 이런 행동패턴이나 니즈가 UT나 데이터에서 발견되었을 것이다.
배달의민족에서 배달 - 가게 상세 - 메뉴 상세 우상단에 항상 떠 있는 홈 / 장바구니
핀터레스트나 인스타그램에서는 어떤 화면에서건 하단바가 항상 고정으로 나타난다. 이 하단바에 위치하는 기능들은 아마 이 서비스들에서 가장 많이 이용되거나, 강조하고 싶거나, 서로 왔다갔다하며 탐색하는 패턴을 보이는 기능들일 것이다.
핀터레스트, 인스타그램 등에서 항상 떠 있는 하단바6. 트리거 자체만으로 제공할 수 없는 정보일때만 레이블을 추가하라.
예를 들면 드래그해서 별점 매기는 UI의 경우, 레이블이 필요없는 좋은 예시이다.
만약 레이블이 있어야 한다면, 짧으면서도 설명적이며, 명료하고, 모호하지 않고, 일관적이며, 사용자가 쓰는 어휘여야 한다.
7. 모든 시스템 구동 트리거는 수동으로 관리하거나 비활성화시킬 수 있어야 한다.
그 방법은 그 마이크로인터랙션이 실행되는 순간에 제공되는 것이 가장 좋으며, 최소 별도 설정 영역에서 찾을 수 있어야 한다.
예를 들면 '앱 진입시 광고 팝업 노출'과 같은 트리거가 발동되었을 때, '오늘 더이상 보지 않기' 같은 선택지를 줄 수 있어야 하며, 앱 푸시 알림 역시 어떤 트리거로 보내지는지 설정에서 관리할 수 있는 것이 좋다.
지그재그의 팝업 버튼 / 인스타그램 푸시 알림 설정사용자가 트리거를 발견하는 경우
트리거는 눈에 잘 띄어야 하지만, 화면 내의 모든 트리거가 눈에 잘 띄려고 한다면 마트 전단지와 같은 사태가 발생할 것이다. 사용자가 해당 트리거가 필요할 상황이나 타이밍을 잘 고려하여 트리거를 디자인해야 한다.
사용자가 트리거를 발견하게 되는 경우는 대부분 아래 두 가지이다.
- 트리거가 움직임이나 소리로 주의를 끌어서
- 무언가를 찾고 있는 목적지향적 상태일 때
이를 생각한다면, 사용자가 무언가를 찾으려 할 때 금방 찾을 수 있게 해야 하고, 원래 찾으려던 것은 아니지만 사용자가 꼭 알아야 할 것이 있다면 움직임이나 소리로 주의를 끌어야 한다.
예를 들면 배달의민족 홈에서는 설정되어 있는 주소와 다른 위치에서 접속했다면, 주소를 실수하는 오류를 방지하기 위해 애니메이션과 함께 주소가 맞는지 확인하는 툴팁이 나타난다.
배달의민족 앱아래는 발견하기 쉬운 순서대로 나열한 트리거의 예시이다.
움직이는 물체 (예: 반복해서 움직이는 아이콘)
문자 이름이 붙어 있고 어포던스를 갖는 물체 (예: 레이블이 있는 버튼)
문자 이름이 붙어 있는 물체 （예: 레이블이 있는 아이콘）
물체 （예: 아이콘）
문자로 된 이름 (예: 메뉴 항목）
보이지 않는 트리거 (예: pull to refresh)
트리거 원칙에 따르면 자주 사용하는 트리거일수록 이러한 특징을 가져야 할 것이다.
얼핏 당연하게 들리는 말들이지만, '원칙'이다 보니 그럴 수 밖에 없을 것이다.
그럼에도 적절한 예시를 찾고 정리하다보니 글이 길어져 동작규칙, 피드백, 순환과 모드는 다음 글에서 다루고자 한다. 멀지 않은 시일 내에 돌아올 수 있길ㅎㅎ..
