[아티클스터디] 더 나은 대시보드 디자인을 위한 10개명

원문: https://medium.com/@calebcho/%EB%B2%88%EC%97%AD-%EB%8D%94-%EB%82%98%EC%9D%80-%EB%8C%80%EC%8B%9C%EB%B3%B4%EB%93%9C-%EB%94%94%EC%9E%90%EC%9D%B8%EC%9D%84-%EC%9C%84%ED%95%9C-10%EA%B0%9C%EB%AA%85-10-rules-for-better-dashboard-design-4fe915895b9c

[번역] 더 나은 대시보드 디자인을 위한 10개명: 10 rules for better dashboard design

 

 

요약 :

주요 포인트 : 더 나은 대시보드 디자인을 위한 10개명
1) 대시보드의 목적을 정의하라
- Operational Dashboard: 분초를 다루는 사용자들에게 적합. 데이터 편차를 빠르고 정확하게 보여주고, 현재 리소스와 상태를 알려준다.
- Analytical Dashboard : 즉각적인 시간보다는 분석과 의사결정에 필요한 정보를 한눈에, 쉽게 이해하도록 하는 것

2) 정확한 데이터 시각화(representation)를 선택하라
- 분산형 : 연관성과 분포 분석
- 버블 : 3차원 구현 가능

- 네트워크 : 데이터 포인트 간에 연결관계

막대 차트와 라인 차트의 주의점 : 

 데이터 값이 시간이면 무조건 x축을 사용할 것. 시간은 좌측 -> 우측으로 흐른다.

 가로나 세로형 막대 차트를 이용할 때는 열은 랜덤 수치보다 가장 큰 수치로 배열해야 한다.

 라인 차트를 사용할 때 5개이상, 막대 차트를 7개 이상 수치를 표시하는 것은 권장하지 않는다.

- 파이차트, 도넛 차트: 가장 남용되는 차트. 너무 많은 요소가 있거나 비슷한 수치가 있을 때 비교하기 어렵기 때문에 사용에 주의

- 분포 차트 : 이상치, 동향, 수치 내에 있는 정보를 쉽게 이해할 수 있음

 

고민될 때 체크리스트: 

- 하나의 차트에 몇 가지 변수를 표현하고 싶은가?

- 시간의 변화에 따른 값인가? 혹은 그룹 내의 변화를 표현할 것인가?

- 각 변수에 데이터 포인트 몇 개가 표현되어야 하는가?

 

3) 명확하고 일정한 네이밍과 날짜포멧, 그리고 큰값들의 축소화

명확한 프레임워크를 구축하고 툴인에 사용되는 이름의 방식이 같아야 한다.

 

4) 레이아웃과 흐름을 우선시로 정의하라.

핵심요소는 좌측 상단에 두자. (어느 지역을 위해 디자인하냐에 따라 반대로 될 수도 있음)

서로 의지해야하는 정보가 있을 경우 앞뒤로 쉽게 스캔할 수 있게 레이아웃을 위치시키자.

 

5) 일관성있는 형태의 구성요소를 사용하라

카드의 중요한 특징은 컨트롤의 일관성과 안에 있는 데이터이다.

이름은 좌측 상단, 뷰 컨트롤이나 액션은 우측상단 등 일정한 인터페이스일 때 사용자는 편하게 작업할 수 있다.

 

6) 마진값은 두배

네거티브 공간(이미지상에서의 피사체와 그 주변 사이의 공간), 흰 공간을 활용하여 가독성을 높이자

 

7) 정보를 숨기지 말고 너무 인터랙션에 의지하지 마라

한눈에 정보를 보일 수 있게 하는 것은 중요하지만 많은 인터랙션(상호작용)과 스크롤링에만 의지하는 것은 역할을 희석시킨다.

ex) 전체 이미지를 보기 위해 다른 탭을 눌러야한다던가, 스크롤을 해야한다던가..

콘텐츠와 맞는 인터랙션을 사용해서 사용자가 많은 정보에 압도되지 않게 하자.

최대 5-7개 사인의 다양한 위젯으로 뷰를 만들것.

 

8) 주문제작(customization)보다 개인화(personalization)

주문제작(customization)은 사용자들로부터 시작된다. 사용자들이 그들의 필요로 의한 구성 레이아웃, 콘텐츠, 그리고 시스템 기능을 만질 수 있게 한다. -> 사용자들은 결국 혼자서 뷰를 제작하기 귀찮아한다.

개인화(personalization) 은 시스템 그 자체에서 이루어진다. 시스템 아이디로 사용자를 감별하고 그들의 역할과 맞는 콘텐츠, 기능을 보여준다. 

 

9) 테이블이나 리스트를 적용시, 인터랙티브한지 확인하고 정확히 나열되어 있는지 확인하라

공간 효율성, 쉬운 확장성과 개발, 사용자 편의를 위해 데이터 테이블을 쉽게 찾고 바꿀 수 있게 하자.

ex) excel의 필터 같은..

 

10) 대시보드는 마지막에 디자인해라

대시보든 요약한 뷰이고, 다양한 앱의 핵심 정보를 보여주기 때문에 마지막에 디자인하자

-> 그렇지 않으면 다른 페이지를 디자인하는 도중 계속 대시보드를 업데이트 해야한다.

 

---

전반적으로 디자이너에 입장에서 작성된 글이라는 생각을 했다.

대시보드를 구성하는 것이 이렇게 시간이 많이 들고 복잡하게 해야하는 것인지 이해를 못했는데 데이터의 중요성을 알고, 어떻게 봐야할지를 공부하는 입장이 되어보니 축약해서 볼 수 있는 대시보드의 중요성을 실감했다.

예전 회사에서 cms툴 협력사들과 미팅을 하면서 대시보드를 개인화할 수 있는 부분이 메리트라는 설명을 들었었는데 당시에는 그게 왜 가장 큰 장점인지 몰랐다. 주문제작(customization)보다 개인화(personalization)가 중요하다는 것을 알게되고 나니 이해가 갔다.