[디자인부트캠프] Chapter 5. 디자인 심리학

1. 디자인과 심리학의 관계

색채 심리학 : 브랜드의 정체성 확립 / 고객의 행동 유도

 

💻 웹사이트 디자인

• 아마존: 오렌지색이 주는 긴박함과 에너지를 구매 버튼, 프로모션 광고에 자주 사용하여 고객의 구매 결정을 유도
• 이베이: 파란색이 주는 신뢰감으로 고객에게 안정감을 제공. 검색창, 계정 관리 등 주 요소에 파란색을 활용하여 서비스에 대한 신뢰와 안심을 UP

🍽 레스토랑 디자인

 

레스토랑의 분위기와 고객의 경험을 결정하는 중요한 요소, 색

• 패스트푸드: 빨강 / 주황 / 노랑을 활용해 빠른 식사를 유도
• 건강식: 초록 / 청록을 활용해 신뢰감과 건강한(오가닉) 이미지를 강조

인간 심리학과 디자인 : 이성도 결국 인간의 심리에 좌우된다. 좋은 디자인을 위해서 사람의 마음, 심리를 놓치면 안된다.

 

1. 게슈탈트 이론 (Gestalt Theory) : 전체는 개별 요소의 합보다 크다

 

사람들이 사물을 개별적인 요소로 보는 것이 아닌 전체적인 패턴이나 구조로 인식하는 방식을 설명하는 심리학 이론

근접성 (Proximity)	- 사람들은 근접한 정도(거리)에 따라 구분을 짓고, 그룹화한다. - 요소들 간의 거리를 조절하여 그룹을 명확하게 구분할 수 있다. - UX디자인에서 굉장히 효과적이고 다양한 앱&웹사이트들이 이 원리를 적용한다. 예) 에어비앤비, 크몽 등
유사성 (Similarity)	- 사람들은 유사한 것들 안에서 패턴을 찾는다. - 사람들은 무엇을 볼 때 그 안에서 유사해 보이는 요소를 찾고, 그것들을 그룹화 하려는 경향이 있다. -일반적으로 크기>모양>색상 순으로 동일한 속성을 공유할 시 유사한 인상을 받는다. 예) 탈잉, 컬리 등
대응 (Mapping)	- 같은 방향으로 움직이는 요소들은 같은 그룹으로 인식된다. - 대응은 두 요소(작동하는 통제 장치 Controller &작동에 의한 결과물 Interface or Display) 간의 관계성을 뜻한다. - 직관적 흐름 유도, 작동의 인과관계를 쉽게 예측 가능하게 예) 우버

 

첫 줄과 두 줄의 그룹 간 스페이싱으로 구분하는 Airbnb / 캐릭터 별(수요 대상)으로 그룹을 나눠 스페이싱을 준 크몽

유사한 톤앤매너의 아이콘과 유사한 형태의 이미지로 배너 영역과 메뉴 영역을 구분한 탈잉 / 키 컬러(보라)를 중요한 요소에만 사용하여 흐름을 유도한 컬리. 구매버튼과 유사한 보라가 각각 즉시 할인과 favorite, 즉 구매 결정으로 연결되는 포인트에 사용됨.

자동차 아이콘이 가는 방향으로 직관적으로 이해가 가능한 우버/대응의 원리를 적용하지 않아 실패한 디자인의 사례. 일렬로 배치하여 인덕션의 어느 화구에 대응하는지 직관적으로 알 수 없다.

 

2. 인지부하 : 뇌가 피곤하면 사용자가 떠난다. :( 🏃‍♂️

 

최고의 사용자 경험은 배려에 대해 사용자가 알지 못하는 것. 사용자가 단순하고 부드러운 플로우를 타게 하려면 눈치채지 못하게 문제를 예방하고 수백 가지 중요한 결정들이 설계 단계에서 이뤄져야 한다. 인터페이스 또는 디자인에 대해 생각하는 사용자가 적을수록 웹사이트에서 목표 달성에 더 집중한다. 디자이너는 장애물을 제거하여 사용자들이 목표에 이르는 빠른 경로를 제공해야 한다.

 

옵션이 많아 복잡하고 혼란스러운 인터페이스, 액션을 하기까지의 지나친 단계는 사용자에게 끊임없이 문제를 해결해야 한다는 압박을 준다. 이 과도한 생각을 인지 과부하라고 한다.

 

이것저것 생각할 여지를 주지 않는 깔끔한 인터페이스의 구글. 검색이라는 목표 달성을 위한 검색창 외에는 불필요한 요소를 없앤 무의식적인 배려./원클릭 구매로 인지부하를 확 줄인 아마존

이벤트 팝업, 광고 배너, 추천 기사, 상품, 메뉴바 등 선택지와 정보가 너무 많은 과거의 웹사이트는 인지부하와 피로를 유발하고 뭘 봐야할지 몰라 시선을 분산한다.

 

2. 디자인을 좋게 하는 심리학의 5가지 법칙

 

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

• 익숙함 = 편리함
• 멘탈 모델(다른 사이트나 앱을 통해 형성됨. 비슷한 방식으로 동작하길 기대하며, 기존 패턴을 벗어나면 혼란)을 고려한 디자인이 필요
• 기존 패턴을 무작정 깬다고 좋은, 창의적인 디자인이 아니다. 익숙함 속에서 차별화!
• 예) 어느 웹사이트를 가도 홈 버튼, 쇼핑 버튼 등의 아이콘은 유사하다.

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

• 선택지, 옵션이 많아질수록 반응(의사 결정) 시간이 증가 > 인지부하
• 기능을 전부 다 보여줄 필요❌ 필요한 핵심 기능만 "단순함이 중요!"
• 예) 맞춤형 컨텐츠를 추천하여 선택을 쉽게 하는 넷플릭스, 전원과 채널/볼륨 버튼 정도의 핵심 기능만을 남기고 불필요한 숫자 버튼등을 생략한 심플 리모컨

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

• 인간은 한번에 7±2 개의 정보(5~9개 정도)만 기억할 수 있다.
• 정보를 통째로 주지 않고 각각의 덩어리(Chunk)로 묶어서 제공해야 인지 부담이 적다.
• 어떤 정보끼리 묶을 수 있을지 계층을 나눠주는 것이 중요하다.
• 예) 전화번호를 줄 때 01012345678 > 010-1234-5678

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

• 사람은 어떤 경험을 전체적으로 기억할 때 가장 강렬한 순간(Peak)과 마지막 순간(End)를 위주로 기억한다.
• 디자인 설계에서 강렬한 순간과 마지막 단계에서의 경험을 신경 써야한다. "Highlight & Happy End!"
• 예) 계산대 뒤에 저렴한 핫도그를 팔아서 결과적으로 전체적인 소비가 합리적이고 싸다고 느끼게 만드는 이케아

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

• 비슷한 것들 사이에서 유독 다른 특징을 가진 것은 더 쉽게 기억에 남는다.
• 중요한 정보는 시각적으로 강조해야 눈에 띄고 기억에 각인된다.
• 예) 할인 배너, 구매 버튼, 중요한 알림 등은 크고 강렬한 색깔(빨강과 같은)로 표현된다.