본문 바로가기
Startup/Making Products

UX/UI의 10가지 심리법칙

by UG0 2023. 6. 14.
반응형

좋은 UX/UI 디자인(이하 디자인)은 사용자가 원하는 결과로 도달하는 데에 거부감과 불편함이 없다는 것이다. 그렇다면 사용자가 불편함을 느끼는 경험은 무엇일까? 책 UX/UI의 심리 법칙은 사람의 심리법칙을 이용하여 디자인을 접근한다. 무의식적으로 느꼈던 감정을 의식적으로 찾는 과정을 통해, 좋은 디자인을 고민해 볼 수 있다.

 

1. 제이콥의 법칙

사용자는 제품을 사용하며 축적된 경험을 비슷한 다른 제품에서도 기대한다.

Mental Model, 즉 사용자가 새 모델을 익히지 않아도 바로 사용할 수 있는 것이 뛰어난 사용자 경험이다. 이를 통해 사용자는 제품을 처음 조작할 때, 고민 없이 사용할 수 있다. 사용자의 멘탈 모델과 제품 디자인의 격차를 줄이기 위해 정확한 타겟 사용자를 정의해야 한다. 이는 구체적인 사용자 니즈를 정의할 수 있으며, 멘탈 모델을 수월하게 만들 수 있다. 만약 변화를 시도한다면, 기존 익숙한 모델을 사용하여 거부감을 최소화해야 한다.

 

 

2. 피츠의 법칙

사용자가 대상을 사용하기까지 걸리는 시간은 대상의 크기와 거리에 비례한다.

  • 터치 크기는 정확하게 선택할 수 있을 정도로 충분히 커야 한다.
  • 터치 대상 사이에는 충분한 거리를 확보해야 한다.
  • 터치 대상은 인터페이스상에서 쉽게 도달할 수 있는 영역에 배치해야 한다.

사용성과 디자인의 규격은 상당히 밀접한 관계가 있다. 정확하게 선택할 수 있도록 버튼은 충분히 커야 하며, 신체적인 부분을 고려하여, 쉽게 도달하도록 배치해야 한다. 또한, 터지 대상 사이에는 충분한 거리를 확보해야 한다. 이를 통해 사용자의 인터랙션에서 실수를 방지하고 신체적인 특징 등을 고려하여 사용성에 신경 써야 한다.

터치 대상의 최소 권장 규격은 다음과 같다.

회사 권장 규격
휴먼 인터페이스 가이드라인(애플) 44 x 44 pt
머터리얼 디자인 가이드라인 (구글) 48 x 48 dp
콘텐츠 접근성 가이드라인 (WCAG) 44 x 44 CSS px
닐슨 노먼 그룹 1 x 1 cm

 

 

3. 힉의 법칙

의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다.

  • 의사결정 시간을 줄이기 위해 선택지의 개수를 최소화하라
  • 인지 부하를 줄이려면 복잡한 작업을 잘게 나눠라
  • 추천 선택지를 강조해서 사용자의 부담을 줄여라
  • 신규 사용자의 인지 부하를 줄이기 위해 온보딩을 점진적으로 진행하라
  • 추상적이라고 느껴질 정도로 단순화하지 않도록 주의하라

제품의 디자인에서 정보 혹은 선택지를 제공할 때, 사용자의 부담을 느끼지 않도록 종합하고 정리해서 보여줘야 한다. 중복과 과잉은 혼란을 야기하기에, 사용자의 목표를 정확하게 인지하고 이를 방해하는 요소들을 줄이거나 없애야 한다. 하지만 너무 단순화가 지나치면 이 또한 부정적으로 다가올 수 있다는 점을 명심해야 한다.

힉의-법칙-그래프
힉의 법칙 그래프(출처 :  https://www.flowmapp.com/blog/glossary-term/hicks-law)

 

인지 부하(Cognitive Load) : 제품을 처음 사용하는 사용자가 내비게이션 방법을 익히거나 페이지 레이아웃을 이해하며, UI 요소와 인터랙션 하고, 폼에 정보를 입력하는 등의 모든 작업에 소모되는 정신적 자원

 

 

4. 밀러의 법칙

보통 사람은 작업 기억에 5~9개의 항목밖에 저장하지 못한다.

  • 7에 매몰되지 마라
  • 콘텐츠 덩어리를 작게 나눠 사용자가 쉽게 처리하고 기억할 수 있게 해라
  • 단기 기억 용량은 사람에 따라, 맥락에 따라 달라진다.

사용자들의 기억을 요구하는 내비게이션 선택지와 같은 정보의 개수는 7개 이하로 제한한다. 그 이상이 되는 경우 비슷한 것끼리 묶는 덩어리화(Chunking)를 통해 선택지를 줄인다. 덩어리의 크기는 중요하지 않으며, 맥락, 익숙한 정도 등이 중요하다.

 

 

5. 포스텔의 법칙

자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게

  • 사용자의 어떠한 행동을 너그럽게 받아들이고 관대하게 대처하라 인
  • 터페이스의 안정성과 접근성을 보장하되, 입력, 접근성, 성능 면에서 만반의 준비를 하라
  • 다양한 가능성에 대해 잘 예측하고 대비할수록 디자인 회복탄력성은 좋아진다.
  • 입력의 한계를 정의하고 명확한 피드백을 제공하라

인간은 기계가 아니다.

  • 때로는 일관성이 없다.
  • 자주 주의가 산만해진다.
  • 가끔 실수를 한다.
  • 보통 감정에 휘둘린다.
  • 항상 통제력을 유지하고 싶어 하며 필요 이상의 정보 제공 요구는 귀찮아한다.

따라서, 사용자에게 정확하고 고도화된 반응을 기대하기보다, 실수와 귀찮음을 고려하여 디자인해야 한다.

 

 

6. 피크엔드 법칙(Peak-End Rule)

인간은 경험 전체가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다.

  • 사용자 여정 중 (1) 가장 강렬한 순간(2) 마지막 순간을 세심하게 신경 쓰자
  • (1) 제품이 사용자에게 가장 큰 도움을 주는 순간, (2) 혹은 가장 중요하게 여겨지는 순간, (3) 가장 큰 즐거움을 주는 순간 등을 알아내라
  • 사람들은 긍정적인 순간보다 부정적인 순간을 더 생생하게 기억한다.
  • 인간의 기억은 타임라인이 아닌, 스냅의 형태이다.

인지 편향(Congnitive Bias)
판단에 관여하는 사고나 이성에 발생하는 계통 오차(Systematic error)를 가리킴
상황을 철저하게 분석하기보다 효율적으로 신속한 결정을 내리게 해주는 정신적 지름길

기억 편향(Memory Bias)
인간은 자신의 감정을 강하게 자극한 사건을 그렇지 않은 사건보다 더 잘 기억한다.

 

 

7. 심미적 사용성 효과

사용자는 보기 좋은 디자인을 더 뛰어난 디자인으로 인식한다.

제품이나 서비스의 디자인이 보기 좋으면, 사용자는 사소한 사용성 문제에 비교적 관대해진다. 시각적으로 만족스러운 디자인은 사용성 문제를 가리고, 문제가 드러나는 것을 방해할 수 있다. 그래서 첫인상은 매우 중요하다. 좋은 디자인은 제품이 가지고 있는 사용성 문제를 숨길 수도 있다.

자동 인지 처리(Auto Cognitive Processing)
대상의 주의를 기울이기에 앞서, 과거 경험을 바탕으로 정보를 처리하고 판단한다.

 

 

8. 폰 레스토프 효과

비슷한 것이 여러 개 있을 때, 그중 가장 차이나는 한 가지만 기억한다.

  • 중요한 정보는 시각적으로 눈에 띄게 하되, 광고로 오인되지 않게 하라
  • 시각적 요소를 강조할 때는 제한을 두어서 각 요소 간 경쟁을 피하라
  • 특정 요소를 강조할 때 색상에만 의존하면 색맹/저시력자가 배제된다.
  • 움직임을 활용할 때, 움직임에 민감한 사용자를 주의 깊게 고려하라

선택적 주의력(Selective Attention)
인간은 산만한 세상에서 살고 있다. 넘처나는 감각 정보가 일상의 매 순간을 잠식한다. 주의력이 주변 세상을 지각하는데 핵심적인 역할을 한다. 수행 중인 작업과 관련 있는 주요 정보에 집중하려면, 관련 없는 정보를 걸러내야 할 때가 많다. 사람들은 배너를 무의식적으로 무시한다.

절제와 접근성
시각적 차별화를 적용할 시점과 빈도가 남용되면 안 된다. 너무 많은 것을 강조하려고 하면 안 된다.

 

 

9. 테슬러의 법칙

모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.

모든 프로세스에는 디자인 시 처리할 수 없는 기본적인 복잡성이 존재하므로, 시스템이나 사용자 중 한쪽이 감당해야 한다. 추상적으로 느껴질 정도로 인터페이스를 단순화해서는 안된다.

 

 

10. 도허티 임계

0.4초 이하로 인터렉션 하면 생산성은 급격히 높아진다.

  • 사용자 주의 분산 방지 및 생산성 향상을 위해서는 시스템 피드백을 0.4초 이내 제공하라
  • 애니메이션은 로딩이나 프로세싱이 진행되는 동안 사용자의 시선을 끄는 한 가지 방법이다.
  • 정확하지 않더라도 진행표시줄을 보여주면 사용자는 대기 시간에 좀 더 관대하다.
  • 실제 작업이 빨리 완료되더라도, 의도적으로 작업완료를 늦게 알리면 체감 가치를 높이고 신뢰를 형성하는데 도움이 되기도 한다.

로딩 중에 뼈대 화면을 보여주거나 블러업을 하는 것도 좋은 방법이다.

 

위 내용은 존 야블론스키의 UX/UI의 10가지 심리법칙을 바탕으로 작성되었습니다.

반응형