📙 '23.04.12 UX/UI의 10가지 심리학 법칙 - 존 야블론스키

자청은 진화심리학에 관심이 많지만, 내가 예전부터 관심있어 하던 분야는 인지심리학과 행동심리학이다.

그런 의미에서, 사용자의 경험을 디자인하는 UX/UI 를 심리학과 연관지은 이 책이 눈에 띄어서 거의 바로 구매하였다.

(책이 얇아서 읽기 편해보인 것도 아주 큰 역할을 했다ㅎㅎ)

 

'디자인'이라는 단어를 들었을 때, 많은 사람들은 심미적인 측면에서 외관이 유려하고, 멋있고 예쁜 것들을 만드는 행위라 생각한다.

하지만, 나는 '디자인'은 그 사람(사용자)가 무의식적으로 할 행동, 어떻게 받아들일지에 대해서 철저히 분석하고

알맞은 경험을 설계하는 것이 '디자인'이라고 생각한다.

그런데, 지금 초록색 배경에 진한 회색으로 글을 쓰는 것은 UX 측면에서 그리 좋은 행동은 아닌 것으로 판단되긴 한다.

 

* 저자가 운영하는 사이트 : https://lawsofux.com/

Home | Laws of UX

 

* 토스에서 찾아본 10가지 UX 법칙 : https://www.mobiinside.co.kr/2023/03/29/toss-ux-2/

[주니어 기획자들을 위한 실전서] 토스에서 찾아본 10가지 UX 법칙 - 모비인사이드 MOBIINSIDE

---

 

제이콥의 법칙

 

: 사용자는 여러 사이트에서 대부분의 시간을 보낸다.

: 그래서 여러분의 사이트도 자신이 이미 알고 있는 다른 사이트들과 같은 방식으로 작동하길 원한다.

 

핵심 요약

 

- 사용자는 자신에게 익숙한 제품을 통해 구축한 기대치를 그와 비슷해 보이는 다른 제품에도 투영한다.

- 기존의 멘탈 모델(mental model)을 활용하면 사용자가 새 모델을 익히지 않아도 바로 작업에 돌입할 수 있는 뛰어난 사용자 경험이 완성된다.

- 변화를 꾀할 때는, 사용자에게 익숙한 모델을 한시적으로 이용할 권한을 부여해서 불협화음을 최소화하라.

 

- 벤츠 EQC 400 프로토타입

BMW 중고차를 200만원에 샀다는 친구의 친구 소식 덕분에,

아주 옛날에 나온 (아마 1980년대?) 벤츠를 본 적이 있다.

그 차를 보고 놀란 건 다름 아닌 지금 벤츠에도 적용되어 있는 자동차 좌석 조정 스위치가 그 벤츠에도 있었다는 점이다.

정말 훌륭한 디자인은 시대를 넘나든다는 생각을 했다.

 

---

 

피츠의 법칙

: 대상에 도달하는 시간은 대상까지의 거리와 대상 크기와 함수 관계에 있다.

 

핵심 요약

 

- 터치 대상의 크기는 사용자가 정확하게 선택할 수 있을 정도로 충분히 커야 한다.

- 터치 대상 사이에 충분한 거리를 확보해야 한다.

- 터치 대상은 인터페이스상에서 쉽게 도달할 수 있는 영역에 배치해야 한다.

 

- 애플, 구글 등과 같은 회사에서는 터치 대상의 최소 권장 규격을 제시한다.(ex. 애플의 휴먼 인터페이스 가이드라인)

 

- 집중하고 싶어 하는 영역 역시 화면의 중앙부다.

 

- Good Design의 예시 : Form text label

- Bad Design의 예시 : LinkedIn 의 '거절', '수락' 아이콘 → 너무 붙어 있어서 잘못 터치할 가능성이 높다. 

 

---

 

힉의 법칙

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

 

핵심 요약

 

- 의사결정 시간이 반응 시간에 큰 영향을 받을 때는 선택지의 개수를 최소화하라.

- 인지 부하를 줄이려면 복잡한 작업을 잘게 나눠라.

- 추천 선택지를 강조해서 사용자의 부담을 줄여라.

- 신규 사용자의 인지 부하를 줄이려면 온보딩(onboarding)을 점진적으로 진행하라.

- 추상적이라고 느껴질 정도로 단순화하지 않도록 주의하라.

 

* 인지 부하(cognitive load) : 인터페이스를 익히고 인터랙션하는 데 필요한 정신적 자원의 양

ex) 쓸데없이 많은 버튼을 가지고 있는 옛날 TV 리모컨 → 스마트TV 리모컨은 단순화 됨

 

---

 

밀러의 법칙

: 보통 사람은 작업 기억(working memory)에 7(±2)개의 항목밖에 저장하지 못한다.

 

핵심 요약

 

- '마법의 숫자 7'을 내세워서 불필요한 디자인 제약을 정당화하지 마라.

- 사용자가 쉽게 처리하고 이해하고 기억할 수 있게 콘텐츠 덩어리를 작게 나눠 정리하자.

- 단기 기억 용량은 사람에 따라, 그리고 기존 지식과 상황적 맥락에 따라 달라진다는 것을 기억하자.

 

* 덩어리화 : 4408675409 → (440) 867 - 5309

: 오른쪽 꺼가 훨씬 인식하기 쉽다.

 

* 텍스트 장벽(wall of text) : 체계나 서식이 없고, 행 길이도 적절히 나누지 않은 콘텐츠를 가리킨다.

 

---

 

포스텔의 법칙

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

 

핵심 요약

 

- 사용자가 어떤 동작이나 입력을 하든지 공감하는 태도로 유연하고 관대하게 대처하라.

- 인터페이스의 안정성과 접근성을 보장하되, 입력, 접근성, 성능 면에서 만반의 준비를 하자.

- 다양한 가능성에 대해 잘 예측하고 대비할수록 디자인 회복탄력성은 좋아진다.

- 사용자의 가변적인 입력을 수용해서 기계가 이해할 수 있는 방식으로 해석하라. 입력의 한계를 정의하고 사용자에게 명확한 피드백을 제공하라.

 

* 포스텔의 법칙은 인터페이스의 안정성과 접근성을 보장하는 동시에 입력, 접근성, 성능 면에서 만반의 준비를 해야 한다고 보는 인간-컴퓨터 인터랙션(HCI) 철학과 매우 유사한 방식으로 디자인에 접근한다.

 

* 입력 폼(Input Form) : 사용자가 채워야 할 필드가 늘어날수록, 디자이너가 사용자에게 부과하는 인지적 에너지와 노력도 커진다.

Good Example : Face ID, Responsive Design

→ 요즘 애들은 모르겠지만, 옛날 네이버는 아주 열심히 두 손가락으로 확대해서 봐야했음. 늙어버렸다.

 

---

 

피크엔드 법칙

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

 

핵심 요약

 

- 사용자 여정 중 가장 강렬한 순간과 마지막 순간을 세심하게 신경 쓰자.

- 제품이 사용자에게 가장 큰 도움을 주는 순간. 혹은 가장 중요하게 여겨지는 순간, 가장 큰 즐거움을 주는 순간 등을 알아내라.

- 사람들은 긍정적인 순간보다 부정적인 순간을 더 생생하게 기억한다는 사실을 명심하자.

 

* 대니얼 카너먼 논문, "더 큰 고통을 적은 고통보다 선호하게 하려면 경험의 마지막 순간이 좋아야 한다."

→ When More Pain Is Preferred to Less: Adding a Better End

 

→ 여기서는 대장내시경 예시가 가장 충격적이었음. 아니, 마지막 순간을 좀 더 좋게 만들어주기 위해 검진이 끝났는데,

"내시경의 끝부분을 빼지 않은 채 공기를 추가로 넣거나 빼지도 않고 그대로 3분 더 있었다." 는 건 좀 그런데?ㅋㅋㅋㅋㅋ

수면내시경을 해야 할 이유가 하나 +1 되었다.

여러분 수면내시경 하십쇼.

 

* Good Example 1 : Mailchimp의 이메일 발송 확인 대화 상자

  : 메일을 발송하는 순간에 사용자가 느낄 만한 부담을 절묘한 애니메이션을 통해 재치있게 덜어준다.

 

* Good Example 2 : Uber 의 대기 시간 극복법

  1. 배정된 차량이 도착할 때까지 차량의 이동 경로를 보여줌 → 유휴 시간에 대한 거부감 해소

  2. 도착 예상 시간이 계산되는 방법에 대한 정보도 확인 가능 → 작동상의 투명성

  3. 택시를 배정받고 탑승하기까지의 프로세스의 각 단계도 명확히 설명 → 점진적 목표 달성 효과

 

---

 

심미적 사용성 효과

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

 

* 애플 제품

  : UI/UX에 심혈을 기울이는 회사이지만, 인터페이스의 사용성에 전혀 문제가 없진 않을 것이다.

  → 인터페이스의 미학적으로 아름다운 디자인 덕분에 사람들이 사용성 문제를 눈감아 줄 확률은 훨씬 더 높아진다.

 

---

 

폰 레스토프 효과

:  비슷한 사물이 여러 개 있으면 그중에서 가장 차이가 나는 한 가지만 기억할 가능성이 크다.

 

* 계정 삭제 알림 창 예시

  : 버튼 색깔의 대비를 통해 사용자가 중요한 동작에 주목하고, 잘못된 항목을 실수로 선택하지 않도록 도와준다.

 

* 알림 배지로 주의를 끔

  ex) 부재중 전화, 읽지 않은 메시지

 

---

 

테슬러의 법칙

: 복잡성 보존의 법칙이라고도 알려진 테슬러의 법칙에 따르면, 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.

 

→ 결론은, 디자이너와 개발자가 복잡성이라는 짐을 사용자 대신 부담해야 한다는 것

 

ex) 아마존 고 무인 매장

 

---

 

도허티 임계

: 컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션하면 생산성은 급격히 높아진다.

 

사실 속도는 훌륭한 사용자 경험의 핵심이 되는 디자인 요소로 간주해야 한다.

 

- 반응이 즉각적이라고 느끼려면 → 0.1초 이내

- 맨눈으로 감지되며, 사용자가 '해당 시스템이 자신의 통제에서 벗어나고 있다.'라고 느끼는 시간 → 0.1 ~ 0.3초

- 집중이 어려워지고 작업 수행에 필요한 정보를 놓치기 시작하는 시간 → 1초 이상

 

* 이를 극복하기 위한 좋은 예시 : Skeleton Screen, Blur Up, Progress Bar, Optimistic UI

→ Skeleton Screen, Blur Up, Optimistic UI 를 보면서, "이거 그냥 예쁘게 보이려고 하는건가?" 했는데, 아니었음

 

---

 

힘에는 책임이 따른다

: 심리학을 활용하여 더 직관적인 제품과 경험을 만든다는 게 어떤 의미인지 좀 더 자세히 살펴본다.

 

1. 간헐적이고 불규칙한 보상

  : 불규칙적으로 이뤄지는 무작위 강화가 행동을 형성하는 가장 효과적인 방법(스키너)

  : 평범한 사람이 스마트폰과 인터랙션하는 횟수는 하루에 2,500번 / 최대는 5,400번이며 여기에 드는 시간은 매일 2~4시간

 

→ 생각보다 너무 엄청나서 못 믿을 뻔 했는데, 스크린 타임을 보고 매번 놀라는 나를 보면 맞는 듯하다.

현대인은 점점 외부의 소음에 의해 집중이 힘들어지고 멍청해지는 걸까?

 

어떤 소문이나 말이 퍼지는 것을 막기 위해서는,

사람들이 입을 닫고 말을 하지 않도록 강요하는 것보다,

오히려 그보다 자극적이고 각색된 거짓의 소문들을 수없이 찍어내는 것이 효율적이라는 말이 떠오른다.

 

소음 속에서 진실을 점점 더 찾기 힘들어질텐데.

가짜 뉴스가 미국에서 판을 치고, 사회적인 문제로 Spotlight 받는 이유가 이해됐다.

실제로 이번 코로나19 때, 가짜 뉴스가 수많은 사람들을 다치게 하고 죽였다고 한다...

("메탄올이 코로나 치료에 효과적이다." 라는 이란에서 퍼진 가짜뉴스)

 

2. 무한 루프

  : 동영상 무한 재생, 피드 무한 스크롤

 

3. 사회적 확증

  : 인간은 사회적인 존재다.

  : '좋아요' 버튼

 

4. 기본 설정

  : Default Setting 의 힘. → Nudge ?

 

5. 방해 요소 제거

  : Amazon Dash (세탁기 슬라이드)

 

6. 호혜성

  : LinkedIn 에서 서로의 보유 기술을 공유하는 것.

 

7. 다크 패턴

  : 사용자들에게 도움이 되지 않는 행동을 하도록 유도하는 것

→ 약관에 '모두 동의'하면, 선택 항목까지 선택되서 지저분한 광고를 받아보게 된다. 기분은 그닥ㅎㅎ

 

* '윤리'는 디자인 프로세스에 꼭 필요한 요소다.

  : 사용자의 목표와 행복에 도움이 되는 제품과 경험을 만들 소임이 있음을 받아들여야 한다.

 

---

 

디자인, 심리학을 만나다

 

: 이 책에서 소개한 심리학 법칙을 디자이너들이 체화해볼 몇 가지 방안을 다룬다.

: 또한 팀의 목표와 우선순위를 고려해 세운 디자인 원칙을 적용함으로써, 체화한 심리학 법칙을 실무에 적용하는 과정을 살펴본다.