UX 법칙_유사성의 법칙 / 균일한 연결성 법칙

3. GESTALT

형태와 패턴을 지각하는 방식

유사성의 법칙 (Law of Similarity)

사람은 유사한 요소를 묶어서 지각하려는 경향이 있다.

1. 시각적으로 유사한 요소는 관련된 것으로 인식된다.

2. 색상, 모양, 크기, 방향 및 움직임은 요소가 동일한 그룹에 속하고 공통된 의미나 기능을 공유할 가능성이 있음을 나타낼 수 있다.

3. 링크와 탐색 시스템이 일반 텍스트 요소와 시각적으로 구별되는지 확인하라.

 

사용자들은 시각적으로 유사한 요소는 서로 관련이 있다고 생각하고, 비슷한 기능을 가지고 있을거라는 생각을 한다. 따라서 유사한 요소끼리 묶어서 비슷한 형태와 컬러 등으로 디자인하여, 시각적으로 구분하는 것이 중요하다. 예시는 아래의 버튼 컬러를 구분한 이미지를 보면 알 수 있다. 각각 'Edit'과 'Remove' 기능을 가지고 있는 버튼을 시각적으로 구분하여 사용자로 하여금 쉽게 인지할 수 있게 디자인했다.

출처 : https://uxmisfit.com/2019/04/23/ui-design-in-practice-gestalt-principles/

 

 

균일한 연결성 법칙 (Law of Uniform Connectedness)

시각적으로 연결된 요소는 그렇지 않은 요소보다 더욱 연관성 있는 것으로 인지된다.

1. 유사한 성격의 기능을 그룹화하여 색상, 선, 프레임 또는 기타 모양을 통해 시각적으로 연결한다.

2. 또는 한 요소에서 다음 요소까지의 실질적인 연결 참조(선, 화살표 등)를 사용하여 시각적 연결을 만들 수도 있다.

3. 맥락을 보여주거나 비슷한 항목 간의 관계를 강조하려면 균일한 연결성을 사용하라.

 

아래의 이미지를 보면, 선으로 각 도형을 연결함으로서, 두 개의 도형이 무언가 연관성이 있다고 여겨진다. 이렇게 모양을 연결함으로서 유저들은 시각적으로 연결성이 있는 요소들이라 인식될 수 있다. 이러한 법칙은 UI 디자인에 있어서 맥락이나 비슷한 항목 간의 관계를 강조하는데에 사용될 수 있다.

출처 : https://uxmisfit.com/2019/04/23/ui-design-in-practice-gestalt-principles/