UX 원칙 - 근접성 Proximity
근접한 개체들은 동일한 개체로 인식된다
근접성은 서로 가까이 있는 디자인 요소는 유사한 기능이나 특성을 공유하는 동일한 그룹으로 인식된다는 원칙이다.
사람들은 요소들의 거리가 가까이 있으면 서로 연관성이 있다고 인식하고 거리가 떨어져 있으면 관련이 없다고 인식한다.
근접성은 ‘게슈탈트의 지각 원리’의 여러 가지 원리들 중 하나다. 관련된 요소를 서로 가깝게 배치하고 관련되지 않은 요소를 분리하는 근접성은 UI디자인뿐만 아니라 그래픽디자인, 타이포그래피, 정보 디자인 등 모든 시각디자인 분야에 적용되는 기본 원칙이다.
근접성은 색상, 모양 또는 스타일과 같은 다른 도구를 압도한다.
근접성은 디자인에서 요소들의 관련성을 나타내는 색상이나 모양의 유사성을 압도하는 강력한 시각적인 단서이다.
유사한 형태와 색상의 요소들이라도 거리가 멀리 떨어져 있으면 다른 그룹으로 묶인다.
근접성은 인터페이스를 스캔하고 파악할 수 있도록 도와준다.
사람들은 페이지를 구성하는 요소 하나하나를 보지 않고 페이지 전체를 훑어본다.근접성은 화면의 복잡한 정보를 단순화시켜 사람들이 화면의 요소들을 그룹화하여 빠르게 인식할 수 있도록 도와준다.
근접성은 컨트롤과 콘텐츠 간의 관계를 표현한다.
사람들은 버튼과 같은 컨트롤이 화면의 요소에 가까울수록 둘 사이에 연관이 있다고 예상한다. 근접성은 인터페이스에서 컨트롤과 컨트롤이 영향을 미치는 텍스트나 이미지 같은 콘텐츠와 요소 사이의 관계를 여백과 공간으로 나타낸다.
왼쪽 이미지는 ‘팔로우’ 버튼의 용도를 알기 어렵다. 우측 이미지와 같이 버튼과 콘텐츠 간의 간격을 가까이 배치하면 ‘팔로우’ 버튼과 가까이 있는 이미지와 텍스트가 서로 연관이 있다고 인지하고 버튼을 탭핑 했을 때 어떤 일이 일어날지 예상할 수 있다.
근접성과 타이포그래피
근접성은 가독성이 중요한 타이포그래피에도 많은 영향을 줄 수 있다. 텍스트 그룹(단락 및 섹션)을 나누고 연관된 요소 간의 거리를 가까이하고 연관성이 없을 경우 거리를 줘서 읽기 쉬운 구조로 디자인할 수 있다.
책이 아닌 인터페이스에서 사람들은 긴 텍스트 읽기를 좋아하지 않는다. 이러한 텍스트는 중요한 정보를 식별하기 어렵다.
정보를 쉽게 파악하고 이해할 수 있도록 긴 텍스트 덩어리를 단락으로 나눈다. 문장은 공백으로 위와 아래로 구분된 단락으로 함께 그룹화된다. 단락의 타이틀을 강조하고 단락 간의 공간을 조절한다.
타이틀 주위에 여백을 줘서 어떤 단락과 연관되어 있는지 알 수 있도록 한다. 타이틀과 연관된 텍스트는 이전 섹션의 텍스트보다 가깝게 배치한다.
두 화면의 모든 디자인 요소는 동일하다. 다른건 요소들 간의 간격이다. 오른쪽이 더 읽기 쉬워 보이고 미적으로도 나아보이는 것은 근접성을 통해 왼쪽은 화면 전체가 하나로 묶여 보이지만 오른쪽은 기능적으로 유사하고 의미적으로 유사한 요소들끼리 그룹지어 보이기 때문이다.
근접성과 입력 폼
한 화면에 텍스트 필드 개별적으로 있을 경우는 문제가 없을 수 있지만 여러 개의 텍스트 필드가 있는 입력 폼의 경우는 근접성을 고려해서 디자인해야 한다.
왼쪽의 라인형 텍스트 필드로 이뤄진 폼은 각 항목의 텍스트 필드에 입력된 텍스트와 필드의 레이블 간의 간격의 차이가 없어 필드들이 그룹으로 묶여 보이지 않고 개별적으로 인식된다. 왼쪽 보다 우측의 폼양식이 훨씬 더 가독성이 높다.
근접성은 사용성을 높인다.
닐슨 노만 그룹에 의하면 근접성을 통해 그룹화를 시각적으로 명확하게 하면 사용자는 매우 빠르게 화면을 스캔하여 현재 작업과 관련된 UI 요소만 빠르게 찾고 집중할 수 있도록 하여 사용성이 향상된다
근접성 외에 몇 가지 디자인 도구가 활용됐지만 왼쪽 보다 우측이 기능을 훨씬 빠르게 찾을 수 있다.
요약
디자인에서 여백이라고 불리는 화이트 스페이스는 인터페이스에서 디자인 요소를. 분리시키기도 하고 그룹으로 묶어서 하나로 통합하기도 한다. 근접성의 원칙를 이해하고 적절히 활용하면 콘텐츠를 이해하기 쉽게 디자인하고 사용하기 좋은 인터페이스를 디자인할 수 있다.
요소들 사이 공간은 제품 전반에 걸쳐 일관성이 있게 적용하면 시각적인 통일성을 부여할 수 있다.
참고자료
책
사용자를 유혹하는 UX의 기술. P40
https://www.aladin.co.kr/m/mproduct.aspx?ItemId=259564088
디자인 불변의 법칙 100가지. P160
그래픽 디자인의 요소
Article
Proximity Principle in Visual Design
Sketch + Gestalt Principles
디자인의 주요 게슈탈트 원칙 - 모범 사례
