UX/UI의 10가지 심리학 법칙
프로덕트를 사용자 시각으로 바라보기
서비스에 관심이 많아서 올해는 UX를 집중적으로 공부하고 있다. 얼마 전 회사의 PM님들의 책상에 <UX/UI의 10가지 심리학 법칙>들이 놓여있는 걸 보고 나도 읽어보았다.
이 책은 Laws of UX(https://lawsofux.com) 프로젝트를 했던 디자이너 존 야블론스키가 쓴 책이다. Laws of UX에서 다뤘던 법칙 중 10가지를 꼽아서 책으로 만들었다.
1. 제이콥의 법칙
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
사람들은 당신의 사이트가 아닌, 다른 사이트들에서 시간을 더 많이 보낸다. (슬프지만 맞는 말!) 그렇기에 그들이 이미 이해하고 있는 방식대로 당신의 사이트가 동작하기를 선호한다. (유저들은 복잡한 걸 싫어하니까!)
자신의 제품이 속한 산업군의 제품들과 비슷한 인터페이스를 제공해야 한다. 혁신적으로 사용성을 극대화할 수 있다면 모를까, 그렇지 않다면 비슷한 위치에 비슷한 모양으로 만들어야 사용자가 쉽게 이해할 수 있다. 인터넷 쇼핑 사이트의 오른쪽 상단에 장바구니와 회원 버튼이 있고, 제품 페이지에 들어갔을 때는 상품 사진과 수량 밑에 구매하기 버튼이 있는 것이 그 예시이다. 괜히 다르게 만든다고 장바구니 버튼이 왼쪽 하단에 있다면..? 당장 짜증이 나서 그 사이트를 닫을 것 같다.
현실 세계의 디자인과 비슷하게 만드는 것도 유저에게 도움이 된다. 웹 사이트의 토글 버튼, 라디오 버튼은 현실 세계에서 비롯되었다. 그렇기에 유저들은 어느 정도 사용법에 대해 예상할 수 있었다.
2. 피츠의 법칙
The time required to rapiddly move to a target area is a function of the ratio between the distance to the target and the width of the target.
대상이 커지면 대상 선택에 드는 시간이 줄어든다. 대상 선택을 위해 움직이는 거리가 줄면 대상을 선택하는데 드는 시간도 줄어든다.
저자는 이 법칙을 '터치' 영역을 결정할 때 강조한다. 사용자가 정확도를 신경 쓰지 않도록 터치 대상을 적당히 크게 설정해야 하고, 모바일 화면을 이용할 때 손가락으로부터 접근할 수 있는 거리를 신경 써서 화면을 설계해야 한다고 말한다.
3. 힉의 법칙
Increasing the number of choices will increase the decision time logarithmically.
선택지가 많아지면 선택하는 시간이 (로그 함수로) 늘어난다. 선택지가 많아질수록 시간이 오래 걸리다가 너~어~무 많아지면 너어무 오래걸리는 건 비슷하다. 줄일 수 있으면 줄이는데, 어차피 많은 선택지라면 한두개 더 있어도 상관없다.
인터페이스를 익히고 인터랙션하는데 필요한 정신적 자원의 양을 인지 부하(cognitive load)라고 하는데, 선택지가 많아지면 인지부하가 증가한다. 사용자가 골치 아프지 않게 UX를 설계해야 하므로 선택지를 줄이는 게 좋다.
불필요한 부분, 사용자의 목표 달성에 도움이 되지 않는 요소들을 제거해야 한다. 프로덕트에 기능이 많아지면 자연스럽게 선택지가 많아질 수밖에 없는데, 이걸 줄이는 게 정말 정말 어려운 일인 것 같다.
4. 밀러의 법칙
The average person can only keep 7 (plus or minus 2) items in their working memory.
보통 사람은 7개 정도밖에 기억하지 못한다. 전화번호가 7자리인 이유로 대중적으로 많이 알려진 법칙이다. 그런데 사실 7은 마법의 숫자는 아니라고 한다. 중요한 것은 덩어리화인데, 인간의 단기 기억은 한계가 있어서 정보를 덩어리로 만들면 효과적으로 암기할 수 있다.
덩어리화는 암기는 물론 인지에도 도움이 된다. 전화번호를 하이픈(-)을 사용해 덩어리화 해서 표현하는 것과, 글이 제목과 여러 단락으로 나뉠 때 가독성이 올라가는 것이 그 예이다. 마찬가지로 UI를 표현할 때 덩어리화를 이용해 요소 간에 적합성에 따라 여백을 표시해야 한다.
5. 포스텔의 법칙
Be leberal in what you accept, and conservative in what you send
유저의 액션은 너그럽게 받아들이고, 시스템의 안정성은 보장해야 한다. 인간은 때로 일관성이 없고, 주의 산만하고, 가끔 실수하고, 감정에 휘둘리기 때문에 인터렉션하는 제품은 너그럽게 유저의 액션을 받아들여야 한다.
사용자의 입력은 무조건 수용하되 사용자에게 요청하는 정보의 양은 보수적으로 책정한다. 사용자가 채워야 하는 정보가 많아질수록 인지 에너지가 증가해 피로도가 증가하기 때문이다. 또한 모든 사용자가 브라우저 기능, 기기 기능과 성능, 네트워크 속도에 상관없이 기본적인 기능을 사용할 수 있어야 한다.
6. 피크엔드 법칙
Intense positive or negative moments(the "peaks") and final moments of an experience(the "end") are heavily weighted in our mental calculus.
인간의 경험은 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다. 중요한 결정을 할 때 인간은 감성에 의존한다는 것과 비슷한 맥락이다. 비이성적이게도 자극적인 기쁨과 불행의 순간으로 경험을 판단하는 것이다.
책의 이 문장이 꽤 마음에 들었다.
인간은 자신의 인생 경험을 포괄적인 타임라인이 아니라, 일련의 스냅사진처럼 기억한다.
그렇기에 UX는 사용자의 가장 강렬한 순간과 마지막 순간을 세심하게 신경 써야 한다는 것이다. 사용자가 언제 기쁨을 느꼈는지, 불쾌함을 느꼈는 지를 파악해야 한다. 특히 사람들은 긍정적인 순간보다 부정적인 순간을 더욱 생생하게 기억하기 때문에, 부정적인 경험에 대해 유의해야 한다.
7. 심미적 사용성 효과
Users often perceive aesthetically pleasing design as design that’s more usable.
사람들은 보기 좋은 디자인이 사용성이 더 뛰어나다고 인식한다.
사람들이 인지를 처리할 때 시스템1(충동적)과 시스템2(사고적)을 이용하는데, 시스템1이 대부분의 사고나 행동을 관장하고, 시스템 2는 필요할 때 사용된다. 시스템1에서 제품을 빠르게 구별하고, 관련 없는 정보는 무시하는데 심미적 효과는 바로 이런 첫인상을 결정할 때 매우 중요하다.
아름다운 디자인은 긍정적인 반응을 일으키고 인지능력을 향상한다. 디자인이 아름다우면 사용성이 좋다고 느끼고, 사소한 문제를 간과해줄 수 있다.
8. 폰 레스토프 효과
When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
비슷한 사물이 여러 개 있으면, 그중 가장 색다른 것만 기억하려고 한다. 중요한 정보나 핵심 동작은 시각적으로 눈에 띄게 설계해야 한다. 다만 색상만 사용하는 경우에는 색맹이나 저시력 사용자가 배제될 수 있다는 걸 주의해야 한다.
꼭 필요한 컨텐츠라면 광고로 보이지 않게 해야 한다. 사람들은 광고처럼 보이는 것을 인지적으로 무시하기 때문에 중요한 정보는 광고처럼 보이지 않고, 광고 주변에 배치하지 않아야 한다.
아무것도 강조하지 않는 것보다 더 나쁜 건 너무 많은 요소를 강조하는 것이다. 이 점도 유의해야 한다.
9. 테슬러의 법칙
Any system has a certain amount of complexity which cannot be reduced.
시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다. 매우 공감한다. 제품이 사용자를 위해 제공하는 기능이 많아지면 많아질수록 시스템과 인터페이스는 복잡해진다.
완전히 없애거나 감출 수 없는 일정량의 복잡성이 존재하기에, 개발(혹은 디자인) 과정이나 사용자 인터랙션 단계에서 처리해야 한다.
Gmail이 좋은 예시인데, 이메일 주소를 입력하는 것은 없앨 수 없는 복잡성이다. (받는 사람을 지정해야 보낼 수 있으니까) 이를 돕기 위해 몇 글자 입력하면 이메일을 제안해주는 기능을 만들었다.
메일을 작성하는 것도 온전히 유저가 해야 할 수고인데 이를 돕기 위해 스마트 편지 쓰기(맥락에 맞는 단어와 구절을 제안한다)를 만들었다. 온라인 쇼핑몰에서 주문을 작성할 때 배송지를 목록에서 고를 수 있게 하는 것도 이러한 수고를 더는 것이다.
유저가 복잡한 행동을 할 수밖에 없는 상황에서 이를 돕기 위한 시스템을 개발하거나 인터페이스를 디자인해야 한다.
10. 도허티 임계
Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
0.4초 이하로 인터랙션하면 생산성은 급격히 높아진다. 시스템이 빠르게 반응하도록 만들어야 한다는 것이다. (개발자로서 어깨가 매우 무겁다..)
빠르게 반응하지 못하는 경우에는 애니메이션을 이용해 기다리는 시간 동안 사람들의 시선을 뺏어야 한다. 시스템이 빠르게 응답하는 게 가장 좋은 방법이지만, 여러 가지 외부 시스템과 연동하는 경우에는 그게 쉽지 않다. 그럴 경우에는 아래의 팁을 이용한다.
스켈레톤 UI(일단 사이트의 틀을 먼저 로딩해주는 것)과 블러 업(이미지 공간에 저해상도 이미지를 보여주고, 실제 이미지가 로딩되면 바꿔 친다)
로딩할 때 애니메이션을 사용해 시선을 뺏는다. (진행상황이나 남은 시간을 보여주면 더 좋다)
인스타그램처럼 댓글이 업로드된 것처럼 보여주고 백그라운드에서 처리한다.
경험적으로 또는 이전에 읽어본 내용이었지만 한 권으로 잘 정리되어, 다시금 UX에 대해 전반적으로 돌아볼 수 있어서 유익했다. 다만 책의 번역투가 딱딱하고 어색해서 잘 읽히지 않는 게 아쉽다. 특히 법칙에 관해 번역된 문장들이 너무 어색해서 원문을 찾아보게 됐다.
