UX/UI, 인간 중심 디자인을 위한 심리학
UX/UI의 10가지 심리학 법칙을 읽고
사용자 경험을 설계하는 UX/UI 디자이너로서 심리학을 공부하는 것은 큰 도움이 된다. 그런 점에서 'UX/UI의 10가지 심리학 법칙'이라는 책은 상당히 유익하고 흥미로웠다. 이 책의 저자가 말하듯 디자이너는 심리학을 활용하면 더욱 직관적이고 인간 중심적인 제품과 경험을 만들 수 있다. 우리는 예술을 하는 것이 아니기 때문에 '일단 만들었으니 알아서 적응해'가 아니라, 인터페이스를 보고 자연스럽게 상호작용할 수 있도록 만드는 데 초점을 두어야 한다. 물론 진리의 사바사라는 변수가 있긴 하지만 대다수에게 보편적으로 적용된다는 점에서 '법칙'이라고 이름 붙은 10가지 사고 패턴을 정리하여 두고두고 꺼내보려고 한다.
1. 제이콥의 법칙
- 사용자는 자신에게 익숙한 기존 제품의 경험을 바탕으로 다른 제품도 그럴 것이라고 기대한다.
- 따라서 기존의 *멘털 모델을 활용하면 사용자가 새로운 모델을 학습하지 않아도 바로 적응할 수 있다.
- 변화를 주고자 할 때는 사용자에게 익숙한 모델을 한시적으로 이용하게 하는 적응 기간이 필요하다.
*멘털 모델 : 우리가 어떤 시스템에 관해, 특히 그 시스템의 작동 방식에 관해 알고 있다고 생각하는 바
-> 그렇다면 매번 똑같은 형태의 제품과 경험을 제공해야 할까? 솟구치는 창작 욕구에 세상에 없던 방식! 새로운 디자인! 을 제품에 담고 싶을 수도 있지만, 이에 앞서 사용자의 니즈와 상황이 가진 맥락, 그리고 다양한 제약을 고려하여 합의점을 도출해내야 한다.
저자의 조언 : 처음엔 일반적인 패턴과 관례를 따르다가 이치에 맞는 새 아이디어가 떠오를 때만 관례에서 벗어나라. 물론 새로운 아이디어로 주된 사용자 경험이 개선된다는 걸 설득력 있게 주장할 수 있다면 과감히 도전해도 괜찮다. 다만 그 과정에서 사용자들이 새로운 방식을 이해할 수 있는지 테스트하는 것은 꼭 필요하다.
2. 피츠의 법칙
: 대상에 도달하는 시간은 대상까지의 거리와 대상의 크기와 함수 관계에 있다.
- 터치 대상은 선택하기 쉽도록 충분히 커야 한다.
- 터치 대상은 도달하기 쉬워야 한다.
- 터치하는 대상들 사이엔 충분한 거리가 확보되어야 한다.
-> 특히나 마우스 포인터보다 손가락은 섬세함이 떨어지고, PC에 비해 모바일 화면은 작기 때문에 이를 각별히 유념해야 한다.
사례 1) 아이콘의 실제 크기는 20x20px 이어도 터치 영역은 48x48까지 잡는다.
출처 : 리메인 디자인 시스템
사례 2) 엄지 영역(스마트폰을 한 손으로 들었을 때 엄지 손가락이 닿는 영역) 중에서도 손가락이 가장 닿기 쉬운 부분에 핵심 기능을 넣는다.
출처 : https://addyosmani.com/blog/touch-friendly-design/3. 힉의 법칙
: 의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해서 늘어난다.
- 너무 많은 선택지를 제공하지 말고, 추천 선택지를 강조해서 부담을 줄인다.
- 명확한 CTA 버튼, 분명한 정보 제공, 불필요한 단계 제거 등
- 복잡한 작업은 단계를 나눠서 진행한다.
- 점진적인 온보딩으로 신규 사용자의 적응을 돕는다.
- 너무 과한 단순화는 주의한다.
사례) 과한 선택지로 인한 부정적 경험은 일상생활에서 흔히 볼 수 있다. (메뉴를 고르는 등)
출처 : 이미지 내 표기4. 밀러의 법칙
: 보통 사람은 기억에 대략 7개의 항목 밖에 저장하지 못한다.
- 사용자가 쉽게 이해하고 기억할 수 있게 덩어리를 작게 나눠 정리한다.
- 단기 기억 용량은 사람에 따라, 그리고 기존 지식과 상황에 따라 달라진다.
사례 1) 덩어리로 구분된 전화번호는 나열된 숫자들보다 외우기가 쉽다.
*주의할 점 : 밀러의 법칙에서 얘기하는 7개란 단순히 인터페이스의 개수를 의미하는 것이 아니라, '정보 덩어리'의 개수를 뜻한다. 7이라는 숫자에 연연하기보다는 화면에 보이는 콘텐츠를 적절하게 덩어리화하는 것이 중요하다.
5. 포스텔의 법칙
: 자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게.
- 인터페이스든 포괄적인 시스템이든 안전성과 접근성을 보장해야 한다.
- 사용자가 행하는 다양한 입력 방식과 포맷을 고려해야 한다.
사례들)
input form에서 꼭 필요한 정보만 받아서 피로감을 줄인다.
인간의 다양한 입력을 받아들이는 좋은 예 - FACE ID
반응형 웹디자인 - 기기의 크기나 유형에 구애받지 않고 안정적으로 출력한다.
-> 다양한 가능성에 대해 잘 예측하고 대비하는 디자이너가 되어야 한다.
6. 피크 엔드 법칙
: 절정과 마지막 순간에 느낀 경험이 그 경험의 판단 기준이 된다.
- 사용자 여정 중 가장 핵심, 그리고 마지막 순간을 특히 신경 써야 한다.
- 와우 모먼트를 제공한다.
- 사람들은 긍정적인 순간보다 부정적인 순간을 더 잘 기억한다.
사례) 식당에서 아무리 맛있는 음식을 먹어도 계산하고 나올 때 점원이 너무 불친절하면 그곳은 안 좋은 기억으로 남는다.
피크 엔드 법칙은 인지 편향의 한 종류인 기억 편향(memory bias)이라고도 알려져 있다. 기억 편향이란, 인간이 자신의 감정을 강하게 자극한 사건을 그렇지 않은 사건보다 더 잘 기억하며 그것이 우리가 경험을 인지하는 방식에도 영향을 주는 것을 의미한다.
참고) 확증 편향, 최신 효과
-> 정성적 조사 방법 중 하나인 고객 여정 지도를 활용하여 사용자가 경험 도중 언제 가장 강렬한 감정을 느끼는지 알아낼 수 있다. 또한 고객 여정 지도의 마지막 단계에서 고객에게 좋은 경험을 심어줄 수 있도록 설계하는 것도 중요하다.
7. 심미적 사용성 효과
: 보기 좋은 떡이 먹기도 좋다.
- 보기 좋은 디자인은 인간의 뇌에 긍정적인 반응을 일으켜서 사용자로 하여금 제품이나 서비스의 사용성
이 뛰어나다는 생각이 들게 한다.
- 디자인이 좋은 제품이나 서비스의 경우, 사용자는 사소한 문제가 있어도 관대해진다.
- 시각적으로 만족스러운 디자인은 실제 사용하거나 테스트 중에 문제가 드러나는 것을 방해하기도 한다.
사례) 다소 불편하더라도 예쁘기 때문에 감수하는 그런 것들.
애플 또한 인터페이스의 사용성에 전혀 문제가 없는 것은 아니다. 하지만 특유의 감성과 아름다운
디자인 덕분에 애플에 관대한 사용자가 유독 많다.
*주의할 점 : 사용성 테스트에서는 이러한 심미성이 방해 요소가 될 수 있다. 사용성 테스트를 통해 보다 정확하게 문제를 파악할 수 있도록 1. 제대로 된 질문 + 사용자의 말을 경청하기 2. 어떻게 사용하는지 주의 깊게 행동 관찰하기가 필요하다.
8. 폰 레스토프 효과
: 비슷한 사물이 여러 개 있으면 그중 가장 차이가 나는 한 가지만 기억할 가능성이 크다.
- 중요한 정보나 핵심 동작은 시각적으로 눈에 띄어야 한다.
- 각 요소 간 충돌을 피하고, 가장 중요한 항목이 광고로 오인되지 않게 한다.
- 강조하는 방식에 있어서 접근성을 고려한다. (색상 - 색맹, 저시력자 / 움직임에 민감한 사용자)
-> 너무 많은 요소를 강조하지 말아야 하고, 색상 외에 형태, 크기, 위치, 움직임 등 사용자의 주의를 끄는 요소들을 어떻게 활용해야 효과적일지 고민한다.
사례) CTA버튼, 빨간색을 활용한 error 안내, 앱 알람 배지 등
9. 테슬러의 법칙
: 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.
- 모든 프로세스에는 디자인으로 해결 안 되는 기본적인 복잡성이 있어 누군가가 감당해야 한다.
(시스템 혹은 사용자가 감당해야 하는데, 당연히 시스템이 그 역할을 하는 것이 좋다.)
- 디자인과 개발 과정에서 그 복잡성을 처리하면 사용자의 부담이 줄어든다.
- 하지만 역시 과한 단순화는 역효과를 일으킨다.
사례) 이메일 작성 시, 발신인은 로그인 정보로 자동 입력하고 수신인은 사용자의 입력과 기존 이메일을 기반으로 추천해준다.
출처 : Microsoft Support10. 도허티 임계
: 컴퓨터와 사용자가 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션하면 생산성은 급격히 높아진다.
- 사용자의 주의 분산을 막고 생산성을 높이려면 피드백을 0.4초 이내로 제공한다.
- 애니메이션으로 로딩 중 사용자의 시선을 끌어 지루하게 느껴지지 않도록 한다.
- 정확하지 않아도 진행 표시줄을 보여주면 사용자는 대기 시간에 좀 더 관대해진다.
- 실제 작업이 빨리 완료되어도, 의도적으로 늦게 알리면 체감 가치를 높이고 신뢰를 형성하기도 한다.
사례 1) Skeleton Screen으로 더 빨리 로딩되는 것처럼 보이게 한다.
출처 : GitHub사례 2) 블러 업 효과로 전체 페이지를 우선 사용자에게 빠르게 보여주고, 이미지 영역을 확보해 레이아웃이 깨지는 것을 방지한다 - 이미지가 들어가는 곳에 먼저 저해상도 이미지를 로딩 후 크게 확대, 깨지는 것은 블러 처리를 하여 감춘다.
사례 3) 애니메이션을 활용한 로딩 화면 - Gmail
출처 : GitHub인간의 행동 방식에 대한 이해가 더 나은 디자인을 만든다. 문제를 정의하고 해결하는 과정에서 행동경제학, 인지심리학과 같은 내용을 접목시켜 사용자에게 만족을 줄 수 있는 디자이너가 되고 싶다.
