구글 대시보드 시각화 방법 타임라인 히트맵

Google Material Design : Communication - Data Visualization

데이터 시각화 (Data Visualization)

데이터 시각화는 정보를 그래픽 형식으로 묘사합니다.

원칙 (Principles)

데이터 시각화는 빽빽하고 복잡한 정보를 그래프 형식으로 묘사하는 커뮤니케이션의 형식입니다.

시각화 된 결과는 데이터를 비교하기 쉽게 만들고 그것을 사용해서 이야기를 만들도록 디자인 됩니다 - 이 둘 모두는 사용자가 결정을 내리는데 도움을 줍니다.

데이터 시각화는 데이터를 여러 유형과 크기로 표현 할 수 있습니다 : 적은 데이터 포인트에서부터 큰 다변량 데이터 세트까지.

구글 대시보드 시각화 방법 타임라인 히트맵

정확한

데이터 우선순위 지정을 정확하고, 명확하고, 정확한 방법으로 왜곡되지 않게 정보를 표현합니다.

구글 대시보드 시각화 방법 타임라인 히트맵

유익한

사용자가 데이터의 맥락을 이동하고, 탐색과 비교를 강조화하기에 충분하도록 돕습니다.

구글 대시보드 시각화 방법 타임라인 히트맵

확장/축소가 가능한

다양한 기기 사이즈에 맞게 시각화를 조정하면서 데이터 깊이, 복잡성 그리고 양식을 필요를 예상하십시오.

유형 (Types)

데이터 시각화는 다른 형식안에서도 표현될 수 있습니다. 차트는 다른 데이터들을 묘사하고, 데이터 비교를 가능하게 하기 때문에 데이터를 표현하는 일반적인 방법입니다.

당신은 주로 두 가지 것들(소통을 위한 데이터와 그 데이터에 대해 무엇을 나타내기 위하는지)에 의존해 차트의 유형을 사용하게 됩니다. 이 가이드라인은 여러 다른 유형의 차트의 설명과 그것들의 사용사례를 제공합니다.

차트의 타입 (Types of charts)

시간흐름에 따른 변화 (Change over time)

시간흐름에 따른 변화 차트는 트랜드나 여러 카테고리를 비교하는 등 데이터를 시간의 길이에 따라 보여줍니다.

보통의 사용사례는 아래와 같습니다.

* 주식 가격

* 건강 통계

* 연대표

구글 대시보드 시각화 방법 타임라인 히트맵

시간 흐름에 따른 변화 차트는 아래의 차트들을 포함합니다.

1. 라인 차트 (Line Chart)

2. 바 차트 (Bar Chart)

3. 쌓이는 바 차트 (Stacked Bar Chart)

4. 촛대 차트 (Candlestick Chart)

5. 영역 차트 (Area Chart)

6. 타임라인 (Timeline)

7. 수평차트 (Horizon Chart)

8. 낙수 차트(Waterfall Chart)

카테고리 비교 (Category comparison)

카테고리 비교 차트는 여러 구별되는 카테고리들 사이의 데이터를 비교합니다.

사용 사례는 아래와 같습니다.

* 나라간의 수입비교

* 유명장소의 시간비교

* 팀의 할당량 비교

구글 대시보드 시각화 방법 타임라인 히트맵

카테고리 비교 차트는 아래의 차트들을 포함합니다.

1. 바 차트 (Bar Chart)

2. 그룹화된 바 차트 (Grouped bar Chart)

3. 거품 차트 (Bubble Chart)

4. 다중-선 차트 (Multi-line Chart)

5. 평행 좌표 차트 (Parallel Coordinate Chart)

6. 총알 차트 (Bullet Chart)

랭킹 (Ranking)

랭킹차트는 순서화된 리스트의 아이템 위치를 보여줍니다.

사용 사례는 아래와 같습니다.

* 선거결과

* 실적통계

구글 대시보드 시각화 방법 타임라인 히트맵

랭킹 차트는 아래의 차트들을 포함합니다.

1. 순서화 된 바 차트 (Ordered bar Chart)

2. 순서화 된 행 차트 (Ordered Column Chart)

3. 평행 좌표 차트 (Parallel Coordinate Chart)

부분-전체 (Part-to-whole)

부분-전체 차트는 부분적인 요소가 어떻게 전체에 추가되었는지 보여줍니다.

사용 사례는 아래와 같습니다.

* 상품 카테고리의 연결수익

* 예산

구글 대시보드 시각화 방법 타임라인 히트맵

부분-전체 차트는 아래의 차트들을 포함합니다.

1. 쌓인 바 차트 (Stacked bar Chart)

2. 파이 차트 (Pie Chart)

3. 도넛 차트 (Donut Chart)

4. 쌓인 영역 차트 (Stacked Area Chart)

5. 트리맵 차트 (Tree Chart)

6. 썬버스트 차트 (Sunburst Chart)

상관관계 (Correlation)

상관관계 차트는 두개 이상의 변수들 사이의 상관관계를 보여줍니다.

사용 사례는 아래와 같습니다.

* 수입과 기대수명

구글 대시보드 시각화 방법 타임라인 히트맵

연관관계 차트는 아래의 차트들을 포함합니다.

1. 산점도 차트 (Scatterplot Chart)

2. 거품 차트 (Bubble Chart)

3. 행과 선 차트 (Coulmn and Line Chart)

4. 히트맵 차트 (Heatmap Chart)

분포 (Distribution)

분포 차트는 각 값이 데이터세트 안에서 얼마나 자주 일어나는지를 보여줍니다.

사용 사례는 아래와 같습니다.

* 인구 분포

* 수익 분포

구글 대시보드 시각화 방법 타임라인 히트맵

분포 차트는 아래의 차트들을 포함합니다.

1. 히스토그램 차트 (Histogram Chart)

2. 박스플롯 차트 (Box Plot Chart)

3. 바이올린 차트 (Violin Chart)

4. 밀도 차트 (Density Chart)

흐름 (Flow)

흐름 차트는 데이터 간 다중 상태이동을 보여줍니다.

사용 사례는 아래와 같습니다.

* 펀드 이동

* 투표율과 선거결과

구글 대시보드 시각화 방법 타임라인 히트맵

흐름 차트는 아래의 차트들을 포함합니다.

1. 센키 차트 (Sankey Chart)

2. 겐트 차트 (Gantt Chart)

3. 코드 차트 (Chord Chart)

4. 네트워크 차트 (Network Chart)

관계 (Relationship)

관계 차트는 다수의 항목이 다른것들과 어떤 관계가 있는지를 보여줍니다.

사용 사례는 아래와 같습니다.

* SNS

* 단어 차트

구글 대시보드 시각화 방법 타임라인 히트맵

네트워크 차트는 아래의 차트들을 포함합니다.

1. 네트워크 차트 (Network Chart)

2. 벤 차트 (Venn Chart)

3. 코드 차트 (Chord Chart)

4. 썬버스트 차트 (Sunburst Chart)

차트 선택 (Selecting Charts)

다양한 유형의 차트는 데이터를 묘사하기에 알맞습니다.

아래의 안내는 다른것들 중에 하나의 차트를 어떻게 선택할 것인지에 대한 인사이트를 제공합니다.

차트의 타입 (Types of charts)

시간흐름에 따른 변화는 타임 시리즈 차트를 사용해 표현할 수 있는데, 이것은 연대적 순서에 따라 데이터 포인트를 나타내는 차트입니다. 시간의 경과에 따른 차트는 선 차트, 바 차트 그리고 영역차트를 포함합니다.

구글 대시보드 시각화 방법 타임라인 히트맵

* 시작점 값(Baseline Value)은 y축의 시작값이다.

바와 파이 차트 (Bar and Pie Chart)

바 차트와 파이 차트는 모두 비율을 나타내는데 사용되는데, 이것들은 전체값에서 부분값을 비교해 나타냅니다.

* 바 차트는 바의 길이를 통해 양을 표현하고 일반적인 기준점을 사용합니다.

* 파이 차트는 전체에서의 비율을 표현하고, 원 내부에서 아치(둥근원호)나 각을 사용합니다.

바 차트, 선 차트 그리고 쌓인 영역 차트는 시간경과에 따른 변화를 보여줄 때 파이차트보다 더 효과적입니다.

왜냐하면 이 세개의 차트는 가능한 값의 동일한 기준점을 공유하고 있기 때문이고,

이것은 바의 길이로 다른 기준의 값을 비교하기 쉽습니다.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

바 차트를 사용해서 시간경과에 따른 변화 또는 다른 카테고리 사이의 차이를 보여줄 것.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

다중 파이 차트를 시간경과에 따른 차트를 보여주는데 사용하지 말 것.

이것은 파이의 각 조각들을 통해 사이즈 차이를 비교하기 어렵기 때문이다.

영역차트 (Area Chart)

영역차트는 쌓인 영역차트와 오버렵 영역차트를 포함한 몇 가지 종류가 있습니다.

* 쌓인 영역 차트는 다중 타임 시리즈(같은 기간에 걸쳐서)가 다른것의 꼭대기위에 쌓이도록 보여줍니다.

* 오버랩 영역 차트는 다중 타임 시리즈(같은 기간에 걸쳐서)가 다른것의 위에 겹치도록 보여줍니다.

오버랩 영역은 2개 이상의 타임 시리즈일 때는 추천되지 않으며, 이렇게 하는것이 데이터를 혼란하게 할 수 있습니다.

대신에, 시간 간격에 걸쳐 다중 값을 비교하기 위해 쌓인 영역 차트를 사용하십시오(수평축에 시간이 나타나는).

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

다중 타임시리즈 표현을 위해 쌓이는 영역차트를 사용하고,

좋은 레벨의 가독성을 유지 할 것.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

데이터 값을 흐리게하고 가독성을 줄일 수 있기 때문에 겹치는 영역 차트를 사용하지 말 것.

스타일 (Style)

데이터 시각화는 사용자의 필요와 맥락에 알맞은 방법으로 데이터를 힐긋 보고도 이해하기 쉽게 만들기 위해 사용자정의 스타일과 모양을 사용합니다.

차트는 아래와 같은 커스터마이징 이점을 얻을 수 있습니다.

* 그래픽 요소 (Graphical Elements)

* 타이포그래피 (Typography)

* 아이콘그래피 (Iconography)

* 축과 레이블 (Axes and Lables)

* 설명과 주석 (Legends and Annotations)

다른 유형의 데이터 스타일링 (Styling diffrent types of data)

시각적 인코딩(Visual Encoding)은 데이터를 해석하는 시각적 형태로 과정입니다.

고유한 그래픽 특성은 양적인 데이터(온도, 가격, 속도)와 질적인 데이터(카테고리, 맛, 감정) 모두에 적용될 수 있습니다.

이 특성은 아래를 포함합니다.

* 모양 (Shape)

* 색깔 (Color)

* 사이즈 (Size)

* 영역 (Area)

* 용량 (Volume)

* 길이 (Length)

* 각 (Angle)

* 위치 (Position)

* 방향 (Direction)

* 밀도 (Density)

다중 특성 표현 (Expressing Multiple Attributes)

다중 시각화 처리는 1개 이상의 데이터 포인트 양상을 지원 할 수 있습니다.

예를들어, 바 컬러는 카테고리를 나타내고, 바의 길이는 (인구의 크기와 같은)값을 나타냅니다.

구글 대시보드 시각화 방법 타임라인 히트맵

모양은 질적인 데이터를 표현하는데 사용될 수 있다.

이 차트에서 각 카테고리는 구체적인 모양(원,사각형 그리고 삼각형)에 의해 표현되며,

이것은 구체적인 범위 또는 다른 카테고리와 데이터를 비교하기 쉽게 만든다.

모양 (Shape)

차트는 여러 방법으로 데이터를 나타내는데 모양을 사용할 수 있습니다.

모양은 장난스럽고 완만하게 이루어져 있거나, 정확하고 높은 충성도를 갖고 있는 사이에서 표현될 수 있습니다.

상세 모양의 레벨 (Level of Shape Detail)

차트들은 다양한 레벨의 정확도로 데이터를 표현 할 수 있습니다.

면밀한 탐색을 위한 데이터는 상호작용하기에 알맞은 모양에 의해 대변되어야 합니다. (터치타겟 사이즈와 관련된 여유의 조건 안에서) 반면에, 일반적인 생각이나 드랜드를 표현하려고 하는 데이터는 더 적은 디테일의 모양을 사용할 수 있습니다.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

이 차트에서의 바는 바의 꼭대기를 정확하게 측정해 바의 길이를 알 수 있는 미세하게 둥근 모서리를 갖고 있다.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

부정확한 꼭대기 모서리를 주는 것 처럼 차트를 읽기 너무 어렵게하는 모양을 사용하지 말 것.

색 (Color)

색상은 네게의 주요색으로 차트의 데이터를 구별하는데 사용될 수 있습니다.

* 하나로부터 다른 카테고리를 구별함.

* 양을 표현

* 구체적인 데이터를 강조

* 의미를 표현

색 구분 카테고리 (Color Distinguishes Categories)

구글 대시보드 시각화 방법 타임라인 히트맵

도넛 차트에서 색은 카테고리를 정의하는데 사용됨

양을 표현하는 색 (Color Represents Quantity)

구글 대시보드 시각화 방법 타임라인 히트맵

컬러는 지도에서 데이터 값을 표현하는데 사용된다.

데이터를 강조하는 색 (Color Highlights Data)

구글 대시보드 시각화 방법 타임라인 히트맵

산점도 차트에서 색은 구체적인 데이터를 강조하는데 사용됨

초점의 영역 (Areas of Focus)

컬러는 초점의 영역을 강조할 수 있습니다. 너무 많은 양의 색상 강조는 산만함과 집중에 방해를 줄 수 있기 때문에 추천되지 않습니다.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

강조색과 중립색의 조합을 사용하여, 대비와 강조를 제공할 것.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

하나의 차트에서 많은 색상을 사용하게 되면 초점을 방해할 수 있다.

컬러는 의미를 전달 (Color indicates meaning)

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

아이콘과 같은 다른 시각적 단서를 함께 사용하여 차트 컬러의 의미를 강화할 것.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

의미를 전달하기 위해 색상만 단독으로 사용하지 말 것.

접근성 (Accessibility)

색상을 구분하지 못하는 사용자를 수용하기 위해, 당신은 데이터를 강조하기 위한 고대비 그림자, 모양 또는 질감과 같은 다른 방법을 사용할 수 있습니다.

데이터에 텍스트 레이블을 적용시키는 것은 또한 범례의 필요를 없애면서, 의미를 명확하게 하도록 돕습니다.

더 많은 내용이 궁금하다면 아래의 링크에서 확인하십시오.

선 (Line)

차트 선들은 계층, 강조 그리고 비교와 같은 데이터의 질을 표현합니다.

선의 스타일들은 대시(----)를 사용하거나 다양한 불투명도를 사용하는 것 처럼 다른 방법으로 스타일화 될 수 있습니다.

선은 아래의 구체적인 요소들에 적용될 수 있습니다.

* 주석들

* 예측요소들

* 비교도구들

* 신뢰구간들

* 변칙들

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

선의 질감 변화는 데이터 유형의 차이를 나타낸다.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

같은 데이터 카테고리에서 기간의 변화를 보여주는데 다른 색상을 사용하지 말 것.

타이포그래피 (Typography)

텍스트는 아래와 같이 다른 차트 요소 레이블로 사용될 수 있습니다.

* 차트 제목들

* 데이터 레이블들

* 축 레이블들

* 범례

계층에서 가장 높은 레벨의 텍스트는 보통 차트의 타이틀이며, 축의 레이블과 범례는 계층의 가장 아래 레벨입니다.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

텍스트 굵기 (Text Weight)

제목과 여러 폰트 굵기들은 계층구조에서 다른 컨텐츠에 보다 어떤 컨텐츠가 더 (또는 덜) 중요한지를 알려줄 수 있습니다.

하지만, 이러한 처리는 너무 자주 사용해서는 안되고, 폰트 스타일의 한계를 둬야합니다.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

굵은 글씨체를 하나 또는 두개의 핵심 요소에 만드는 것은 디자인에 균형감을 준다.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

너무 많은 요소에 굵은 글씨체를 사용하는 것은 중요한 요소를 식별하기 어렵게 만들 수 있다.

아이콘 (Icongraphy)

아이콘은 차트안에서 다른 유형의 데이터를 나타낼 수 있으며, 차트 전반의 사용성을 개선할 수 있습니다.

아이콘은 아래의 경우에 사용될 수 있습니다.

* 그룹 또는 카테고리를 구분하는 카테고리화 된 데이터

* 필터, 확대, 저장 그리고 다운로드와 같은 UI조절이나 동작들

* 에러, 데이터없음, 완료 또는 위험등을 알리는 상태

차트 내에서 아이콘이 위치할 때, 특별히, 저장, 다운로드, 완료, 에러 또는 위험과 같은 동작이나 상태를 나타낼 때는 전세계가 알 수 있는 기호를 쓰는것이 추천됩니다.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

중요 정보를 명확하게 나타내기 위해 아이콘을 따라 레이블을 사용 할 것.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

중요한 정보를 나타낼 때 아이콘이나 기호만을 사용하지 말 것.

구글 대시보드 시각화 방법 타임라인 히트맵

의미를 전달하는 아이콘 보충 색상

레이블 축 (Labelled axis)

하나의 레이블 축 또는 다중 축은 데이터의 크기와 범위를 나타냅니다.

예를들어, 선 차트는 수평과 수직의 레이블축에 따라 값의 범위를 표현합니다.

구글 대시보드 시각화 방법 타임라인 히트맵

막대기 차트들은 항상 X축 0의 값에서 시작해야 한다.

구글 대시보드 시각화 방법 타임라인 히트맵

초점 포인트와 같은 데이터를 유지하기 위해 축을 완전히 지우는 것을 고려할 것.

당신은 차트 요소에 상응하는 값을 바로 놓을 수도 있다.

막대기 차트 기준 (Bar Chart Baseline)

막대기 차트들은 0의 기준선(Y축 위에서의 시작 값)에서 시작해야 합니다.

0이 아닌 곳에서 시작하게 된다면 데이터를 부정확하게 인지할 수 도 있습니다.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

0의 기준점에서 시작한 막대기 차트

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

0이 아닌 다른 기준점에서 시작하지 말 것.

이 기준점은 20%에서 시작하는데, 막대기의 차이를 더 극적으로 보이게 한다.

축 레이블 (Axis labels)

레이블 사용법은 차트안에서 가장 중요한 데이터 인사이트를 위해 사용해야 합니다.

축 레이블들은 필요에 따라, UI전반에 걸쳐 일관된 방법으로 사용되어야 합니다.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

축 레이블의 균형잡힌 수를 사용함으로 가독성을 지원 할 것.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

너무 많은 축 레이블을 차트에 하게 싣지 말 것.

글자 방향 (Text Orientation)

텍스트 레이블들은 읽기 쉽도록 차트의 수평에 위치해야 합니다.

글자방향은 이래와 같아서는 안됩니다.

* 회전됨

* 세로로 쌓임

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

막대 차트에서 글자 방향이 수평으로 정렬하고, 공간을 만들기 위해 필요가 있다면 막대를 회전시켜라.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

읽기 어려워질 수 있으니, 막대기의 레이블을 회전시키지 말 것.

범례와 주석 (Legends and annotation)

범례와 주석은 차트의 정보를 묘사합니다.

주석은 데이터 포인트, 데이터 아웃라이어 그리고 주목할만한 컨텐츠를 강조해야합니다.

구글 대시보드 시각화 방법 타임라인 히트맵

1. 주석 / 2. 범례

데스크탑에서, 범례가 차트 아래쪽에 위치하는것이 추천됩니다.

모바일에서는 상호작용중에도 보이도록 유지하기 위해 범례가 차트 위쪽에 위치되도록 하는 것이 추천됩니다.

레이블과 범례 (Labels and legends)

간단한 차트에서 차트 요소들은 바로 레이블을 붙일 수 있습니다.

하지만, 밀도가 높은 차트(또는 차트의 큰 그룹의 일부)는 범례에 레이블을 표시합니다.

구글 대시보드 시각화 방법 타임라인 히트맵

직접 레이블링을 사용한 선 차트

구글 대시보드 시각화 방법 타임라인 히트맵

범례를 사용한 선 차트

작은 표시들 (Small Displays)

웨어러블(입을 수 있는, 예를들어 애플워치 또는 그런 작은 스크린)에서의 차트는 모바일 또는 데스크탑에서의 버전보다 더 단순화 되어야 합니다.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

데이터를 묘사하는 그래프에서의 키포인트만 주석처리 할 것.

이 예시에서는 가장 고점과 저점의 데이터 값이 표시되었다.

구글 대시보드 시각화 방법 타임라인 히트맵

구글 대시보드 시각화 방법 타임라인 히트맵

키 데이터를 화면 바깥에 위치시키지 말 것.

이것은 사용자가 기것을 보기 위해 스크롤 할 것을 요구한다.

구글 대시보드 시각화 방법 타임라인 히트맵

한계선은 표시된 데이터에 대한 맥락을 제공한다.

행위 (Behavior)

차트는 데이터를 사용자가 제어할 수 있는 상호작용 패턴을 제공합니다.

이 패턴들은 사용자가 차트의 명확한 값이나 범위에 초점을 맞출 수 있게 합니다.

아래는 추천되는 차트 데이터의 사용자 이해를 개선시켜 줄 수 있는 상호작용 패턴, 스타일 그리고 (햅틱 피드백과 같은)효과 입니다

* 단계적 공개(Progressive Disclosure)는 세부정보를 공개할 수 있는 명확한 경로를 제공하며, 필요에 따라 접근할 수 있습니다.

* 직접처리(Direct Manipulation)는 사용자가 UI요소에서 직접 행동하도록 허용하며, 화면에서 필요한 (확대,패닝,페이지네이션,데이터컨드롤을 포함한)행동의 수를 최소화 시킵니다.

* 관점 변경(Changing perspective)은 데이터 제어와 동작과 같이 다른 유저와 데이터 유형에서 하나의 디자인으로 작업할 수 있도록 합니다.

단계적 공개 (Progressive Disclosure)

단계적 공개를 사용하여 차트의 디테일을 공개하십시오.

이것은 사용자가 필요한 구체적인 데이터 포인트를 볼 수 있도록 합니다.

구글 대시보드 시각화 방법 타임라인 히트맵

디테일 공개 (데스크탑) : 데스크탑에서는 호버상태일 때 더 많은 세부적인 데이터가 공개됩니다.

구글 대시보드 시각화 방법 타임라인 히트맵

디테일 공개 (모바일) : 모바일에서는 터치와 제스처를 하고 있는 동안 툴팁이 표시되면서 차트 위에 위치합니다.

확대와 패닝 (Zooming and Panning)

확대와 패닝은 매우 친밀하게 사용자가 데이터를 학습하고 차트 UI를 탐색할 수 있는 효과를 주는 대중적인 차트 상호작용입니다.

확대 (Zooming)

확대는 UI가 가까이 있냐 멀리있냐에 따라 변합니다.

디바이스의 유형이 어떻게 확대가 수행되는지를 결정합니다.

* 데스크탑에서 확대는 클릭, 드래그, 스크롤등을 통해 일어납니다.

* 모바일에서 확대는 핀치를 통해 일어납니다.

확대가 주요한 행위가 아닐 때, 그것은 (데스크탑에서) 클릭이나 드래그 또는 더블 탭(모바일)을 통해 보충될 수 있습니다.

패닝 (Panning)

패닝은 사용자가 화면 너머로 확장한 UI를 탐험하도록 합니다.

이것은 표시된 데이터에 적합한 방식으로 제한되어야 합니다.

예를들어 차트에서 하나의 차원이 다른 것 보다 더 중요하다면, 패닝의 방향은 오직 그 방향으로만 제한할 수 있습니다.

패닝의 행위는 확대와 결합 될 수 있습니다.

모바일에서, 패닝은 한손가락 스위핑과 같이 많은 경우에 제스처를 통해 보충됩니다.

구글 대시보드 시각화 방법 타임라인 히트맵

데스크탑에서의 확대

구글 대시보드 시각화 방법 타임라인 히트맵

데스크탑에서의 패닝

페이지네이션 (Pagination)

모바일에서 페이지네이션은 사용자가 오른쪽이나 왼쪽으로 스위핑하여 이전 또는 다음 차트를 보게 하는 흔한 패턴입니다.

모바일에서 사용자는 오른쪽으로 스위핑하여 전 날의 차트를 볼 수 있다.

데이터 컨트롤 (Data Control)

데이터는 토글 컨트롤, 탭 그리고 드롭다운을 사용하여 필터링되거나 바뀔 수 있습니다.

토글 컨트롤, 탭 그리고 드롭다운 매누는 데이터를 바꾸거나 필터링 할 수 있다.

모션 (Motion)

모션은 데이터와 사용자가 그것과 어떻게 상호작용하는지 사이의 관계를 강화할 수 있습니다.

모션은 의도적으로, 다른 상태와 공간의 연결을 표현하기 위해 사용되어야 합니다. (장식으로 사용되어서는 안됩니다.)

모션은 논리적이고 부드러우며 반응적으로 느껴져야하며, 사용자의 진행을 방해해서는 안됩니다.

이 예시에서 데이터는 일별 표시와 주별 표시 사이에서 움직인다.

선택된 날짜의 범위 바깥의 데이터는 전환되는 동안 보여지지 않게 되어 복잡성이 줄어든다.

애니메이션은 두개의 다른 다이어그램이 어떻게 연관되는지를 보여준다.

빈 상태 (Empty States)

빈 그래프와 차트는 데이터를 이용할 수 있을 때 예상되는 내용을 표시합니다.

해당되는 경우, 캐릭터 애니메이션은 기쁨과 격려를 제공하는 것을 보여줄 수 있습니다.

개성이 강한 애니메이션은 개성이 없는 빈 그래프를 강화시킨다.

대시보드 (Dashboard)

데이터 시각화는 대시보드라고 불리우는 UI안에서 다중 차트의 시리즈들을 보여줄 수 있습니다.

다중, 분리 차트들은 때때로 복잡한 하나의 차트보다 이야기를 더 잘 전달 할 수 있습니다.

대시보드 디자인 (Dashboard Design)

대시보드의 목적은 그것의 레이아웃, 스타일 그리고 상호작용패턴 안에 반영되어야 합니다.

디자인은 그것이 어떻게 사용될것인지, 그 도구가 무언가를 표현하기 위한것인지, 데이터를 더 깊이 탐색하기 위한 것인지에 알맞아야 합니다.

대시보드는 아래와 같아야 합니다.

* 레이아웃을 사용한 가장 중요한 정보의 우선순위 설정

* 계층에 따른 정보의 중요도를 초점의 지점으로 보여주기 (컬러, 위치, 사이즈 그리고 시각적 무게를 사용하여)

구글 대시보드 시각화 방법 타임라인 히트맵

정보는 데이터의 질문에 따라 기초로 우선순위화 되어야하고, 정렬되어야 한다.

이 예시로 든 작업 대시보드는 아래의 사용자 질문이 고려되었다.

1. 집중이 필요한 이슈

2. 이슈가 일어난 시간

3. 이슈가 일어난 장소

4. 이슈에 의한 다른 영향들

분석 대시보드 (Analytics Dashboard)

분석 대시보드는 데이터의 다중 세트를 탐구하는 것과 경향을 발견하는데 사용할 수 있습니다.

보통 이러한 대시보드는 데이터 인사이트를 발견하게 하는 복잡한 차트를 포함합니다.

아래의 케이스를 포함하여 사용하십시오 :

* 핵심 성과 지표의 개요를 제공할 것.

* 높은 수준의 개요를 만들 것.

프리젠테이션투자 대시보드 예시 :

* 투자계정 실정의 개요를 제공

* 상품 판매와 시장 공유 데이터의 요약을 제공

구글 대시보드 시각화 방법 타임라인 히트맵

웹사이트 사용 데이터를 보여주는 분석적 대시보드