[책 리뷰] UX/UI의 10가지 심리학 법칙

UX/UI의 10가지 심리학 법칙 (by. 존 야블론스키)

• UX(User Experience): 1993년 도널드 노먼이 만든 용어

1. 제이콥의 법칙 (Jacob's Law)

* 사용자는 자신에게 익숙한 제품을 통해 구축한 기대치를 그와 비슷해 보이는 다른 제품에도 투영한다.
* 기존의 멘탈 모델을 활용하면 사용자가 새 모델을 익히지 않아도 바로 작업에 돌입할 수 있는 뛰어난 사용자 경험이 완성된다.
* 변화를 꾀할 때는, 사용자에게 익숙한 모델을 한시적으로 이용할 권한을 부여해서 불협화음을 최소화하라.

• 사용자 페르소나

2. 피츠의 법칙 (Fitt's Law)

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

• 사용성(Usability) : 좋은 디자인을 이루는 중요한 요소. 사용하기 편하다(= 인터페이스가 이해하기 쉬우며, 탐색하기도 쉬워야 한다는 뜻)
• 화면 상단 간편 접근: 사용자는 간단한 제스처 만으로도

회사/조직	권장 규격
HIG	44 x 44pt
머터리얼 디자인 가이드라인(구글)	48 x 48pt

🍋 애플 아카데미의 조엘도 같은 이야기 해 주심

3. 힉의 법칙 (Hick's Law)

* 의사 결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어난다. 
* UX 디자인의 핵심 개념

심화학습 : 지나친 단순화

• 단순화가 사용자의 경험에 부정적인 영향을 끼치는 경우도 분명히 존재. 추상화라고 할 정도로 단순화해 버리면 모든 게 불분명해짐 ex) 하트나 별 아이콘
• 네비게이션 바의 아이콘에 텍스트 레이블만 추가해도 의미를 전달하고 사용성을 높이는 추가 정보가 더해져서 추상성은 효과적으로 감소한다.

4. 밀러의 법칙 (Miller's Law)

* 보통 사람은 작업 기억에 7(+-2) 개의 항목 밖에 저장하지 못한다.
* 콘텐츠를 덩어리화하는 것이 필요하다.

5. 포스텔의 법칙 (Postel's Law)

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

1. 자신이 행하는 일은 엄격하게: 기기의 크기나 기능, 입력 메커니즘, 보조 기술, 심지어 연결 속도까지도, 누구에게나 정상 작동하는 인터페이스를 제공할 수 있어야 한다는 뜻이다.
2. 남의 것을 받아들일 때는 너그럽게: 사용자의 입력은 포맷이나 입력 메커니즘을 막론하고 무조건 수용해야 한다.

사례

• 포스텔의 법칙 => HIG(인터페이스의 안정성과 접근성을 보장하는 동시에 입력, 접근성, 성능 면에서 만반의 준비를 해야 한다고 보는 HIG철학과 매우 유사한 방식으로 디자인에 접근한다.)
• 입력폼, 반응형 웹디자인 기법, 점진적 향상
• 디자인 패턴: 효과적인 디자인 시스템을 구축하려면 여러 유관 부서가 제공하는 디자인, 콘텐츠, 코드, 전략, 의견, 비평에 이르기까지 모든것을 너그럽게 수용해야 한다. 그에 반해 디자인 시스템이 생산하는 결과물에 대해선느 엄격한 기준을 적용해야 한다. 가이드라인, 컴포넌트, 패턴, 원칙 등 모든 것이 명확하고 단호해야 한다.

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

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

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

• Journey Mapping: 렌즈 → 경험 → 통찰

7. 심미적 사용성 효과 (Aesthetic-usability Effect)

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

사례

1. 브라운(Braun)

   Less but better - by. 디터 람스 - 

2. 애플: 기능적 미니멀리즘과 섬세한 심미성이 조화를 이룬 브라운의 유산을 계승함

   • 아이팟, 아이폰, 아이맥
   • 애플은 우아하며 사용하기 편한 인터페이스 디자인으로 유명. → 좋은 디자인이 비즈니스 성공의 필수 덕목!
   • https://review009.tistory.com/entry/%EC%95%A0%ED%94%8CApple-%EB%94%94%EC%9E%90%EC%9D%B8-%EB%B8%8C%EB%9D%BC%EC%9A%B4Braun-%EB%94%94%EC%9E%90%EC%9D%B8

8. 폰 레스토프 효과 (Von Restorff Effect)

* 중요한 정보나 핵심 동작은 시각적으로 눈에 띄게 하라!
* 시각적 요소를 강조할 때는 제한을 두어서, 각 요소 간 경쟁을 피하고 가장 중요한 항목이 광고로 오인되지 않게 하라.
* 특정 요소를 강조할 때 색상에만 의존하면 색맹이나 저시력인 사용자가 배제된다는 사실을 유념하라! 👍
* 움직임을 활용해서 대비를 전달할 때는 움직임에 민감한 사용자를 주의 깊게 고려하라 👍

방법

1. 색상 대비
2. Floating Action button

9. 테슬러의 법칙

* 모든 프로세스에는 디자인 시 처리할 수 없는 기본적인 복잡성이 존재하므로, 시스템이나 사용자 중 한 쪽이 감당해야 한다.
* 내재된 복잡성을 디자인과 개발 과정에서 처리하면 사용자의 부담을 최소로 줄일 수 있다.
* 추상적으로 느껴질 정도로 인터페이스를 단순화해서는 안 된다. - 지나치게 추상적인 아이콘화 경계하기 

10. 토허티 임계

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

방법

• Skeleton Screen
• Blur up
  • 이미지 크기 변화: 실제 큰 이미지를 표시할 공간에 먼저 아주 작은 크기로 이미지를 로딩한 후 크게 확대해 표시하는 기법이다. 그리고 실제로 표시할 큰 이미지의 로딩이 롼료되면 저해상도 버전을 뒤로 감추고 페이드 효과와 함께 실제 이미지를 표시한다.
• Progress Indicator
• 낙관적 UI
  • Instagram: 게시중.... (아직 게시되지 않았는데 미리 게시함)

힘에는 책임이 따른다

기술은 어떻게 행동을 형성하는가

• 간헐적이고 불규칙한 보상 : Pull to refresh
• 무한 루프 : 동영상 자동 재생
• 사회적 확증
• 기본 설정
• 방해 요소 제거
• 호혜성
• 다크패턴 : 사용자의 참여도를 높이기 위해 필요 이상의 구매, 불필요한 정보 공유, 마케팅 정보 수신 허용 등 사용자가 의도하지 않은 행동이나 그들에게 별 도움이 되지 않는 행동을 하도록 유도하는 것을 가리킨다.

속도는 늦추고 신중하게

디자인, 심리학을 만나다