2. 대시보드 만들기 (3)

사용자를 위한 대시보드 디자인 테크닉

대시보드 UX 디자인과 대시보드 오브젝트 활용 방법

 

개요

1. 대시보드 UX 설계

2. 대시보드 레이아웃과 캔버스 크기

3. 가로 세로 컨테이너 활용법

4. 여백 활용 디자인

 

---

 

User Experience Design

사용자가 제품과 상호작용하면서 만족스러운 경험을 할 수 있도록 설계된 디자인

 

 

 

1. 대시보드 UX 설계하기

유저에 따른 디자인 / 대시보드 기능 설계 / 디자인 요소 고려

 

 

Exploratory Analysis

탐색적으로 분석하면서, 패턴과 인사이트를 찾아나가는 과정

 

Explanatory Analysis

중요한 메트릭을 강조하면서, 특정한 인사이트를 설명하는 대시보드(사용자 고려)

 

 

 

1.1 이해관계자 유형에 따른 전략

C-Level  :  핵심 KPI 와 인사이트만 빠르게 전달 (필터나 매개변수 조정 X)

분석가 동료  :  직접 대시보드 액션을 통해 각자의 질문에 대한 인사이트 발견 (다양한 동작 활용)

전체  :  Tableau 와 상호작용 하는 방법을 모른다는 가정 하에 자세한 사용 방법 제시 (전사적)

 

 

※  Flaticon 사이트  :  아이콘 이미지 다양하게 제공하는 사이트

 

 

1.2 유저의 성격 특성에 따른 전략

분석형  :  직접 분석할 수 있도록 Raw Data 내보내기 기능 추가

결과형  :  대시보드가 전달하는 결과가 명확하게 나타나도록

액션형  :  대시보드에서 얻을 수 있는 인사이트와 앞으로 해야 할 Action 추천

 

 

태블로 사이트 상에서 대시보드의 알림, 매트릭 등을 활용할 수 있다.

 

 

※  The Big Book of DashBoards 사이트 : 다양한 대시보드 형태를 다운받아 활용할 수 있는 사이트

 

 

 

 

1.3 프로젝트 목표에 따른 기능 구현

목표  :  조직의 비즈니스 목표 이해와 KPI 설정
우선순위  :  요구사항 우선순위 설정 후 워크시트에 필요한 Data 와 Calculation 파악
인사이트  :  유저의 질문에 답을 줄 수 있는 높은 수준의 인사이트가 담긴 View 생성

 

 

대시보드 기능 설계 단계

1. 문제 정의에 따른 요구사항 정리 후 우선순위 설정
2. 우선순위에 따라 중요한 워크시트부터 VIEW NAME 설정
3. 뷰를 만드는 데 필요한 DATA FIELDS 결정
4. 어떤 CALCUALATION 이 요구되는 지 파악하기
5. 유저에 따라 적합한 VISUALIZATION 생성 (KPI, Top N, 색맹 팔레트)

 

 

디자인 요소 고려하기

1.4 목적성을 가지고 디자인하기

컬러  :  컬러는 최대한 심플하게, 목적성을 가지고 사용하기 (최대 5개 이하)
글꼴  :  대시보드 개체별로 폰트 크기 고정하기 (대시보드 제목 / 시트 제목 / 설명)
레이아웃  :  유저가 집중할 중요한 View 또는 필터는 대시보드 상단 좌측에 배열하기

(사람의 눈이 좌 → 우 , 상 → 하 방향으로 읽기 때문에)

 

조직 전체적으로 활용할 수 있고, 유저를 고려한 디자인을 고려할 필요가 있다.

 

 

색상 팔레트 추가하기

[내문서] - [내 Tableau 리포지토리] - 'Preferences' 자료 '메모장'으로 열기

 

• type = "ordered - diverging"  :  그라데이션 팔레트
• type = "regular"  :  불연속형 팔레트

 

<color-palette name="rainbow" type="ordered-diverging">
              <color>#60c5ba</color>
   <color>#95c260</color>
   <color>#c5b424</color>
   <color>#dc8d3e</color>
   <color>#ef5285</color>
   </color-palette>

 

※  uiGradients 사이트 :  다양한 팔레트 및 색상 정보 제공

 

 

< 레이아웃 > 

중요한 정보는 상단 또는 좌측부터 배치 (소제목은 좌측 정렬)

 

 

BANs : 중요한 KPI 지표들을 Text로 나타낸 것 (Big as Numbers)

 

 

 

1.5 유저의 사용성 개선하기

사용성  : 직관적인 아이콘과 대시보드 액션으로 사용성 높이기
디테일  : 도구설명 / 참조선 / 동적인 워크시트 제목 등

 

 

---

 

 

2. 대시보드 레이아웃

대시보드 기기별 레이아웃 / 캔버스 크기 / 바둑판과 부동

 

 

2.1 대시보드 기기별 레이아웃

[대시보드] - [기기 레이아웃] 탭 클릭해서 대시보드 레이아웃을 변경 가능하다.

되도록 각 기기별 레이아웃은 가장 작은 사이즈에 맞춰 설정해줄 것! (사이즈 땜에 깨질 수 있으므로)

 

 

태블로 모바일 앱도 있다~

 

 

 

2.2 캔버스 크기

캔버스 크기 옵션 : 고정 / 자동 / 범위 

 

 

2.3 바둑판과 부동

 

바둑판(Tiling) 개체

• 개체가 서로 겹치지 않는다.
• 그리드 디자인을 쉽게 할 수 있다.
• 대시보드 크기에 따라 다시 사이즈가 조정된다.

부동(Floating) 개체

• 개체의 위치와 크기를 조정할 수 있다.
• 개체의 순서를 조정할 수 있다.

 

 

---

 

3. 가로 세로 컨테이너 활용 방법

Mess 컨테이너 방식? 

 

 

---

 

 

4. 여백 활용 디자인

각 워크시트에도 여백을 설정해주어 눈에 보기 좋게 시각화해준다.

컨테이너 간 사이에도 여백을 조정해준다.