아티클 스터디_12

https://iii.ad/3578e2

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

 

실용적 가이드 practical Guide

 

기업들은 모든 정보, 트렌드, 위험 요소, 실시간 피드백을 시각화 한 것, 기업을 밝은 미래로 이끌어줄 간단한 시각화를 꿈꾼다. 대시보드는 사용자가 보는 순간 보여지는 중대한 정보 등을 한눈에 볼 수 있는 미리보기이다. 자동차의 계기판에 비유하며 콕피트라고도 불린다. 좋은 대시보드를 만들기 위한 방법은 다음과 같다.

 

1. 대시보드의 목적을 정의하라.

 

대시보드를 기능 바탕으로 흔히 분류하는 방법이 있다. 

 

* operational dashboard

분초를 다루는 임무를 하는 사용자들에게 빠르게 중요한 정보를 전달하는 것이다. 사용자들에게 데이터 편차를 빠르고 정확하게 보여주고 현재 리소스와 상태를 알려주는 것이 이 대시보드의 주요 임무이다. 시각적으로 보조 기능을 보여주며 사용자들이 빠르고 능동적이고 효율적으로 만드는 디지털 컨트롤 룸이다. 

 

* analytical dashboard

위 대시보드와 반대로 분석과 의사결정을 지을 수 있는 정보를 한눈에 보게 하고, 대신 시간에 민감하지 않으며 즉각적인 조치에 집중하지 않는다. 최우선의 목표는 사용자들이 데이터를 더 쉽게 이해할 수 있게 하고, 트렌드를 분석하며 의사결정 짓게 하는 것이다. 

 

어떤 대시보드를 사용하던 사용자의 역할과 무엇을 만족해야 하는지에 따라 선택되어야 한다. 제품의 복합적인 역할들이 있어 매우 독특한 형태의 대시보드가 탄생할 수도 있다. 

 

2. 정확한 데이터 시각화 representation 를 선택하라

 

대시보드를 다룰 때, 실제로는 차트를 논한다. 데이터 시각화는 매우 복잡한 임무이며 시간에 따라 변하는 유동적인 정보와 정적의 데이터 등의 다양한 유형의 집합체인 대시보드를 만들 때 더욱 그렇다. 잘못된 차트의 유형을 선택하거나, 가장 평범한 형태를 디폴트로 가져가는 것은 사용자들을 헷갈리게 하거나, 데이터 값을 잘못 이해할 수 있는 소지가 있다. 디자인 시작 전 내부 문서나 보고 자료를 보고 영감을 얻어야 한다. 백지에서 시작한다면 다음과 같은 시각화를 참고해야 한다.

 

* 데이터의 관계를 쉽게 볼 수 있는 그래프 타입들

 

분산형 차트는 연관성과 분포 분석을 위해 주로 사용된다. 버블 차트는 3차원을 차트 안으로 가져오게 도와준다. 네트워크 도표는 데이터 포인트 간에 가장 많은 연결 관계를 알기 위해 매우 유용하다.

 

* 데이터값을 비교할 수 있는 그래프 타입들

 

비교하기 위해 막대 차트와 라인 차트가 가장 많이 사용될 것이다. 비교 차트는 다음과 같은 제안을 따르는 것이 좋다.

 

- 하나의 값이 시간이면 무조건 X 축을 사용해야 한다. 시간은 차트의 좌측에서 우측으로 흐른다.

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

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

 

* 전체의 구성요소를 비교할 수 있는 그래프 타입들

 

파이, 도넛 차트는 시각화에서 좋은 평판을 가지고 있지 않다. 이 차트들은 가장 많이 사용되면서 동시에 가장 남용되는 차트이다. 너무 많은 요소가 있거나 비슷한 수치가 있을 때 특히 비교가 어렵고 사람들은 면적, 각도로 비교를 잘 하지 못하기 때문이다. 

 

* 분포를 비교할 수 있는 그래프 타입들

 

분포 차트는 이상치, 동향, 그리고 수치 내에 있는 정보를 쉽게 이해하게 도와준다.

 

* 사용하지 말아야 하는 그래프 타입들

 

게이지는 과거에 대시보드에서는 중요했지만 물질적인 것을 디지털로 복제해서 사용하는 것은 좋지 않다. 3D 차트는 가독성이 매우 떨어지기 때문에 사용하지 않는 것이 좋다.

 

* 상황에 따라 사용해야 하는 그래프 유형

 

어떤 표현을 사용할지 고민된다면 다음과 같은 질문을 우선 해보는 것이 좋다.

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

- 시간의 변화에 따른 값을 표현할지 혹은 아이템이나 그룹 내의 변화를 표현할지?

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

 

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

 

대시보드의 목적이 한눈에 보이는 메시지이기에 작은 요소 하나하나 다 중요하다. 명확한 프레임워크를 구축하는 것의 장점은 데이터의 일관성. 툴인에 사용되는 이름의 방식이 같을 때 툴을 더 편리하고 쉽게 사용할 수 있다.

 

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

 

그리드는 효과적인 조정과 일관성을 유지하고 간단한 구조를 만들며 디자인의 뼈대를 손쉽게 한다. 디자인 요소를 올릴 수 있는 '보이지 않는' 선으로 이루어져 있다. 이렇게 함은 전반적인 시스템으로 묶게 되고 합리적으로 구조를 지탱한다. 수많은 정보를 매끄럽게 정리하기 위해 대시보드 디자인에서는 결정적인 요소이다. 

 

어디에 어떤 정보가 들어가야 할지 고민이 된다면 이것을 명시하면 된다.

- 좌측 상단에 자연스럽게 시선이 몰리기 때문에 핵심 요소는 좌측에 놓도록 하자. 첫 줄이 다 차면 다음 줄로 내려보낸다.

- 만약에 서로 의지된 정보 그룹이 있다면 앞 뒤로 쉽게 볼 수 있게 위치하는 디자인을 해야한다.

 

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

 

그리드를 정의한 후 우리는 정보, 차트, 컨트롤을 채택할 여러 위젯을 사용할 수 있다. 카드는 쉽게 조작이 가능하며 가장 중요한 것은 무한대의 조작이 가능하다는 것이다. 스케일 업과 다운을 필요로 하는 반응형 디자인에 탁월하다. 

 

 

카드의 중요한 특징은 컨트롤의 일관성과 담고 있는 데이터이다. 이름을 좌측 상단에 놓고, 우측 상단에는 뷰 컨트롤이나 액션, 나머지 공간은 데이터를 채울 수 있다. 모든 구성이 일정할 때 사용자들은 인터페이스를 언제 어디서든 예상하는 화면으로 편하게 작업할 수 있다. 

 

 

이러한 레이아웃을 사용한다면 추가적으로 반응형이나 사용자 정의 시 유동성이라는 장점이 생긴다. 카드가 커질 때나 작아질 때 모든 컴포넌트는 정해진 위치에 정박하게 된다. 

 

6. 여백의 중요성

 

디자인 구성요소 사이의 영역의 여백 공간은 사용자들이 의식하지 못하지만 디자이너들에게는 신경 쓰이는 요소이다. 하얀 공간이 밸런스가 맞아야 가독성이 생긴다. 

 

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

 

길고 스크롤 가능한 대시보드는 차곡차곡 정보가 아래에 위치하게 되어 사용자의 부담을 줄이려 하지만 이렇게 하면 창에 보이는 화면만 발견되게 된다. 아래에 있는 내용은 적은 관심을 받게 된다.

 

따라서 요약해서 핵심 정보만 보이게 하고 더 많은 리서치와 인터뷰를 통해 핵심정보를 분석하고 순위를 매겨야 한다. 또한 최대 5-7개의 다양한 위젯으로 구성하는 것이 좋을 것이다.

 

8. 주문제작보다는 개인화

 

개인화는 시스템 그 자체에서 이루어진다. 시스템 아이디로 사용자를 감별하고 그들의 역활과 맡는 콘텐츠, 경험으로 데려가 준다. 주문제작은 사용자들로부터 시작된다. 시스템이 사용자들이 그들의 필요로 의한 구성 레이아웃, 콘텐츠, 시스템 기능을 만질 수 있게 한다. 

 

사용자에게 그들이 사용하는 대시보드를 커스텀으로 조절하게 하는 것은 좋은 의도지만 전체 뷰가 이미 개인화된 조건일 경우 해당된다. 커스텀 기능을 위해 여러 방안을 디자인하는 것은 실제 사용자들이 뭘 필요로 하는지 알아보는 프로세스가 귀찮아서 핑계일 경우가 흔하다.

 

9. 테이블이나 리스트 적용시 인터렉티브한지 확인하고 정확히 나열하기

 

데이터 테이블은 큰 수치의 정보를 보여줄 때 매우 유용하다. 더 나아가 공간의 효율성, 쉬운 확장성과 개발, 사용자 편리와 같은 이득이 있다. 데이터 테이블 관한 정보 : https://taras-bakusevych.medium.com/data-tables-design-3c705b106a64

 

10. 대시보드는 마지막에 디자인

 

대시보드는 모든 것을 요약한 뷰이고 핵심 정보를 보여주기 때문에 마지막에 제작하는 것이 현실적이다. 그렇지 않으면 디자인 도중 계속 대시보드를 업데이트 하는 사태가 생긴다. 

 

- 인사이트 

의사결정이나 빠른 정보 습득과 같은 대시보드의 목표에 맞춰 올바른 대시보드를 만들기 위해서는 읽는 대상인 사용자 중심의 설계가 중요함을 알 수 있었고, 정보의 나열이 아닌 핵심 정보를 선별하고 강조하여 전달하고자 하는 데이터의 정보를 잘 전달해야 함을 알 수 있었습니다. 그 외에도 디자인적으로 일관되고 통일된 레이아웃이 중요한 것 같았습니다. 개인적으로는 오늘 배운 도넛 차트가 여러 정보를 한눈에 잘 보이게 해서 많이 사용될 것 같았는데 아티클에서는 가장 남용되는 사례라고 해서 이런 부분도 신경써서 다음에 있을 프로젝트에서도 고려해봐야 할 점이라고 생각했습니다.