마이크로인터랙션 (2) 동작 규칙
사용자를 생각하게 하지 않는 UX를 위한 디테일
마이크로인터랙션
https://brunch.co.kr/@watergru/13
먼저 이 글은 위에 링크된 글의 아주 늦은 후속 시리즈임을 밝힌다. 마이크로인터랙션은 제품에서 짧은 순간, 혹은 한 가지를 수행하는 작은 기능이며, 그 한 가지 행위 안에 포함된 제품과 사용자와의 상호작용이다. 좋은 마이크로인터랙션은 사용자가 아무 생각 없이 물 흐르듯이 사용할 수 있는 UX를 만들어 낸다.(자세한 설명은 위 링크 참고!)
마이크로인터랙션에는 네 가지 요소(트리거, 동작규칙, 피드백, 순환과 모드)가 있는데, 이전 글에서 트리거에 대해 다루었고 이번 글에서는 그 두 번째인 동작 규칙에 대해 정리해 보려고 한다.
지난번과 마찬가지로 우리에게 익숙한 모바일 앱 위주의 예시를 함께 찾아서 가져와 보았다.
동작 규칙이란
동작 규칙은 말 그대로 마이크로인터랙션이 어떻게 동작하는지를 결정하는 규칙이다. 모든 마이크로인터랙션의 중심에는 그 사용 방식에 대한 일련의 동작 규칙들이 있다.
예를 들면, 주변이 어두워지면 스마트폰의 화면 밝기가 어두워지는 인터랙션에서는 주변 조도를 인지한다 → 특정 수치로 환산한다 → 그만큼의 화면 밝기를 천천히 바꾼다 와 같은 동작 규칙이 있다고 할 수 있다.
동작 규칙은 일종의 ‘규칙’이지만, 규칙처럼 느껴지지 않아야 한다. 마이크로인터랙션은 극히 자연스러운 나머지 필연적으로까지 느껴지게 만들어야 한다. 때문에 사용자가 어떤 기능을 사용하려 할 때 일련의 동작 규칙들을 준수해야 한다거나 외워야 한다고 생각하게 만들면 안 된다.
일반적으로, 동작 규칙은 다음 사항들을 결정한다.
트리거가 활성화될 때 마이크로인터랙션이 어떻게 반응할지
마이크로인터랙션이 진행되는 동안 사용자가 무엇을 직접 조작할 수 있을지
일련의 동작을 위한 순서와 타이밍 (ex. 사용자가 검색창에 뭔가 입력하면 → ‘검색’ 버튼이 활성화됨)
위치, 날씨, 시간 등 특정 정보에 의해 동작한다면 그 정보는 어디에서 받아오는지
관련된 알고리듬의 구성과 변수
어느 단계에서 피드백을 제공하며 어떻게 제공할지
마이크로인터랙션이 반복되어야 하는지, 한다면 얼마나 반복되는지
마이크로인터랙션이 종료될 때 어떤 일이 생기는지
동작 규칙 결정하기
동작 규칙을 설계하기 전, 먼저 마이크로인터랙션의 목표를 단순명료하게 정의해야 한다. 목표는 일련의 과정 중 하나가 아닌 사용자가 원하는 최종적인 상태이다. 좋은 목표는 이해하기 쉽고, 성취할 수 있어야 한다. 즉 사용자가 그 일을 왜 하는지 알고 있고, 그 일을 해낼 수 있어야 한다. 이를테면 로그인이라는 마이크로인터랙션의 목표는 ‘비밀번호 입력’이 아닌, ‘로그인해서 앱에 들어가기’이다.
동작의 목표를 정했다면 규칙을 설계할 차례이다. 쉽게 떠올릴 수 있는 일반적인 규칙부터 적은 후 구체화시키는 것이 좋다. 일반적인 동작 규칙은 마이크로인터랙션을 수행하기 위한 우선순위가 높은 기능들이다.
예를 들면 장바구니에 상품을 담는 마이크로인터랙션에서의 일반적인 규칙은 다음과 같다.
사용자가 상품 페이지에서 '장바구니에 담기' 버튼을 클릭한다.
상품이 장바구니에 추가된다.
그리고 여기에 아래와 같은 미묘한 고려사항이 구체적으로 추가되기 시작한다.
상품페이지에서 사용자가 전에 이 상품을 구매한 적이 있는지 확인하고, 구매내역이 있을 경우 버튼의 레이블을 ‘장바구니에 다시 담기'로 바꾼다.
사용자가 이미 이 상품을 장바구니에 담았는지 확인하고, 카트에 있는 경우 버튼의 레이블을 ‘장바구니에 하나 더 담기’로 바꾼다.
사용자가 버튼을 클릭한다.
상품이 장바구니에 추가된다.
이렇듯 하나의 대상이 섬세하고 똑똑하게 반응하게 하기 위해서는 대상의 상태를 나누어 정의해야 한다. 사용자와 상호작용하는 사물은 최소 세 가지 상태를 갖는다.
기본 상태 → 활성화 상태 → 갱신된 상태
기본 상태: 사용자가 처음 발견했을 때의 첫 상태. 시스템에 의해 미리 입력된 데이터(플레이스홀더)가 표시되어 있을 수도 있다.
활성화 상태: 사용자와의 상호작용 동안의 상태
갱신된 상태: 상호작용을 마친 후 생기는 일
iOS의 홈 화면 편집을 할 때를 예로 들어보자.
iOS에서 홈 화면 편집 시의 drag and drop 마이크로인터랙션기본 상태: 앱 아이콘들은 각자 흔들거리며 움직여서 잡고 움직일 수 있을 것처럼 보인다.
활성화 상태: 사용자가 앱 아이콘을 누르고 드래그하면 아이콘이 살짝 커지며 그림자가 생겨 집어들었다는 느낌이 든다. 이때 다른 앱 아이콘들은 내가 움직이는 위치에 따라 자동으로 움직이며 앱을 놓을 자리를 마련해 준다.
갱신된 상태: 앱 아이콘을 내려놓으면 기본 상태로 돌아가서 다른 편집을 이어서 할 수 있도록 한다.
사용자는 보통의 마이크로인터랙션을 대할 때 그게 어떻게 동작하리라는 기대를 갖게 된다. 디자이너는 이러한 기대를 고려하여 디자인해야 하지만, 사실 정말 훌륭한 마이크로인터랙션은 의외의 순간에 기대를 뛰어넘는 환희를 제공하기도 한다. 물론 그렇게 하려면 마이크로인터랙션이 기대를 훨씬 뛰어넘는 것을 제공해 주고, 제공하는 가치가 분명하며, 사용자가 즉각적으로 이해할 수 있어야 한다.
심플하고 명료한 동작 규칙 만드는 법
모든 활동은 복잡성이 있으며 이를 단순화하는 데는 한계가 있다(테슬러의 법칙). 이러한 복잡성을 다루려면 핵심적인 복잡성이 어디에 있는지와, 그 중 사용자가 유지하고 싶어하는 부분이 어디인지 파악해야 한다. 그리고 사용자가 직접 조작할 필요가 있는 순간에만 그 권한을 제공하고, 나머지는 시스템이 다루도록 하면 된다.
1) 사용자의 조작 줄이기
복잡성을 줄이는 방법 중 하나는 제한된 선택 항목과 세심한 기본값을 제공하는 것이다. 사용자에게서 선택할 권한을 최대한 줄이는 것이 좋다. 사용자가 더 많은 권한을 가질수록 더 복잡한 동작 규칙을 가지게 되며, 더 많은 엣지 케이스(edge case)가 발생하기 때문이다. 사용자가 다음 단계에 무엇을 할지를 예측해서 그것을 미리 수행하거나 제시한다면, 사용자가 뭔가를 선택할 필요도 없을 것이다.
구글의 첫 화면은 중앙의 매우 눈에 띄는 검색창으로 사용자에게 딱 한 가지 액션을 하도록 유도한다. 검색어를 입력하는 것이다. 그러면 검색 결과를 확인할 수 있다. 이처럼 주요한 선택 항목은 딱 하나만 있는 게 좋다. 만약 사용자가 여러 개의 선택을 해야 한다면, 비교적 간단하고 광범위한 선택에서 세부적인 선택으로 옮겨가는 게 좋다.
딱 하나의 액션만을 강조하는 구글의 첫 화면사용자의 조작과 입력을 최소화한다면 사용자가 실수할 확률도 줄어든다. 사실 좋은 마이크로인터랙션은 실수할 여지를 전혀 남기지 않게 디자인되어서 오류 메시지 자체를 띄울 일이 없어야 한다. 오류 상황이 생겼다면, 마이크로인터랙션은 그 상황을 해소하기 위한 모든 지원을 해야 한다.
구글 검색은 실수로 한/영 키를 누르지 않았을 때도 대신 수정해서 검색해준다. (실수 상황 해소)
iOS의 메시지 앱은 받는 사람을 입력하지 않으면 '보내기' 버튼을 누를 수 없다. (실수 원천 방지)2) 최소한의 대상으로 다양한 기능 수행하기
가장 훌륭한 마이크로인터랙션은 사용자가 최소한의 대상만으로도 다양한 기능을 수행할 수 있게 해 준다. 예를 들면, 신용카드 번호를 입력하면 어느 카드사인지 자동으로 선택되는 마이크로인터랙션이 있다. 사용자는 인풋 박스라는 대상을 이용해서 ‘신용카드 번호 입력’과 ‘카드사 정보 선택’을 한번에 할 수 있다. 이러한 마이크로인터랙션은 사용자가 해야 하는 액션을 줄이고, 특히 액션해야 하는 요소(버튼, 인풋박스, 드롭다운박스 등) 자체를 줄여 준다.
토스 송금 기능 - 계좌번호를 입력하면 최근 송금했던 계좌나, 가능한 은행을 제안해 준다.
쿠팡 카드 등록 - 카드번호 입력 시 신용카드사가 자동으로 선택된다.3) 제약 조건을 고려하고 맥락 정보 활용하기
주어진 사업 영역, 주변 정황, 기술 조건에 따른 제약을 고려해야 한다. 키보드를 사용할 수 있는지, 스피커는 있는지, 비밀번호의 최대 길이나 최대 음량은 어떤지, 서버 부하가 크지는 않은지, 활용할 수 있는 데이터의 종류는 무엇인지 등을 생각해볼 수 있다.
특히 주어진 조건 하에서 최대한 맥락 정보와 과거의 사용자 행동 정보를 활용한다면 마이크로인터랙션이 더 똑똑해질 수 있다. 사용중인 기기, 현재 시간/위치/방향, 주변 소음 수준, 사용 빈도, 사용하는 상황(회의 중인지, 혼자 있는지, 자기 전인지 등), 배터리 수명, 과거에 수행했던 기능 등의 정보를 활용하자.
여기어때 - 어떤 계정으로 가입했었는지 까먹는 사용자를 위해 최근 로그인한 계정 정보를 알려준다.동작 규칙을 이해시키는 마이크로카피
마이크로카피란 레이블이나 안내문 같은 자잘한 문구를 뜻한다. 이는 동작 규칙을 이해하는 데 중요한 역할을 담당한다.
마이크로카피에서 중요한 것은 포함된 문구 하나하나가 정보 전달에 반드시 필요한지를 명확히 하는 것이다. 꼭 필요한 문구만 넣고, 되도록 짧게 넣자. 레이블만으로 충분하다면 중복된 내용의 별도의 안내문은 필요가 없다.
레이블은 대상과 가깝게 표시해야 한다. 눈으로 레이블과 조작 대상 사이를 오가는 데에 시간을 쓰고 머릿속으로 그 둘을 연관지어야 할 필요가 없다는 것이다. 대부분의 경우 레이블은 조작 대상의 바로 윗부분이나 대상 자체에 표시하는 것이 좋다.
또한 안내문에 사용된 표현은 조작부의 명칭과 정확히 일치해야 한다. 예를 들면 안내문에는 '상품을 장바구니에 추가하십시오.’라고 해놓고 버튼에는 '상품 추가'가 아니라 ‘물품 구매’라고 적어 놓으면 안 된다. 가능하다면 사용자가 이해하기 쉬운 상대적인 설명을 적용하는 게 좋다. 가령 ‘9월 22일’보다는 ‘내일’이라고 적혀 있는 것이 더 좋을 수 있다.
토스의 번호인증 화면토스의 번호인증 화면을 보면, 안내문에 이미 '인증번호'라는 단어가 들어갔기에 입력필드 근처에 굳이 '인증번호'라는 레이블을 중복으로 넣지는 않았다. 다만 플레이스홀더로 '6자리 숫자'를 넣어 유저가 확인해야 하는 양식을 한번 더 강조하고 있다. 또한 '문자 다시 받기'라는 레이블에서는 위의 안내문에 썼던 '문자'라는 명칭이 일치함을 볼 수 있다.
그 외,
좋은 마이크로인터랙션의 사례
책에 등장한 좋은 마이크로인터랙션의 예시를 몇 개 가져와 보았다. 이미 너무 자연스럽게 사용하고 있어 알아채지 못했지만, 그래서 더 훌륭하다 할 수 있는 세심한 마이크로인터랙션들이다.
ios: 이메일 입력란을 채울 때만 나타나는 키보드의 @버튼
인스타그램: 어떤 계정이 나를 팔로우하고 있다면, 그 계정의 ‘팔로우’ 버튼이 ‘맞팔로우 하기’로 바뀜그 외 이미지로 구할 수 없었던 사례
Mac OS: 음성으로 받아쓰기 기능을 실행하면 컴퓨터 냉각팬 회전속도를 줄여 배경 소음이 방해되지 않도록 해줌
드롭박스: 기기의 배터리가 거의 떨어져 가면 업로드 기능을 일시적으로 정지함
지난번 글에 이어 몇 개월 만에 마이크로인터랙션의 핵심이라 할 수 있는 동작 규칙을 정리하며 사례를 찾아보다 보니, 지금 하고 있는 프로젝트의 UX도 다시 보이게 되었다. 항상 시간이 부족하다는 핑계, 개발 리소스가 부족하다는 핑계로 요소 하나하나의 마이크로인터랙션까지는 섬세하게 보지 못했다는 반성이 든다. 하지만 이미 적었듯이, 어떤 마이크로인터랙션은 의외의 순간에 기대를 뛰어넘는 환희를 준다. 그리고 그런 것들이 작지만 유저를 감동시키는 디테일이다. 디자이너는 경험 설계자로서, 유저의 사용 경험을 아주 촘촘하게 뜯어보고 그 안에 담긴 의도와 불편함을 파악하여 한 발 앞서 해결해 주어야 한다. 유저의 경험을 나노 수준으로 디테일하게 바라보는 연습을 하자는 다짐을 해 본다.
