유사성의 법칙 (Law of Similarity)
UI버전 끼리끼리 관상은 과학
모양, 색깔 등 외형이 비슷하면 '아, 얘네는 똑같은 기능을 하나봐' 라고 본능적으로 느끼게 만드는 시각적 동질감
정의
인간가 뇌는 시각적 요소들이 있을 때, 그들의 공통점을 찾아 하나의 그룹으로 묶어 인식하는 심리적 매커니즘
시각적 특징을 공유하고 → 그룹화해서 인지하고 → 이들이 동일한 기능을 수행할 것을 기대한다
유래
20세기 초 독일의 게슈탈트 심리학자 막스 베르트하이머가 인간이 파편화된 정보를 어떻게 전체 형상으로 인식하는지 연구하며 정립했다
예시
•
대시보드 서비스
같은 성격의 수치 데이터는 동일한 폰트 크기나 색상으로 배치해 데이터 간의 연관성을 느끼게 한다
활용
이를 활용해 사용자의 학습 비용을 줄이고 예측 가능한 경험을 제공할 수 있다
•
시각적 위계 확립 :
중요한 버튼(primary), 덜 중요한 버튼(secondary) 스타일을 다르게 설정해 위계를 구분할 수 있다
중요한 버튼(primary), 덜 중요한 버튼(secondary) 스타일을 다르게 설정해 위계를 구분할 수 있다
•
정보 구조화 :
border, divider 같은 물리적 경계선을 사용하지 않아도 색상, 모양만으로 정보 덩어리를 만들어 ui를 구성할 수도 있다
border, divider 같은 물리적 경계선을 사용하지 않아도 색상, 모양만으로 정보 덩어리를 만들어 ui를 구성할 수도 있다
•
컴포넌트 재사용 :
디자인 시스템에서 자주쓰이는 UI를 컴포넌트로 지정하고, 일관된 컴포넌트 스타일을 유지하자는 근거
디자인 시스템에서 자주쓰이는 UI를 컴포넌트로 지정하고, 일관된 컴포넌트 스타일을 유지하자는 근거
별개의 요소를 하나의 맥락으로 묶어주는 강력한 끈
디자이너는 시각적 공통점을 전략적으로 배치해 사용자가 별도의 설명을 듣지 않아도 인터페이스 구조를 파악할 수 있도록 할 수 있어야 한다