[기획] 10.게슈탈트 심리학

게슈탈트 심리학과 인터페이스 디자인
게슈탈트 (8Cska)란 원래 형, 형태 를 뜻하는 독일어이고, 게슈탈트 심리학은 인간이 심리적으로 형 태를 어떻게 인지하는지에 대한 기초적인 원리이므로 이를 잘 숙지하면 인터페이스 설계에 응용할 수 있다.

 

게슈탈트 심리학은 ① 근접한 것끼리, 유사한 것끼리, ③ 닫힌 모양을 이루는 것끼리, 좋은 연속 을 하고 있는 것끼리,⑤ 좋은 모양을 만드는 것끼리 한데 모임으로서, 보기 좋아진다는 사실에 근거를 두고 있다. 지각뿐만 아니라 널리 심리학 문제와도 관계가 있다.

가장 지각하기 쉬운 화면은 때 오른쪽 화면으로 근접성과 유사성의 원리에 의해 같은 기능을 가진 때문 은 같은 모양과 컬러로 표현하고 서로 가까이 모아 놓아 효과적으로 그룹핑되어 있다.

 

 

1. 사용자가 형태를 지각하는 원리

근접성은 가까운 것끼리 묶어서 지각하려는 원리인데, 예를 들면 같은 기능을 가진 버튼끼리 모아서 화
면을 배치하여 사용자의 이해를 돕는 것이다.
• 근접성의 요인
사용자들이 형태를 지각할 때 가까운 것끼리 묶어서 지각하려는 원리를 말한다. 버튼도 경우에 따라 서 쓰임새가 다른데, 그 쓰임새에 따라서 버튼을 그룹핑시켜주는 것이 사용자들의 이해를 높일 수 있다.

다음은 웹 페이지에서 근접성의 요인에 해당하는 간단한 예다.

① 로그버튼과 그 외 관련된 입력 필드, 회원 정보와 관련된 기능 등을 묶어 놓는 것
② 회사소개, 사용약관, 개인정보 보호약관, FAQ 등의 메뉴를 가까운 곳에 놓는 것
③ 메인 메뉴들을 일관성있게 묶어 디자인하는 것
전자상거래 사이트의 경우 '구매하기', 상품보기', '장바구니에 담기' 등의 기능적인 버튼을 동일한 위치에 놓아 사용자의 편의를 도모하는 것
⑤ 게시판의 쓰기, 삭제, 목록 버튼을 하단에 묶어서 배치하는 것

1) 유사성
유사성은 인간이 대상을 시각적으로 집단화하려는 경향을 가지며 따라서 비슷한 것끼리(크기, 형, 입체, 방향, 색채 또는 명암 등) 묶어서 지각한다는 것이다.

• 유사성의 요인
사용자들이 형태를 시각적으로 집단화하여 지각하려는 원리를 말한다. 메뉴의 경우 유사한 목록을 하나의 묶음으로 정리해서 분류해야 한다. 많은 양의 데이터는 비슷한 내용으로 분리하여 작업하는 것이 효율적일 것이다. 메인 메뉴와 서블 메뉴가 비슷한 명암과 크기이면 혼란이 가중되므로 명암에 있어서나 크기에 있어서 중요도를 감안하여 작업해야 할 것이다.

다음은 웹 페이지에서 유사성의 요인에 해당하는 간단한 예다.

① 대분류, 중분류, 소분류 등의 위치변화에 따른 그룹핑 효과
② 같은 메뉴의 컬러는 유사한 색상을 사용하여 나타내는 방법으로 각 메뉴의 색을 달리해서 페이지를
구분해 주는 것

2) 연속성
연속성은 유사한 배열이 하나의 묶음으로 보이는 것으로 접근성과 비슷하나 접근성에 비해 연속되는 흐름을 가진 그룹핑이라 볼 수 있다.

• 연속성의 요인
사용자들이 유사한 배열을 하나의 묶음으로 지각한다는 원리다. 여기서도 메인 메뉴의 사례가 적용 될 수 있다. 같은 내용들로 묶여진 메뉴들과 서브 메뉴들이 각 메인 페이지와 서브 페이지에 적용되 면서 유사한 통일성을 가지게 된다. 이러한 요인들에 의해 각각의 페이지들이 통일성을 가지고 연속 적인 페이지가 될 수 있다.

다음은 웹 페이지에서 연속성의 요인에 해당하는 간단한 예다.

① 깊이(depth)로 들어가도 쉽게 위치를 파악할 수 있도록 유저를 배려하는 시간적인 정황
② 게시판 리스트 목록의 배열

3) 폐쇄성
폐쇄성은 닫힌 것을 하나의 형태로 보며 시각적 그룹핑을 전달하기 위한 목적으로 사용되는 가장 보면 적인 기법으로 그룹된 요소 주변에 외곽선을 그리는 방법이다.

• 폐쇄성의 요인
단힌 것을 하나의 형태로 보며 시각적 그룹핑을 전달하기 위한 목적으로 사용된다. 애매한 부분의 내용들을 형이나 선으로 묶어줌으로서, 하나의 개체로 인식하게 한다. 폐쇄된 형의 요인은 그 대상 이 유사하거나 유사하지 않더라도 하나의 그룹으로 보여질 수 있는 중요한 요인이다.

 

4) 형과 배경

물체의 양 으로 보여지는 부분을 향 또는 그림 으로 보고. 그외의 배경 부분을 비방 으로 보려고 하는 것이다. 이러한 원리들을 사용하여 통일감있는 화면을 창조해낼 수 있다.

• 형과 배경의 요인
대상이 일정한 환경을 가지고 긴밀하게 짜여 있고 충실한 내용을 나타내며 비교적 강한 인상을 줄 때 이를 형태 또는 '도형 ' 이라 한다. 이에 비해 짜여있지 않고 공허하며 비교적 약한 인상을 줄 때 매을 배정 이라 한다. 이는 어떤 대상의 윤곽선에 의해 자극이 두 영역으로 나뉘어져, 두 영역의 향은 동시에 관할 될 수 없다는 사실에 기인하는 것으로 형태 지각의 중요한 문제가 드러난다.
사이트를 제작할 때 컨셉이 들어가는 서브 화면에서 내용들을 약하게 작업하게 되면 배경과 분리되 지 못하고 하나의 덩어리로 인식되는 경우가 이에 속한다 하겠다. 따라서 작업 시 배경을 약하게 한다던가 오브젝트를 부각시켜 작업해야 사용자들의 인지를 도울 수 있다.

 

 

 

2. 게슈탈트 심리학을 적용한 웹 페이지 사례 분석

근접성의 요인
근접성은 인간이 물체를 시각적으로 집단화하려는 경향을 가지며 가까운 것끼리 묶어서 지각한다는 것이다.

• 도형은 통합된 형태를 가지지만 배경은 그렇지 못하다.
• 관찰자의 시각은 최초의 도형에 집중된다.
• 도형은 떠오르고 배경은 가라 앉는다.
• 도형은 물체 또는 대상물로서의 특성을 가진다.
• 배경은 물질 또는 무정형한 특성을 가진다.
• 도형은 전방(볼록면)에, 배경은 후방(오목면)에 있기 쉽다.
• 도형은 작은 쪽이며, 배경은 큰 쪽이 되기 쉽다.
• 둘러 싸여 있는 영역은 배경이 되기 쉽다.
• 일정한 영역 가운데 동질성인 것보다 이질성인 것이 도형이 되기 쉽다.
• 도형은 인상이 강하고 기억하기 쉽고 의미적이다.
• 대칭이 비대칭보다 도형이 되기 쉽다.
• 규칙적인 경향성과 강한 자극을 주는 쪽이 도형의 조건이 된다.
• 하부가 상부보다 도형의 조건으로 유리하다.
• 빛을 받는 면은 볼록면으로 튀어나와 도형이 되고, 그늘은 오목면 안으로 가라앉아 배경이 되기 쉽다.