마음의 눈 – 데이터 시각화 심리학 살펴보기

데이터 시각화는 데이터에 대한 이야기를 전달하는 좋은 방법입니다. 그러나 가장 좋은 방법은 무엇입니까? 인간의 지각과 인지에 대한 이해는 디자이너가 이를 효과적으로 수행하는 데 도움이 될 수 있습니다.

사람들은 수천 년 동안 시각적 요소를 사용하여 이야기를 전달하고 필수 질문에 대한 답변을 설명했습니다. 데이터 시각화의 가장 초기 예는 아마도 약 27,000년 전의 지도일 것이며 오랫동안 지리 이외의 다른 데이터 시각화를 보는 것은 거의 없었습니다.

우리의 뇌는 패턴과 연결을 인식하도록 독특하게 만들어졌습니까? 오늘날 우리는 데이터 시각화의 황금 시대에 살고 있습니다. 데이터를 효과적으로 전달하는 것은 어려울 수 있으며 그래프는 복잡한 데이터를 이해하고 새로운 관점에서 보는 데 도움이 될 수 있지만 청중에게 메시지를 적절하게 전송하거나 데이터를 기반으로 비즈니스 의사 결정을 내리는 데 있어 시각화는 중추적인 방법일 수 있습니다. 그것을 달성하기 위해. 그러나 데이터 시각화의 힘 이면 에는 무엇이 있습니까?

데이터 시각화 디자인의 역사적 맥락

데이터 시각화는 오랜 역사를 가지고 있으며 17세기와 19세기 사이에 상당한 발전을 이루었습니다. 정량적 데이터를 그래픽으로 표시하는 아이디어는 18세기에 르네 데카르트가 수학적 연산을 위한 값을 표시하기 위해 2차원 좌표계를 발명했을 때 나타났습니다. 이 시스템은 William Playfair가 오늘날 우리가 알고 있는 그래픽 형식을 개척했을 때 개선되었습니다. 그는 꺾은선형 차트와 막대형 차트를 발명했으며 나중에는 원형 차트와 원 그래프를 발명한 것으로 유명합니다.

수년에 걸쳐 정량적 그래프를 사용하는 것이 더 널리 보급되었습니다. 그들의 방법론과 효과는 Jacques Bertin의 책 The Semiology of Graphics 의 출판과 함께 20세기 후반에 크게 증가했습니다. 그의 작업은 정보를 직관적이고 명확하며 효율적으로 제시하기 위해 시각적 인식이 따라야 할 규칙과 패턴에 따라 작동한다는 것을 발견했기 때문에 결정적이었습니다.

Bertin은 다양한 유형의 차트의 효율성을 연구했습니다. 아래 예에서 원형 차트는 여러 국가에서 다양한 종류의 육류 생산을 보여줍니다. Bertin은 이것을 "쓸모없는" 것으로 간주했습니다. 중간에 매트릭스 시각화를 사용하여 상위 수준 패턴을 보다 즉각적으로 볼 수 있습니다. 그리고 오른쪽에서 국가와 육류 생산에는 자연적 질서가 없기 때문에 표시된 예를 포함하여 훨씬 더 명확성을 제공하는 다른 많은 매트릭스가 생성될 수 있습니다. 이 시나리오에서 범주를 재정렬하면 데이터 표시가 크게 향상되었습니다.

심리학은 데이터 시각화와 어떤 관련이 있습니까?

시각적 인식은 환경을 보고, 해석하고, 구성하는 능력입니다. 데이터 시각화는 인간 두뇌의 타고난 능력을 활용하기 때문에 매우 효과적일 수 있습니다. 빠르고 효율적입니다.

영향력 있는 미국 수학자이자 이론 통계학자인 John Tukey는 이렇게 말했습니다.

대뇌 피질에서 처리하는 인지는 훨씬 느리고 정보를 처리하는 데 더 많은 노력이 필요합니다. 데이터를 시각적으로 제시하면 우리의 지각을 가속화하고 인지 부하를 줄이는 데 도움이 됩니다.

아래 예에서 표를 통해 정확한 숫자를 볼 수 있습니다. 그러나 재생 가능한 수자원에 대한 최고 및 최저 수치를 신속하게 산출할 수 있습니까? 쉽지는 않지만 동일한 데이터를 오른쪽 막대 차트에 시각적으로 표시하면 훨씬 더 명확하고 이해하기 쉬워집니다.

다른 감각과 비교하여 시각적 지각의 지배적인 영향은 덴마크 물리학자 Tor Norretranders의 예에 적절하게 설명되어 있습니다. 그는 인간의 감각 능력을 표준 컴퓨터 처리량으로 변환하여 시각 효과의 힘을 보여주었습니다. 컴퓨터 네트워크와 동일한 대역폭을 갖기 때문에 시력이 가장 우수합니다. 채널 용량은 촉각보다 10배, 청각이나 후각보다 100배 강합니다. 오른쪽 하단 모서리에 있는 작은 사각형은 감각 경험을 인지적으로 인식하는 곳입니다.

사전 주의 처리

시각 처리가 감각 입력을 지배할 뿐만 아니라 처리하는 데이터의 양과 속도는 우리가 인식하는 것보다 훨씬 빠릅니다. 이 현상을 "사전 주의 처리"라고 합니다. 무의식적이고 빠릅니다. 눈이 전송하고 뇌가 시각 자극의 사전 주의적 속성을 처리하는 데 200-500밀리초가 걸립니다(뇌가 스프레드시트 데이터를 처리하는 방법보다 훨씬 빠름).

“전주의적 처리는 환경으로부터 정보를 무의식적으로 축적하는 것입니다. 사용 가능한 모든 정보는 사전에 주의 깊게 처리됩니다. 그런 다음 뇌는 중요한 것을 걸러내고 처리합니다. 가장 두드러진 정보(가장 눈에 띄는 자극) 또는 사람이 생각하고 있는 것과 관련이 있는 정보는 의식(주의력 있는) 처리에 의해 더 완전하고 더 완전한 분석을 위해 선택됩니다.” – 위키피디아에서

사전 주의적 처리는 숙련된 배포를 통해 사람들이 제시된 내용을 더 빨리 이해할 수 있기 때문에 디자이너에게 도움이 됩니다. 고도로 유능한 디자이너는 데이터 시각화를 보는 사람이 의식적 처리를 가볍게 하고 메모리 부하를 줄이기 때문에 더 적은 노력으로 더 많은 정보를 더 빨리 흡수하도록 도울 수 있습니다.

사전 주의 처리의 장점:

• 고속/자동
• 감정적 인
• 충동/추동
• 버릇
• 신념
• 고정 관념
• 잠재의식

많은 시각적 변수 가 사전 주의적 반응을 유발합니다. 어떤 시각적 요소가 자동으로 강조되는지 학습한 다음 대시보드에 통합함으로써 데이터의 스토리를 효과적으로 전달하는 시각화를 디자인할 수 있습니다.

시각적 변수

자크 베르탱(Jacques Bertin)이 도입한 시각적 변수는 인간의 눈으로 인식되는 요소 간의 차이입니다. 오랫동안 연구된 이러한 변수는 인간의 두뇌가 시각적 정보를 처리하고 탐색하는 방법을 이해하는 수단을 제공합니다. 원래 "망막 변수" 세트는 위치, 크기, 모양, 값, 색조, 방향 및 질감의 7가지 변수로 구성되었습니다.

아래 차트는 Bertin에 따라 질적 또는 양적 차이를 보여주는 데 유용한 시각적 변수의 예를 보여줍니다. 또한 점, 선 또는 영역을 통해 속성을 표시하는 방법을 보여줍니다.

William Cleveland와 Robert McGill의 1984년 연구에서는 인간의 두뇌가 그 차이를 얼마나 쉽게 감지하는지에 따라 두 가지 모양이 가질 수 있는 가장 일반적인 측면을 순위화했습니다. 그들은 다음과 같은 시각적 특징을 가장 정확하지 않은 것부터 순서대로 정렬했습니다.

공통 척도에 따른 위치

우리는 공통 공간 참조 시스템을 공유하기 때문에 위치는 공간의 요소와 관련하여 인식하고 평가하기 가장 쉬운 기능입니다.

예: 막대 차트, 산점도

정렬되지 않은 동일한 축척에 따른 위치

정렬되지 않아도 같은 축으로 반복되는 별도의 눈금을 쉽게 비교할 수 있습니다. 패널 차트 또는 "작은 배수"가 이에 대한 좋은 예입니다. 결과는 모두 동일한 시각적 형식을 따르지만 다른 데이터세트를 표시하는 차트 그리드입니다. 하나의 큰 차트와 비교할 때 작은 배수는 플롯된 항목이 너무 많아 데이터가 모호하거나 가려질 수 있는 오버플로팅에 도움이 될 수 있습니다.

예: 작은 배수(Rellis, Lattice, Grid 및 Panel 차트라고도 함)

길이

길이는 요소의 길이가 해당 요소가 나타내는 데이터 값으로 확장될 수 있기 때문에 정량적 정보를 효과적으로 나타낼 수 있습니다. 인간의 뇌는 물체가 정렬되지 않은 경우에도 비율을 쉽게 인식하고 길이를 평가합니다.

예: 막대 차트

방향

방향은 사람의 눈으로 쉽게 인식됩니다. 예를 들어 선 및 추세 차트를 사용하여 시간이 지남에 따라 변경되는 데이터를 표시할 수 있습니다.

예: 추세 차트

각도

각도는 비례감을 제공하여 비교하는 데 도움이 됩니다. 연구에 따르면 각도는 길이나 위치보다 평가하기가 더 어렵습니다. 그러나 원형 차트는 전체에 3개 이상의 부분이 있지 않는 한 누적 막대 차트만큼 효율적입니다.

예: 파이 차트

지역

영역의 상대적 크기는 선의 길이에 비해 비교하기 어렵습니다. 두 번째 방향은 처리하고 해석하는 데 더 많은 노력이 필요합니다.

예: 거품형 차트

용량

볼륨은 2차원 공간에서 3D 개체를 사용하여 평가하기가 훨씬 더 어려운 것을 말합니다. 그러나 연구에 따르면 동일한 차원의 두 모양을 비교할 때 3D 개체가 더 정확하게 인식될 수 있습니다.

예: 3D 막대 차트

색 채도

채도는 단일 색조의 강도를 나타냅니다. 색상 강도의 증가는 값의 증가로 직관적으로 인식될 수 있습니다. 그러나 그 결과를 정확하게 평가하기는 어렵다.

예: 히트맵

시각적 변수의 순위를 이해하는 것은 매력적인 데이터 시각화를 만드는 데 필수적입니다. 그러나 디자이너가 막대 차트 및 산점도에 자신을 제한해야 한다는 의미는 아닙니다. Cleveland와 McGill은 "주문은 데이터를 표시하기 위한 정확한 처방을 초래하는 것이 아니라 작업을 수행하는 프레임워크입니다."라고 말합니다.

색깔

William Cleveland에 따르면 색상 채도와 음영은 패턴과 행동에 대한 인식과 관련하여 가장 정확하지 않습니다. 그러나 색상은 데이터 시각화 디자이너가 데이터를 표시할 때 의미와 명확성을 전달할 수 있는 강력한 도구가 될 수 있습니다. 그러나 디자이너가 색상이 작동하는 방식과 색상이 잘하는 것과 그렇지 않은 것을 이해하는 것이 중요합니다.

상황에 맞는 색상

색상에 대한 우리의 인식은 컨텍스트, 색상 및 주변 물체와의 대비에 따라 다릅니다.

좋은 예는 일본 리츠메이칸 대학의 심리학과 교수인 키타오카 아키요시(Akiyoshi Kitaoka)의 실험입니다. 이 실험에서 회색 종이 조각을 흑백 그라디언트에 밀어넣었습니다. 종이가 좌우로 움직이면 색이 변하는 것처럼 보입니다. 매 순간, 우리는 주변을 둘러싼 다양한 회색 음영으로 인해 색상을 다르게 인식합니다. 아래 동영상을 참조하세요.

그의 기사 Practical Rules for Using Color in Charts 에서 Stephen Few는 이러한 관찰에서 몇 가지 실용적인 규칙을 도출합니다.

1. 표나 그래프에서 같은 색의 다른 개체를 동일하게 보이게 하려면 배경(그 개체를 둘러싸고 있는 색)이 일관적인지 확인하십시오.
2. 표나 그래프의 개체가 쉽게 보이도록 하려면 개체와 충분히 대비되는 배경색을 사용하세요.

색상은 이야기를 전합니다

색상은 단순한 장식이 아닙니다. 의미 있고 전략적으로 사용할 때 가장 좋습니다. 색상은 스토리를 전달하고 제시된 데이터 세트의 목적을 전달하는 데 도움이 되어야 합니다. "적을수록 좋다"라는 말이 있듯이.

대조 색상은 인지 부하를 줄이기 위해 데이터의 의미 차이에만 적용해야 합니다. 색상은 시각화의 주요 요소를 강조할 수도 있습니다.

색상이 없다고 해서 좋은 차트의 효율성이 떨어지는 것은 아닙니다. 회색은 구상 단계에서 좋은 출발점이며, 일단 초점이 맞춰지면 색상을 적용하여 그 부분을 강조합니다.

색상 팔레트 정의

데이터 시각화 디자이너가 적용하는 색상 세트는 데이터의 의미를 완전히 바꿀 수 있습니다. 많은 도구가 데이터의 특성에 따라 의미 있는 색상 팔레트를 선택하는 데 도움이 될 수 있습니다. 다음은 몇 가지입니다.

• 컬러브루어. 팔레트는 세 가지 유형으로 나뉩니다.
  • 범주형(항목을 개별 그룹으로 분리하는 데 사용)
  • 순차(양적 차이를 인코딩하는 데 사용)
  • 발산
• 비즈 팔레트. Viz Palette는 접근성, 색맹을 위한 디자인 및 지각적으로 균일한 간격의 음영을 처리합니다. 여기에는 다양한 상황에서 동일하게 보일 수 있는 음영을 식별하는 "색상 보고서"가 포함됩니다.

데이터 시각화에 게슈탈트 원리 적용하기

지각의 게슈탈트 원리는 뇌가 시각적 정보를 이해하려고 할 때 공통 기능을 기반으로 요소를 구성하는 방법을 명확히 하는 데 도움이 될 수 있습니다. 게슈탈트 이론은 인간의 두뇌가 일련의 이질적인 요소가 아니라 전체를 생성하는 조직화된 시스템으로 부분을 무의식적으로 배열함으로써 많은 요소로 구성된 복잡한 이미지나 디자인을 단순화하고 조직화하려고 시도한다는 아이디어에 근거합니다.

유사성

유사성의 원칙에 따르면 우리의 마음은 공유된 시각적 속성을 가진 요소를 자동으로 "유사한" 것으로 그룹화합니다. 비슷한 색상, 비슷한 모양, 비슷한 크기, 비슷한 방향이 그룹으로 인식됩니다. 이 원칙은 아래 차트에 나와 있습니다.

막대가 다른 색상으로 표시된 왼쪽 차트와 달리 오른쪽에서는 동일한 파란색입니다. 단 하나의 변수(비용/수익)가 있다는 점을 감안할 때 이는 의미가 있습니다. 동일한 색상의 막대를 사용하면 데이터를 더 쉽게 이해할 수 있고 왼쪽에 다른 색상을 사용하여 발생하는 추가적인 인지 부담을 제거할 수 있습니다.

근접성

인간의 눈은 요소가 얼마나 가까운지를 기반으로 관련 요소를 인식하므로 유사성보다 근접성이 더 효과적입니다.

아래 차트에서 목표는 3분기 동안 국가별 매출을 비교하는 것입니다. 각 국가의 매출은 근접성으로 인해 분기 내 비교는 쉽지만 국가별 매출을 분석하는 것은 어렵습니다.

수정된 차트는 이를 보다 명확하게 전달합니다. 이 경우 정보는 주요 데이터 포인트를 더 가깝게 유지하므로 시각화 목표에 초점을 맞추기 위해 우선 순위가 지정됩니다.

울로 둘러싼 땅

1992년 Palmer가 도입한 공통 영역 원칙은 명확하게 정의된 경계를 가진 요소의 인클로저가 공통 영역을 공유하는 경우 그룹으로 인식되는 경향이 있음을 보여줍니다.

아래 예에서 회색 음영 영역 내의 세 개의 막대는 그룹의 일부로 나타납니다. 이 기술을 사용하면 뷰어가 차트의 개체 그룹에 집중할 수 있습니다.

결론

인간의 지각과 인지 과정의 핵심 요소를 이해하는 것은 우수한 데이터 시각화를 설계하는 데 필수적인 부분입니다. 데이터 시각화가 필요한 제품(B2B 대시보드 또는 금융 앱)을 작업할 때 디자이너는 인간 두뇌의 시각적 인식 프로세스와 기본적인 데이터 시각화 디자인 원칙을 염두에 두어야 합니다.

시각적 인식의 잘 알려진 게슈탈트 원리에 대한 친숙함은 디자이너에게 큰 이점이 될 수 있으며 두뇌가 복잡한 이미지를 패턴으로 변환하는 방법을 이해하는 데 도움이 됩니다. 이러한 원칙을 염두에 두는 것은 데이터 시각화를 고안하고 보다 효과적인 차트를 디자인할 때 보다 명확한 시각적 계층을 달성하는 과정에서 가치가 있습니다.

또한 사전 주의적 처리 및 시각적 변수와 올바른 색상 적용을 인식하면 디자이너가 보다 효과적인 데이터 시각화를 생성할 수 있습니다.

당신의 생각을 알려주세요! 아래에 귀하의 생각, 의견 및 피드백을 남겨주세요.

• • •

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

• 최고의 데이터 시각화 도구에 대한 전체 개요
• 데이터 시각화 – 모범 사례 및 기초
• 주요 데이터 시각화 예제 및 대시보드 디자인
• 대시보드 디자인 - 고려 사항 및 모범 사례
• COVID-19: 궁극적인 디자인 사고 사용 사례