디자인의 게슈탈트 원리 탐구

이 기사의 오디오 버전을 들어보세요

네거티브 스페이스는 오랫동안 좋은 디자인의 단골이었습니다. 디자인 요소 주위에 공백을 남기는 것이 일반적으로 가장 먼저 떠오르는 것입니다. 그러나 그 공백을 사용하여 실제로 존재하지 않는 요소를 추론하는 디자인이 있습니다(FedEx 로고의 E와 X 사이에 숨겨진 화살표가 예로 즉시 떠오릅니다).

인간의 두뇌는 이미지의 공백을 채우고 부분의 합보다 더 큰 전체를 만드는 데 탁월합니다. 이것이 우리가 나뭇잎이나 보도 균열과 같은 사물에서 얼굴을 보는 이유입니다.

이 원리는 시각적 지각의 게슈탈트 원리 뒤에 있는 가장 중요한 기본 아이디어 중 하나입니다. 이론에 관해 작성된 가장 영향력 있는 초기 제안은 Max Wertheimer가 1923년에 발표한 지각 조직의 게슈탈트 법칙(Gestalt Laws of Perceptual Organisation)에서 발표되었지만, Wolfgang Kohler의 1920년 Physical Gestalten 논의에도 이 주제에 대한 많은 영향력 있는 아이디어가 포함되어 있습니다.

누가 아이디어를 처음 제안했는지에 관계없이(1890년까지 거슬러 올라가는 에세이가 있음), 게슈탈트 원칙은 모든 디자이너가 배워야 하는 중요한 아이디어 세트이며, 이를 구현하면 디자인의 미학뿐만 아니라 그 기능과 사용자 친화성.

가장 간단한 용어로, 게슈탈트 이론은 인간의 뇌가 무의식적으로 부분을 단순한 전체가 아닌 전체를 생성하는 조직화된 시스템으로 배열함으로써 많은 요소로 구성된 복잡한 이미지나 디자인을 단순화하고 구성하려고 시도한다는 아이디어에 기반을 두고 있습니다. 일련의 이질적인 요소. 우리의 뇌는 우리가 살고 있는 환경을 더 잘 이해하기 위해 구조와 패턴을 보도록 만들어졌습니다.

일반적으로 게슈탈트 이론과 관련된 6가지 개별 원칙이 있습니다: 유사성 , 연속성 , 폐쇄성 , 근접성 , 도형/그라운드 , 대칭 및 질서 ( 프라그나츠 라고도 함). 또한 공통의 운명과 같이 게슈탈트와 관련된 새로운 추가 원칙이 있습니다.

유사성

같은 것을 그룹화하는 것은 인간의 본성입니다. 게슈탈트에서 유사한 요소는 서로의 근접성에 관계없이 시각적으로 그룹화됩니다. 색상, 모양 또는 크기별로 그룹화할 수 있습니다. 유사성은 디자인에서 서로 바로 옆에 있지 않을 수 있는 요소를 함께 묶는 데 사용할 수 있습니다.

물론 군중에서 눈에 띄게 만들고 싶다면 사물을 다르게 만들 수 있습니다. 그렇기 때문에 클릭 유도문안 버튼은 페이지의 나머지 부분과 다른 색상으로 디자인되어 눈에 띄고 방문자의 관심을 원하는 작업으로 유도합니다.

UX 디자인에서 유사성을 사용하면 방문자에게 어떤 항목이 유사한지 명확하게 알 수 있습니다. 예를 들어, 반복적인 디자인 요소(예: 3-4줄의 텍스트가 수반되는 아이콘)를 사용하는 기능 목록에서 유사성 원칙을 통해 쉽게 스캔할 수 있습니다. 대조적으로 강조하고 싶은 기능의 디자인 요소를 변경하면 눈에 잘 띄고 방문자의 인식에서 더 중요합니다.

디자인 전체에 걸쳐 링크의 형식이 같은지 확인하는 것과 같은 단순한 일이라도 방문자가 사이트의 조직과 구조를 인식하는 방식의 유사성 원칙에 의존합니다.

계속

연속성의 법칙은 선이 실제로 어떻게 그려졌는지에 관계없이 인간의 눈은 선을 볼 때 가장 부드러운 경로를 따를 것이라고 가정합니다.

이 연속은 방문자의 눈을 특정 방향으로 안내하는 것이 목표일 때 유용한 도구가 될 수 있습니다. 페이지에서 가장 간단한 경로를 따르므로 가장 중요한 부분이 해당 경로에 포함되어야 합니다.

시선은 자연스럽게 선을 따라가기 때문에 일련의 항목을 선으로 배치하면 자연스럽게 한 항목에서 다음 항목으로 시선을 끌게 됩니다. Amazon과 같은 사이트의 관련 제품 목록과 같이 수평 슬라이더가 그러한 예입니다.

폐쇄

폐쇄는 가장 멋진 게슈탈트 원칙 중 하나이며 이미 이 글의 시작 부분에서 다루었습니다. 당신의 두뇌가 전체를 만들기 위해 디자인이나 이미지의 누락된 부분을 채울 것이라는 생각입니다.

가장 단순한 형태의 폐쇄 원리는 눈이 끝까지 점선과 같은 것을 따라갈 수 있도록 합니다. 그러나 World Wildlife Fund와 같이 로고에서 더 복잡한 응용 프로그램을 흔히 볼 수 있습니다. 판다 윤곽선의 큰 덩어리가 누락되었지만 두뇌는 누락된 부분을 채우는 데 문제가 없어 전체 동물을 볼 수 있습니다.

Closure는 USA Network, NBC, Sun Microsystems 및 Adobe를 포함한 다른 예와 함께 로고 디자인에 자주 사용됩니다.

UX 및 UI 디자인에서 작동하는 클로저의 또 다른 매우 중요한 예는 사용자가 왼쪽이나 오른쪽으로 스와이프하면 더 많은 것을 찾을 수 있다는 것을 보여주기 위해 사용자의 화면에서 희미해지는 부분적인 이미지를 표시하는 것입니다. 부분 이미지가 없으면, 즉 전체 이미지만 표시되는 경우 뇌는 더 많이 볼 수 있다고 즉시 해석하지 않으므로 사용자가 스크롤할 가능성이 줄어듭니다(닫힌 것이 이미 명백하기 때문에).

근접성

근접성은 요소가 서로 얼마나 가까운지를 나타냅니다. 가장 강력한 근접 관계는 겹치는 대상 간의 관계이지만 개체를 ​​단일 영역으로 그룹화하는 것만으로도 강력한 근접 효과를 얻을 수 있습니다.

물론 반대의 경우도 마찬가지입니다. 요소 사이에 공백을 넣어 다른 특성이 동일하더라도 분리를 추가할 수 있습니다.

이 서클 그룹을 예로 들어 보겠습니다.

UX 디자인에서 근접성은 사용자가 하드 보더와 같은 것을 사용하지 않고 특정 항목을 그룹화하도록 하기 위해 가장 자주 사용됩니다. 각 그룹 사이에 공간을 두고 비슷한 것들을 더 가깝게 배치함으로써 시청자는 원하는 조직과 구조를 즉시 파악할 수 있습니다.

피규어/그라운드

도형/접지 원리는 뇌가 음의 공간을 처리하는 방식을 이용한다는 점에서 폐쇄 원리와 유사합니다. 소셜 미디어의 밈이나 로고의 일부로(이미 언급한 FedEx 로고와 같은) 이 원칙의 예를 본 적이 있을 것입니다.

뇌는 이미지의 전경(그림 또는 초점)과 배경(그림이 놓이는 영역)에 있는 것으로 간주하는 물체를 구별합니다. 흥미로운 점은 전경과 배경에 실제로 다음과 같이 두 개의 별개 이미지가 포함되어 있을 때입니다.

이 이미지에서 두 얼굴 사이에 촛대나 꽃병을 만드는 더 간단한 예를 볼 수 있습니다.

일반적으로 뇌는 이미지의 더 큰 영역을 지면으로, 더 작은 영역을 그림으로 해석합니다. 그러나 위의 이미지에서 볼 수 있듯이 더 밝고 어두운 색상이 그림으로 보이는 것과 땅으로 보이는 것에 영향을 줄 수 있음을 알 수 있습니다.

Figure/ground 원리는 제품 디자이너가 초점을 강조하고 싶을 때, 특히 초점이 활성화되어 있거나 사용 중일 때(예: 모달 창이 팝업되고 사이트의 나머지 부분이 배경으로 사라지거나 검색 표시줄을 클릭하면 검색 표시줄과 사이트의 나머지 부분 간의 대비가 높아집니다.

대칭과 질서

대칭과 질서의 법칙은 독일어로 "좋은 모습"을 의미하는 프라그나츠( pragnanz )로도 알려져 있습니다. 이 원칙이 말하는 바는 당신의 두뇌가 모호한 모양을 가능한 한 단순한 방식으로 인식할 것이라는 것입니다. 예를 들어, 올림픽 로고의 모노크롬 버전은 곡선 모음이 아니라 일련의 겹치는 원으로 표시됩니다.

다음은 게슈탈트 설계 원칙 " pragnanz "의 또 다른 좋은 예입니다.

당신의 두뇌는 왼쪽의 이미지를 직사각형, 원, 삼각형으로 해석할 것입니다. 각각의 윤곽선이 전체 이미지보다 단순한 모양이기 때문에 불완전한 경우에도 마찬가지입니다.

공통 운명

공통 운명은 원래 게슈탈트 이론에 포함되지 않았지만 이후 추가되었습니다. UX 디자인에서 그 유용성은 간과될 수 없습니다. 이 원칙은 사람들이 같은 방향을 가리키거나 같은 방향으로 움직이는 것을 함께 그룹화한다는 것입니다.

자연에서 우리는 새 떼나 물고기 떼 같은 것들에서 이것을 봅니다. 그것들은 개별 요소의 묶음으로 구성되어 있지만 겉보기에는 하나로 움직이기 때문에 우리의 뇌는 그것들을 그룹화하고 단일 자극으로 간주합니다.

이것은 현대적인 디자인에서 애니메이션 효과가 더 널리 퍼지게 됨에 따라 UX에서 매우 유용합니다. 이 원칙의 이점을 얻기 위해 요소가 실제로 움직일 필요는 없지만 움직이는 느낌 을 주어야 합니다.

UX 디자인의 게슈탈트 원칙

모든 심리학적 원리와 마찬가지로 게슈탈트의 시각적 인식 원리를 디자인 작업에 통합하는 방법을 배우면 사용자 경험을 크게 향상시킬 수 있습니다. 인간의 두뇌가 작동하는 방식을 이해하고 사람의 타고난 성향을 활용하면 사용자가 웹 사이트를 처음 방문하더라도 편안함을 느낄 수 있는 보다 원활한 상호 작용이 가능합니다.

게슈탈트 원칙은 거의 모든 디자인에 비교적 쉽게 통합할 수 있으며 사용자가 취하기를 원하는 행동으로 사용자를 안내하는 매끄럽고 자연스러운 상호 작용을 제공하는 디자인으로 사용자의 주의를 끌기 위해 싸우는 것처럼 보이거나 무심코 보이는 디자인을 빠르게 향상시킬 수 있습니다.

Toptal Design 블로그에 대한 추가 정보:

• 디자인 원칙: 계층 소개
• UI 디자인 모범 사례 및 일반적인 실수
• 디자인에서 강력한 게슈탈트 원칙을 사용하는 방법(인포그래픽 포함)
• 정보 아키텍처에 대한 종합 가이드
• 이러한 성공적인 상호 작용 디자인 원칙으로 UX를 향상시키십시오.