UI 디자인에서 형태의 원칙을 정의합니다. (Gestalt principles in UI design)

이 글은 Eleana Gkogka Gestalt principles in UI design 글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다.

비주얼 커뮤니케이션의 마스터 매니퓰레이터가되는 법.

이상한 모양의 구름이 친숙한 동물이나 물체를 닮은 것을 본 적이 있나요? 여러분은 왜, 혹은 어떻게 이 연관성을 만드는지 궁금해 해본 적이 있나요? 이것은 모두 여러분의 뇌가 작용하기 때문이에요!
presentation
여러분의 뇌는 항상 이전의 경험이나 시각적인 패턴을 비교하고 점을 연결함으로써 세상을 이해하려고 노력합니다. 그것은 모양과 형태를 인지하고, 정보를 분류하고, 큰 그림을 그릴 수 있는 '이상한' 방식을 가지고 있습니다.
두뇌가 어떻게 작용하는지 이해하는 것은 여러분이 더 현명한 디자이너(비주얼 커뮤니케이션의 마스터 매니퓰레이터)가 되도록 도와줄 것입니다. 어떤 시각적 요소가 특정 상황에서 가장 효과적인지 결정하는데 도움이 될 수 있으므로 이를 사용하여 인식에 영향을 주고 직접적인 주의를 기울이며 행동 변화를 일으킬 수 있습니다. 목표 지향적이고 문제 해결적이며 직관적인 디자인, 사용자 인터페이스 디자인에 있어 특히 유용합니다.
"훌륭한 디자이너는 시각적 인식에서 심리학이 담당하는 강력한 역할을 이해합니다. 누군가의 시선이 디자인 창작물을 보았을 때 어떻게 될까요? 당신의 작품이 공유하는 메시지에 그들의 마음은 어떻게 반응합니까? " - Autodesk의 브랜드 컨텐츠 전략가 Laura Busche
시각적 디자인과 심리학은 서로 연결되어 있고 서로에게 영향을 미칠 수 있다. 게슈탈트 원리는 우리가 이 링크들을 이해하고 통제하는데 도움을 줄 수 있습니다.

게슈탈트란 무엇입니까?

Gestalt (형태, 독일어로-모양)는 1920년대에 독일의 심리학자들이 개발한 시각적 인식 원리는 그룹입니다. 이것은 "조직화된 전체는 부분의 합보다 더 큰 것으로 인식된다"는 이론에 기초하여 만들어졌습니다.
"전체는 부분의 합이 아닙니다."  — 커트 코프카
게슈탈트 원리는 특정 조건이 적용될 때 사람들이 시각적 요소를 어떻게 인식하는지 설명하려고 합니다. 이들은 4가지 주요 아이디어로 만들어졌습니다 :

발생 Emergence

사람들은 일반적으로 윤곽이 뚜렷한 형태로 먼저 요소를 식별하는 경향이 있습니다. 우리의 뇌는 세밀한 물체보다 더 빨리 간단하고 잘 정의된 물체를 인식합니다.
presentation

구체화 Reification

사람들은 누락된 부분이 있어도 객체를 인식할 수 있습니다. 우리의 두뇌는 우리가 보았던 패턴을 우리의 기억에 저장된 친숙한 패턴과 일치시키고 그 틈을 메웁니다.
presentation

다중 안정성 Multi-Stability

사람들은 모호한 물건을 여러 가지 방식으로 해석합니다. 우리의 두뇌는 확실성을 추구하는 대안들 사이에서 사이를 왔다 갔다 할 것입니다. 결과적으로, 한 가지 관점이 더 지배적이 되는 반면 다른 관점은 더 보기 어려워질 것입니다.
presentation

불변성 Invariance

사람들은 회전, 크기 및 번역과는 별도로 간단한 개체를 인식할 수 있습니다. 우리의 뇌는 다른 모습에도 불구하고 대상을 다른 시각에서 인식할 수 있습니다.
presentation


오늘날의 UI 디자인을 알려주는 게슈탈트 원칙이 있습니다.

근접성 Proximity

서로 가까이 배열된 요소는 더 멀리 떨어져 있는 요소보다 더 관련이 깊은 것으로 인식됩니다. 이러한 방식으로 다른 요소들은 주로 개별 요소가 아닌 그룹으로 간주됩니다.
presentation

근접 원리(Proximity)는 UI 디자인에 어떻게 적용됩니까?

유사한 정보를 그룹화하고, 내용을 정리하고, 레이아웃을 정리하기 위해 UI 설계에서 Proximity 원리를 사용할 수 있습니다. 이것의 올바른 사용은 시각적 인 커뮤니케이션과 사용자 경험에 긍정적인 영향을 미칠 것입니다.
원칙대로 관련 있는 항목은 서로 가까이 있어야 하며 관련 없는 항목은 더 멀리 떨어져 있어야 합니다. 백색의 공간은 의도한 방향으로 사용자의 눈을 안내하는 대비를 일으키기 때문에 여기서 중요한 역할을 합니다. 흰색 공간은 시각적 계층과 정보 흐름을 향상시켜 읽기 및 스캔하기 쉬운 레이아웃에 기여할 수 있습니다. 그것은 사용자들이 그들의 목표를 더 빨리 달성하고 콘텐츠에 더 깊이 파고들도록 도울 것입니다.
presentation
탐색, 카드, 갤러리 및 배너에서 목록, 본문 및 페이지 등에 이르기까지 Proximity 원리를 거의 모든 곳에서 적용할 수 있습니다.

공통 영역 Common Region

근접성(Proximity) 원리과 마찬가지로 동일한 영역 내에 배치된 요소는 그룹화된 것으로 인식됩니다.
presentation

공통 영역(Common Region) 원리는 UI 디자인에 어떻게 적용됩니까?

공통 영역 원리는 특히 유용합니다. 정보 그룹화 및 콘텐츠 구성에 도움이 될 수 있지만 콘텐츠 분리 또는 초점 역할을 수행할 수도 있습니다. 계층 구조, 스캔 가능성을 향상시키고 정보를 홍보하는데 도움이 됩니다.
공통 영역 원리는 많은 다른 요소를 함께 묶어서 더 큰 그룹 내에서 통합되도록합니다. 우리는 선, 색, 모양 및 그림자를 사용하여 그것을 달성 할 수 있습니다. 상호 작용이나 중요성을 나타내는 요소를 가장 앞으로 가져 오는 데 자주 사용될 수 있습니다.
presentation
공통 영역의 좋은 예는 카드 UI 패턴입니다. 서로 다른 정보 비트가 하나로 표시된 잘 정의된 직사각형 공간이 있습니다. 배너와 테이블도 좋은 예입니다.

유사성 Similarity

유사한 시각적 특성을 공유하는 요소는 유사한 특성을 공유하지 않는 요소보다 더 관련이 있다고 인식됩니다.
presentation

유사성(Similarity) 원칙은 UI 디자인에 어떻게 적용됩니까?

우리는 서로 다른 요소를 그룹화 된 또는 패턴으로 인식하는 경향이 있습니다. 우리는 그들이 같은 목적을 수행한다고 생각할 수도 있습니다. 유사성은 그룹 내의 개체를 구성하고 분류하고 특정 의미 또는 기능과 연결시키는 데 도움이 될 수 있습니다.
유사한 요소로 인식되는 요소를 서로 다르게 만드는 여러 가지 방법이 있습니다. 여기에는 색상, 크기, 모양, 질감, 치수 및 방향의 유사성이 포함됩니다. 그 중 일부는 다른 것보다 더 강하게 의사 소통을합니다 (예 : 컬러> 크기> 모양). 유사성 (Similarity)이 발생하면, 나머지와 다른 것으로 강조 될 수 있습니다. 이것을 'Anomaly'라고하며 대비 또는 시각적 무게를 생성하는 데 사용할 수 있습니다. 스캔 가능성, 발견 가능성 및 전반적인 흐름을 지원하면서 특정 컨텐츠 (중요 포인트)에 사용자의 관심을 끌 수 있습니다.
presentation
네비게이션, 링크, 버튼, 머리글, CTA 등에 유사성의 원칙을 사용할 수 있습니다.

폐쇄 Closure

요소 그룹은 종종 단일 인식 가능한 형태 또는 그림으로 인식됩니다. 클로저는 객체가 불완전하거나 일부분이 밀폐되지 않은 경우에도 발생합니다.
presentation

Closure 원칙은 UI 디자인에 어떻게 적용됩니까?

폐쇄 원리에 따르면, 적절한 양의 정보를 제공할 때, 우리의 뇌는 그 차이를 채우고 통합된 전체를 만들어냄으로써 결론을 성급히 내립니다. 이렇게 하면 정보를 전달하는 데 필요한 요소 수를 줄이고, 복잡성을 줄이며, 설계를 더욱 매력적으로 만들 수 있습니다. 폐쇄는 시각적인 소음을 최소화하고 메시지를 전달하여 꽤 좁은 공간 내에서 개념을 강화하도록 도와줍니다.
presentation
단순함이 의미를 신속하고 명확하게 전달하는 데 도움이 되는 아이콘그래피도 (Iconography)의 폐쇄 원리를 사용할 수 있습니다.

대칭 Symmetry

대칭적 요소는 거리에 상관없이 함께 속하는 것으로 인식되어 견고성과 질서의 느낌을 줍니다.
presentation

대칭 원리는 UI 디자인에 어떻게 적용됩니까?

대칭 요소는 단순하고 조화롭고 시각적으로 즐겁습니다. 우리의 눈은 세상을 이해하기 위해 질서와 안정성과 함께 그 속성을 추구합니다. 이러한 이유로 대칭(Symmetry)은 정보를 빠르고 효율적으로 전달하는 데 유용한 도구입니다. 대칭(Symmetry)은 편안함을 느껴 우리가 중요한 것에 집중하도록 도와줍니다.
대칭적 구성은 만족스럽지만 약간 지루하고 정적이 될 수도 있습니다. 시각적 대칭은 더 역동적이고 흥미로운 경향이 있습니다. 비대칭 요소를 대칭적인 설계에 추가하면 예를 들어 관심 지점이나 영업 활용 방안 등에 유용한 인상을 주면서 주의를 끌 수 있습니다. 적절한 양의 대칭과 비대칭은 모든 디자인에서 중요합니다.
presentation
포트폴리오, 갤러리, 제품 디스플레이, 목록, 네비게이션, 배너 및 컨텐츠가 많은 페이지에 대칭을 사용하는 것이 좋습니다.

연속성 Continuation

선이나 부드러운 곡선으로 배열된 요소는 무작위로 배열된 요소 또는 거친 선으로 배열된 요소보다 더 연관이 있다고 인식됩니다.
presentation

연속성 원칙은 UI 디자인에 어떻게 적용됩니까?

연속 선을 따르는 요소는 그룹화된 것으로 인식됩니다. 선 세그먼트가 매끄러울수록 우리는 그것들을 통일 된 모양으로 보입니다. 우리의 마음은 최소한의 저항의 길을 선호합니다.
연속성은 구성을 통해 방향과 움직임을 해석하는 데 도움이 됩니다. 요소를 정렬할 때 발생하며 페이지를 부드럽게 움직여 가독성을 높일 수 있습니다. 연속성 원칙은 그룹화된 정보의 인식을 강화하고, 순서를 만들고, 다양한 콘텐츠 세그먼트를 통해 사용자를 안내합니다. 연속성의 중단은 섹션의 종료를 의미할 수 있으며 새로운 내용에 주의를 기울일 수 있습니다.
presentation
행과 열의 선형 배열은 연속성의 좋은 예입니다. 메뉴 및 하위 메뉴, 목록, 제품 준비, 회전식 메뉴(carousels), 서비스 또는 프로세스 / 진행 상태 표시에 사용할 수 있습니다.

공동 운명 Common Fate

동일한 방향으로 이동하는 요소는 다른 방향으로 이동하는 요소 또는 전혀 움직이지 않는 요소보다 더 관련이 있는 것으로 인식됩니다.
presentation

공동 운명 원칙은 UI 디자인에 어떻게 적용됩니까?

요소가 얼마나 멀리 떨어져 있든, 얼마나 서로 다르게 보일 수 있는지에 상관없이, 만약 그들이 함께 움직이거나 변화한다면, 그것들은 관련이 있는 것으로 인식됩니다. 이러한 효과는 움직임이 암시된 경우에도 다른 시각적 요소에 의해 발생할 수 있습니다.
공동 운명 원칙은 요소가 동시에 같은 방향과 속도로 이동할 때 더 강력합니다. 관련 정보를 그룹화하고 작업을 결과와 연결하는 데 도움이 될 수 있습니다. 동기화된 이동이 중단되면 사용자의 주의를 끌 수 있으며 특정 요소 또는 기능으로 이동할 수 있습니다. 또한 서로 다른 그룹 또는 상태 간의 관계를 설정할 수 있습니다.
presentation
공동 운명 원칙은 확장 가능한 메뉴, 어코디언, 툴팁, 제품 슬라이더, 시차 스크롤 및 스위핑 인디케이터에 사용할 수 있습니다.

결론

사용자 인터페이스 디자인은 예쁜 픽셀과 화려한 그래픽에 대한 것만은 아닙니다. 주로 커뮤니케이션, 성능 및 편의성에 관한 것입니다. 게슈탈트 원리는 항상 우리가 이러한 목표를 달성하는 데 도움을 줍니다. 즉, 사용자에게 즐거운 경험을 제공하고 비즈니스를 성공적으로 이끌 수 있습니다.

이 글은 번역 글입니다. 원본 링크입니다.



presentation
안녕하세요! Early adopter입니다.페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp