Skip to main content

UX/UI의 10가지 심리학 법칙

1.제이콥의 법칙​

사용자는 다른 웹사이트를 통해 축적된 경험을 바탕으로 디자인 관례에 대한 기대치를 형성하는 경향을 보인다는 내용의 법칙
"익숙한 레이아웃과 조작 방식을 어느정도 따라가는것이 필요하다."

1.사람들은 당신의 사이트가 아닌, 다른 사이트들에서 시간을 더 많이 보낸다.

  • 그렇기에 그들이 이미 이해하고 있는 방식대로 당신의 사이트가 동작하기를 선호한다.
  • 자신의 제품이 속한 산업군의 제품들과 비슷한 인터페이스를 제공해야 한다.
  • 혁신적으로 사용성을 극대화할 수 있다면 모를까, 그렇지 않다면 비슷한 위치에 비슷한 모양으로 만들어야 사용자가 쉽게 이해할 수 있다.
  • 인터넷 쇼핑 사이트의 오른쪽 상단에 장바구니와 회원 버튼이 있고, 제품 페이지에 들어갔을 때는 상품 사진과 수량 밑에 구매하기 버튼이 있는 것이 그 예시이다.

2.현실 세계의 디자인과 비슷하게 만드는 것도 유저에게 도움이 된다.

  • 웹 사이트의 토글 버튼, 라디오 버튼은 현실 세계에서 비롯되었다.
  • 그렇기에 유저들은 어느 정도 사용법에 대해 예상할 수 있었다.

alt

  • 핀테크 서비스들은 카드형 디자인 방식을 채택
  • 카드별로 기능 그룹을 만들었다. (카드형 컴포넌트 멘탈 모델)
  • 인터페이스를 익히는 데 드는 정신적 에너지가 줄어들수록, 사용자가 목표 달성에 투자할 에너지는 늘어난다.

사례​

alt

  • 핀테크 서비스들의 카드형 컴포넌트 멘탈 모델
    • 1.카드가 잘 보이기 위한 어두운 배경
    • 2.중요한 카드는 강조 컬러

2.피츠의 법칙​

사용자가 대상을 사용하기까지 걸리는 시간이 대상의 크기와 대상까지의 거리와 연관이 있다고 명시한 법칙
"버튼은 적절한 크기과 거리가 필요, 특히나 모바일에서는 Thumb Zone 고려해서 사용성을 높임"

1.대상이 커지면 대상 선택에 드는 시간이 줄어든다.

  • 대상 선택을 위해 움직이는 거리가 줄면 대상을 선택하는데 드는 시간도 줄어든다.
  • 1.1 CTA버튼의 크기를 늘려 중요도 및 선택의 횟수를 늘린다.
  • 1.2 CTA버튼의 거리를 줄여 선택의 횟수를 늘린다.

2.터지 대상은 최소 크기 및 간격이 필요하다.

  • 사용자가 정확도를 신경 쓰지 않도록 터치 대상을 적당한 간격과 크기 설정.
  • 모바일 화면을 이용할 때 손가락으로부터 접근할 수 있는 거리를 신경 써서 화면을 설계해야 한다고 말한다.
  • 2.1 웹 콘텐츠 접근성 가이드라인(WCAG) 44 x 44 CSS px, 45px 정도 크기

alt

  • Youtube 버튼 크기 50px, 간격 40px
  • 쇼츠에선 Thumb Zone 고려하여 하단, 좌측에 버튼 배치

사례​

alt

  • 터치 유도를 위해 "확인하기", ">", "더 보기"를 사용함, (파란색, 화살표 픽토그램)
  • 강력한 터지 유도를 위해 CTA 버튼의 크기와 색상을 강조

3.힉의 법칙​

의사결정에 걸리는 시간이 선택지의 개수와 복잡성에 비례하여 늘어난다는 법칙

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

  • 선택지가 많아지면 인지부하가 증가한다.
  • 선택지가 많아지면 선택하는 시간이 (로그 함수로) 늘어난다.
  • 선택지를 줄이는 게 좋다. 불필요한 부분, 사용자의 목표 달성에 도움이 되지 않는 요소들을 제거해야 한다.

alt

  1. 의사결정 시간이 반응 시간에 큰 영향을 받을 때는 선택지의 개수를 최소화하라.
  2. 인지 부하를 줄이려면 복잡한 작업을 잘게 나눠라.
  3. 추천 선택지를 강조해서 사용자의 부담을 줄여라.
  4. 신규 사용자의 인지 부하를 줄이려면 온보딩(onboarding)을 점진적으로 진행하라.
  • 오늘의 집,원티드 : 필터,관심사 세부 항목으로 나누어서 점진적으로 선택하게끔 진행.
    • 이때 선택지는 7개 내외 이다.

사례​

alt

  • 대출 받기 플로우, 많은 정보들을 한 스탭식 쪼개서 보여주고 있다.
  • 단계별 완료할 확률은 더 높아진다.

4.밀러의 법칙​

보통 사람은 작업 기억에 7 (±2)개 항목밖에 저장하지 못한다는 법칙

보통 사람은 7개 정도밖에 기억하지 못한다.

  • 전화번호가 7자리인 이유로 대중적으로 많이 알려진 법칙이다.
  • 그런데 사실 7은 마법의 숫자는 아니라고 한다.
  • 중요한 것은 덩어리화인데, 인간의 단기 기억은 한계가 있어서 정보를 덩어리로 만들면 효과적으로 암기할 수 있다.

주변의 실생활 사례도 있다.

  • 전화번호를 하이픈(-)을 사용해 덩어리화 해서 표현하는 것과,
  • 글이 제목과 여러 단락으로 나뉠 때 가독성이 올라가는 것이 그 예이다.
  • 마찬가지로 UI를 표현할 때 덩어리화를 이용해 요소 간에 적합성에 따라 여백을 표시해야 한다.

alt

  1. 콘텐츠에 항목은 7(±2) 까지만 표기하자. 그 이상은 기억하지 못한다.
  2. 표기해야 할 내용이 그럼에도 많다면, 콘텐츠 덩이리를 작게 나누어 정리.
  • 네이버의 콘텐츠들을 보면 7개 내외 항목(그룹)으로 정리가 된다.

사례​

alt

  • 화면의 항목들이 7개 내외 항목(그룹)으로 정리가 된다.

5.포스텔의 법칙​

"자신이 행하는 일은 엄격하게", "남의 것을 받아들일 때는 너그럽게" 다양성과 복잡성에 잘 대처할 수 있는 법칙

1.유저의 액션은 너그럽게 받아들이고, 시스템의 안정성은 보장해야 한다.

  • 인간은 때로 일관성이 없고, 주의 산만하고, 가끔 실수하고, 감정에 휘둘리기 때문에 인터렉션하는 제품은 너그럽게 유저의 액션을 받아들여야 한다.

사례​

alt

2.반응형, 모바일에서 동일한 기능을 제공하는 일관된 디자인.

  • 모바일 기기에서의 입력, 접근성, 성능까지 동일한 경험을 제공하려면 많은 노력이 필요.

alt

3.사용자의 실수, 실패에 대해서 다양한 케이스에 대해서 친절하게 어떻게 해야하는지 알려준다.

6. 피크엔드 법칙​

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

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

  • 비이성적이게도 자극적인 기쁨과 불행의 순간으로 경험을 판단하는 것이다.
  • 인간은 자신의 인생 경험을 포괄적인 타임라인이 아니라, 일련의 스냅사진처럼 기억한다.

그렇기에 UX는 사용자의 가장 강렬한 순간과 마지막 순간을 세심하게 신경 써야 한다는 것이다.

  • 사용자가 언제 기쁨을 느꼈는지, 불쾌함을 느꼈는 지를 파악해야 한다.
  • 특히 사람들은 긍정적인 순간보다 부정적인 순간을 더욱 생생하게 기억하기 때문에, 부정적인 경험에 대해 유의해야 한다.

alt

  1. 사용자 여정 중 가장 강렬한 순간과 마지막 순간을 세심하게 신경 쓰자.
  2. 제품이 사용자에게 가장 큰 도움을 주는 순간, 혹은 가장 중요하게 여겨지는 순간, 가장 큰 즐거움을 주는 순간 등을 알아내라.
  3. 사람들은 긍정적인 순간보다 부정적인 순간을 더 생생하게 기억한다는 사실을 명심하자.
  • 카카오T 택시 대기 시간의 인식에 대해서 집중.
    • 1.대기 시간에 대한 거부감
    • 2.작동상의 투명성
    • -> 예상도착시간 + 현재 택시 운행 경로을 실시간 표기.

사례​

alt

  • 저금을 매주 하는것은 어려운 인식을 가지고 있다.
  • 회차가 진행되면, 진화하는 캐릭터를 보여주어 긍정적인 경험 유도
  • 모든 회차가 완료되면, 최종 진화 캐릭터와 긍적적 피크엔드 제공
    • 전체 경험을 긍정적으로 평가하도록 유도.

7.심미적 사용성 효과​

사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식하는 효과

1.사람들은 보기 좋은 디자인이 사용성이 더 뛰어나다고 인식한다.

  • 사람들이 인지를 처리할 때 시스템1(충동적)과 시스템2(사고적)을 이용하는데,
  • 시스템1이 대부분의 사고나 행동을 관장하고, 시스템 2는 필요할 때 사용된다.
  • 시스템1에서 제품을 빠르게 구별하고, 관련 없는 정보는 무시하는데 심미적 효과는 바로 이런 첫인상을 결정할 때 매우 중요하다.

2.아름다운 디자인은 긍정적인 반응을 일으키고 인지능력을 향상한다.

  • 디자인이 아름다우면 사용성이 좋다고 느끼고, 사소한 문제를 간과해줄 수 있다.

alt

  • 웹툰의 대표이미지를 통해 직관적 이해 향상.
  • 카카오 웹튼 :보기 좋은 레이아웃을 이용해 끝없는 디스플레이를 보여주고, 캐릭터들의 움직임을 통해 긍정적인 경험.

사례​

alt

  • 보안을 진지하게 접근하지 않고 가벼운 터치와 gamification

8.폰 레스토프 효과​

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

Alt

비슷한 사물이 여러 개 있으면, 그중 가장 색다른 것만 기억하려고 한다.

  • 중요한 정보나 핵심 동작은 시각적으로 눈에 띄게 설계해야 한다.
  • 아무것도 강조하지 않는 것보다 더 나쁜 건 너무 많은 요소를 강조하는 것이다. 이 점도 유의해야 한다.
  • ( 가장 중요한 항목이 광고로 오인되지 않게 해야 한다.)
  • (사용하는 경우에는 색맹이나 저시력 사용자가 배제될 수 있다는 걸 주의해야 한다.)

alt

  • FAB버튼을 통해 가장 자주 쓰이는 동작을 수행
  • 시그니처 컬러를 통해 주의 끌기

사례​

alt

  • 상단 카드 영역, 뱃지 사용

9.테슬러의 법칙​

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

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

  • 제품이 사용자를 위해 제공하는 기능이 많아지면 많아질수록 시스템과 인터페이스는 복잡해진다.
  • 완전히 없애거나 감출 수 없는 일정량의 복잡성이 존재하기에, 개발(혹은 디자인) 과정이나 사용자 인터랙션 단계에서 처리해야 한다.
  • 유저가 복잡한 행동을 할 수밖에 없는 상황에서 이를 돕기 위한 시스템을 개발하거나 인터페이스를 디자인해야 한다.

altImage

  • Gmail이 좋은 예시인데, 이메일 주소를 입력하는 것은 없앨 수 없는 복잡성이다.
  • (받는 사람을 지정해야 보낼 수 있으니까) 이를 돕기 위해 몇 글자 입력하면 이메일을 제안해주는 기능을 만들었다.
  • 메일을 작성하는 것도 온전히 유저가 해야 할 수고인데 이를 돕기 위해 스마트 편지 쓰기(맥락에 맞는 단어와 구절을 제안한다)를 만들었다.
  • 온라인 쇼핑몰에서 주문을 작성할 때 배송지를 목록에서 고를 수 있게 하는 것도 이러한 수고를 더는 것이다.

사례​

alt

  • 입력 주소 넛징 툴팁, 최근 검색어, 요청사항 저장

alt

  • 보내는 사람의 전화번호 + 이름 노출

10.도허티 임계​

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

1."0.4"초 이하로 인터랙션하면 생산성은 급격히 높아진다. 시스템이 빠르게 반응하도록 만들어야 한다는 것이다.

2.빠르게 반응하지 못하는 경우에는 애니메이션을 이용해 기다리는 시간 동안 사람들의 시선을 뺏어야 한다.

  • 시스템이 빠르게 응답하는 게 가장 좋은 방법이지만,
  • 여러 가지 외부 시스템과 연동하는 경우에는 그게 쉽지 않다. 그럴 경우에는 아래의 팁을 이용한다.
    • 스켈레톤 UI(일단 사이트의 틀을 먼저 로딩해주는 것)
    • 블러 업(이미지 공간에 저해상도 이미지를 보여주고, 실제 이미지가 로딩되면 바꿔 친다)
    • 로딩할 때 애니메이션을 사용해 시선을 뺏는다. (진행상황이나 남은 시간을 보여주면 더 좋다)
    • 인스타그램처럼 댓글이 업로드된 것처럼 보여주고 백그라운드에서 처리한다. (Optimistic Update)

3.설사 정확하지 않다고 해도 진행 표시줄을 보여주면 사용자는 대기 시간에 좀 더 관대해진다.

4.실제 작업이 훨씬 빨리 완료되더라도, 의도적으로 작업 완료를 늦게 알리면 체감 가치를 높이고 신뢰를 형성하는 데 도움이 되기도 한다.

사례​

alt

  • 항공권 검색 전용 Loading Page
  • 사용자 기대가 담긴 로딩 컴포넌트, 로딩 아이콘 애니메이션

alt

  • 로딩화면중 무엇을 하는지 보여주는 UX

Ref​