주요 데이터 시각화 예제 및 대시보드 디자인

데이터 시각화 및 대시보드 디자인은 예술이자 과학이며 처음 나타나는 것처럼 만들기가 쉽지 않습니다. 최고의 UX 디자이너와 비주얼 디자이너는 사용자를 혼란스럽게 하지 않고 복잡한 정보를 어떻게 설명합니까?

세 가지 방법: 우수한 대시보드 디자인의 UX 원칙에 대한 더 나은 이해, 뛰어난 그래픽 적용 및 실습.

UX 대시보드 디자인은 특정 원칙과 모범 사례를 따릅니다. 반면에 그래픽 우수성은 보다 철저한 검사가 필요합니다.

그래픽 우수성은 다음과 같이 정의됩니다.

• 흥미로운 데이터를 잘 설계하고 효율적으로 표시합니다.
• 복잡한 아이디어는 효율성, 명확성 및 정확성으로 전달됩니다.
• 작은 공간에서 가장 적은 시간을 필요로 하고 가장 적은 양의 잉크를 사용하여 보는 사람에게 가장 많은 아이디어를 제공합니다.
• 데이터에 대한 진실을 말하십시오.

뛰어난 그래픽을 더 잘 이해할 수 있는 훌륭한 리소스는 Edward Tufte의 작업입니다. 그는 "데이터의 레오나르도 다빈치"로 간주되며 다수의 저서, 책 및 강의를 출판했습니다. 정보 시각화 및 그래픽 우수성에서 최고를 대표하는 웹사이트인 information is beautiful을 설립한 David McCandless는 또 다른 훌륭한 리소스입니다.

모범적인 UX 디자인과 뛰어난 그래픽의 원칙은 대시보드 디자인과 데이터 시각화 모두에 적용됩니다. 다음은 몇 가지 주요 데이터 시각화 및 대시보드 디자인 예입니다.

최고의 데이터 시각화

나폴레옹의 1812년 3월

나폴레옹의 1812년 행진에 대한 Minard의 시각화는 "지금까지 만들어진 최고의 통계 도면" 중 하나로 간주됩니다. Minard가 한 것만큼 많은 정보로 시각화를 만드는 것은 뛰어난 그래픽을 적용하지 않았다면 불가능했을 것입니다.

이 단일 시각화는 위치별 나폴레옹 군대의 수, 군대가 경험한 온도, 군대가 모스크바를 오가는 경로를 보여줍니다.

존 스노우의 콜레라 지도

John Snow의 1854년 그래픽은 런던의 공공 우물 13개와 콜레라 사망자 578명을 위치에 수직으로 쌓은 막대를 사용하여 보여줍니다. 이해하기 쉽고 데이터의 진실을 드러내며 사용자에게 적절한 그림을 그리는 데 필요한 모든 정보를 제공합니다. 콜레라 사망에 관한 결론.

록 음악의 역사

전체 데이터 시각화의 일부만을 나타내는 아래 그래픽은 1955년에서 1978년 사이에 700명 이상의 아티스트가 만든 30개 이상의 음악 스타일 중 일부를 보여줍니다.

단순히 아티스트와 스타일을 나타내는 것이 아니라 영향력, 음반 판매량, 스타일 범주, 그리고 이것들이 어디에서 끝났고 계속되었는지를 보여줍니다. 이러한 종류의 그래픽 우수성을 달성하는 것은 결코 쉬운 일이 아닙니다.

유럽의 인구가 증가하고 감소하는 곳

복잡하지 않고 잘 설계되었으며 진실한 방식으로 방대한 양의 데이터를 처리하는 방법을 보여주는 최고의 데이터 시각화입니다. 출생률과 같은 더 많은 데이터 탐색을 허용하는 대화형 버전에 포함된 필터도 있습니다.

상징적인 유명인들의 일상

이 데이터 시각화는 흥미로울 뿐만 아니라 그래픽 우수성의 전형적인 예입니다. 하나의 그래픽에서 상징적인 유명인의 일상 습관, 의식, 추구 및 우선 순위에 대한 자세한 묘사를 볼 수 있습니다.

간단한 색상으로 구분된 차트를 사용하여 이 시각화는 이해하기 쉽고 간단하고 효과적이며 무엇보다 정보 제공입니다.

세계 언어 그래픽

이 고전적인 데이터 시각화는 지구상에 존재하는 언어의 수, 언어가 사용되는 언어 및 세계 여러 지역에서 사용하는 언어를 보여줍니다.

높은 수준의 그래픽 우수성 없이는 이 많은 데이터를 유익하고 이해하기 쉬운 우아한 방식으로 표시하기 어려울 것입니다.

최고의 대시보드 디자인

대시보드가 ​​우수한 것으로 간주되려면 다음과 같은 특정 UX 기준을 충족해야 합니다.

• 명확하고 일관된 명명 규칙
• 데이터의 흐름과 레이아웃이 우선
• 여백은 가독성에 적합합니다.
• 데이터가 숨겨지거나 과부하되지 않음
• 이해하기 쉽고 읽기 쉬운

마케팅 KPI 대시보드

아래 예는 복잡한 비즈니스 정보를 이해하기 쉽게 만든 훌륭한 예입니다. 절제된 배색이 마음에 들고, 별도의 카드 사용이 눈에 부드럽습니다.

이 대시보드가 ​​뛰어난 디자인인 이유 중 하나는 데이터 잉크 비율입니다. 데이터와 공간은 서로를 보완합니다. 더 많은 그래프로 화면을 채우는 대신 작은 탭이 있는 별도의 카드가 사용됩니다. 이것은 중요한 정보를 사용 가능한 상태로 유지하면서(즉, 숨기지 않고) 사용자에게 쉽고 유익한 방식으로 정보를 볼 수 있는 독창적인 방법입니다.

스트라이프 대시보드

Stripe 대시보드는 대시보드 디자인 모범 사례의 훌륭한 예입니다. 간단하고 가장 적절한 사용자 질문에 답하며 각 카드 내에서 거의 완벽한 여백을 가지고 있습니다.

원격 진료 대시보드

원격 의료 분석은 많은 원시 데이터를 제공하는 것으로 알려져 있습니다. 해당 데이터를 의미 있고 유익한 대시보드로 구성하는 것은 어려울 수 있습니다. 이 예에서는 대시보드 디자인 UX 모범 사례를 사용합니다. 여백이 두 배로 늘어나고 정보에 질문과 답변이 제공되며 데이터가 보이지 않게 숨겨지지 않습니다.

주식 대시보드

주식은 공간을 놓고 경쟁하는 데이터 포인트의 수로 인해 단일 대시보드에서 개념화하기 어려울 수 있습니다. 이 대시보드 디자인 예제는 모든 관련 정보 전면과 중앙을 사용하여 깨끗하고 최소한의 모양을 달성했습니다.

웹 잠재고객 대시보드

Google Analytics는 대시보드를 잘 활용합니다. 그러나 특정 목표를 달성하려면 많은 사용자 지정이 필요할 수 있습니다. 이 대시보드는 인지 부하를 증가시키지 않으면서 간단하고 이해하기 쉽고 읽기 쉽고 유용한 보기를 제공함으로써 분석을 새로운 수준으로 끌어 올렸습니다.

문서 관리 대시보드

문서를 관리하는 것은 어렵지만 문서를 정리하고 탐색하기 쉽게 유지하는 것은 훨씬 더 어려울 수 있습니다. 훌륭한 솔루션은 일을 단순하고 이해하기 쉬우며 놀라울 정도로 희박하게 유지하는 이 대시보드입니다.

미니멀한 접근 방식을 사용하더라도 이 뛰어난 대시보드 디자인 예제는 사용자에게 문서 시스템을 이해하고 탐색하는 데 필요한 모든 것을 제공합니다.

식물 파종 날씨 앱 - 모바일 대시보드

이 모바일 대시보드는 유익할 뿐만 아니라 이해하기 쉽습니다. 탐색 경로는 탐색에 도움이 되고 공통 언어 설명이 있는 아이콘은 훌륭한 UX 디자인을 만드는 데 도움이 됩니다.

신용카드 대시보드 – 모바일 대시보드

은행 업무와 마찬가지로 신용 카드 대시보드는 특히 모바일 장치에서 나쁜 UX로 악명이 높습니다. 이 모바일 대시보드 디자인은 새로운 방향을 제시합니다. 정보는 잘 정리되어 있을 뿐만 아니라 이해하기 쉽고 압도적인 기능이 없습니다.

우수한 데이터 시각화 및 대시보드 디자인을 위해서는 뛰어난 그래픽과 대시보드 디자인 원칙에 대한 이해 및 적용이 필요합니다. 적절하게 적용하면 사용자는 유익한 데이터 시각화와 고품질 사용자 경험을 제공하는 대시보드의 이점을 얻을 수 있습니다.

• • •

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

• 대시보드 디자인 – 고려 사항 및 모범 사례
• 데이터 시각화 – 모범 사례 및 기초
• 이러한 데이터 시각화에서 영감을 얻으십시오
• 이 대시보드 디자인 영감으로 분석 업그레이드