본문 바로가기
프로젝트 관련 리서치/02_디자인리서치

대시보드 Dashboard

by radioherz_robot 2024. 4. 10.
사전적 의미

 

IT용어(data dashboard)
-
업무에 필요한 각종 정보를 도표나 그래픽 등으로 한 눈에 파악할 수 있도록 디자인 된 페이지
중앙 집중형 정보 관리 인터페이스

 

 

자동차 부품
-
운전석과 조수석 정면의 계기판과 수동 제어 장치, 보관함, 기타 부속물이 있는 부분

 

파란 영역 > 대시보드

 

 

대시보드 어원 유래

 

원래 차량의 실내와 엔진룸을 구분하는 격벽(panel)에서 출발, 이 명칭은 마차의 앞 부분에 달려 있는 흙받이에서 유래...

'대시' 즉 말발굽질에 의해 '튀어 던져지는(dash)'진흙이나 오물을 막기 위한 판(board)이 '대시보드dashboard'의 어원!

 

 

대시보드 역할

 

빅데이터 활용이 중요해지는 최근 트렌드에서 빅 스크린의 데이터 시각화 – 대시보드 (Dashboard)

 

여러 정보들로 구성되어 있는 대시보드 는 한 눈에 이해하고 파악하기 쉬운 직관적인 구성을 가지고 있어야 합니다. 대시보드를 통해 핵심 정보를 빠르게 전달 할 수 있다면, 의사결정에 큰 도움이 될 것입니다.

 

 

2012년 대시보드 그래픽 디자인 체크리스트 - 스티븐 리프먼트(Stephen Few)

 

 

대시보드 목적에 따른 UX 디자인 방향성

 

 

1. 전략형 대시보드 strategic company dashboard 임원 등 조직의 주요 의사결정자가 전체 데이터를 보는 용도  
2. 작업형 대시보드 operational dashboard 비상상황이나 이상치를 빠르게 인지하고 반응하도록
3. 분석형 대시보드 analytical dashboard 트렌드를 이해하고 분석하는 용도

 

정보 영역 구성의 중요성

 

정보 표현 방식 - 시각적인 가독성/이해력 높이기

 

동일한 데이터를 활용할 경우 면적(area)보다는 길이를 기준으로 한 시각화 차트, 3D보다는 2D 차트가 직관적인 이해에 도움이 됩니다. 예컨대 닐슨노먼그룹에서 대시보드 솔루션을 분석한 결과 성과를 표현하는 부채꼴 모양의 방식보다 막대로 표현하는 방식이 직관적이라고 합니다.

대시보드 솔루션 분석 결과. 출처: 닐슨노먼그룹

① 같은 부채꼴 모양은 면적 외에도 “각도”라는 기준이 있어 데이터를 해석함에 있어 사용자에게 혼란을 줄 요소가 있지만 ② 같은 직선은 명확하게 ‘길이’라는 특징을 이용하기 때문에 이해하기 쉬운 요소라고 합니다. 마찬가지로 3D로 이뤄진 차트는 면적뿐 아니라 높이가 더해져 혼란스럽지만, 2D 차트는 길이만을 비교하므로 명확하게 이해할 수 있습니다.

3D 차트와 2D 차트 비교. 출처: 닐슨노먼그룹

거리감, 레이아웃, 색채 등도 데이터의 특징을 이해시키는 중요한 요소입니다. 동일한 카테고리 속성을 갖는 데이터라면, 데이터를 구성하는 거리(proximity)와 형태를 이용해 데이터 안의 카테고리를 이해해야 합니다.

 

 

 

더 나은 디자인---대시 보드 디자인 원칙

1. 계층(Hierarchy)

대시보드 디자인 원칙에서 첫번째는 계층화를 잘하는 것입니다. 대시보드 디자인은 대시보드의목적에 따라 정보를 계층화하여 어떤 정보가 가장 중요한지 결정해 디자인해야 합니다. 일반적으로 대시보드 디자인에서 더 중요한 정보는 좌측 상단에 배치하고 덜 중요한 정보들은 우측 하단으로 배치합니다.

 

2. 단순성 (Simplicity)

대시보드 디자인의 가장 큰 목적은 복잡한 정보를 단순화하고 이해하기 쉬운 형태로 제공하는 것입니다. 그래서 너무 많은 정보를 한번에 전달해서는 안됩니다. 또한, 칼럼의 수를 제한적으로 사용하는 것이 좋고, 중복적인 내용들은 제거해야 합니다.

 

3. 일관성(Consistenxy)

대시보드 디자인은 일관적인 레이아웃을 사용해 시각화 해야 사용자가 직관적으로 정보들을 이해하기 좋습니다. 일관된 대시보드 디자인을 하기 위해서 비슷한 시각화 기술과 레이아웃을 사용하고 연관된 정보들을 서로 묶어서 배치해야 합니다. 또한 시각적으로 유사성을 가지게 각각의 항목을 디자인 하는 것이 도움이 됩니다.

 

4. 근접성(Proximity)

대시보드 디자인은 유사한 정보들을 근접한 위치에 배치해야 합니다. 비슷한 정보들을 바로 근처에 배치해야 사용자들이 대시보드에서 제공하는 정보들을 더 빠르게 이해할 수 있도록 도움을 줍니다. 연관된 정보들은 대시보드 전역에 뿌리지 않도록 하며, 연관된 컨텐츠들은 시각적으로 연관성있게 디자인해야 합니다.

 

 

https://pixso.net/kr/skills/dashboard-design/