마이크로인터랙션

발췌

트리거 마이크로인터랙션이 시작되는 순간인 '트리거'를 소개한다. 사용자에 의해 시작되는 수동 트리거와 시스템 트리거를 둘 다 검토하고 '정보를 앞당겨 표시할 것'원칙을 설명한다.

동작규칙 마이크로액션을 정의하는 특성과 숨겨진 변수들, 즉 '동작규칙'에 대한 논의를 제공한다. 동작규칙은 어떻게 만들어지며 어떤 내용이 포함되어야 하는가? '백지에서 시작하지 말 것'원칙도 함께 소개한다.

피드백 사용자가 동작규칙을 이해하게 되는 방법인 '피드백'에 대해 이야기한다.

순환과 모드 '순환과 모드'는 마이크로인터랙션의 구조에서 상위에 있는 개념이다.

21p 우리가 사용하는 애플리케이션과 기기들이 점점 더 많은 센서를 장착하고 다양한 맥락을 인지하게 되면, 언제 어떤 기능을 할지 스스로 결정하는 경우가 점점 더 늘어날 것이다. 물론 그렇게 되면 사용자는 최소한 그런 동작이 어떻게 일어나는지를 이해하고, 나아가 시스템 트리거들을 조정하고 싶을 것이다. 다른 말로 하자면 사용자는 마이크로인터랙션의 동작규칙을 알고 싶어한다는 것이다.

23p 디지털 기기를 사용하는 동안 보고 듣는 모든 것은 추상화된 정보다. 어떤 종류의 소프트웨어나 기기를 사용할 때 그 안에서 무슨 일이 일어나고 있는지를 정확히 아는 사람은 거의 없다. 이를테면 사실 우리는 '문서'를 '폴더'에 집어넣는 게 아니고, '이메일'이 '수신함'에 도착하는 것도 아니다. 이 모든 것은 그 안에서 벌어지는 상호작용을 우리가 이해하기 쉽게 해주는 은유에 불과하다. 이렇게 우리가 보고 듣고 느낌으로써 시스템의 동작규칙을 이해할 수 있게 해주는 모든 것이 마이크로인터랙션의 세 번째 요소인 피드백에 해당한다.

28p 하나의 제품은 그 모든 마이크로인터랙션들이 조화를 이루며 함께 협력한 결과로 생각할 수 있다. 찰스 임스가 "디테일이 곧 디자인이다."라고 한 것도 이런 의미다. 모든 것은 디테일인 동시에 마이크로인터랙션이며, 사용자를 기분좋게 하고 그 기대를 충족시킬 수 있는 기회가 된다. 디터 람스는 다음과 같이 말하기도 했다.

나는 늘 디테일에 대해 각별한 애정을 가지고 있었다. 큰 밑그림보다 디테일이 더 중요하다고 생각한다. 디테일 없이는 아무것도 제대로 동작하지 않는다. 디테일은 필수적인 부분이며, 품질을 측정할 수 있는 기준이 된다.

모든 부분의 기능 즉 제품 전체를 마이크로인터랙션의 조합으로 생각하면 된다. 이런 관점에서 제품을 디자인하면 오늘날 많은 회사에서 채용하는 애자일 개발방법과도 잘 맞아 떨어진다.

37p 수동 트리거의 세 번째 원칙은 정보를 앞당겨 표시함으로써 트리거 자체가 마이크로인터랙션에 포함된 정보를 반영하도록 하는 것이다. 마이크로인터랙션 안에 내재된 상태 정보 중에서, 사용자가 직접 상호작용을 하기 전이다.

38p 트리거의 구성 요소 : 수동 트리거는 조작부 자체, 조작의 상태, 문자나 아이콘으로 표시되는 레이블로 이루어져 있다. 수동 트리거의 경우, 항상 조작부를 포함하게 된다. 어떤 방식의 조작부를 선택하느냐에 따라 얼마나 많은 조작이 가능할지를 결정할 수 있다.

46p 수동 트리거가 보이지 않는 경우도 있다. 사용자에게 마이크로인터랙션 트리거의 존재를 알리기 위한 이름이나 어포던스가 제공되지 않을 수도 있는 것이다. (...) 많은 멀티터치 동작들은 그 존재를 알 수 있는 시각적 어포던스를 제공하지 않으며, 일상적인 탭과 밀기 동작을 제외한 특별한 동작들은 대부분 시행착오를 거쳐야만 찾아 낼 수 있다.

왜 보이지 않는 트리거를 사용하는 경우가 생기는 걸까? 사실, 무슨 인터페이스든 간에 모든 항목을 바로 눈에 띄게 배치할 수는 없는 일이다. 모든 항목이 각각 눈에 띄도록 화면에 표시하려고 하면, 결국 그 화면은 엄청나게 어수선하고 복잡해져서 정작 사용자가 원하는 항목을 찾기 힘들어지는 경우가 많다.

일부 항목들을 숨기면, 기능을 포기하지 않으면서도 화면 혹은 제품을 시각적으로 단순하게 만들 수 있다. 보이지 않는 트리거는 겉으로 보이는 부분을 강조하고 중요한 기능과 그렇지 않은 기능을 구분할 수 있게 해준다.

하지만(다른 모든 인터랙션 디자인의 경우와 마찬가지로) 무작정 화면 요소들을 감추는 게 마이크로인터랙션 디자인의 목적이 되어서는 안 되며, 마이크로인터랙션은 사용자의 맥락과 주어진 기술을 바탕으로 자연스럽게 일어나야 한다.

해당 상황에서는 어떤 항목을 표시하지 않는 편이 나을까? 또는 주어진 기술로는 시각적 조작 장치를 표시할 곳이 없을 때 무엇을 숨길 수 있을까? 최선의 마이크로인터랙션은 딱 적당한 만큼의 인터페이스만을 결코 지나침 없이 제공하는 것이다.

보이지 않는 트리거는 사용자가 그 존재와 사용 방법을 학습할 수 있어야 한다. 사용자가 그 트리거를(우연히 발견하든, 다른 사람에게 들었든, 도움말을 통해서든) 일단 발견하게 되면, 다시 그 마이크로인터랙션을 찾아 실행하는 것은 사용자의 불완전한 기억에 전적으로 의존하게 된다. 사용자가 보이지 않는 트리거를 기억할 수 있다는 것은 언제든지 그 트리거에 접근할 수 있거나, 아니면 어떤 조건이 갖춰졌을 때 동작한다는 것을 알고 있다는 것이다. 보이지 않는 트리거는 사람들이 짐작할 수 있어야 하며, (이상적으로는) 사용자가 다른 행동을 하는 중에 우연히 찾아낼 수 있어야 한다.

53p 레이블에 쓰이는 문구는 의미를 명확히 전달하기 위하여 기능주의를 따른다. 그렇다고 해서 번뜩이는 아이디어나 개성이 끼어들 여기자 없다는 건 아니지만, 무엇보다 레이블의 내용이 명확해야 한다는 것이다. 실제로 기능이 실행되기 이전에 어떤 기능이 실행될지를 미리 알려 주는 선행 정보feedfoward가 없는 것이다. 일반적으로, 레이블은 짧으면서도 설명적이어야 하며, 명료한 말이 쓰여 있어야 한다.

66p '다른 이름으로 저장하기' 마이크로인터랙션 동작규칙의 혼란의 역사를 설명해 줌ㅋㅋㅋ

• 파일 내용을 변경한다.

• 파일을 새 이름으로 저장한다.

• 이후에 변경되는 내용은 새로 만들어진 파일에 적용된다. 원래의 파일은 이전에 저장된 대로 유지된다.

→ 30년 간 이 멘탈모델을 유지해 왔지만, 애플이 동작규칙을 바꾸어 버림. (나중에 개선함)

67p OS X의 '다른 이름으로 저장'기능의 변화를 통해서 몇 가지 교훈을 얻을 수 있다. 어떤 마이크로인터랙션의 동작규칙을 쉽게 글로 적거나 도표로 그릴 수 없다면, 사용자가 상황을 나름대로 쉽게 정리할 수 있는 가상의 멘탈모델을 만들게 해주는 피드백을 제공해야 한다. 또한 완전히 새로운 마이크로인터랙션인 경우가 아니라면, 사용자는 마이크로인터랙션을 대할 때 그게 어떻게 동작하리라는 기대를 갖게 된다. 디자이너는 이런 기대를 져버릴 수도 있지만, 훌륭한 마이크로 인터랙션은 사실 의외의 순간에 사용자의 기대를 뛰어넘는 환희를 제공하기도 한다.

68p 모든 마이크로 인터랙션의 중심에는 그 마이크로인터랙션의 사용 방식에 대한 일련의 동작규칙들이 있다.

동작규칙은 그 마이크로인터랙션이 어떻게 동작하는지를 기술적으로 복잡하지 않게 단순화해서 설명해야 한다.

동작규칙에서 가장 중요한 부분은 아마도 목표일 것이다. 동작규칙을 디자인하기 이전에, 마이크로인터랙션의 목표를 가장 단순명료한 형태로 정의해야 한다. 좋은 목표는 이해하기 쉽고(사용자가 그 일을 왜 하는지 알고 있다)

성취할 수 있어야 한다(사용자가 그 일을 해낼 수 있다). 단지 여기서 기억해야 하는 점은, 목표로 설정해야 하는 것이 일련의 과정 중 하나가 아니라 사용자가 원하는 최종적인 상태여야 한다는 것이다.

69p 사용자가 원하는 기능을 수행하려고 할 때 일련의 엄격한 동작규칙들을 준수해야 한다거나 심지어 외워야 한다고 생각하게 만들면 안 된다. 마이크로인터랙션을 디자인할 때 추구해야 하는 것은 극히 자연스러운 나머지 필연적으로 느껴지는 흐름이다.

70p 동작규칙은 다음 사항들을 결정한다. (책 내용을 상세히 보는 편이 낫다)

• 트리거가 활성화될 때 마이크로인터랙션의 반응

• 마이크로인터랙션이 진행되는 동안, 사용자가 중간에 조작할 수 있는 항목

• 일련의 동작을 위한 순서와 타이밍

• 사용되는 정보와 그 목적

• 관련된 알고리듬의 구성과 변수

• 피드백의 종류와 제공 시기

• 마이크로인터랙션의 모드

• 마이크로인터랙션의 반복 여부와 빈도

• 마이크로인터랙션이 종료될 때 생기는 일

72p 두말할 나위 없이, 동작규칙은 어떤 기능을 어떤 순서대로 수행할 지를 결정함으로써 사용자 경험에 영향을 미친다.

73p 일반적으로 동작규칙은 마이크로인터랙션을 수행하기 위한 우선순위가 높은 기능들이다. 디자인이 진행됨에 따라 동작규칙에 미묘한 고려 사항이 추가되기 시작한다. → 동작규칙 구체화 (논리 흐름도로 표현할 수 있다)

76p 동사와 명사 (책 내용을 상세히 보는 편이 낫다)

85p 복잡성을 포용하기

'테슬러의 복잡성 보존 법칙'에 따르면, 모든 활동은 복잡성을 내재하고 있으며 그 과정을 단순하게 만다는 데 어떤 한계가 있다. 그렇다면 복잡성을 어떻게 다룰 것인가? 사용자의 조작을 줄이고 시스템이 이를 다루게 하거나, 사용자가 집접 이를 다룰 수 있도록 보다 많은 조작을 사용자에게 맡기고 결정하게 할 수도 있을 것이다.

우선 핵심적인 복잡성이 어디에 있는지를 파악하고, 사용자가 유지하고 싶은 복잡성은 어떤 부분이고 그게 전체 사용 과정 중 어디에 해당하는 지를 알아야 한다.

87p 제한된 선택과 세심한 기본값

사용자에게 더 많은 선택 항목을 주는 마이크로인터랙션은 더 많은 동작규칙을 갖는다. 일반적으로 동작규칙의 개수가 적은 마이크로인터랙션이 이해하기가 쉽기 때문에, 결국 사용자가 선택할 수 있는 항목을 제한하고 그 대신 기본값을 잘 준비하는 것이 낫다.

마이크로인터랙션에 있어서는, 사용자가 다음으로 취할 가능성이 높은 행동을 강조하거나 자동으로 실행해주는 게 좋다. 어떤 항목을 강조하는 방법으로는 다른 항목들을 모두 없애거나, 그냥 시각적으로 강조하는 방법이 있다.

사용자가 다음 단계에 할 일을 아는 것은 그 사용자가 따로 뭔가를 하지 않아도 그 단계를 자동으로 수행하거나 제시할 수 있다는 점에서 무척 중요하다.

88p 사용자가 선택할 수 있는 모든 항목은 최소한 한 가지씩의 동작규칙을 갖고 있으므로, 동작규칙을 최소한으로 하는 가장 좋은 방법은 사용자의 선택을 제한하는 것이다. 간단히 말해서, 선택할 수 있는 항목을 무자비하다 싶을 정도로 줄여나가야 한다.

이상적으로 말해서 마이크로인터랙션은 딱 한 가지 기능을 잘 수행하도록 되어 있으므로, 마이크로인터랙션 전체에 걸쳐 기본 선택값을 잘 준비해 두면 사용자가 중간에 뭔가를 선택해야 할 필요조차 없을 것이다. 모든 마이크로인터랙션이 하나의 행동을 하고, 그 다음으로 연결된다.

89p 마이크로인터랙션에 있어서 주요한 선택 항목은 딱 하나만 있는 게 좋다. 이는 사용자에게 상-중-하 온도 조절 같은 선택권을 주지 말아야 하는 게 아니라, 동작규칙을 바꿔버리는 선택 항목을 여러 개 제공하지 않는 게 좋다는 것이다. 그런 선택 항목은 마이크로인터랙션에 모드(5장 참조)의 개수를 늘리기 쉽상이다.

90p 사용자가 여러 개의 결정을 내려야 한다면, 비교적 간단하고 광범위한 선택에서 시작해서 세부적인 선택 항목으로 옮겨가는 게 좋다.

"사람들은 선택할 수 있는 항목들을 충분히 이해하고 쉽게 비교 평가할 수 있을 때 자신의 선택에 가장 큰 확신을 갖는다. 선택 항목들을 쉽게 평가하려면 그 개수가 많지 않고 서로 쉽게 구분할 수 있어야 한다."

91p 선택권을 제한하는 것은 그로 인해 생길 수 있는 예외적인 사용 상황을 모두 미리 막을 수 있다는 점에서 긍정적인 파생효과가 있다. 예외 상황은 특별한 경우에만 발생하는 해결하기 어려운 문제로, 보통은 소수의(능숙한) 사용자에게 생긴다. 예외 상황은 마이크로인터랙션을 만들 때 가장 일반적인 사용이 아닌 특수한 정황을 포함해서 디자인하게 만든다.

92p 조작 장치를 구성할 때는, 조작상의 단순함과 인식상의 단순함 사이에서 선택을 해야한다.

105p 동작규칙 요약 (책 내용을 상세히 보는 편이 낫다)

111p 피드백은 동작규칙을 부각시킨다.

119p 마이크로인터랙션 피드백에 있어서 세 번째 원칙은, 최소한의 피드백으로 최대한의 정보를 전달하는 것이다.

125p 사람은 뭔가에 주의를 기울이면 시야가 좁아지고 이 시야를 벗어나는 모든 항목은 눈에 띄지 않는다. 만일 사용자가 주의를 기울이고 있는 부분에서 멀리 떨어진 곳에 시각적 피드백을 제공해야 한다면, 움직임을 추가함으로써 사용자가 주목하도록 할 수 있다.

139p 피드백 요약

⭐️145p 모드는 동작규칙에 있어서 갈라진 가지와 같은 개념이다. 마이크로인터랙션에서 모드는 아주아주 신중하게 적용해야 한다. 대부분의 경우, 마이크로인터랙션에는 모드가 없는 게 좋다. 하지만 모드가 필요한 경우도 있다. 모드가 있어야 하는 가장 대표적인 경우는 자주 사용하지도 않는 기능이 있어서 따로 숨기지 않으면 마이크로인터랙션의 본래 목적을 해칠 수 있을 때다.

설정 모드는 흔하게 볼 수 있는 모드로, 사용자가 설정 모드에 있는 동안에는 보통 기본 기능을 수행하는 대신 그 기능의 설정 값을 조정하게 된다. 이런 모드는 그 마이크로인터랙션에서 제공하는 다른 상호작용과는 구분되어 있다.

일반적으로 모드를 피해야 하는 이유는, 특히 화면에 명확하게 드러나지 않는 모드에 들어가게 되면 사용자의 오류를 야기할 수 있기 때문이다. 예를 들어서 편집 모드에 있을 때 사용자는 익숙한 화면이 아닌 새로 나타난 화면에 대한 사용법을 다시 배워야 한다. 화면 상의 항목을 클릭하는 단순한 동작도 완전히 다른 기능을 수행할 수 있다. 기본 모드에서는 클릭한 항목을 선택하지만, 삭제 모드에서는 지워 버리는 식이다.

마이크로인터랙션에서 모드는 단 하나만 있거나, 가능하다면 아예 없어야 한다. 모드가 적을 수록 사용자가 지금 어떤 모드에 있는지 헷갈릴 가능성이 낮아지고, 마이크로인터랙션을 사용하기 위해 신경 써야 할 것도 줄어든다.

마이크로인터랙션에 반드시 모드가 있어야 하는 경우라면, 가능한 그 모드를 독립적인 화면으로 만드는 것이 좋다.(이는 앞서 3장에서 언급한 '각각의 동작규칙마다 별개의 화면으로 만들지 말것'이라는 원칙의 예외 상황이다.)

이는 사용자로 하여금 그냥 좀 익숙하지 않은 상태가 아니라 완전히 다른 모드에 들어와 있다는 것을 명확히 인지할 수 있게 함으로써 당혹감과 오류를 줄이는 데에 도움이 될 것이다.

이전의 기본 모드에서 새로운 모드로 바뀔 때 화면 전환 효과를 주는 것도, 사용자에게 어떤 특별한 작업을 위해서 잠시 이동한다는 의미를 부여하여 모든 변화에 유용한 단서를 제공해 줄 수 있다.

사용자가 어떤 모드로 들어갔다가 원래의 모드로 돌아갈 때, 원래의 모드는 사용자가 떠날 때와 똑같은 상태로 남아 있어야 한다. 물론 다른 모드에 있는 동안 바뀐 내용이 원래의 모드에 반영되어 있을 수는 있다.

147p 용수철 모드와 일회용 모드

간단한 기능 하나를 수행하려고 다른 모드를 들락거려야 하는 것처럼 짜증나는 일도 없다. 마이크로인터랙션에서는 전동적인 모드대신 용수철 모드, 일회용 모드를 사용할 수 있다.

용수철 모드는 유사 모드라고 부르기도 한다. 용수철 모드는 키를 누르거나 마우스 버튼을 누르는 것처럼 물리적인 행동을 했을 때 활성화되고 그 행동이 멈추면 종료된다. 용수철 모드를 활성화 시키려면 직접 물리적인 행동을 하고 있어야 하기 때문에 모드가 바뀌었다는 사실을 좀처럼 잊어버리니 않으며, 다른 화면으로 전환해야 할 필요도 없다.

일회용 모드는 용수철 모드와 많은 부분이 흡사하다. 일회성 모드는 사용자가 한 번의 행동을 수행하는 동안만 지속되고 바로 종료되는 모드이다.

149p 순환

157p 모드와 순환 요약

184p 마이크로인터랙셔을 기능으로 전환하기

186p 밋밋한 마이크로인터랙션을 개선하는 법

• 이 경험을 특징적인 순간으로 만들 필요가 있는가?

• 백지에서 시작하지 않으려면 어떻게 해야 하는가? 사용자나 맥락에 대해서 알고 있는 정보를 이용하여 마이크로인터랙션을 개선할 수 있지 않을까? . . .

191p 마이크로인터랙션 검증

끝