웹 디자인에서 근접성이란 무엇이며 어떻게 사용할 수 있습니까?

인간의 마음이 어떻게 작동하는지 흥미롭습니다. 사람들이 자신의 세계를 시각적으로 받아들이는 방식에 대해 궁금한 적이 있습니까?

20세기에 독일 심리학자 Max Wertheimer, Kurt Koffka, Wolfgang Kohler는 이 질문에 대한 답을 찾기 위해 노력했습니다. 그들은 일련의 연구를 수행한 결과, 사람들이 주변 세계를 보는 방식을 설명하는 일련의 간단한 지침인 게슈탈트 원칙을 개발했습니다.

근접성은 게슈탈트 원칙 중 하나로 간주됩니다. 이 원칙은 현대 사용자 인터페이스 디자인의 미학에 중대한 영향을 미칩니다. 이 블로그에서는 웹 디자인에서 근접성이 무엇을 의미하고 어떻게 사용할 수 있는지 알려 드리겠습니다.

웹 디자인에서 근접성이란 무엇입니까?

근접성의 개념은 시각적으로 정렬되어야 하는 요소와 가능한 한 최소한의 혼동을 달성하는 것을 목표로 합니다. 관련이 없는 내용은 분리하여 연결되지 않음을 강조하는 것이 중요합니다.

예를 들어, 여러 소셜 미디어 플랫폼의 아이콘이 웹사이트에서 따로 떨어져 있지 않고 함께 그룹화되어 있다는 것을 눈치채셨을 것입니다. 모든 것을 한 위치에 두는 기술과 더 유사합니다.

시각적 모호성을 최소화하고 이해를 촉진하기 위해 근접성을 사용하는 레이아웃이 더 이해하기 쉽습니다. 근접성은 웹사이트 레이아웃의 구조에도 도움이 됩니다. 근접성의 적절한 적용은 사용자 경험에 중요하고 유익한 영향을 미칩니다.

디자이너는 레이아웃을 덜 복잡하게 보이게 하고 집합적으로 연결된 변수를 그룹화하는 것과 같은 주요 목표를 달성할 수 있으므로 근접 원칙의 이점을 얻습니다.

웹 디자인에서 근접성을 사용하는 방법은 무엇입니까?

여백

디자인에서 여백의 중요성을 이해하는 것은 디자인에서 근접성 개념을 성공적으로 채택하는 첫 번째 단계입니다.

디자인에 공백이 없다는 것은 일반적인 문제입니다. 사용자 경험과 관련하여 공백은 페이지의 실제 콘텐츠만큼 영향을 줄 수 있습니다. 여백은 사용자의 시선을 유도하고 대비를 생성하며 사용자의 마음에 지속적인 영향을 줍니다.

디자이너는 디자인을 통해 웹사이트의 특성을 전달합니다. 텍스트와 이미지를 통해 가능합니다. 그러나 효과적인 디자인은 웹사이트의 요소를 향상시킬 수 있는 잘 조직된 여백이 있는 것입니다.

시각적 계층 구조 만들기

웹사이트의 구조와 콘텐츠가 구성되고 표시되는 방식은 효율적인 근접성의 구성 요소입니다. 디자이너는 효과적인 근접성이라는 목표를 달성하기 위해 매력적인 시각적 콘텐츠 계층을 구성할 수 있어야 합니다. 웹사이트에 명확한 시각적 계층 구조를 제공하는 것이 중요하므로 공백을 효율적으로 사용하고 유사한 요소를 함께 배치하는 것이 중요합니다.

웹 사이트 부분을 그룹화하고 추가로 하위 그룹화하는 것은 계층 구조를 제자리에 유지하는 가장 좋은 기술입니다. 사용자는 이 계층 구조의 결과로 자신이 있었던 곳과 가고 싶은 곳을 더 잘 파악할 수 있으며 웹 사이트의 목적을 표현하는 데 도움이 됩니다.

사용자가 이를 볼 수 있다는 사실은 사용자가 관련 정보가 저장된 위치를 인식하고 이해하고 있음을 나타내며, 이는 귀하가 웹사이트의 메시지와 목표를 성공적으로 전달했음을 나타냅니다.

콘텐츠 이해도 향상

콘텐츠가 왕입니다. 많은 제품에서 콘텐츠 자료는 인간이 처음부터 콘텐츠를 사용하기 시작하는 동기입니다. 우수한 명료성(독자가 작성된 텍스트 내용을 인식할 수 있는 편의성)과 가독성(독자가 기호를 해독할 수 있는 편의성)은 제품 디자인의 핵심 요소입니다.

글꼴 패밀리, 글꼴 크기 및 텍스트 콘텐츠 대비를 비롯한 많은 요소가 명확성과 가독성에 기여할 수 있습니다. 그러나 웹 페이지에서 콘텐츠 자료를 지연 없이 추가로 구성하는 방식은 콘텐츠 자료의 가독성과 명확성에 영향을 미칩니다.

텍스트 콘텐츠가 서식 없이 제공되는 동안 가독성이 향상될 수 있습니다. 단락이나 섹션으로 문장을 그룹화하고 공백 덩어리로 구분하여 간단하고 쉽게 스캔할 수 있는 블록으로 콘텐츠 자료를 제공함으로써 고객이 텍스트 콘텐츠를 테스트하고 연구할 수 있도록 지원합니다.

스캔 가능한 레이아웃

계층 구조로 구성되고 논리적인 방식으로 분류된 콘텐츠를 읽고 스캔하는 것이 훨씬 간단해집니다. 아키텍처와 디자인을 구축할 때 웹 사이트는 사용자에게 콘텐츠에 과부하가 걸리지 않도록 근접성을 사용해야 합니다.

따라서 제한된 양의 자료가 있는 웹 사이트에서 근접성 개념을 실행하는 것이 비교적 간단하다는 사실에도 불구하고 많은 양의 콘텐츠가 있는 웹 사이트에서는 근접성이 훨씬 더 중요합니다. 결과적으로 레이아웃이 사용자가 단순하고 읽기 쉽고 스캔할 수 있는지 확인해야 합니다.

특정 요소 강조

강조는 사람 경험(UX) 디자인의 최대 핵심 개념 중 하나입니다. 웹 페이지에서 정확한 요소나 콘텐츠 자료를 우선시하는 것은 디자이너의 가장 큰 책임 중 하나입니다.

디자이너는 세부 사항을 크게 만들거나 추가 대비를 포함하여 적절한 결과를 얻기 위해 많은 독점적인 전략을 사용할 수 있지만 실제 세부 사항을 변경하지 않고도 동일한 결과를 얻을 수 있습니다. 대신 디테일 전반에 걸쳐 빈약한 영역의 양을 가지고 놀 수 있습니다.

가난한 지역과 개인적인 관심 사이에는 즉각적인 연결이 있습니다. 당신이 업로드하는 매우 열악한 영역과 세부 사항은 시청자에게 더욱 중요해집니다. 이것은 자연스럽게 발생합니다. 왜냐하면 그 사람의 관심은 그 장소에 그들의 관심을 끄는 다른 것이 없다는 사실 때문에 실제로 매우 가난한 지역이 있는 세부적인 방향으로 안내될 수 있기 때문입니다.

인터넷 페이지에서 어떤 세부 사항이 최대 관심을 끄는지 인식하기 어려울 수 있다는 점을 언급할 가치가 있습니다. 따라서 인터넷 레이아웃 소프트웨어 프로그램을 적용하여 레이아웃의 프로토타입을 만들고 5-2차 테스트로 검증하는 것이 좋습니다.

청중을 구성하는 개인에게 5초 동안 프로토타입을 보여 준 후 "기억할 수 있는 주요 요소는 무엇입니까?"라고 질문합니다. 그들이 당신이 볼 필요가 있는 세부 사항(또는 요소)을 호출하면 모두 좋습니다.

콘텐츠를 통해 시청자의 시선 유도

근접성의 원칙은 시청자의 눈을 한 요소에서 다른 요소로 이동시키는 좋은 방법을 만드는 데 도움이 됩니다. 여백을 조정하여 사용자의 관심을 명확하게 끌 수 있는 초점 요소 또는 영역을 손쉽게 만들 수 있습니다.

초점 요소를 만드는 것은 항상 레이아웃 내부에 레이아웃 요소(텍스트 콘텐츠, 이미지 또는 실제 컨트롤과 함께)를 둘러쌀 수 있는 좋은 방법인 인터넷 레이아웃 그리드를 성장시키면서 진화하기 시작합니다.

그리드를 확보한 후 주요 콘텐츠 자료 섹션을 통해 수동 고객에 대한 요소를 설정하려고 합니다. 아래에서 볼 수 있듯이, 이것이 바로 Evernote가 텍스트 콘텐츠 블록을 일러스트레이션과 페어링하는 데 도움을 주는 일입니다. 결과적으로 시청자의 눈은 이 페이지를 스크롤할 때 지그재그 경로를 따릅니다.

마무리

다양한 모니터와 해상도에 맞게 레이아웃하는 동안 UI 요소 간의 상대적인 거리에 초점을 맞추는 것이 중요합니다. 큰 노트북 모니터에 바로 나타나는 디자인이 작은 셀룰러 모니터에는 제대로 나타나지 않습니다.

레이아웃이 더 작은 모니터를 수용하도록 축소되면 요소 사이의 간격이 최소화되어 UI 요소의 가정된 관계가 깨질 수 있습니다. 다양한 모니터와 해상도에서 레이아웃을 확인하여 레이아웃이 잘 확장되는지 확인하는 것이 중요합니다. Google Chrome Dev 장비를 적용하여 셀룰러 기기를 시뮬레이션하는 것은 실행 가능합니다.

웹사이트 사용자 경험을 개선하는 방법도 더 알고 싶을 것입니다. 웹 페이지를 디자인하거나 다시 디자인하려면 저희에게 연락하십시오.