UIUX 디자인 입문 5주차 게슈탈트 5-2

디자인원칙중 게슈탈트!

 

게슈탈트

사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론

A는 요소들에 둘러 쌓여있다. 속한그룹에 계속해서 영향을 받는다.

 

 

유사성의 원리, 근접성의 원리, 폐쇄성의 원리, 연속성의 원리, 공통성의 원리

 

게슈탈트 심리학 왜 알아야해요?

 

착시현상

토끼,오리 할머니,소녀

 

디자인 착각

시각 자극을 인지하는 과정에서

주변의 다른 정보에 영향을 받아

원래의 사물에 대해 시각적인 착각이 생기는 현상을 말해요.

 

사람의 의식이 기본적으로 통일성, 연속성, 유사성을 요구하기 때문에 착시가 생기죠.

 

게슈탈트 심리학은 사용자가 제품을 경험하는 데 영향을 끼칩니다

제품을 이용하는 사용자의 의식은 계속해서 화면 구성의 통일성, 연속성, 유사성을 기대합니다.

화면이 기대한 대로 구성되어 있지 않다면 사용자의 몰입이 깨지고 제품을 이탈하는 이유가 되겠죠?

 

통일성,연속성,유사성을 가지고 디자인을 만들어야

제품에서 사용자의 몰입에 방해되지않고 이탈하지 않게 할 수 있는데 도움이 되므로

때문에 우리는 게슈탈트 심리학을 알아야한다?ㅎㅎ

 

게슈탈트 심리학의 원리 5가지!

 

1) 유사성의 원리

크기나 형태, 방향, 색 등의 특성이 비슷한 것끼리 묶어서 지각하려는 경향

 

모양을 이용한 유사 관계 형성

 

원은 원끼리 네모는 네모끼리 별은 별끼리 묶여보인다.

 

모양이 유사하면 같은 그룹으로 묶여 보여요

모양의 그룹화 효과는 크기, 색의 이용한 것보다 훨씬 약합니다.

모양<크기,색

 

크기을 이용한 유사 관계 형성

크기가 더 큰 사각형이 주변의 다른 사각형보다 더 중요하게

큰 네모가 들어가는 순간 구조가 바뀌게 된다.

구조가 바뀌게된다는 말은..

큰네모끼리 관계가 있네

작은것보다 큰 이유가 있지않을까? 라고 사용자는 생각을 하게 된다.

 

색상을 이용한 유사 관계 형성

 

특히 유사성은 색상에 큰 영향을 받는다.

 

원래는 원형은 원형끼리 사각형은 사각형끼리 그룹으로 보이지만.

색상이 들어가면서 색상끼리 뭐가 있지 않을까? 라고 연결지어 보이게 된다.

 

색상의 유사성을 잘 보여준 예시

모양보다 색상의 유사성이 강력한 그룹핑!

 

방향을 이용한 유사 관계 형성

 

특정 요소만 방향을 바꾸면 그 요소들끼리 별도의 그룹을 형성

 

네모를 마름모모양이 되도록 방향을 바꿨어.

 

 

유사성 사례

 

유투브는 컨텐츠가 많아. 정보의 양이 많아. 사용자가 (뇌가) 처리해야하는 양이 많아.

 

적당히 그룹핑해주면 뇌 처리가 쉽겠죠?

 

 

나열된 100개의 컨텐츠가 있는것보다 적당히 나눠진 4개 그룹안에 100개의 컨텐츠가 사용자가 이해하기 좋고, 편한 UIUX다.

 

모양이 유사한 컴포넌트는 자연스럽게 하나의 그룹이라는 느낌을 줍니다

정보의 그룹화가 잘되면 사용자가 내용을 파악하기가 편합니다.

 

 

2) 근접성의 원리

 

가까운 것끼리는 어떤 관계가 있지 않을까?

가까운 것끼리 묶어서 지각하려는 경향을 말해요

사람들은 가까이 있는 요소들이 멀리 있는 요소들보다 더 관련성이 있다고 느낍니다.

어떤 것들이 모두 비슷한 간격으로 떨어져 있다면, 사이에 특별한 관계있다고 생각하지 않을 거예요.

떨어진 원형은 2개의 그룹으로 보인다.

 

유사성의 원리에는 형태,색상이 있다고 했는데, 이것이 깨지는 순간이 근접이다.

 

여백을 이용한 근접 관계 형성

모양달라도 여백두고 나눠진 요소끼리 서로 그룹화.

 

형태의유사성보다 여백의 활용한 근접성이 더 우선

모양보다 색상이 강력하다.

색상보다도 여백이 더 강력

그렇다면 모양<색상<여백

 

근접성 사례

 

아마존의 포털 카테고리

카테고리끼리 분류

 

카테고리 -> 구분

 

3) 폐쇄성의 원리

로고,아이콘에 사용

공백이 있더라도 틈이나 간격을 메워서 닫힌 형태로 인식하려는 경향을 말해요.

 

도형의 일부가 끊어져 있거나, 이어져 있지 않더라도 완벽한 형태로 인식할 수 있어요.

 

폐쇄성 사례

폐쇄성의 원리 덕분에 이미지의 일부가 잘려있어도 옆으로 계속해서 요소들이 이어질 것이란 걸 추측할 수 있습니다.

 

4) 연속성의 원리

 

연속적으로 이어진 직선, 곡선 

• 사람은 어떤 요소가 방향성을 가지고 연속되어 있을 때 편안함을 느껴요.
• 직선이나 곡선을 따라 배열된 대상을 하나의 단위로 인식합니다.

유사성의 원리중 색상으로 보면 그 라인의 형태가 익숙하지 않아.

우리 눈은 연속된 이어진게 더 자연스럽게 연결 된다고 본다.

 

연속성 사례

 

핀터레스트

너비를 맞추고 column열이 4개 통일

수직적인 직선의 방향성

 

직,곡선 이어진것이 익숙하다.

 

5)공통성의 원리

 

방향의 유사성과 비슷하다고볼 수 있는데.

 

같은 방향으로 움직이는 것들끼리 더 관련성이 높다고 인식하는 경향을 말해요

• 모양, 색상 등에 관계없이 함께 움직이거나 바뀌는 요소는 서로 더 관련이 있다고 느껴요.
• 이 원리는 주로 모션 그래픽에서 자주 사용돼요.

• Netflix를 탐색할 때 영화와 TV 프로그램이 장르나 테마에 따라 가로로 그룹화됩니다.
• 각 장르나 테마에 따라 썸네일 + 제목의 리스트가 한 방향으로 움직이는 것을 보고 한 그룹이라는 것을 알 수 있죠.

+

지난시간에는 디자인원칙 그리고 디자인 원칙의 종류(게슈탈트,uiux심리학, 비주얼, 기업 디자인)

그리고 오늘은 게슈탈트는 근접해 있는것끼리의 연관, 주변 요소간의 관계,맥락이 영향 받는다.

게슈탈트 심리학의 5가지 원리 유사성, 근접성, 폐쇄성 ,연속성, 공통성이 있었고..

음 ㅋ 유사성에는 형태(모양),색상,방향

 

근접성에는 여백 

유사성에서도 모양보는 색상이 더 우선시되고, 

근접성의 여백에서 색상보다 여백이 더 우선시 되는거를 확인.

모양<색상<여백

모색여로 외우기~

 

폐쇄성은 잘려있어도 옆에 이어질거란 추측.

여백이 있어도 틈 , 간격 메워 인식하려는 경향

 

연속성은 직,곡선의 연결 핀터레스트 예시 떠올리기

 

공통성은 같은방향으로 움직이는 것들. 모션그래픽. 넷플릭스의 테마장르 그룹화 떠올리기.

 

디자인이라는게 그냥 이쁘게만 만드는게아니라 원칙을 생각하면서 만들면 사용자도 편한거구나.

보통 사람이 생각하는 인지심리 

어떻게 보고, 어떻게 행동하고, 어떻게 느끼는지를 관점으로 디자인을 한다.

그중 하나가 게슈탈트이고.

 

갈길이 멀다.. 먼 이론~ 하하하하핳

 

다음시간에는 비주얼 디자인 원칙이다.