콘텐츠 마케터가 읽은 UX/UI의 10가지 심리학 법칙
회사에서 글 쓰는 사람을 위한 내용 정리
<UX/UI의 10가지 심리학 법칙>은 사용자 경험을 고려하는 일을 한다면 읽어봄직한 책이다. 누구라도 고개를 끄덕일 10가지 심리학 법칙이 UX/UI에서 활용하기 좋도록 정리되어 있다. 160페이지 조금 넘는 책에 개념부터 사례까지 모자라지 않게 들어 있어 가벼운 마음으로 펼칠 수 있었다. 웹·앱 UX/UI를 담당하는 주니어 디자이너나 기획자에게 가장 도움이 되겠지만, 회사에서 글 쓰는 나에게도 큰 깨달음을 주었다. '내 일을 어떻게 더 잘하지?' 고민하는 사람이라면 책을 열자마자 어머나 세상에 싶을 거다.
- 기존 디자인을 바꿔야 한다는 기반 데이터가 없는 상황에서 초기 디자인의 정당성을 어떻게 입증할까? 짐작했겠지만, 이윽고 디자인 리뷰 프로세스는 주관적 의견과 개인적 편견에 좌우되기 시작했고, 그 결과 디자인의 정당성 입증은 점점 더 멀어져갔다.
그러던 중 해결책이 떠올랐다.
- 어마어마한 양의 학술 논문과 과학 연구, 그리고 인기 언론에 실린 기사 자료까지 찾아봤으나 그중 어떤 것도 디자인 업무와 직접적인 연관은 없었다. (...) 결국 내가 찾던 자료를 내가 직접 만들기로 했다. 그렇게 탄생한 것이 'Laws of UX'라는 이름의 웹사이트다. 이렇게 열정 하나로 시작한 프로젝트는 내가 알아낸 것을 배우고 기록하는 방법이 되었다.
진행 중이던 프로젝트에 관한 정량적 데이터나 정성적 데이터가 없어서 어쩔 수 없이 다른 곳으로 눈을 돌렸던 것인데, 그 덕분에 심리학과 사용자 경험 디자인의 교차점에 주목하기 시작하면서 내 업무에는 매우 큰 변화가 찾아왔다. 이렇게 찾은 데이터는 그 자체로도 가치가 있지만, 거기에 그치지 않고 이렇게 심리학에 잠시 한눈을 판 이후에는 인간이 어떻게 행동하고, 왜 그런 행동을 하는지에 관한 이해를 바탕으로 디자인을 할 수 있게 되었다.
좋은 디자인이 뭘까. 저자인 존 야블론스키는 이 애매한 질문에 '디자이너인 저를 믿으세요!' 하는 대신 정당성을 갖춘 답을 찾고자 했다. 행동심리학, 인지심리학에서 실증적 증거를 찾기 위해 연구 논문을 읽고, 원칙이라 부를 만한 것을 정리하고, 유저 인터페이스를 고민하는 디자이너들을 위해 'Laws of UX' 사이트까지 만들었다. 사고방식이 범상치 않은 대인배다.
책에 등장한 10가지 원칙 중 대부분은 웹이 등장하기 전부터 발표되었던 심리학 원칙들이다. 현실 세계를 기반으로 정의된 것들이기에 누구라도 쉽게 납득할 수 있다. 사람의 사고방식에 대한 것들이라 UX/UI 디자인 외의 분야에서도 폭넓게 적용 가능할 듯싶다.
디자이너가 디자인의 정당성을 설명하는 것처럼, 나도 내가 만드는 콘텐츠의 정당성을 풀어낼 수 있어야 한다. 블로그에 글을 올리던, 웹페이지에 들어갈 카피를 쓰던 "이걸 왜 이렇게 만드셨나요?" 묻는 사람을 납득시킬 답을 찾아야 한다. 어느 정도 경력이 쌓이면 웬만큼은 경험에서 우러나온 이유를 설명할 수 있다. 그런데 그게 내가 할 수 있는 최선일까? 더 믿을 만한 근거를 찾을 수는 없을까? 이 책 덕분에 눈을 돌리게 되었다.
이번 글에서는 책의 내용과 저자의 사고방식을 오래 기억하고 싶어 내맘대로 이것저것 정리해 보았다. 자세한 내용이 궁금하다면 책을 읽어보는 걸 추천한다.
이왕 정리하는 김에 글 쓰는 콘텐츠 마케터 입장에서 함께 생각해볼 것들도 ❣️ 뒤에 덧붙여두었다. 디자이너는 아니지만, 잠재고객부터 찐팬들까지 다양한 사람들을 만날 글을 쓰는 사람으로서 정당성을 찾는 데 도움을 받고자 했다.
1장. 제이콥의 법칙
✅ 사용자는 여러 사이트를 이미 활용해 보았기에, 우리가 만든 사이트도 자신이 이미 알고 있는 방식대로 작동할 것을 기대한다.
✅ 기존의 멘탈 모델(Mental Model: 어떤 시스템 및 작동 방식에 대해 알고 있다고 생각하는 것)을 활용하면 사용자가 튜토리얼 등을 거쳐 새 모델을 익힐 필요 없이 바로 이해하고 작업할 수 있다.
✅ 완전히 새로운 것을 절대로 만들지 말라는 의미는 아니다. 혁신이 필요한 때와 상황이 있다. 하지만 독창성을 추구하기에 앞서 사용자의 편의와 기술적 제약을 고려한 최선의 방법을 알아내는 것이 디자이너의 역할이다. 사용성이 희생되지 않도록 주의해야 한다는 게 핵심.
❣️ 콘텐츠의 형태, 콘텐츠가 실리는 플랫폼마다 어느 정도 정해진 포맷이 존재한다. 가끔 '새로운 시도' 라며 보는 사람에게 익숙하지 않은 콘텐츠를 기획하는 경우도 있는데, 이 시도가 단순히 내 욕심에서 시작된 것은 아닌지 고민해봐야 한다. 새로운 아이디어를 도입해 기분 좋은 낯섦을 준다면 괜찮겠지만 뜻한 바를 이루지 못하는 경우도 많다.
콘텐츠 마케터는 마케팅을 위한 콘텐츠를 만들어야 한다. 독창성을 추구하기에 앞서 예상 독자를 고려한 최선의 콘텐츠를 고민해야 한다.
2장. 피츠의 법칙
✅ 대상에 도달하는 시간은 대상까지의 거리 및 대상의 크기와 함수 관계가 있다.
→ 사용자가 대상을 사용하기까지 걸리는 시간은 대상의 크기와 대상까지의 거리와 연관이 있다.
✅ 대상이 커지면 대상 선택에 드는 시간이 줄어들고, 대상 선택을 위해 움직이는 거리가 줄면 대상을 선택하는 데 드는 시간도 줄어든다. 그 반대도 성립한다.
→ 터치 대상의 크기는 사용자가 정확하게 선택할 수 있도록 충분히 커야 한다. 또한 터치 대상 사이에 충분한 거리를 확보해야 하고, 터치 대상은 인터페이스상에서 쉽게 도달할 수 있어야 한다.
✅ 사용성은 좋은 디자인을 이루는 중요한 요소다. 인터렉션은 간단하게 이뤄져야 한다. 마우스나 손가락처럼 정밀도가 제각기 다른 입력 방식이 존재하기에 오늘날에는 고려할 것들이 더 많아졌다.
❣️ 글을 쓸 때, 가장 보여주고 싶은 요소를 충분히 크게 보여주자. 제목 글씨를 크고 굵게 만든다거나 등등. 웹 콘텐츠라면 문단 간격도 시원시원하게 늘려 주자. 클릭 등의 인터렉션을 유도하지 않더라도 가독성은 정말로 중요하다.
아, '자세히 보기'처럼 클릭을 유도하는 버튼을 넣어야 한다면 화면의 중앙에 잘 보이도록 배치하자. 모바일에서 한손으로도 클릭하기 쉬울 크기로, 다른 버튼과 헷갈리지 않게. 한 화면에 버튼을 하나만 넣는 것도 좋겠다.
3장. 힉의 법칙
✅ 의사결정에 걸리는 시간은 선택지의 개수, 복잡성과 비례해 늘어난다.
→ 빠른 의사결정을 돕고 싶다면 선택지의 개수를 최소화하고, 인지 부하를 줄이려면 복잡한 작업을 잘게 나누는 것이 좋다. 추천 선택지를 강조해 사용자의 부담을 줄이는 것도 방법이다. 단, 추상적이라고 느껴질 만큼 단순화하지는 않도록 주의.
✅ 디자이너는 효율적이고 간결한 방식으로 복잡성을 단순화해야 한다.
→ 선택지의 개수는 의사결정 시간에 영향을 미치기에, 필요한 선택지를 적시에 제공해야 사용성이 좋아진다.
✅ 인터페이스나 프로세스를 단순화하면 사용자의 인지 부하는 낮아지는 장점이 있지만, 단순화 자체가 사용자 경험에 부정적인 영향을 미칠 수도 있다.
→ 예를 들면 추상적인 아이콘. 무슨 뜻인지 짐작이 안 되는 아이콘은 사람마다 다르게 의미를 해석하기에 오히려 작업 수행을 헷갈리게 한다. 이 경우 텍스트 레이블을 붙이면 추상성이 효과적으로 감소한다.
❣️ 홍보 문구를 쓸 때, 지나치게 추상적이어서 읽는 사람에게 한번에 와닿지 않는 문장이 나올 때가 있다. 알고 보면 멋진 말이어도 처음 보는 사람이 이해하기 어렵다면 쓸모없다. 더 멋지게, 더 세련되게 쓰기보다 더 쉽게 이해할 수 있도록 써야 하는데. 당연한 것이라도 자꾸 까먹게 된다. 계속 떠올려야지.
4장. 밀러의 법칙
✅ 일반적으로 사람은 작업 기억에 7(+-2)개의 항목밖에 저장하지 못한다.
→ '마법의 숫자 7'은 유명한 법칙이지만, 이는 사실 '내비게이션 항목 및 선택지 개수 등은 7개 이하로 제한해야 한다'는 식으로 많이 쓰인다. 이는 사실이 아니다.
✅ 밀러는 청소년의 기억 범위가 대략 7 정도로 제한되며, 기억 범위에 더 큰 영향을 미치는 건 정보의 기본 단위인 비트의 양이 아닌 정보 덩어리(chunk)의 개수라고 결론내렸다.
→ 인간의 단기 기억은 한계가 있고, 정보를 덩어리로 만들면 더욱 효과적으로 암기할 수 있다. 휴대폰 번호를 01012345678보다 010-1234-5678로 외우면 더 쉬운 것처럼.
✅ 웹에서 콘텐츠를 볼 때 줄간격이 작고, 행을 제대로 나누지 않았고, 모든 텍스트의 크기가 같은 페이지는 눈에 잘 안 들어온다. 체계가 잘 드러나게 제목 및 부제 서식을 추가하고, 콘텐츠 섹션 사이 여백을 넣고, 행 길이를 줄이거나 밑줄을 추가하는 등의 노력으로 콘텐츠가 잘 보이게 하는 것도 덩어리화의 개념으로 이해할 수 있다.
❣️ 콘텐츠를 만들 때 눈에 잘 들어오도록 하자. 웹 콘텐츠는 가독성이 생명이다. 보기 좋은 떡이 먹기도 좋다는 말은 너무 뻔하지만 옛말이 괜히 아직까지 쓰이는 게 아니다. 짧은 글은 물론이고 긴 글을 쓸 때도 정말 중요한 법칙. 글이 길어지면 중간중간 소제목 등으로 내용을 환기한다거나, 문단별로 덩어리화를 잘할 수 있도록 내용을 구성한다거나, 중요한 내용에 밑줄을 그어준다거나.
읽기 쉽게 잘 썼다면 본문을 굳이 꾸며야 할까? 생각하던 시절이 있었다. '이게 정말 중요하다'는 걸 쓰는 사람이 직접 말하는 게 왠지 이상해 보여서. 다 읽으면 뻔히 아는 내용일 텐데 하고. 하지만 웹에서 읽고 싶어지는 글을 쓰려면 '굳이'는 없다. 할 수 있는 건 다 해야지.
5장. 포스텔의 법칙
✅ 자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게.
→ 사용자가 어떤 동작이나 입력을 하든 공감하는 태도로 유연하고 관대하게 대처하라. 인터페이스의 안정성과 접근성을 보장하되 입력, 접근성, 성능 면에서 만반의 준비를 하자.
✅ 사용자의 입력은 포맷, 입력 메커니즘을 막론하고 무조건 수용해야 한다. 마우스, 키보드, 음성 입력, 터치 입력, 제스처 입력 등등 다양한 입력 방식을 고려하자.
✅ 훌륭한 사용자 경험을 디자인한다는 것은 훌륭한 인간 경험을 디자인한다는 뜻이다. 인간과 컴퓨터가 정보를 소통하고 처리하는 방법은 근본적으로 다르기에 디자인이 이 둘을 이어줘야 한다.
❣️ SEO나 검색광고를 할 때, 사람들이 많이 쓰는 키워드는 실제 맞춤법이나 우리가 쓰는 전문용어와 다를 경우가 있다. 명백한 오류나 브랜드 이미지와 맞지 않는 게 아니라면 사람들이 많이 쓰는 표현을 함께 활용하는 편이 좋다.
6장. 피크엔드 법칙
✅ 인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다.
→ 사용자 여정 중 가장 강렬한 순간과 마지막 순간을 세심하게 신경쓰자.
✅ 제품이 사용자에게 가장 큰 도움을 주는 순간, 가장 중요하게 여겨지는 순간, 가장 큰 즐거움을 주는 순간 등을 알아내라. 사람들은 긍정적인 순간보다 부정적인 순간을 더 생생히 기억한다.
✅ 인간은 인생 경험을 포괄적인 타임라인이 아닌 스냅사진처럼 기억한다. 감정적으로 가장 강렬한 순간과 마지막 순간의 느낌으로 경험의 평균값을 정하고, 이에 다시 경험할 의향이 있는지, 다른 사람에게 추천할 생각인지 정한다.
❣️ 글 콘텐츠에서 제일 중요한 것은 글의 내용을 잘 드러내는(+클릭을 유도하는) 제목. 그다음부터 글을 읽을지 말지는 초반 한두 문단이 결정하니까 그쪽을 잘 신경써야 하는데, 감정적 절정의 순간은 아무래도 제목에서 언급한 정보를 얻을 때 아닐까 한다. 글의 마무리가 중요한 건 당연하고.
네이버 블로그, 지식인 글이 어느새 부정적인 선입견을 가지게 된 것도 제목을 풀어주지 않는 콘텐츠가 많아서 아닐까. 현란한 이모티콘만 쏟아내고 내용물은 없는 글이 너무 많았다. 정도껏이어야지.
사용자 경험에서 용인될 만한 '정도껏'은 어느 정도인가, 이것도 생각해볼 만한 주제 같다.
7장. 심미적 사용성 효과
✅ 사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.
→ 보기 좋은 디자인은 뇌에 긍정적 반응을 일으켜 제품이나 서비스의 사용성이 뛰어나다는 생각이 들게 한다. 제품이나 서비스의 디자인이 보기 좋으면, 사용자는 사소한 사용성 문제에 비교적 관대해진다.
✅ 사람들이 처음 접한 웹사이트에 의견을 형성하는 데 걸리는 시간은 20분의 1초 이내이다. 이를 결정하는 주된 요인은 시각적 매력이라고 밝힌 연구결과가 많다.
✅ 시각적으로 만족스러운 디자인은 사용성 문제를 가린다. 이 때문에 사용성 테스트 중 문제가 드러나는 것을 방해할 수 있다. 문제 식별이 중요한 사용성 테스트에서는 숨어 있을 사용성 문제 파악을 위해 참가자에게 적절한 질문을 해야 한다.
❣️ 보기 좋은 떡이 먹기도 좋다. 정말로. 요즘은 뭘 먹으러 갈 때도 이왕이면 예쁜 거, 사진으로 잘 담길 걸 찾을 정도니까. 시각적인 요소가 필요한 콘텐츠의 경우 디자이너의 도움을 받자. 우리가 포토샵을 아무리 잘해도 전문가의 디자인은 또 다르더라. 밀러의 법칙도 함께 생각해보면 좋겠다. 글이 디자인적으로 괜찮아 보이려면 덩어리화가 중요하다.
8장. 폰 레스토프 효과
✅ 비슷한 사물이 여러 개 있으면 그중에서 가장 차이가 나는 한 가지만 기억할 가능성이 크다.
→ 중요한 정보나 핵심 동작은 시각적으로 눈에 띄어야 한다. 시각적 요소를 강조할 때는 제한을 두어 각 요소 간 경쟁을 피하고, 가장 중요한 항목이 광고처럼 보이지 않아야 한다.
✅ 색상, 형태, 크기, 위치, 움직임 등이 모두 사용자의 주의를 끄는 요소이기에 인터페이스에 적용할 때 각각을 어떻게 사용할지 신중하게 고민해야 한다.
✅ 폰 레스토프 효과는 남용하지 말고, 명확한 목적이 있을 때만 사용해야 한다. 또한 강조하려고 활용하는 시각적 속성이 다양한 사용자에게 어떤 영향을 미치는지 반드시 파악해야 한다. (색맹, 저시력, 전정신경장애 등등)
❣️ SEO를 고려해 콘텐츠를 만들 때 가장 중요한 것이 접근성이다. 검색엔진 상위에 노출되는 여러가지 알고리즘이 있다고는 하지만 이는 자주 바뀐다. 좋은 콘텐츠가 상위에 노출되는 것은 당연하고, '좋은 콘텐츠'의 기준에 접근성이 있다.
가급적 콘텐츠의 정보는 시각, 혹은 청각 둘 중 하나만으로도 이해할 수 있도록 만들어야 한다. 이미지에 대체 텍스트를 써 두어 보이스오버에 문제없게 한다거나, 배경음악이 나오는 등의 콘텐츠에는 어떤 분위기의 음악인지 써 둔다거나. 넷플릭스에서 지원하는 선택 자막(CC)도 예시가 될 수 있겠다. (요건 SEO 관련은 아니지만!)
9장. 테슬러의 법칙
✅ 복잡성 보존의 법칙이라고도 알려진 테슬러의 법칙에 따르면, 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.
✅ 아무리 노력해도 모든 프로세스에는 어느 정도의 복잡성이 남는다. 미처 없애지 못한 복잡성은 사용자 인터페이스나 디자이너 혹은 개발자의 프로세스, 작업 흐름 어딘가에 자리잡는다.
→ 예를 들어 메일을 보낼 때, 아무리 프로세스를 줄여도 메시지 발신인과 수신인 정보는 필요하다. 이 정보가 없으면 이메일 발송이 불가능하기에 필수적인 복잡성이다.
→ 이 복잡성을 줄이려면 로그인한 사용자의 이메일 주소를 입력해 자동으로 채우고, 받는 사람의 경우 사용자의 연락처 정보 등을 기반으로 추천 이메일 주소를 제안할 수 있다.
→ 복잡성을 완전히 없앨 순 없지만, 이를 이메일 클라이언트에 넘긴 덕에 사용자가 이메일을 작성하는 경험은 좀 더 단순해졌다. 사용자 대신 디자이너와 개발자가 복잡성이라는 짐을 부담한 셈이다.
❣️ 이 책에서 제일 인상적인 법칙 중 하나. 없앨 수 없는 복잡성을 사용자가 아닌 서비스를 만드는 쪽에서 부담한다는 개념이 좋았다. '서비스'라는 라는 말을 다시 생각해보게 되었다. 우리나라에선 토스가 대표적인 사례가 될 것 같다. 콘텐츠 쪽에서는 뭘 챙길 수 있을까? 꼭 전해야 할 표현들, 단어들을 어떻게든 쉽게 풀어 어떻게든 쉽게 이해할 수 있도록 써야 하겠다. 물론 쉽지 않다.
10장. 도허티 임계
✅ 컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터렉션하면 생산성이 급격히 높아진다.
→ 사용자의 주의가 분산되는 것을 막고 생산성도 향상시키려면 시스템 피드백을 0.4초 이내에 제공하라.
✅ 흔히 속도를 기술적 문제로 치부하지만, 속도는 훌륭한 사용자 경험의 핵심이 되는 디자인 요소로 간주해야 한다. 시스템의 반응 속도(로딩 시간 등)는 전체 사용자 경험을 좌우한다.
→ 애니메이션은 로딩이나 프로세싱이 진행되는 동안 사람들의 시선을 끄는 방법 중 하나다. 정확하지 않더라도 진행표시줄을 보여주면 사용자는 대기 시간에 좀 더 너그러워진다.
✅ 한편, 시스템이 사용자의 기대보다 너무 빠르게 반응할 때도 문제가 발생한다. 변화가 너무 빨리 일어나면 아예 알아채지 못하거나 사용자가 변화를 이해하기 어려울 수 있고, 오히려 신뢰도가 떨어질 수도 있다. 이럴 경우 의도적으로 작업 완료를 늦게 알리는 것도 도움이 된다.
❣️ 예전 직장에서 워드프레스 블로그 만들어 운영했을 때 정말... 여러 모로 힘들었는데 그중 제일 스트레스받던 게 페이지 속도였다. 구글 페이지스피드 인사이트에 수백 번은 접속했을 텐데 이미지 용량부터 여러모로 신경쓸 게 많더라. 사이트를 무겁지 않게 만드는 데 정말 많은 노력이 필요하구나 싶었다. 개발자를 존중하고 응원하자.
그 외, 책의 11장 '힘에는 책임이 따른다'에는 이런 이야기가 이어진다. 법칙은 아니지만 기억해두고 싶은 내용이라 마저 정리해 보면 이렇다.
✅ 행동심리학이나 인지심리학을 통해 얻은 통찰을 더 나은 디자인을 만드는 데 활용하는 건 본질적으로 잘못된 일이 아니다. 다만 어떻게 제품이나 서비스가 사용자의 목적이나 목표를 망가뜨릴 수도 있는지, 이러한 제품이나 서비스를 책임감 있게 만드는 것은 왜 중요한지, 어떻게 하면 속도를 늦추고 조금 더 좋은 의도로 디자인할지 등을 반드시 고민해야 한다.
✅ 의도적으로 해로운 제품이나 서비스를 만드는 회사는 거의 없다. 하지만 의도와 상관없이, 중독성 강한 매커니즘은 부정적인 결과를 만드는 경우가 많다.
→ 페이스북이나 인스타의 '좋아요'를 계속해서 살피게 되거나, 인스타그램 필터를 거친 모습처럼 살고 싶어 성형수술을 받는다거나 등등. 서비스가 사회에 미친 해악은 제작자가 의도하지 않았다는 변명만으로 용서받을 수 없다.
✅ 이제는 기술을 만들 때 속도를 늦추고, 사람들의 삶에 미치는 영향까지 신중하게 고민해야 한다.
❣️ 우리 제품의 성과를 극대화하기 위해 중독성 강한 매커니즘을 만들 때는 가슴에 손을 얹고 생각해봐야 한다. 의도가 그렇지 않았더라도 나쁜 결과를 만들어내는 건 용서받기 어려운 일이다.
마케터의 일도 비슷한 데가 있다. 내가 봐도 별로인 제품을 어떻게든 멋진 말로 꾸며내 고객을 끌어와야 할 때, 전환율을 높이려고 과장된 카피를 써야 할 때. 법의 테두리를 넘지 않는 선에선 참고 다니자, 양심을 집에 두고 출퇴근하면 된다... 고 하기엔 너무 슬픈 일이다.
회사를 잘 고르자. 좋은 제품, 가치 있는 서비스가 있는 곳을 가야 한다. 치사한 일을 하지 않을 곳인지 잘 살펴야 한다. 연봉이나 복지 이상으로 중요한 좋은 회사의 조건이다. 물론 그런 회사에 어울리는 사람이 되려면 일을 잘해야 한다. 여기저기서 열심히 배우고 열심히 써먹어보자. 곧 월요일이다.
* 제 글을 메일로 편하게 받고 싶으시다면? > https://bit.ly/yoonawork
