좋은 디자인은 사용자를 고민하게 하지 않습니다.
저는 심리학을 전공했습니다. 디자인을 하기 위해 전공을 선택한 건 아니지만, 디자인을 할 때 심리학에 대해 얕게나마 학습한 지식이 도움이 될 때가 있습니다. 최근에는 디자인에서 사용성에 대한 중요도가 점점 더 커지면서 멘탈모델이나 인지 부하 등 사용자가 하는 행동을 이해하기 위해 심리학에 대한 디자이너의 관심도 커졌습니다. 좋은 디자인은 사용성이 뛰어나다는 게 이견이 없다면 심리학 법칙을 알아두는 건 굉장히 비용 효율적입니다. 좋은 디자인이라고 할 수 있는 사례들은 이런 법칙을 고려했고, 이건 법칙이 절대적이라기보다 인간에 대한 이해를 탐구한 학문인 심리학이 발견한 행동 특성이 여전히 유효하기 때문입니다. 오늘 소개해드리는 사용성과 관련한 10가지 심리학 법칙을 알아두면 사용성 테스트를 거쳐 A/B 테스트를 하기 전에, 또는 사용성 이슈가 생겨서 이를 개선하기 위한 솔루션을 고민할 때 유용할 수 있습니다.
인간의 뇌 용량은 1년마다 바뀌는 게 아닙니다. 그러니까 인간 행동에 대한 연구에서 얻은 통찰은 시효가 길 수밖에 없습니다. 20년 전에 사용자들이 어려워했던 부분은 오늘 사용자도 어려워할 겁니다.
제이콥 닐슨, 닐슨 노먼 그룹 설립자로 심리학 박사
[사용성이 가진 특성]
- 유용성 – 사용자가 필요로 하는 작업을 하는가?
- 유효성 – 하려고 한 작업을 완료할 수 있는가?
- 효율성 – 작업을 수행하는데 들이는 시간과 노력은 합리적인 수준인가?
- 호감도 – 사용자가 이것을 갖고 싶어 하는가?
- 재미 – 사용자가 사용할 때 재미있다고 느끼는가?
- 학습 용이성 – 사용자가 사용방법을 알아볼 수 있는가?
- 기억 용이성 – 사용할 때마다 사용자가 사용법을 다시 익혀야 하는가?
존 야블론스키가 『UX/UI의 10가지 심리학 법칙』에서 소개한 10가지 법칙을 소개합니다. 책에 나오지 않는 사례를 최근의 사례를 추가해 시의성을 높이고 제 해석을 곁들이겠습니다. 10가지 법칙 모두 사용성과 깊은 관련이 있습니다.
1. 제이콥의 법칙
멘탈 모델(mental model)을 떠올리시면 됩니다. 사용자는 여러 사이트를 이동하면서 시간을 보냅니다. 따라서 새로운 사이트를 이용할 때에도 이미 알고 있는 다른 사이트들과 같은 방식으로 작동하길 원합니다. 사람은 경험을 통해 학습하기 때문에 자신이 익숙한 제품을 통해 유사한 제품을 사용하려고 합니다. 따라서 새로운 디자인을 할 때 기존의 멘탈 모델을 활용하면 사용자가 새로운 모델을 학습하지 않아도 되므로 학습에 걸리는 시간과 비용이 줄어듭니다.
2. 피츠의 법칙
피츠의 법칙은 1954년 미국의 심리학자 폴 피츠(Paul Fitts)가 발견한 수학 모델입니다. 터치 대상에 도달하는 시간은 대상까지의 거리, 대상의 크기와 함수 관계에 있다는 법칙입니다. 사용성을 생각하면 세 가지 측면에서 점검할 수 있는데요. 터치할 수 있는 버튼 크기가 사용자가 정확하게 선택할 수 있을 만큼 충분히 커야 한다는 점, 버튼과 버튼 사이에는 잘못 누르지 않도록 충분한 거리를 확보해야 한다는 점, 터치할 수 있는 버튼은 화면에서 구석자리가 아니라 쉽게 마우스나 손가락이 닿을 수 있는 영역에 배치해야 한다는 점을 고려해야 합니다. 다음은 터치할 수 있는 대상에 대해 권장하는 최소한의 규격입니다. 참고로 MIT Touch Lab에서 연구한 결과 성인 손가락 지문 면의 면적은 10~14mm, 손끝 평균 면적은 8~10mm입니다.
기업 | 가이드 | 규격 (단위) |
애플 | 인터페이스 가이드라인 | 44 x 44 (pt) |
구글 | 머터리얼 디자인 가이드라인 | 48 x 48 (dp) |
WCAG | 웹 콘텐츠 접근성 가이드라인 | 44 x 44 (CSS px) |
닐슨 노먼 그룹 | 1 x 1 (cm) |
3. 힉의 법칙
힉의 법칙은 1952년 심리학자 윌리업 에드먼드 힉과 레이 하이먼이 ‘자극의 개수와 자극에 대한 반응 사이의 상관관계에 관해 진행한 실험’을 통해 만들었습니다. 의사결정에 걸리는 시간은 선택할 수 있는 보기의 개수와 복잡성과 비례해 늘어납니다. 실생활에서도 힉의 법칙은 유효합니다. 점심시간이라고 생각해보세요. 점심메뉴를 골라야 하는데 메뉴가 10가지가 넘으면 사진과 함께 메뉴를 보면서 천천히 고르는 경우가 많습니다. 거꾸로 ‘순댓국’을 먹는다고 하면 양을 선택하거나, 순대만 넣어달라는 간단한 요구사항으로 ‘주문’이라는 과업이 끝이 나죠. 메뉴가 많으면 사용자가 정보를 얻는데 더 많은 인지 부하가 발생합니다. 이럴 때에 도움이 되는 건 처음 간 식당을 자주 와봤다는 동료가 “여기는 두 번째 메뉴가 가장 맛있어요”라고 추천해주는 겁니다. 또는 메뉴판에 ‘BEST’ 메뉴라고 적혀있는 것을 보고 부담을 덜고 선택할 수 있습니다.
4. 밀러의 법칙
매직 넘버 7이라고 이야기하는 법칙입니다. 평균적으로 사용자는 작업기억(working memory)에 7±2개의 항목밖에 저장하지 못합니다. 밀러의 법칙에서 디자이너가 기억해야 할 핵심은 사용자가 쉽게 처리하고 이해할 수 있도록 청크(의미 단위의 덩어리)로 구분하고 정리하는 것입니다. “메뉴를 7개로 제한해야 한다”와 같이 밀러의 법칙을 디자인에 제약사항으로 두는 경우도 있지만 이는 법칙을 곡해하는 겁니다. 1956년 하버드대학교 심리학과 교수였던 조지 밀러(George Miller)가 「마법의 숫자 7, 더하거나 빼기 2: 정보 처리 용량에 관한 몇 가지 한계」라는 논문에서 주장한 것의 본질은 글자 7개나 단어 7개나 단기 기억에 저장하기 위해 들여야 하는 노력은 유사했다는 점입니다. “인간의 단기 기억에는 한계가 있고 정보를 덩어리로 만들면 효과적으로 기억할 수 있다”로 요약할 수 있죠. 따라서 내비게이션 메뉴에 7개만 노출할 필요는 없습니다. 카테고리에 따라 명확히 구분하고 여백이나 선을 활용하면 사용자가 충분히 내비게이션 영역을 쉽게 사용할 수 있기 때문이죠. 핵심은 덩어리로 묶어서 보여준다는 원리입니다.
5. 포스텔의 법칙
존 포스텔은 인터넷을 형성한 여러 프로토콜을 체계화하는데 크게 기여한 컴퓨터 과학자입니다. 네트워크를 통해 데이터를 주고받는 ‘전송 제어 프로토콜(TCP, Trasmission Control Protocol)’ 초기 모델을 구현했는데 이때 “TCP 구현은 견고함의 원칙을 따른다. 자신이 행하는 일은 엄격하게 하고, 남에게 받는 것은 너그럽게 받아라”는 ‘견고함의 원칙’을 세웠습니다. 데이터를 다른 기계로 보낼 때 프로그램은 약속한 규약을 철저하게 따라야 하며, 데이터를 받는 프로그램은 의미만 잘 통하면 너그럽게 받아들여야 한다는 의미였죠. 포스텔의 법칙은 인간의 가변적인 입력을 너그럽게 수용해서 구조적이고 기계 친화적인 출력으로 해석할 수 있는 시스템으로 디자인하면 할수록 사용자 부담은 줄고 더욱 인간적인 사용자 경험이 보장된다는 의미가 있습니다.
심리학에서 보는 인간은 합리적인 동시에 감정에 큰 영향을 받습니다. 사용자가 어떤 동작이나 입력을 하더라도 시스템은 공감하는 태도로 유연하고 관대하게 대처할 수 있도록 설계할 필요가 있습니다. 동시에 인터페이스는 안정적이면서 뛰어난 연결 속도, 접근성을 보장해야 하죠. 왜냐하면 사용자는 자신이 행하는 일에는 엄격하게, 남의 것은 상대적으로 너그럽게 받아들이는 경향이 있기 때문입니다. 대표적으로 사용자가 폼에 입력하는 것은 포맷이나 규칙을 지키지 않더라도 시스템을 디자인할 때에는 가능한 수용하도록 노력해야 합니다.
6. 피크엔드 법칙
인스타그램에서 보고 찾아간 식당에서 나름 괜찮은 저녁식사를 하고 있었습니다. 마지막으로 나온 디저트를 먹으려는 순간 옆 테이블에서 귀에 거슬릴 만큼 시끄러운 소리로 이야기를 하며 테이블을 툭툭 치는 상황입니다. 친구의 이야기 소리가 안 들릴만큼 시끄럽게 이야기하는 상황인데도 직원이 제지하지 않는다면 식당에 대해 어떤 기억을 안고 자리에서 일어날까요?
경험 속성 중 가장 신경을 써야 하는 건 가장 강렬한 순간 그리고 마지막 순간입니다. 경험 전반을 동일한 수준으로 중요하게 생각하기보다 감정적으로 절정에 이은 순간, 그리고 마지막 순간을 오래 기억하죠. 동시에 인간은 긍정적인 순간보다 부정적인 순간을 더 생경하게 기억합니다. “~하세요” 보다 “~하지 마세요”를 더 오래 기억하는 것을 생각해보세요. 피크엔드 법칙은 1993년 대니얼 카너만(Daniel Kahneman) 연구진이 발표한 「더 큰 고통을 적은 고통보다 선호하게 하려면 경험의 마지막 순간이 좋아야 한다(When More Pain Is Preferred to Less: Adding a Better End)」논문에서 처음으로 과학적 증거가 제시되었습니다. 후속 연구에서는 대장 내시경 시술을 받는 환자를 두 그룹으로 나누어 A 그룹에서는 평범하게 대장 내시경을, B 그룹은 똑같은 시술을 하되 마지막에 내시경의 끝부분을 빼지 않은 채 그대로 3분을 더 있었습니다. 시술 후 소감을 묻자 더 긴 시술을 받은 B그룹 환자들이 마지막 순간을 덜 고통스럽게 느꼈고, A 그룹 환자들보다 전체 경험의 불쾌감을 더 낮게 평가했습니다. 다음번 시술에도 오겠다고 답한 비율이 더 높았다는 점에 주목할 필요가 있습니다. 마지막 순간에 고통이 줄어들자 전체 경험에 대한 기억이 더 긍정적으로 변한 거죠. 피크엔드 법칙은 심리학에서 이야기하는 인지 편향(cognitive bias)으로 인한 현상입니다.
서비스 이름에서 알 수 있듯 침팬지 로고를 사용하는 메일침프는 이메일을 보내기 직전, 발송하기 버튼을 누르는 상황을 침팬지가 발사 버튼을 누르는 애니메이션을 통해 위트 있게 표현하고 있습니다. 뉴스레터를 작성하는 일은 반복적이면서 부담스러운 경험입니다. 수많은 고객들에게 발송 버튼을 누르고 난 이후 메일함에 도착한 콘텐츠를 수정하는 게 불가능하기 때문에 긴장감이 높은 작업이죠. 메일침프는 마지막 순간을 재치 있게 표현함으로써 경쾌한 기분을 느끼도록 사용자 경험을 유도하고 있습니다. 메일을 발송하고 난 이후에는 하이파이브를 하는 일러스트를 통해 “잘 해냈어”라는 성취감을 주고 이런 경험이 플랫폼에 대해 긍정적인 기억을 하도록 만들죠.
7. 심미적 사용성 효과 (aesthetic-usuablity effect)
관미지이 담지역미(觀美之餌啗之亦美), 보기 좋은 떡이 먹기도 좋다는 말처럼 사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식하는 경향이 있습니다. 심미성이 뛰어난 디자인을 보면 사용자는 사소한 사용성 문제에 대해 상대적으로 너그러운 태도를 보이기 때문인데요. 경치가 좋은 곳을 찾았을 때 다른 불편한 점이 덜 거슬리는 것을 떠올려보면 됩니다. 실무에서는 시각적으로 만족스러운 디자인을 제공할 때 사용성 문제가 나타날 가능성이 줄어든다는 점을 기억하면 되는데요. 최근에는 UX 디자인이 더 나은 사용성을 추구하는 흐름 때문에 심미성은 우선순위가 뒤로 밀리는 분위기도 다소 있지만, 실제로는 사용성 때문에라도 미적으로 더 우수한 디자인을 추구하는 것이 디자이너의 책임이라고 할 수 있습니다. ‘아름다운 것이 사용하기에 더 좋다’라는 심미적 사용성 효과는 보기 좋은 디자인이 뇌에 긍정적 반응을 일으키고 인지 능력을 높여 사용성이 더 뛰어나다는 생각이 들게 한다는 심리학 연구결과에 기반합니다. 디자이너가 한 가지 더 주의해야 할 점은 보기 좋은 디자인으로 사용성 이슈가 가려지지 않도록 하는 것입니다.
8. 폰 레스토프 효과 (von Restorff effect)
폰 레스토프는 독일의 심리학자이자 소아과 의사였는데 1933년 연구를 통해 사람들이 여러 목록 중 뚜렷하게 구분되는 항목을 가장 잘 기억한다는 사실을 발견했습니다. 인간은 진화하면서 정교한 시각 체계와 인지 처리 체계를 갖췄습니다. 순식간에 사물을 보고 구별해낼 수 있고, 패턴으로 처리하는 능력, 사물 간의 작은 차이도 발견하는 능력을 타고났죠. 이런 점 때문에 비슷한 사물이 여러 개 있으면 그중에서 가장 차이가 나는 한 가지만 기억할 가능성이 큽니다. 그게 들이는 주의력 대비해서 효율적이기 때문이죠. 따라서 디자인으로 특정 요소를 강조할 때에는 제한을 둘 필요가 있습니다. 여러 요소를 모두 크게 만들고 눈에 띄게 한다고 모든 요소를 다 주목하는 게 아니기 때문인데요. 각 디자인 요소 사이에 경쟁을 피하고 중요한 항목이 다른 요소와 유사하다고 인식되거나 배너, 스팸 광고로 오인되지 않도록 조심해야 합니다. 광고라고 생각되면 무시하는 것은 심리학적으로 선택적 주의력(selective attention)과 관련이 있습니다. 주변에 어떤 사물이 있더라도 지금 하고 있거나 중요하다고 생각하는 일이 아니면 이를 무시하고 관련 있는 것에 집중하는 거죠. 인터넷을 사용하다가 여러 배너가 있을 때 광고라고 인식하면 무시하는 경향인 배너 무시(banner blindness)는 선택적 주의력과 관련한 현대인의 사례라고 볼 수 있습니다.
9. 테슬러의 법칙 (Tesler’s law)
테슬러의 법칙은 복잡성 보존의 법칙이라고도 부르는데요. 1980년대 중반 제록스 파크에서 컴퓨터과학자, 레리 테슬러가 인터랙션 디자인 언어를 개발할 때 발견한 법칙입니다. 당시 테슬러는 사용자가 애플리케이션과 어떻게 인터렉션 하는지가 애플리케이션만큼 중요하다는 사실을 알아차렸는데요. 애플리케이션과 인터페이스 양쪽에서 모두 복잡성을 줄이려고 노력했습니다. 그런데 아무리 줄이려고 해도 줄여지지 않는 단계에 이르렀죠. 이렇게 남은 복잡성은 줄이는 대상이 아니라 처리해야 하는 대상이 됩니다. 즉, 테슬러의 법칙은 ‘모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다’는 의미입니다. 위에서 언급한 5. 포스텔의 법칙을 기억하고 계신가요? 더 이상 없앨 수 없는 복잡성을 사용자가 감당할지, 시스템이 감당할 지에 대한 고민에 대한 단서를 제공해주는 원칙입니다. 내재된 복잡성을 디자인이나 개발 과정에서 처리하면서 사용자 부담을 최소화하는 것이 테슬러 법칙을 디자인에 적용할 때 적합한 해석입니다.
이메일 보내는 케이스가 대표적입니다. 지메일에서 메일을 보낸다고 생각하면 ‘수신자’는 사용자가 반드시 입력해야 합니다. ‘발신자’는 로그인한 사용자 이메일 주소를 자동으로 입력해서 생략할 수 있지만 ‘수신자’나 ‘제목’, ‘본문’은 사용자 입력 없이 임의로 완성할 수 없죠. 지메일은 스마트 답장 기능으로 이메일을 스캔해서 맥락에 맞는 간단한 답변 몇 가지를 제안하거나 메일 발송 후 사용자에게 30초 이내에 메일 발신을 취소할 수 있는 기능, 첨부파일을 빠뜨렸다고 판단하는 경우 보내기 전에 ‘파일 첨부를 하시겠어요?’라고 묻는 기능 등을 업데이트하고 있습니다.
10. 도허티 임계
도허티 임계는 상편 마지막에 언급했던 ‘반응속도’에 대한 단서를 제공하는 기준이 되는 법칙입니다. 컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도는 0.4초인데요. 이 시간 안으로 인터랙션을 완료할 수 있다면 생산성이 급격히 높아진다는 것을 의미합니다. 따라서 사용자가 시스템을 사용하면서 주의가 분산되지 않도록 피드백을 0.4초 이내에 제공하는 것이 보편타당한 기준으로 볼 수 있죠. 만약 시스템 복잡성으로 인해 0.4초 이내에 제공할 수 없다면 어떻게 해야 할까요? 실제 대기 시간은 0.6초라도 0.4초처럼 느껴질 수 있도록 체감 성능을 높여야 합니다. 정확하지 않더라도 얼마나 진행되고 있는지 로딩, 프로세싱 상황을 애니메이션으로 보여주는 것이 흔히 사용하는 방법입니다. 전체를 동시에 보여주는 대신 페이지의 프레임을 먼저 보여주고 이미지, 영상 등 불러오는데 시간이 오래 걸리는 요소를 마지막에 보여주는 것도 효과적인 방법입니다. 미디엄에서는 로딩 시간을 최적화하기 위해 블러 업(blur up) 기법을 활용하기도 하는데요. 큰 이미지를 표시해야 하는 공간에 작은 이미지를 가져와서 로딩한 후 크게 확대하는 방식입니다. 저해상도 이미지를 키우면 픽셀 단위로 깨지고 노이즈가 생기니 가우시안 블러를 활용해 심미성을 유지하는 방식이죠.
인스타그램을 보고 힘들게 찾아간 식당을 나오면서 “여기 다시는 안 올 거야”라고 생각한 적이 있으신가요? 흔히 인스타그래머블(Instagrammable)한 공간은 사진이라는 수단과 SNS 마케팅을 결합해 스마트폰 화면으로 볼 때 가고 싶은 고객의 욕구를 극대화하는 경우가 있기 때문에 경험하기 전에 기대치를 높이거든요. 기대가 크면 실망하는 법이잖아요. 높은 기대치를 갖고 찾아간 장소는 주차도 불편하고, 오래 기다려야 하고, 직원들은 정신이 없고, 가격은 비싼데 양은 적고, 맛은 인스타그램 이미지를 보면서 기대했던 것보다 별로라면 “다시는 안 올 거야”라는 생각이 자연스럽게 듭니다. 사용성을 고려한 디자인에서 중요한 건 ‘투입한 수고에 비교해서 얻은 가치’입니다. 고생스러울수록 대단한 게 나올 거라고 생각하는 거죠. 가게 앞에서 오픈 전부터 기다렸다 1시간 만에 입장해서 90분 만에 먹은 음식을 생각해보세요. 기다리지 않고 먹을 수 있는 음식점과 동일한 맛, 분위기를 기대하는 경우는 없습니다.
평범한 혹은 평균 이하의 능력과 경험을 가진 사람이 어떤 사물을 사용해서 무엇인가 하려고 할 때 사용법을 스스로 알아낼 수 있습니다. 단 투입한 수고에 비해 얻은 가치가 더 커야 합니다.
스티브 크룩, 사용성 컨설턴트
멘탈 모델이란 사용자가 어떤 시스템에 대해, 특히 작동되는 원리나 방식에 대해 알고 있다고 생각하는 바를 가리킵니다. 모바일앱이든 키오스크든, 백화점 지하 푸드코트 정수기와 같은 디지털부터 물리적 시스템까지 포괄합니다. 시스템 작동 방식에 대한 축적된 경험이 멘탈 모델을 형성하고 이를 새로운 대상과 인터랙션 할 때 사용합니다.
인지 부하는 스마트폰이나 노트북의 기억 용량처럼 사용자가 인터페이스를 처음 익히고 사용하는데 필요한 정신적 자원의 양을 의미합니다. 스마트폰에서 동시에 너무 많은 앱을 사용하면 배터리는 급격히 줄어들고 처리하는 속도도 느려집니다. 만약 지금 수행하는 작업이 더 많은 기억 용량을 요구하면 뇌는 새로운 정보를 수용하기 위해 기존에 있던 정보를 지우는 방식으로 작동합니다.
인지 편향은 판단에 관여하는 사고나 이성에 발생하는 계통 오차(systematic error)를 가리킵니다. 상황을 철저하게 분석하기보다는 효율적으로 신속한 결정을 내리게 해주는 일종의 정신적 지름길입니다. 어떤 의사결정을 할 때 검토하기 위해 모든 정신을 쏟기보다 평소에는 무의식적인 자동 반응에 의존해서 빠르게 처리하고, 꼭 필요할 때에만 시간을 들여 정신적 노동을 하는 거죠. 인지 편향의 한 종류가 기억 편향(memory bias)인데 자신의 감정을 상하게 한 사건을 그렇지 않은 사건보다 더 잘 기억하는 것을 말합니다.