[UX/UI 디자인 이론] 게슈탈트 심리학을 왜 알아야 하나 (ft.착시 현상)
게슈탈트 심리학
눈을 속이는 신비한 뇌의 원리, 사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론.
대상의 의미가 전체의 특성에 따라 달라진다.
왜 게슈탈트 심리학을 알아야 할까?
착시 현상을 생각해보면 사람의 뇌는 대상을 있는 그대로 받아들이지 않는다.
형태의 정보 중에서 필요 없는 것은 지우고 기억하기 쉬운 상태로 정리해 받아들인다.
게슈탈트 심리학이 중요한 이유
게슈탈트 심리학은 사용자가 제품을 경험하는 데 영향을 끼친다.
제품을 이용하는 사용자의 의식은 계속해서 화면 구성의 통일성, 연속성, 유사성을 기대한다.
화면이 기대한 대로 구성되어 있지 않다면 사용자의 몰입이 깨지고 제품을 이탈하는 이유가 될 수 있다.
✅ 게슈탈트 심리학의 원리들
유사성의 원리 The law of similarity
크기나 형태, 방향, 색 등의 특성이 비슷한 것끼리 묶어서 지각하려는 경향
하지만 모양의 그룹화 효과는 크기, 색의 이용한 것보다 훨씬 약함
색상을 사용한 유사 관계 형성은 유사성의 원리 중에서 가장 강력하다.
유사성의 원리 사례
근접성의 원리 The law of proximity
가까운 것끼리 묶어서 지각하려는 경향
여백을 사용한 근접 관계 형성
유사성의 원리에서 알아본 색상을 사용한 유사 관계보다 여백을 사용한 근접 관계가 더 큰 힘을 가진다.
근접성의 원리 사례 - 아마존 북스
- Footer에서 같은 카테고리끼리는 가까이 두고 사이에는 여백을 크게 주어 그룹별로 잘 구분
- 그룹마다 상단에 타이틀을 가까이 두어 그룹마다 어떤 정보가 있는지 빠르게 인지할 수 있도록
폐쇄성의 원리 The law of closure
공백이 있더라도 틈이나 간격을 메워서 닫힌 형태로 인식하려는 경향
폐쇄성의 원리 사례 - 스포티파이
연속성의 원리 The law of continuance
연속적으로 직선이나 곡선을 이루는 요소를 잘 인지하는 경향
연속성의 원리 사례 - 핀터레스트
핀터레스트 홈 화면의 이미지는 크기가 모두 다르지만, 수직선을 만드는 열로 배열되어 있다. 여기서 연속된 세로의 수직 레이아웃으로 인해 사용자는 편안함을 느낍니다. 더불어 사용자가 앱을 위아래로 스크롤 하도록 유도하는 역할도 하죠.
공통성의 원리 The law of common fate
같은 방향으로 움직이는 것들끼리 더 관련성이 높다고 인식하는 경향
- 모양, 색상 등에 관계없이 함께 움직이거나 바뀌는 요소는 서로 더 관련이 있다고 느낀다.
- 주로 모션 그래픽에서 자주 사용되는 원리
공통성의 원리 사례
- Netflix를 탐색할 때 영화와 TV 프로그램이 장르나 테마에 따라 가로로 그룹화된다.
- 각 장르나 테마에 따라 썸네일 + 제목의 리스트가 한 방향으로 움직이는 것을 보고 한 그룹이라는 것을 알 수 있다.