[독후감] UX/UI의 10가지 심리학 법칙
오랜만입니다! 어제 내린 함박눈 보셨나요?
서울이 이렇게 하얗게 변한 건 정말 오랜만인 것 같네요.
저도 곧 1년차가 되가는데요.
회사에 일하면서 들었던 질문을 여러분께도 공유하고자 합니다.
“왜 여기에 버튼을 두신 거예요?”
“왜 이만큼 여백을 주신 거예요?”
“왜 이 요소는 여기에 두신 거예요?”
처음에 이런 질문을 들었을 때는 어떻게 대답하면 좋을지 고민이 많았습니다. 일하기 시작한 지 얼마 안 됐을 때, 제가 하는 디자인은 그야말로 저의 경험과 직관에 의한 산출물이었습니다. 그러니 설명하기도 어려울 수밖에요.
지금이야 디자인할 화면에서 사용자가 달성하고자 하는 목표는 무엇인지 생각하고, 어떤 정보와 요소를 강조하면 좋을지를 생각하고 디자인을 하고 있어요. 이렇게 디자인을 하면 제가 왜 이렇게 디자인을 했는지를 좀 더 설득력 있게 전달할 수 있어서 좋습니다.
그럼에도 좀 더 명확한 근거를 제시하면 좋지 않을까 생각했고 사람을 연구하는 심리학 분야라면 가능하지 않을까 생각해 UX/UI의 10가지 심리학 법칙 책을 읽게 되었습니다.
1. 제이콥의 법칙
사용자는 자신이 이미 알고 있는 사이트의 작동 방식과 똑같이 당신의 사이트가 작동하기를 바란다는 내용의 법칙이에요.
기존의 멘탈 모델을 활용하면 사이트를 익히고 배우는 시간을 절약할 수 있죠. 페이지의 구조, 네이게이션 바, 바텀 앱 바(탭 바), 채팅 메세지, 검색 등이 해당됩니다. 기존의 관습을 따르면 사용자가 학습할 시간을 줄이고 그 만큼 사용자가 목표를 달성할 확률은 높아집니다.
저도 이번에 주식 상세 페이지에 상세 뉴스 목록 UI를 디자인할 때, 사람들이 가장 많이 쓰는 네이버와 카카오 뉴스를 참고했습니다. 화면이 작은 모바일에서 헤드라인 1줄로 뉴스를 노출하고 있었어요. 한정된 공간에 가장 중요한 정보만 노출한 것이죠.
2. 피츠의 법칙
대상에 도달하는 시간은 대상까지의 거리와 대상의 크기와 함수 관계에 있다는 법칙이에요.
화면이 작은 모바일에서는 사용자가 손가락으로 터치하기 쉽도록 버튼을 디자인하는게 중요합니다. 또 아이콘과 아이콘의 거리가 충분하여 의도치 않은 아이콘이 눌리는 일을 방지해야 하죠. 티클에서 사용하는 Small Size 아이콘의 크기가 24*24인 이유죠. (머터리얼 가이드라인을 참조해 사이즈를 정했어요.)
마지막으로 사용자가 스마트폰을 쥐고 있을 때 쉽게 도달할 수 있는 거리에 터치할 수 있는 요소를 두는 것도 중요합니다. The Thumb Zone이라고 구글에 검색하면 아래 이미지를 쉽게 접하실 수 있을 거에요. 대부분의 앱들에서 CTA 버튼이 하단 또는 중앙에 위치하는 이유죠.
3. 힉의 법칙
의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다는 법칙입니다.
힉의 법칙을 재밌게 보여주는 사례가 있습니다. 바로 Grandma-Friendly Remote Modifications 입니다. 다시 말해 ‘할머니용 리모콘’이지요. 선택지가 많을 수록 우리는 오래 고민하고 때로는 혼란스럽기까지 합니다.
티클에서는 ‘챌린지’라는 서비스를 제공하고 있는데요. 이 때 잔돈을 빠르게 모을 수 있도록 ‘티클 옵션’을 설정할 수 있습니다. 잔돈을 곱하거나 일정한 금액을 추가할 수 있는 옵션들이 있어요. 선택지가 많다보니 챌린지에서는 ‘추천 티클 옵션’을 제안해 사용자들의 선택을 돕고 있어요.
4. 밀러의 법칙
보통 사람은 작업 기억에 7(±2)개의 항목밖에 저장하지 못한다는 법칙이에요.
심리학에는 Chunking(덩어리화)라는 개념이 있습니다. 사람은 덩어리화를 활용해 정보를 암기하는 능력이 있다는 거죠. 7은 마법의 숫자지만, 더 중요한 건 정보의 덩어리화입니다. 특히, 정보가 많은 화면을 디자인할 때는 정보와 정보를 묶어 사용자가 최대한 적은 덩어리를 인식할 수 있도록 노력하고 있습니다.
밀러의 법칙의 가장 쉬운 예로 전화번호를 들 수 있겠네요.
0101239876과 010–1234–9876 중에 무엇이 더 편하게 읽히나요?
5. 포스텔의 법칙
자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게.
이 법칙을 UX에 대입하자면 사용자가 어떤 행동을 보이든지 공감하는 태도로 유연하고 관대하게 대처하라고 말할 수 있겠네요.
포스텔의 법칙은 Form 경험에서 중요합니다. 사람들은 항상 자신의 통제력을 유지하면서도 필요 이상의 정보 제공 요구는 귀찮아합니다. 따라서 항상 보수적으로 받아야 할 Form 개수를 정해야 합니다. 또 이미 확보한 정보는 중복으로 요청하지 않는 것도 필요하죠.
티클 앱은 다른 앱에 비해, 회원가입 과정에서 사용자에게 많은 정보를 요구하는 편입니다. 계좌를 개설하고, 출금계좌를 등록하고, 카드를 연결해야 하기 때문이죠. 꼭 필요한 정보만을 요구하지만 사용자들은 의사결정 피로감(Decision Fatigue)을 느낄 수밖에 없습니다. 이 부분은 팀원들과 함께 지속적으로 해결해나가야 하는 부분이에요.
사용자가 어떻게 행동할지 최대한 많은 경우의 수에 대비해야 합니다. 학생 때 UI를 디자인을 하면, 한 가지 케이스의 화면만 그리면 됐어요. 그런데 일을 하고 나서부터, 다양한 사용자 케이스에 대응해야 한다는 것을 알 수 있었습니다. 기본적으로 Empty page와 Active page가 있죠.
기획/디자인을 할 때, 놓치고 있는 케이스는 없는지 꼼꼼하게 살피는 편이에요. 만약 발생 가능한 케이스를 생각하지 않고 기획/디자인하고 그대로 개발된다면 그에 대한 사이드 이펙트는 예측하기 무서울 정도네요.
6. 피크엔드 법칙
인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다는 법칙입니다.
우버 익스프레스 풀 서비스를 이용하는 고객은 배정된 차량이 도착할 때까지 차량의 이동 경로를 보여주는 재밌는 애니메이션을 볼 수 있습니다. 자칫 지루할 수 있는 대기 시간을 긍정적인 경험으로 바꾼것이죠. 이를 통해 우버는 요청 취소율을 낮추고 서비스 이용 중 부정적인 감정이 절정에 이를 만한 순간을 피했습니다.
7. 심미적 사용성 효과
사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다는 법칙입니다.
서비스의 디자인이 보기 좋으면, 사용자는 사소한 사용성 문제에 비교적 관대해진다고 해요. 심미적 사용 효과는 쿠로스와 카시무라가 252명의 실험 참가자에게 현금자동입출금기 인터페이스 레이아웃 패턴을 보여준 실험에서 입증했습니다.
심미적 사용성 효과의 사례는 심미성을 업무의 중점으로 두었던 브라운(독일의 전자회사)과 애플(미국의 IT 회사)로 알 수 있습니다.
8. 폰 레스포트 효과
비슷한 사물이 여러 개 있으면 그중에서 가장 차이가 나는 한 가지만 기억할 가능성이 크다는 법칙입니다.
사용자가 목표를 빨리 달성할 수 있도록 중요한 정보나 요소를 강조하는 게 좋습니다. 사실 이러한 시각적 위계나 리듬은 모바일 UX/UI뿐만 아니라 모든 디자인 분야에 있어 중요한 부분입니다.
책에서 인상깊었던 부분은 특정 요소를 강조할 때 색상에만 의존하지 말라는 문구였습니다. 색상에 의존할 경우, 색맹이나 저시력자 사용자가 배제되기 때문이죠.
9. 테슬러의 법칙
복잡성 보존의 법칙이라고도 알려져있습니다. 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다는 법칙입니다.
어쨌든 복잡성이 있다는 말인데, 이 복잡성을 디자인과 개발 단에서 최대한 부담해야합니다. 그래야 사용자에게 가는 부담이 덜하겠죠?
예를 들어보면, 이전에 송금은 공인인증서가 있어야하고 절차도 복잡했습니다. 사용자에게 복잡성을 전가했기 때문이죠. 그러나 지금의 간편결제 서비스들은 이러한 이전의 복잡했던 과정을 개발과 디자인에서 맡아 처리했습니다. 물론 시스템적인 혁신도 따라줬지만 결과적으로는 사용자에게 복잡함을 전가하지 않았다는 겁니다.
10. 도허티 임계
컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션하면 생산성은 급격히 높아진다는 법칙입니다.
사용자에게 시스템 피드백을 0.4초 이내로 줬을 때 생산성이 향상된다는 말입니다. 만약 0.4초 이내로 피드백을 주지 못한다면 어떡할까요?
페이스북에서는 콘텐츠를 로딩하는 동안 표시하는 Skeleton screen을 보여줍니다. 사용자는 로딩 속도가 느려도 기다린다는 느낌이 덜해서 속도와 반응성이 실제보다 더 낫다고 인지합니다.
티클에서도 2탭에 접근할 때 스켈레톤 스크린을 보여줍니다. 그 밖에도 0.4초 이상이 걸리는 페이지의 경우 Sppiner 애니메이션을 삽입하고 있습니다.
이렇게 총 10가지 심리학 법칙을 살펴보았습니다.
제이콥, 피츠, 힉, 밀러의 법칙은 이미 알고 있었지만 다시 한번 책을 통해 복습할 수 있어서 좋았습니다.
가장 뇌리에 꽂히는 법칙은 7번째 법칙인 ‘심미적 사용성 효과’였습니다. 심미성이 제품의 완성도를 올려줄 뿐만 아니라 사용성에도 효과가 있다는 사실이 반가웠네요!
이상으로 <UX/UI의 10가지 심리학 법칙> 책 리뷰를 마칩니다.
더 자세한 내용이 궁금하다면 직접 <UX/UI의 10가지 심리학 법칙> 책을 읽어보시길 추천 드립니다!
※해당 독후감은 제가 UX/UI의 10가지 심리학 법칙 책을 구매해 읽은 내용을 토대로 재구성하여 작성하였음을 밝힙니다.
