디자이너의 독서 - UX/UI의 10가지 심리학 법칙

ADA를 시작하면서 UX/UI를 깊이 공부할 수 있는 시간이 많이 생겼다.

이 기회를 활용해 그동안 시간에 쫓겨 읽지 못했던 UX/UI 관련 서적을 읽기로 했다.

그렇게 가장 먼저 선택한 책은 UX/UI의 기본서 중 하나로 꼽히는 UX/UI의 10가지 심리학 법칙이다.

이 책은 얇고 쉽게 읽히는 구성이라 처음 UX/UI를 시작하는 사람들에게도 추천할 만하다.

책에서는 아래와 같은 10가지 법칙을 소개하고 있다.

제이콥의 법칙

피츠의 법칙

힉의 법칙

밀러의 법칙

포스텔의 법칙

피크엔드 법칙

심미적 사용성 효과

폰 레스토프 효과

테슬러의 법칙

도허티 임계

책을 읽으며 특히 흥미로웠던 몇 가지 법칙 중, 두 가지를 다뤄보려 한다.

---

1. 제이콥의 법칙

제이콥의 법칙은 제이콥 닐슨이 처음 소개한 개념으로,

사용자는 과거의 경험을 바탕으로 새로운 시스템을 이해하고 사용한다

라는 내용을 담고 있다.

이 법칙은 UX/UI 디자이너라면 익숙할 *멘탈 모델과 밀접한 관련이 있다.

*멘탈 모델이란 사용자가 현재 사용 중인 시스템에 대해 가지고 있는 개인적인 이해와 믿음을 말한다.

우리는 사용자가 서비스를 이용하며 예상치 못한 상황에 맞닥뜨리지 않도록 일반적인 디자인 관습을 따르는 경우가 많다. 제이콥의 법칙은 바로 이러한 맥락에서 중요한 의미를 가진다.

그러나 이 법칙이 모든 디자인을 똑같게 만들어야 한다는 뜻은 아니다. 오히려 사용자가 새로운 경험을 쉽게 이해할 수 있도록 기존 서비스에서 일반적으로 따르는 경험과 관습을 적절히 활용해야 한다는 의미다.

사용자는 본인이 예상한 방식대로 서비스를 경험할 때 편리함을 느낀다. 이는 우리 서비스를 처음 접하는 사용자라도 작동 방식을 쉽게 예측할 수 있게 해주며, 결과적으로 서비스에 머무르는 시간을 늘릴 가능성을 높인다.

2018년 스냅챗 리디자인 사례

스냅챗*은 2018년 리디자인 과정에서 사용자에게 익숙했던 플로우를 크게 변경했다.

*미국의 멀티미디어 소셜 미디어 및 인스턴트 메시징 앱이자 서비스. 이 앱의 주요 특징 중 하나는 "스냅"이라고 불리는 사진과 메시지를 받는 사람이 접근할 수 없게 되기 전까지 짧은 시간 동안만 볼 수 있다.

이미지 출처 : 김자유 브런치 - 윈도우8, 스냅챗 리디자인이 실패작인 이유?

OLD :
왼쪽 스와이프 - 친구 스토리 확인

오른쪽 스와이프 - 친구와 채팅

NEW :

왼쪽 스와이프 - 맞춤형 광고 스토리

오른쪽 스와이프 - 친구 스토리 선택 후 확인

기존에는 왼쪽 스와이프 시 친구 스토리를 확인하고, 오른쪽 스와이프 시 친구와 채팅하는 방식이었다. 하지만 리디자인 후에는 왼쪽 스와이프가 맞춤형 광고 스토리를 보여주고, 오른쪽 스와이프에서 친구 스토리를 선택하게끔 변경되었다.

이 급작스러운 변화는 사용자들에게 큰 반감을 불러일으켰고, 결과적으로 광고 조회수와 사용자 이용률 모두 급격히 하락했다.

반면, 유튜브는 성공적인 리디자인 사례로 꼽힌다.

2017년 유튜브 리디자인 사례

유튜브는 구글의 머티리얼 디자인 가이드에 기반해 점진적으로 리디자인을 진행했다.

이미지 출처 : 메테오유성 티스토리

새 디자인을 사용자에게 강요하지 않고 이전 디자인으로 돌아갈 수 있는 옵션을 제공하며, 사용자가 새로운 인터페이스에 자연스럽게 적응하도록 했다. 이는 멘탈 모델 부작용을 줄이는 데 효과적이었다.

제이콥의 법칙은 이러한 사례를 통해 “사용자는 과거의 경험을 바탕으로 새로운 시스템을 이해한다”는 점을 다시금 깨닫게 해준다.

2. 도허티 임계

도허티 임계란

“사용자의 주의가 분산되는 것을 막고 생산성을 높이려면 시스템 반응은 0.4초 이내에 이루어져야 한다”

는 법칙이다.

이 개념은 IBM 연구원 월터 J. 도허티와 아흐틴 레피가 처음 소개했으며, 응답 시간이 길어질수록 사용자의 주의가 분산되고 생산성이 떨어진다는 점을 강조한다.

실제로 많은 서비스들이 이 원리를 기반으로 다양한 방법으로 대기 시간을 관리하고 있다.

대표적인 방법 중 하나는 로딩 화면이다. 로딩 화면은 작업이 진행 중임을 사용자에게 시각적으로 알림으로써 대기 시간을 보다 긍정적으로 받아들이게 만든다. 나 또한 그렇게 서비스를 인지해왔다.

페이스북 사례

이미지 출처 : Bill Chung Medium - Everything you need to know about skeleton screens

페이스북은 시작 시 스켈레톤 스크린(Skeleton Screen)을 보여줌으로써 작업이 처리 중임을 인지시킨다. 이는 단순한 로딩 화면보다 훨씬 직관적이고 사용자 친화적이다.

미디엄 사례

가장 인상 깊었던 사례는 미디엄의 사례이다.

이미지 출처 : Miyeon Meduim - 도허티 임계와 UX 디자인

미디엄은 작업이 처리중이지만 사용자에게 처리 시간이 빠르다는것을 체감시키기 위해 이미지를 점진적으로 보여주는 방식을 선택했다. 이미지 픽셀이 깨지는 것을 블러 처리하여 가리고, 작업이 완료되면 고해상도의 이미지를 보여주는 것이다.

이러한 방식은 사용자가 대기한다는 체감 속도를 빠르게 느낄 수 있도록 도와준다.

마무리하며

이번 글에서 살펴본 두 가지 법칙은 내가 평소 UX/UI 디자인 작업에서 자연스럽게 적용했던 원리들이었다는 점에서 흥미로웠다. 이름이나 이론적으로 알지 못했지만, 실제 작업 과정에서 당연하게 여겼던 것들을 이 책을 통해 구체적인 논리와 근거로 이해할 수 있었다.

특히 이 책에서는 단순히 법칙만 소개하는 데 그치지 않고, 이를 실제 팀원들과 어떻게 활용할 수 있을지까지 상세히 다뤄주었다는 점에서 큰 인사이트를 얻었다.

UX/UI 디자인은 단순히 ‘예쁘게 만드는 것’ 이상으로 사용자 경험과 심리학적 원리를 깊게 이해해야 하는 분야임을 다시금 깨달을 수 있었던 책이다.