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

FE 개발에서 빠질 수 없는 것이 퍼블리싱, 마크업 작업이고.

이는 곧 UI/UX라고 할 수 있습니다.

 

따라서, UI/UX에도 관심을 가지고자 책을 하나 읽고 있는데요, 저자가 운영하는 웹사이트에서 무료로 볼 수 있는 내용들도 있고.

어찌보면 직관적으로 당연히 그래야 하지 않아? 하는 내용들을 용어로 잘 정리해서 인지할 수 있다는 점에서 좋은 내용이라고 생각합니다.

 

- 저자가 운영하는 웹사이트 Laws of UX

 

https://lawsofux.com/

Home | Laws of UX

 

 

 

웹사이트에서는 요렇게 다양한 내용을 소개하고 있는데요, 보면서 꽤나 도움이 되었습니다.

 

간단히 내용들을 몇개만 소개하자면...

 

 

📐 Fitts’s Law

핵심 개념

• 타겟에 도달하는 데 걸리는 시간은
  👉 타겟까지의 거리와
  👉 타겟의 크기에 의해 결정된다.
• 가깝고 클수록 빠르고 정확하게 클릭/터치 가능함.

주요 시사점 (Takeaways)

• 터치/클릭 대상은 충분히 커야 한다.
• 버튼 간에는 여유 있는 간격이 필요하다.
• 버튼은 사용자의 시선·작업 영역에서 가까운 위치에 두는 게 좋다.

배경 (Origins)

• 1954년, 심리학자 Paul Fitts가 인간의 운동 제어 연구를 통해 제시.
• 빠른 움직임 + 작은 타겟 → 오류율 증가
  (속도–정확도 트레이드오프)
• 이 법칙은 UX/UI 디자인 전반에 널리 적용됨.
  • 모바일에서 버튼이 커진 이유
  • 중요한 액션 버튼을 화면 가까이에 배치하는 이유

UX에서의 의미

• 작은 버튼은 클릭하기 어렵고 시간도 더 든다.
• 사용자의 주 작업 영역과 버튼 사이 물리적 거리는 짧을수록 좋다.

 

🧠 Jakob’s Law

핵심 개념

• 사용자는 당신의 사이트보다 다른 사이트에서 더 많은 시간을 보낸다.
• 그래서 이미 익숙한 방식 그대로 동작하길 기대한다.
• 👉 새로움보다 익숙함이 사용성을 만든다는 법칙.

주요 시사점 (Takeaways)

• 사용자는 기존에 알고 있는 제품의 사용 경험(기대치)를
  비슷해 보이는 새로운 제품에도 그대로 가져온다.
• 이미 형성된 멘탈 모델(Mental Model)을 활용하면,
  • 학습 비용 ↓
  • 사용자는 “사용법”이 아니라 자기 할 일에 집중할 수 있다.
• 큰 변경이 필요할 경우,
  • 기존 UI를 잠시 유지하거나
  • 새 UI를 미리 체험하고 되돌릴 수 있게 하면 거부감을 줄일 수 있다.

대표적인 예시 (Examples)

1. 아날로그 → 디지털 컨트롤

• 토글, 라디오 버튼, 버튼 같은 UI 요소는
  실제 물리적 장치의 형태와 동작을 그대로 계승함.
• 익숙해서 설명 없이도 바로 사용 가능.

2. YouTube 2017 리디자인

• 갑작스러운 전면 개편 ❌
• 사용자에게 다음과 같은 기능을 제공했다
  • 새 UI 미리 보기 가능
  • 피드백 제공 가능
  • 원하면 기존 UI로 되돌아갈 수 있음
• 결과는 다음과 같다
  • 멘탈 모델 충돌 최소화
  • 변화에 대한 저항 감소

기원 (Origins)

• Jakob Nielsen (Nielsen Norman Group 공동 설립자)
• ‘Discount Usability Engineering’ 제안:
  • 빠르고 저렴하게 UX를 개선하는 실용적 접근
• 휴리스틱 평가 등 여러 UX 방법론 창시

UX에서의 핵심 메시지

“사용자를 교육하려 들지 말고, 이미 배운 것을 존중하라.”

한 줄 요약하면 👇

혁신은 익숙함 위에서 조심스럽게 해야 한다

 

 

⚡ Doherty Threshold

핵심 개념

• 시스템 응답이 400ms 이내일 때
  👉 사용자와 컴퓨터가 서로 기다리지 않는 상태가 된다.
• 이 구간을 넘으면 사용자는 지연을 ‘느끼기’ 시작하고,
  생산성과 몰입도가 급격히 떨어진다.

주요 시사점 (Takeaways)

1. 400ms 안에 “뭔가 반응했다”는 신호를 줘라

• 실제 처리가 끝나지 않아도,
  • 로딩 시작
  • 상태 변화
  • 즉각적인 피드백
    👉 이게 있으면 사용자는 기다린다고 느끼지 않음

2. 실제 성능보다 “체감 성능”이 중요하다

• 느린 걸 빠르게 만드는 것만큼
• 빠른 척 보이게 만드는 것도 중요함
  • 스켈레톤 UI
  • 즉각적인 버튼 반응
  • 낙관적 UI 업데이트

3. 애니메이션은 시간을 벌어준다

• 로딩 중 아무 변화 ❌
• 짧고 자연스러운 애니메이션 ⭕
• “멈춘 게 아니라 처리 중”이라는 신호 전달

4. 프로그레스 바는 기다림을 참을 수 있게 만든다

• 정확하지 않아도 효과 있음
• 끝이 보이면 사용자는 인내함

5. 일부러 늦추는 게 더 신뢰를 줄 때도 있다

• 너무 빠르면:
  • “이거 제대로 처리된 거 맞아?” 느낌
• 의도적인 짧은 딜레이의 효과는 다음과 같다.
  • 안정감
  • 신뢰
  • 결과의 가치 상승 효과

기원 (Origins)

• 1982년, Walter J. Doherty & Ahrvind J. Thadani
• 기존 기준: 2초 ❌
• 새로운 기준: 400ms
• 400ms 이내 응답은:
  • 사용자가 **중독적(addicting)**이라고 느낄 정도로
  • 몰입과 생산성을 크게 향상시킴

UX에서의 핵심 메시지

빠른 시스템은 사용자를 ‘기다리게 하지 않는다’.
아주 잠깐이라도.

 

 

인상적이게 본 몇가지 법칙을 요약해봤는데, 내용들은 모두 납득할만하고 인상적이게 볼 수 있으므로, 추천할만한 서적인 것 같다.