대시보드 디자인

대시보드 디자인 개념

Olga Scrivner, PhD

President, Scrivner Solutions Inc

디자인이 중요한 이유

회사: NASDAQ
필요: 일반 투자자에게 매일의 시장 정보 전달
솔루션: 타임스퀘어의 실시간 단일 수치 디스플레이

추세선이 최선의 방법이 아닌 이유는?

주식 거래소

¹ Brath, Richard & Michael Peters. (2004). Dashboard design: why design is important.

디자인이 중요한 이유

회사: NASDAQ
필요: 일반 투자자에게 매일의 시장 정보 전달
솔루션: 타임스퀘어의 실시간 단일 수치 디스플레이

추세선이 최선의 방법이 아닌 이유는?

주식 거래소

과거 인사이트 대 실시간 지표

¹ Brath, Richard & Michael Peters. (2004). Dashboard design: why design is important.

디자인 구성 요소

대상 사용자

이 대시보드를 사용할 사람은 누구인가?
그들의 요구 사항은 무엇인가?
대상에 적합한 형식은?
얼마나 자주 사용될 것인가?

대상 사용자

구성 요소

목적: 탐색형 vs. 설명형
형식: 가로 vs. 세로
레이아웃: 그리드 vs. 플렉스
시각화: 수치, 차원, 도형

구성 요소

대시보드 목적

탐색형 대시보드

탐색형 대시보드

탐색형 대시보드는 사용자가 데이터를 자유롭게 탐색할 수 있도록 합니다.

설명형 대시보드

설명형 대시보드

설명형 대시보드는 미리 정의된 인사이트를 제공합니다.

탐색형 대시보드

맞춤형 데이터 세분화를 위한 필터

¹ Baucke, Spencer. (2022). Dashboard design essentials.

탐색형 대시보드

맞춤형 데이터 세분화를 위한 필터
사용자 정의 가능한 탐색 패널

¹ Baucke, Spencer. (2022). Dashboard design essentials.

탐색형 대시보드

맞춤형 데이터 세분화를 위한 필터
사용자 정의 가능한 탐색 패널
세부 보기를 위한 드릴다운

¹ Baucke, Spencer. (2022). Dashboard design essentials.

탐색형 대시보드

맞춤형 데이터 세분화를 위한 필터
사용자 정의 가능한 탐색 패널
세부 보기를 위한 드릴다운
인터랙티브 시각화 (호버, 툴팁)

¹ Baucke, Spencer. (2022). Dashboard design essentials.

설명형 대시보드

데이터가 이미 필터링된 경우가 많음
미리 정의된 스토리라인
경영진 대상 발표
행동 촉구

¹ Baucke, Spencer. (2022). Dashboard design essentials.

대시보드 크기

물리적 공간

모니터 크기 - 화면의 대각선 거리

데스크톱, 노트북, 태블릿, 모바일 기기

모니터 크기

대시보드 크기

물리적 공간

모니터 크기 - 화면의 대각선 거리
화면 해상도 - 픽셀 수와 밀도 (가로 x 세로)

형식

표준 형식 - 직사각형 대시보드
- 비율 - 16:9
- 모든 구성 요소가 화면에 표시
- 스크롤 없음
롱 형식 - 가로 또는 세로

데스크톱, 노트북, 태블릿, 모바일 기기

모니터 크기

가로 (타임라인 스타일) 롱 형식

대시보드 크기

물리적 공간

모니터 크기 - 화면의 대각선 거리
화면 해상도 - 픽셀 수와 밀도 (가로 x 세로)

형식

표준 형식 - 직사각형 대시보드
- 비율 - 16:9
- 모든 구성 요소가 화면에 표시
- 스크롤 없음
롱 형식 - 가로 또는 세로

데스크톱, 노트북, 태블릿, 모바일 기기

모니터 크기

세로 (신문 칼럼 스타일) 세로 형식

대시보드 레이아웃

그리드 시스템

2차원 행렬
균형 잡힌 대칭 구조
간단한 탐색
집계 수치(BAN) - 상단 행

포커스

F 포커스

¹ Baucke, Spencer. (2022). Dashboard design essentials.

연습해 봅시다!

대시보드 디자인 개념