UX/UI의 10가지 심리학 법칙
프런트앤드 개발자의 책 리뷰
책을 읽게 된 계기
mymovester 프로젝트 진행 중 UI-design을 프론트앤드 개발자인 내가 맡게 되었다. (팀구성은 PM, 나 그리고 BE 이기에 내가 디자인하는 것이 여러모로 합리적이었다. 개인적으로 경험해보고 싶었던 영역이기도 했다.)
나의 프로젝트를 다른 서비스들과는 다르게 그리고 특별하게 만들고 싶다는 욕심과 Figma로 내가 만든 UI에 애정이 생기면서, 더욱 나은 디자인은 무엇인가, 더욱 사용자를 이끌 수 있는 디자인은 무엇인가 고민을 하게 되었다. UX/UI의 디자인적인 법칙이 있지 않을까?라는 궁금증에서 이 책까지 닿게 되었다.
책에서 소개하는 10가지 심리학 법칙
1. 제이콥의 법칙
사용자는 자신이 이미 알고 있는 방식으로 작동하길 기대한다.
한때 reddit 에서 엄청난 인기를 달렸던 볼륨조절 UI기존의 작동 방식과 다른 UI는 신선함을 주지만, 우리는 너무나 당연하게도 기존의 사용방식을 고수한다. 이게 서비스에 적용이 된다면, 사용자는 혼란스러울 것이고 더 나아가 사용자가 웹사이트의 탐색을 끝내버릴 수 도 있다.
2. 피츠의 법칙
대상에 도달하는 시간은 거리와 크기가 상관관계가 있다.
온라인에서 피츠의 법칙이 무시되는 경우가 있는데, 이는 엉뚱한 곳에 버튼이 있거나 너무 작은 경우가 있다.
출처 : Apple위 이미지를 비교해 보면 어떤 UI가 사용에 있어 덜 피곤한지 알 수 있다.
너무 작은 버튼은 정확히 클릭하기 위해 더 많은 에너지를 사용해야 하고 이런 피로감들이 쌓여 사용자가 쉽게 떠나게 만든다.
3. 힉의 법칙
의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례한다.
힉의 법칙을 설명하는 그래프같은 10개의 선택지가 주어지더라도, 5개의 선택지 아래 2개씩 선택지를 더 두는 것과 통합하여 10개의 선택지를 주는 것에 선택하는 시간의 차이가 있다는 것이다.
우리가 실생활에서 접하는 안 좋은 예는 바로 리모컨이다. 선택지가 너무 많고 주로 사용하는 버튼이 너무 많아 필요한 버튼만 쓰도록 버튼들을 가려버리는 대참사(?)가 일어나기도 한다.
출처 : UX/UI의 10가지 심리학이러한 문제를 잘 해결한 예는 애플 tv의 리모컨이다. 꼭 필요한 버튼들만 남기고 나머지는 화면에서 software로 선택을 하도록 문제를 해결하였다.
4. 밀러의 법칙
사용자의 작업 기억은 5개-9개 정도이다.
숫자 7의 법칙을 내세워서 정당화하지 말자는 글쓴이의 당부가 있었다.
우리가 염두에 두어야 할 것은 많은 정보들을 사용자가 쉽게 이해하고 기억할 수 있게 덩어리화 해야 한다는 것이다.
5. 포스텔의 법칙
남에게는 관대하게, 자신의 일에는 엄격하게
유저의 행동에는 관대하게, 유저가 사용하는 서비스를 만드는 자신에게는 엄격하게 대하라는 내용이다.
유저가 취하는 최악의 상황에 대비하라는 의미로 받아들일 수 있다.
창을 닫으려 할 때 "정말 닫으시겠습니까?"등의 알림으로 유저의 실수를 먹는등이 예일 수 있다.
6. 피크엔드 법칙
인간의 기억은 평균이나 합계가 아니라 최고의 순간과 마지막 순간에 느끼는 감정을 바탕으로 경험을 판단한다.
서비스에서 나쁜 감정이 드는 부분을 해소하고 좋은 감정의 피크를 극대화하는 등의 노력으로 전반적인 인식을 긍정적이게 만들 수 있다.
7. 심미적 사용성 효과
사용자는 보기 좋은 디자인이 더 뛰어난 디자인이라고 인식한다.
디자인이 뛰어난 경우 사용성이 좋을 것이라는 기대감이 있고, 불편한 ux 에도 관대해진다.
뛰어난 디자인을 제공하는 것도 중요한 미션 중 하나이지만, 아름다운 디자인에 매몰되어 사용성을 놓치지 말자.
8. 폰 레스토프 효과
비슷한 것들 중에 가장 차이나는 한 가지만 기억할 가능성이 높다.
중요한 정보를 전달하거나 사용자 안내등이 필요할 때 사용할 수 있다. 다만, 사용자 경험이나 목적을 위해 적절히 강조를 해야 한다. 과도한 강조는 오히려 사용성을 떨어트릴 수 있다.
폰레스토프 효과 예시위 예시에서 다르게 생긴 것은 두 가지이다. 빨간색 원과 파란색 사각형이다. 둘 다 다르지만 시각적으로 생상이 다른 빨간 원에 먼저 집중이 되고 그다음에 파란 사각형을 인식한다. 이처럼 사용자는 비슷한 것들 중 가장 다른 요소를 더 기억하기 쉬울 것이다.
9. 테슬러의 법칙
모든 디자인은 더 이상 줄일 수 없는 복잡성이 존재한다.
심플한 디자인등을 추구하려 해도 더 이상 줄일 수 없는 복잡성이 존재한다는 이야기이다.
예를 들어 이메일을 보낼 때 복잡성을 최대한 줄여도, 수신인과 내용등은 빠질 수 없는 최소의 요소이다.
10. 도허티 임계
사용자가 0.4초 이하에 인터렉션이 생기면 생산성이 높아진다.
웹페이지 접속 시 진짜 응답이 아니더라도 반응을 보여 체감상의 사용성을 높여야 한다는 뜻이다.
스켈레톤 UI, 프로그래스바, 로딩 애니메이션등을 통해 진행이 되고 있음을 사용자들에게 알려주어 서비스 이탈을 막고 작업 수행 능력을 올려줄 수 있다.
반응속도 개선으로 수익을 올렸다는 내용의 기사도 쉽게 찾아볼 수 있습니다. ( How One Second Could Cost Amazon $1.6 Billion In Sales )
여기서 무엇을 적용할 수 있을까?
책을 정리하자면 아래와 같다.
(7) 심미적 효과를 고려하여 아름다운 디자인을 하되 (1) 제이콥의 법칙에 따라 다른 사이트들과 너무 다른 UI를 가져가면 안 된다. 설명하고자 하는 UI설계는 버튼이나 이미지의 크기와 거리를 잘 조절하여 원하는 플로우대로 사용자가 이동하게 설계를 하고 중요하거나 강조를 위한 경우 강조가 필요한 부분만 다른 형태를 준다. 사용자가 한 번에 기억을 할 수 있는 정보는 많지 않으므로 무리하게 많은 정보를 줄 필요가 없다. 그렇다고 너무 줄이면 서비스 로직이 작동하지 않으니 적절히 끊어서 보여주어야 한다. 또한 초기 로딩시간도 고려해야 한다. 로딩시간이 0.4초 이상인경우 skeleton ui나 프로그레스바를 넣어 상호작용 확률을 높여야 한다.
저자가 10가지로 줄여준 UX 디자인의 심리학적 접근방식을 적용하려고 하니 위같이 머리에만 맴돌고 여전히 복잡하게 느껴진다.
일단 내가 적용할 수 있는 action item들을 정리해 보았다.
1. 다양한 UI를 경험하자!
타 서비스의 유사한 UI들을 모아 보면서 사용자와 어떤 상호작용을 하는지 분석해 보자. 제이콥의 법칙에 따르면 사용자들은 비슷한 UI를 마주쳤을 때 똑같이 작동하기를 기대한다. 그렇다면, 나의 서비스도 비슷하게 작동하게 설계를 해야 사용자들이 어색함을 덜 느낄 것이다. 그리고 우리의 사이트를 더 탐험할 수도!
2. "simple is the best"를 잊지 말자
훅의 법칙이나 폰 레스토프효과 그리고 심미적 사용성 효과를 생각하면 기본적인 UI는 심플하게 디자인하는 것이 효율적이다. 선택지가 너무 많아서 너저분해 보이고 시간도 오래 걸리게 만들지 말고, 간결하게 한다는 장점이 있을 뿐만잉 아니라, 강조하고 싶은 메뉴가 있을 때 강조가 더욱 잘 된다는 장점도 생긴다.
3. 사용자에게 최고의 경험은 주지 못하더라도, 최악의 경험은 주지 말자.
피크엔드의 법칙에 의하면 사용자는 서비스에 대한 기억을 평점으로 기억을 하는 것이 아니라, 극대화된 시점의 기억으로 판단할 것이다. 최고의 경험이라고 인상을 남기려다 사용성에 있어 너무 불편한 버그나 서비스오류등을 남기지 않아 서비스 사용에 있어 불쾌했던 기억을 만들지 않는 것이 중요하다고 생각한다.
4. 무응답은 없어야 한다.
간혹 서버의 에러 거나 사용자의 잘못된 행위에 의해 서비스가 정상적이게 작동하지 못하는 상황이 생긴다. 이때 무응답이게 하지 말자. 3번과도 비슷한 맥락이지만, 무엇이 잘못되었는지, 어떻게 해결해야 하는지, 언제 해결될 건지에 대한 정보를 사용자에게 주면 서비스에 대한 사용자의 경험이 매우 다를 것이라고 사료된다.
책 정리를 마치며..
어떤 UI가 좋은 UI인지 판가름할 수 있는 좋은 기준을 알게 되었다. 사용자가 보는 화면을 개발하는 FE개발자라면 알아두는 것도 좋을 것 같다. 종종 꺼내보며 디자인 원칙을 리마인드 하기에 좋을 책이다.
