상호작용의 원리

머릿속의 서비스: 멘탈 모델

사람은 처음 쓰는 서비스도 어떻게 돌아갈지 나름대로 짐작하며 쓴다. 이렇게 사용자가 머릿속에 그리는 "이것은 이렇게 돌아간다"는 그림을 멘탈 모델(Mental model)이라고 한다. 멘탈 모델은 정확할 필요가 없다. 자동차의 엔진 구조를 몰라도 운전은 할 수 있다. 다만 사용자의 행동을 바르게 이끌 만큼은 맞아야 한다.

인지과학자이자 디자이너인 도널드 노먼(Donald A. Norman)은 『디자인과 인간 심리』(초판 The Psychology of Everyday Things, 1988; 개정 증보판 The Design of Everyday Things, 2013)에서 이 관계를 세 개의 모형으로 정리했다. 디자이너가 머릿속에 가진 디자인 모델, 사용자가 가진 사용자 모델(멘탈 모델), 그리고 둘 사이에 놓인 시스템 이미지(System image)다. 시스템 이미지는 사용자가 실제로 보고 만지는 모든 것, 곧 화면과 버튼과 문구와 알림이다. 디자이너는 사용자와 직접 이야기할 수 없다. 오직 시스템 이미지를 통해서만 말한다.

"맡아 두기"에서 서윤의 디자인 모델은 이렇다. 손님이 요청하면 주인이 서가에서 책을 확인하고, 계산대 뒤에 따로 두고, 손님이 찾아간다. 그런데 시험판의 화면은 요청 직후 "요청 완료!" 한 줄만 보여 주었다. 이 화면을 본 손님의 멘탈 모델은 "책은 이제 내 것으로 잡혀 있다"가 되기 쉽다. 실제로는 주인이 아직 서가를 보지도 않았는데 말이다. 멘탈 모델이 어긋나면 손님은 확인이 끝나기도 전에 가게로 출발한다.

노먼은 사람이 기계를 쓸 때 건너야 하는 두 간극을 말했다. 하고 싶은 일을 어떻게 하는지 알아내야 하는 실행의 간극(Gulf of execution)과, 한 일이 어떻게 되었는지 알아내야 하는 평가의 간극(Gulf of evaluation)이다. "요청 완료!"만 있는 화면은 평가의 간극이 넓다. 손님은 지금 책이 확인되었는지, 따로 놓였는지 화면에서 읽어 낼 수 없다. 아래 시뮬레이터에서 같은 요청을 두 화면으로 따라가 본다. 아래 시간 막대의 손잡이를 끌어 시각을 옮긴다.

A 화면이 틀린 말을 한 것은 아니다. 요청은 정말로 완료되었다. 문제는 손님이 알고 싶은 것이 요청의 전송이 아니라 책의 상태라는 점이다. 닐센의 사용성 휴리스틱(Nielsen 1994)의 첫째 항목인 "시스템 상태의 가시성"은 시스템이 지금 무슨 일을 하고 있는지 적절한 시간 안에 알려 주라고 권한다. B 화면은 서비스 안쪽의 상태(주인이 보기 전, 확인함, 따로 둠)를 손님의 언어로 바꿔 보여 준다. 시스템 이미지가 디자인 모델을 정직하게 드러내면, 손님의 멘탈 모델은 저절로 맞춰진다.

눌러도 되나: 어포던스와 기표

어포던스(Affordance)라는 말은 지각 심리학자 제임스 깁슨(James J. Gibson)이 만들었다. 깁슨은 『시지각에 대한 생태학적 접근』(The Ecological Approach to Visual Perception, 1979)에서 환경이 동물에게 제공하는 행동의 가능성을 이렇게 불렀다. 무릎 높이의 평평한 바위는 사람에게 "앉을 수 있음"을 제공한다. 어포던스는 사물 혼자의 성질이 아니라 사물과 그것을 쓰는 존재 사이의 관계다. 같은 바위가 아이에게는 "기어오를 수 있음"이다.

노먼이 1988년 책에서 이 말을 디자인에 들여오자 널리 퍼졌고, 곧 "버튼에 어포던스를 넣는다"처럼 "눌러 보이게 하는 모양"이라는 뜻으로 쓰이기 시작했다. 노먼은 개정 증보판(2013)에서 이 혼란을 바로잡으려고 기표(Signifier)라는 말을 중심 개념으로 따로 세웠다. 어포던스가 무엇을 할 수 있는가(관계)라면, 기표는 그 행동을 어디서, 어떻게 하면 되는지 알려 주는 지각 가능한 신호다. 문의 평평한 판은 "밀 수 있음"이라는 어포던스를 가지고, 그 위에 붙은 "미세요" 글씨와 금속판의 위치는 기표다.

화면에서는 이 구분이 특히 쓸모 있다. 터치스크린에서는 손가락이 닿는 모든 곳이 물리적으로는 "누를 수 있다". 어떤 글자는 눌리고 어떤 글자는 안 눌리는지는 오직 기표가 알려 준다. 버튼의 테두리와 채움, 링크의 밑줄과 색, 화살표 기호, 손가락이 닿을 만한 크기 같은 것들이다. 반대로 눌리지 않는 것이 눌릴 것처럼 생기면 그것은 거짓 기표가 된다.

아래는 "맡아 두기"의 검색 결과 카드다. 요소 열 개 가운데 일곱 개만 눌린다. 먼저 "평평하게"를 고른 채로 눌릴 것 같은 요소를 모두 눌러 표시하고 "정답 보기"를 누른다. 그 다음 "기표 있음"으로 바꿔 다시 한다. 평평한 쪽은 이 책이 일부러 헷갈리게 만든 시안이다.

기표를 넣는다는 것이 장식을 늘린다는 뜻은 아니다. "기표 있음" 시안에서 늘어난 것은 맡아 두기 버튼의 채움, 책방 이름의 밑줄, 제목 옆의 작은 화살표 정도다. 대신 눌리지 않는 것에서 기표처럼 보이던 것(꼬리표의 테두리, 안내 문구의 링크 색)을 덜어 냈다. 기표는 더하는 일만큼 빼는 일이기도 하다. 같은 색과 같은 테두리가 한 화면 안에서 언제나 같은 뜻이어야 사용자가 배울 수 있다. 어떤 색을 "눌림"의 뜻으로 쓸지는 디자인 시스템의 일이다(11장, WebBook 6장).

누른 다음에: 피드백과 응답 시간

사용자가 무언가를 했을 때 시스템이 "받았다", "하고 있다", "끝났다"를 알려 주는 것을 피드백(Feedback)이라고 한다. 피드백은 평가의 간극을 건너는 다리다. 노먼은 피드백이 즉각적이어야 하고 알아볼 수 있어야 한다고 강조한다. 늦은 피드백은 없는 피드백만큼이나 사람을 헷갈리게 하고, 사람은 헷갈리면 같은 행동을 반복한다.

아래 시뮬레이터에서 직접 "맡아 두기"를 눌러 본다. 서버가 대답하는 데 걸리는 시간을 슬라이더로 바꾸고, 누른 직후 화면이 어떻게 반응할지를 고른다. 오른쪽(좁은 화면에서는 아래)은 주인 휴대폰에 들어온 요청 목록이다. "가상 손님 100명"을 누르면, 반응이 없을 때 참을성의 한계에 이르면 다시 누르는 가상의 손님 백 명이 같은 버튼을 누른 결과를 센다.

"즉시 상태로"가 하는 일은 세 가지다. 누른 순간 눌렸다는 것을 보여 주고, 기다리는 동안 무언가 진행 중이라는 것을 보여 주고, 그동안 같은 버튼을 다시 누를 수 없게 한다. 마지막 것은 뒤에서 볼 제약이기도 하다. 개발 쪽에서는 지후가 한 겹을 더한다. 요청마다 고유한 번호를 붙여 보내고, 서버는 같은 번호의 요청이 두 번 오면 두 번째를 무시한다. 같은 요청을 여러 번 받아도 결과가 한 번 받은 것과 같게 만드는 이런 성질을 멱등성(Idempotency)이라고 한다. 화면의 피드백은 사람을 안심시키고, 서버의 멱등성은 화면이 실패할 때를 대비한다.

0.1초, 1초, 10초

피드백을 얼마나 빨리 줘야 하는가에 대해 디자이너들이 자주 인용하는 세 숫자가 있다. 0.1초 안이면 사람은 시스템이 즉시 반응했다고 느끼고, 1초 안이면 기다림을 느끼더라도 생각의 흐름이 끊기지 않으며, 10초를 넘으면 주의가 다른 데로 떠나기 시작한다는 것이다.

이 세 숫자의 출처는 흔히 "닐센의 법칙"처럼 소개되지만, 뿌리는 더 오래되었다. IBM의 연구자 로버트 밀러(Robert B. Miller)가 1968년 학회 논문 「사람과 컴퓨터의 대화형 거래에서의 응답 시간」(Response time in man-computer conversational transactions, AFIPS Fall Joint Computer Conference, 1968)에서 키를 눌렀을 때의 확인, 간단한 질의에 대한 응답 등 여러 종류의 상호작용마다 바람직한 응답 시간을 따로 검토했다. 이후 카드, 로버트슨, 매킨리(Card, Robertson & Mackinlay 1991)가 지각과 대화의 시간 단위를 정리했고, 야코프 닐센이 『사용성 공학』(Usability Engineering, 1993)에서 이를 0.1·1·10초의 세 한계로 단순하게 정리해 널리 퍼뜨렸다.

매핑: 조작과 결과의 짝

조작하는 것(손잡이, 버튼)과 그 조작이 바꾸는 것(화구, 화면의 대상) 사이의 대응 관계를 매핑(Mapping)이라고 한다. 노먼은 매핑의 대표적인 예로 가스레인지를 든다. 화구 넷이 사각형으로 놓여 있고 손잡이 넷이 앞에 한 줄로 늘어서 있으면, 어느 손잡이가 어느 화구인지 매번 그림이나 글씨를 읽어야 한다. 손잡이를 화구와 같은 공간 배치로 놓으면 읽지 않아도 안다. 이렇게 공간의 닮음으로 짝이 저절로 드러나는 것을 자연스러운 매핑(Natural mapping)이라고 한다.

가스레인지 손잡이의 배치는 인간공학에서 오래된 연구 주제이기도 하다. 채퍼니스와 린덴바움(Chapanis & Lindenbaum 1959)은 화구와 손잡이를 잇는 네 가지 배치를 비교해, 배치에 따라 실수와 반응 시간이 크게 달라진다는 것을 보였다. 아래에서 직접 해 본다. 빛나는 화구 하나가 나타나면, 그 화구를 켜는 손잡이를 되도록 빨리 누른다.

화면에서 매핑은 더 자주, 더 조용히 일한다. 스크롤 막대를 아래로 끌면 내용이 위로 올라가고, 음량 막대는 오른쪽이 크고, 앞뒤 화살표는 읽는 방향을 따른다. 맡아 두기에서도 매핑의 질문이 나온다. 결과 화면에서 "맡아 두기" 버튼은 어느 책방의 버튼인가. 4장에서 책방을 책 아래에 한 줄씩 두기로 했으니, 버튼은 그 책방의 줄 안, 이름과 같은 높이에 있어야 한다. 버튼이 줄 사이에 걸치거나 카드 맨 아래에 하나만 있으면, 손님은 어느 책방에 요청하는지 다시 확인해야 한다.

자리를 지키는 버튼

매핑이 조작과 결과의 짝이라면, 일관성(Consistency)은 같은 조작이 늘 같은 자리에서 같은 모양으로 같은 일을 하는 것이다. 사람은 자주 하는 일을 손에 익힌다. 같은 화면을 하루에 수십 번 보는 사람일수록 눈보다 손이 먼저 간다. 그래서 자리가 바뀌는 버튼은 숙련된 사용자에게 가장 위험하다. 손은 지난번 자리를 누르고, 그 자리에는 다른 버튼이 있다.

주인 화면의 요청 카드가 바로 그랬다. 지후의 시험판에서는 "수락"과 "거절"이 책 제목 바로 아래에 붙어 있어서, 제목이 두 줄이면 버튼이 아래로 밀렸다. "다른 날 제안" 버튼이 함께 나오는 카드에서는 버튼 세 개의 순서가 바뀌었다. 아래에서 주인이 되어 본다. 카드마다 서가 확인 결과("있음" 또는 "없음")가 적혀 있다. 있으면 수락, 없으면 거절을 되도록 빨리 누른다.

자리를 고정하면 주인은 몇 번 만에 화면을 손에 익힌다. 고정할 때는 두 가지를 함께 정한다. 첫째, 내용이 버튼을 밀지 않게 한다. 책 제목이 길면 두 줄까지만 보여 주고 말줄임표로 자르거나, 버튼 줄을 카드 아래가 아니라 화면 아래에 붙인다. 둘째, 버튼의 순서를 서비스 전체에서 하나로 정한다. 긍정 버튼을 오른쪽에 둘지 왼쪽에 둘지는 운영체제와 플랫폼마다 관례가 다르고, 어느 쪽이 옳다는 결론은 없다. 중요한 것은 한 서비스 안에서 바뀌지 않는 것이다.

제약: 할 수 없는 일은 못 하게

실수를 줄이는 가장 확실한 방법은 실수할 수 없게 만드는 것이다. 가능한 행동의 범위를 좁혀 올바른 행동으로 이끄는 것을 제약(Constraint)이라고 한다. 노먼은 제약을 네 종류로 나눈다. 모양과 크기로 막는 물리적 제약, 상황의 뜻으로 좁히는 의미적 제약, 사회의 관례로 좁히는 문화적 제약, 논리로 좁히는 논리적 제약이다. 화면에는 물리적인 모양이 없지만, 비활성 버튼과 고를 수 없는 선택지가 물리적 제약의 역할을 한다.

제약 가운데 가장 강한 것은 다음 단계로 가기 전에 반드시 무언가를 하게 만드는 강제 기능(Forcing function)이다. 노먼은 순서를 강제하는 잠금, 빠져나가기 전에 확인하게 하는 장치 등을 예로 든다. 앞에서 본 "요청 중…" 잠금이 그런 것이다. 그러나 강제 기능은 사용자의 자유를 빼앗기도 한다. 5장에서 본 것처럼, 되돌릴 수 있는 일에는 강제 대신 되돌리기가 낫다. 제약은 틀린 행동을 막는 데 쓰고, 사용자의 선택을 좁히는 데 쓰지 않는다.

문화적 제약은 특히 조심해서 쓴다. 색의 뜻은 문화와 맥락에 따라 다르고(ColorBook 12장), 색만으로 뜻을 전하면 색을 구별하기 어려운 사람에게는 전해지지 않는다(ColorBook 13장). 수락과 거절을 초록과 빨강으로만 구별하지 않고, 자리와 모양과 문구로도 구별되게 하는 이유다.

선택지가 많으면: 힉–하이먼 법칙

1950년대 초 심리학자 윌리엄 힉(W. E. Hick)과 레이 하이먼(Ray Hyman)은 불빛 여러 개 가운데 하나가 켜지면 그에 맞는 키를 누르는 실험을 했다. 선택지가 늘수록 반응 시간은 길어졌지만, 선택지 수에 비례해서가 아니라 그 로그에 비례해서 늘었다(Hick 1952, Hyman 1953). 선택지가 둘에서 넷으로 늘 때 늘어나는 시간과 넷에서 여덟로 늘 때 늘어나는 시간이 비슷하다는 뜻이다. 이 관계를 힉–하이먼 법칙(Hick–Hyman law)이라고 부른다.

이 법칙은 "메뉴의 항목을 줄여라"라는 처방의 근거로 자주 인용된다. 그런데 법칙이 확인된 조건을 보면 조심할 것이 많다. 실험의 참가자들은 어느 불빛에 어느 키가 짝인지 충분히 연습했고, 선택지들은 똑같은 확률로 나왔다. 고를 대상을 찾아 읽을 필요가 없었다. 처음 보는 메뉴에서는 사정이 다르다. 사람은 원하는 항목이 어디 있는지 몰라 위에서부터 하나씩 읽고, 그 시간은 로그가 아니라 항목 수에 거의 비례해서 는다. 메뉴 연구자들은 처음 쓰는 사람의 하나씩 읽기와 익숙한 사람의 힉–하이먼식 결정을 함께 다루는 모형을 내놓기도 했다(Cockburn, Gutwin & Greenberg 2007).

아래 그래프는 세 경우를 비교한다. 똑같은 확률로 나오는 익숙한 선택지(힉–하이먼), 하나가 절반의 확률로 자주 쓰이는 선택지(하이먼의 정보량), 그리고 처음 보는 목록을 하나씩 읽는 경우다. 슬라이더로 선택지 수를 바꾼다.

그래서 "선택지를 줄여라"는 반만 맞는 말이다. 익숙한 사용자가 늘 쓰는 선택지라면 몇 개를 줄여도 아끼는 시간이 얼마 되지 않는다. 처음 보는 사람이 하나씩 읽어야 하는 목록이라면 줄이는 효과가 크다. 그리고 줄이는 것만이 방법이 아니다. 항목을 4장에서처럼 묶고 이름을 분명히 하면 읽는 범위가 좁아지고, 자주 쓰는 것을 위에 두면 평균 시간이 준다. 손님용 결과 화면에 책방 네 곳을 모두 보이는 것은 선택지를 늘리는 일처럼 보이지만, 손님은 대개 가까운 책방 하나를 이미 알고 있어 그 이름을 찾아 읽는 시간이 대부분이다.

피츠의 법칙은 짧게

버튼을 누르는 시간에는 고르는 시간 말고도 손이 가는 시간이 있다. 심리학자 폴 피츠(Paul M. Fitts)는 1954년 실험에서 목표까지 손을 옮기는 시간이 거리 \(D\)가 멀수록, 목표의 폭 \(W\)가 좁을수록 길어지며, 그 관계가 \(\log_2\)를 따른다는 것을 보였다. 오늘날 인간–컴퓨터 상호작용 분야에서 널리 쓰는 형태는 매켄지(MacKenzie 1992)가 정리한 섀넌 형식 \(MT = a + b \log_2(D/W + 1)\)이다. 크고 가까운 목표가 빨리 눌린다. 이것이 피츠의 법칙(Fitts's law)이다.

이 법칙과 터치 타깃의 최소 크기(WCAG 2.2의 2.5.8 등), 직접 끌어 보는 시뮬레이터는 WebBook 7장 컴포넌트와 상태에서 다룬다. 이 장에서는 두 가지만 짚는다. 첫째, 피츠의 법칙은 목표가 어디 있는지 이미 알 때 손이 가는 시간을 말한다. 버튼을 찾는 시간(앞 절의 하나씩 읽기)이나 무엇을 누를지 정하는 시간(힉–하이먼)은 따로 더해진다. 둘째, 자주 누르는 버튼일수록 크고 가깝게, 실수로 누르면 곤란한 버튼일수록 작게 하라는 뜻이 아니라 떨어뜨려 두라는 뜻으로 읽는다. 주인 화면의 수락 버튼은 엄지가 쉽게 닿는 화면 아래에 크게 두고, 거절은 같은 크기로 하되 수락과 사이를 둔다. 거절을 작게 만들어 누르기 어렵게 하는 것은 실수를 줄이는 것이 아니라 주인을 불편하게 만드는 일이다.

서윤의 서비스 노트