목차
UX 및 인터랙션 디자인 분야에서 가장 영향력 있는 심리학 이론 중 하나는 게슈탈트 이론입니다. 게슈탈트(Gestalt)란 독일어로 형태 또는 모양 을 뜻하는 독일 심리학자들에 의해 창시된 이론이다. 이름에서 알 수 있듯이 게슈탈트 원칙의 배후에 있는 아이디어는 인간이 개체 그룹을 개별 개체가 아닌 패턴으로 인식한다는 것입니다. UX/UI 디자이너로서 작업에 적용하십시오. 이 기사는 게슈탈트 원칙을 사용하여 사람들이 적은 노력으로 목표를 달성하는 데 도움이 되는 더 나은 UX 및 UI 디자인을 만드는 방법에 대한 몇 가지 아이디어를 제공합니다.
또한보십시오: 북극곰을 그리는 방법유사성의 법칙
또한보십시오: 우리가 사랑하는 영감을 주는 퀴어 만화 캐릭터
유사성의 원칙은 개체가 물리적으로 유사할 때 그들을 함께 그룹화하고 동일한 기능 . 예를 들어, 아래 이미지에서 버건디 빨간색 원이 포함된 선은 색상이 다르기 때문에 이미지의 나머지 부분과 구분하기가 매우 쉽습니다.
유사성의 원칙에 대한 예입니다. 저자의 사진.
UX 및 UI 디자인의 유사성 사용
당신의 회사가 미국과 캐나다 전역의 이탈리아 음식 마니아들이 사용하는 "일미오 셰프"라는 앱(저희는이 문서의 나머지 부분). 귀하의 UX 연구원이 귀하에게 건네준 최근 보고서에 따르면 이탈리아 음식을 주문할 때 사용자는 주로 자신에게 가장 가까운 레스토랑이 어디인지에 관심이 있다고 합니다. 결국 우리 모두는 라자냐나 피자가 아직 신선하고 따뜻할 때 배달되기를 원할 것입니다. 그렇죠?
앱 사용자가 자신에게 가장 가까운 레스토랑을 쉽게 확인할 수 있도록 하기 위해 UI에서 이러한 레스토랑을 강조 표시하여 유사성의 원칙을 사용할 수 있습니다. 아래 이미지에서 이러한 옵션을 노란색(오른쪽)으로 강조 표시하면 가장 가까운 레스토랑과 멀리 있는 레스토랑 간의 차이를 시각적으로 강조하여 큰 차이를 만드는 방법을 확인할 수 있습니다. 이것이 유사성의 원칙을 사용하여 사용자가 원하는 것을 빠르게 찾을 수 있도록 돕는 방법입니다.
게슈탈트의 유사성 원칙 사용. Image by author.
근접의 법칙
근접의 원리는 물체가 가까이 있을수록 더 많이 보인다는 것입니다. related 보다 더 멀리 떨어진 개체보다. 예를 들어 첫 번째 이미지와 두 번째 이미지에는 같은 양의 원이 있습니다. 그러나 두 번째 이미지에서 특정 열은 서로 더 가깝고 하나의 큰 그룹이 아닌 세 개의 개별 그룹이 있는 인상을 줍니다.
근접성 - 예 1 - 큰 그룹. 저자의 이미지.
근접 - 예 2 - 3개의 개별 그룹. 저자의 이미지.
UX 및 UI 디자인에서 근접성 사용
현장에서 예를 들어 보겠습니다.
이번에는 귀하가 "일미오 셰프" 앱의 성능을 보고 싶어하는 임원이라고 가정해 보겠습니다. 재무 성과, 사용자 참여 및 만족도를 측정하는 KPI를 확인하려고 합니다. 처음에 귀하의 정보 시각화 전문가는 귀하와 다른 모든 경영진이 숫자에 빠져 더 많은 질문을 하게 만드는 대시보드를 아래에 만듭니다. 한 달이 지나면 많은 사람들이 이 대시보드 사용을 완전히 중단합니다.
KPI 대시보드 - 일미오 셰프. 저자의 이미지.
이 시점에서 정보 시각화 전문가에게 돌아가 대시보드를 재설계하여 사람들이 큰 그림을 더 쉽게 이해할 수 있도록 요청합니다. 이 경우 근접성의 원칙이 유용하며 아래에서 새로운 디자인을 볼 수 있습니다. 여기에는 KPI 유형별로 구분된 3개의 그룹이 포함되어 있으며 모든 사람이 재무 성과, 참여 및 만족도 측면에서 앱이 어떻게 작동하는지 이해하는 데 도움이 됩니다. 개체를 함께 그룹화하고 그룹 사이에 공백을 더 많이 사용하면 사용자가 정보를 더 빨리 소화하는 데 도움이 될 수 있습니다.
대시보드 디자인에서 게슈탈트의 근접성 원리 사용. 저자의 이미지.
법칙연속성
연속성의 원리는 일단 눈이 물체를 따라가기 시작하면 다른 물체를 만날 때까지 그 방향으로 "움직임"을 계속 따라간다는 것입니다. 이 움직임은 우리가 정보를 찾기 위해 거쳐야 하는 동일한 경로의 일부로 대상을 인식하는 데 도움이 됩니다. 아래 이미지는 연속성 원리를 사용하여 눈을 특정 방향으로 안내하는 시각적 패턴을 만드는 방법을 보여줍니다.
연속성 원리의 예입니다. 저자의 이미지.
Using Continuity In UX And UI Design
당신의 UX 연구원은 다음과 같은 새로운 보고서를 발표했습니다. 일미오 셰프 앱을 사용하는 주된 동기는 매주 새로운 이탈리안 레스토랑을 접할 수 있기 때문에 음식 탐색입니다. 아래 이미지(왼쪽)에서 사람들이 현재 UI 디자인으로 옵션을 몇 번이나 스와이프하는지 보여주는 메트릭을 보고 어떤 옵션을 사용할 수 있는지 확인하기 위해 평균적으로 두 번 이상 스와이프하지 않는다는 것을 확인합니다.
연속성의 원칙(아래 이미지의 오른쪽)을 사용하여 UX 디자이너가 평균 10번 정도의 스와이프 횟수를 늘리는 데 도움을 주었습니다. 어떻게 그런 일이 일어났습니까? 이미지의 일부를 숨기고 거기에 무엇이 있는지 보기 위해 왼쪽 또는 오른쪽으로 스와이프해야 한다는 사실을 강조 표시함으로써 사용자의 눈은 문자 그대로 "스와이프" 움직임을 생성하도록 안내되었고 더 많은더 많은 레스토랑과 그들이 제공하는 것을 탐색하도록 동기를 부여합니다. 이것은 이미 본질적으로 그렇게 하려는 동기가 있더라도 이전 디자인에서는 전혀 동기를 부여하지 않는 것입니다.
UX/UI 디자인에서 게슈탈트의 연속성 원칙 사용. 작성자 이미지.
요약하면 이 기사에 제시된 게슈탈트 원칙을 UX 및 UI 디자인에 사용하면 사용자가 정보를 더 빠르고 잘 이해하는 데 도움이 될 수 있습니다. 그것. 또한 가장 좋아하는 행동을 하도록 동기를 부여하여 제품에 대한 만족도를 높일 수 있습니다.
표지에는 Vectornator에서 편집한 Miklos Philips의 아트워크가 포함되어 있습니다.
