대시보드 디자인 - 고려 사항 및 모범 사례

이 기사의 오디오 버전을 들어보세요

대시보드는 관련성이 있고 실행 가능한 데이터를 표시하고 통계 및 핵심 성과 지표(KPI)를 추적하는 데이터 시각화 기술을 사용하여 데이터 기반 인텔리전스를 제공하는 독특하고 강력한 방법입니다. 대시보드는 이 데이터를 가장 관련성이 높은 정보를 한 눈에 이해할 수 있는 빠르고 스캔하기 쉬운 형식으로 표시해야 합니다.

이 용어는 전통적인 자동차 대시보드에서 탄생했으며 디지털 세계에서 동일한 기능을 수행하도록 진화했습니다. 스티븐 퓨(Stephen Few)는 그의 책에서 다음과 같이 가장 잘 표현했습니다.

대시보드는 하나 이상의 목표를 달성하는 데 필요한 가장 중요한 정보를 시각적으로 표시한 것입니다. 정보를 한눈에 모니터링 할 수 있도록 단일 화면에 통합 및 정렬됩니다.

이 기사에서는 유형에 관계없이 모든 성공적인 대시보드 디자인의 핵심에 있는 기본 원칙과 전략적, 분석적, 운영적 및 정보적 예를 간략하게 설명합니다.

데이터 시각화 에 대한 올바른 접근 방식을 갖는 것은 성공적인 대시보드의 기초를 다지는 핵심 기능입니다. 데이터 시각화는 그래픽과 그림을 통해 데이터를 표시하는 것입니다. 주요 목표는 의사 결정자가 텍스트 기반 응용 프로그램에서 감지하지 못할 수 있는 패턴을 식별하거나 어려운 개념을 이해하도록 돕는 것입니다.

그들의 책인 Data Visualization 에서 Noah Iliinsky와 Julie Steele은 다음과 같이 말합니다.

데이터 시각화를 디자인하는 디자이너의 목적은 독자가 잘 받아들이고 쉽게 이해할 수 있는 결과물을 만드는 것입니다. 모든 디자인 선택과 특정 구현은 이러한 목적에 부합해야 합니다.

훌륭한 대시보드의 주요 특성

효과적인 대시보드는 실행 가능하고 유용한 정보를 한 눈에 보여줍니다. 복잡한 데이터의 시각적 표현을 단순화하고 이해 관계자가 주요 통찰력을 이해, 분석 및 제시하는 데 도움이 됩니다.

훌륭한 대시보드는 명확하고 직관적이며 사용자 정의할 수 있습니다.

• 그들은 정보를 빠르게 전달합니다.
• 정보를 명확하고 효율적으로 표시합니다.
• 시간 경과에 따른 데이터의 추세와 변화를 보여줍니다.
• 그들은 쉽게 사용자 정의할 수 있습니다.
• 가장 중요한 위젯과 데이터 구성 요소는 제한된 공간에 효과적으로 표시됩니다.

주요 사용자 요구 사항에 대한 시각적 데이터 및 정보의 초기 사용자 정의는 사용성을 개선하고 다른 사용자 페르소나의 필요성을 제거하는 데 도움이 됩니다.

훌륭한 대시보드는 클릭 한 번으로 모든 것을 제공합니다.

• 모든 필수 정보에 즉시 액세스할 수 있습니다.
• 데이터가 우선입니다.
• 정보는 한 화면에 시각적 계층 구조로 명확하게 표시됩니다.
• 이 디자인은 더 많은 정보를 드릴다운할 수 있는 추가 기회와 함께 희소하고 명확한 초기 데이터를 포함하는 일관된 개요를 제공합니다.
• 요소(차트, 표, 양식)는 모달 창에서 더 많은 세부사항을 불러오거나 더 세부적인 페이지로 이동할 수 있는 기능과 함께 최소화된 보기에 표시됩니다.
• 이 디자인은 사용자가 데이터가 표시되는 방식을 사용자 정의하고 레이블, 범주 및 KPI를 사용하여 콘텐츠를 필터링할 수 있도록 하는 필터로 사용성을 개선합니다.

복잡성 감소로 명확성 제공

데이터가 넘쳐나는 세상에서 명확한 정보를 제공하는 것은 달성하기 가장 어려운 일 중 하나입니다. 가장 관련성이 높은 데이터만 대시보드에 표시하는 것이 중요합니다. 더 많은 정보를 표시할수록 사용자가 필요한 정보를 찾기가 더 어려워집니다.

선택할 수 있는 데이터가 너무 많은 경우 디자이너는 가장 관련성이 높은 하위 집합만 표시해야 합니다. 오해의 소지가 있고 불분명한 측정항목의 우선순위를 정하고 신중하게 제거해야 합니다.

효과적인 대시보드 디자인 결정은 다음을 따라야 합니다.

• 프로젝트 목표
• 데이터의 특성
• 사용자의 요구

시각화(또는 다른 종류의 커뮤니케이션)를 읽을 때 독자는 문제에 전념할 수 있는 제한된 지력을 가지고 있습니다. 이 지력 중 일부는 시각화를 해독하는 데 전념할 것입니다. 남아 있는 모든 지력은 메시지를 이해하는 데 사용될 수 있습니다(독자가 아직 좌절감에 포기하지 않은 경우). Noah Iliinsky 및 Julie Steele(데이터 시각화)

대시보드의 핵심 목표는 복잡한 정보에 액세스할 수 있고 소화하기 쉽게 만드는 것입니다. 따라서 데이터를 표시하는 인터페이스는 사용자의 인지 부하와 검색 시간을 최소화하기 위해 깨끗하고 직관적이어야 합니다.

정보 아키텍처는 지원 또는 보조 메트릭에 대한 액세스를 허용하면서 필수 데이터를 먼저 제시해야 합니다. 점진적인 드릴다운 시스템은 일반적인 개요에서 시작하여 더 자세히 설명하는 방식으로 설계되어야 합니다. 이는 데이터 우선 순위 지정을 용이하게 하고 명확성을 제공합니다.

대시보드 목표 결정 및 적절한 데이터 표시

대시보드를 디자인할 때 성공적인 대시보드 디자이너는 해결해야 할 문제와 사람들이 데이터에서 취해야 하는 실행 가능한 핵심 통찰력에 초점을 맞춘 잘 정의된 목표 세트로 시작합니다.

좋은 디자인 목표는 효율적이고 정확한 실행을 촉진합니다. 목표 설정을 위해 SMART 프레임워크를 사용하면 구체적 이고 측정 가능 하며 실행 가능 하고 현실적 이며 시간 기반 목표에 중점을 둡니다.

대시보드 디자인 목표를 결정할 때 물어봐야 할 몇 가지 주요 질문:

• 특정 목표를 달성하기 위해 사용자는 몇 단계를 거쳐야 합니까?
• 사용자가 스스로 목표를 달성할 수 있을 만큼 인터페이스가 직관적입니까?
• 사용자가 목표를 성공적으로 달성하기 위해 필요한 정보는 무엇입니까?

특정 대시보드 디자인의 목표가 무엇인지 결정하려면 "이 디자인이 사용자를 위해 어떤 특정 문제를 해결할 것입니까?"라고 질문하여 정의하십시오. 대답은 어떤 메트릭, 속성, 값, 시각적 개체 및 데이터가 중요한지에 대한 통찰력을 제공합니다.

목표 중심 디자인은 실제 문제에 대한 솔루션에 중점을 두고 있으며 모든 훌륭한 대시보드 디자인의 기초입니다. 비즈니스 목표에 대한 명확한 이해로 시작하여 사용자 목표를 고려한 다음 전달해야 할 주요 정보를 전달하십시오.

대시보드 디자인의 컨텍스트

대시보드 디자인의 가장 큰 과제 중 하나는 여러 페르소나를 제공하는 것입니다. 각 사용자 역할이 정의되면 요구 사항이 겹치는 부분과 분기되는 부분을 이해하는 것이 중요합니다.

효과적인 커뮤니케이션은 모든 성공적인 대시보드 디자인의 기본 원칙입니다. 사용자가 자신을 발견할 수 있는 잠재적인 시나리오를 예측하면 사용자의 상황을 더 잘 이해하는 데 도움이 됩니다.

설계할 때 항상 사용자의 컨텍스트를 염두에 두고 기술 지식, 시스템 전반에 대한 친숙도, 목표 등을 식별합니다.

사용자 행동과 컨텍스트를 결정할 때 다음 질문을 해야 합니다.

• 디자인은 방문자가 읽는 데 익숙한 방향을 고려합니까?
• 대시보드와의 상호 작용에 기술 지식이 필요합니까?
• 사용자가 몇 번의 클릭만으로 대부분의 작업을 수행할 수 있습니까?
• 드릴다운 메뉴를 생성하여 디자인이 사용자 컨텍스트와 일치합니까? 암시적인 도상과 색상 팔레트를 사용합니까?

대시보드 디자인에 사용되는 색상 팔레트도 컨텍스트로 고려해야 합니다. 많은 B2B SaaS 제품 대시보드는 몇 시간 동안 계속 사용되기 때문에 어두운 테마의 UI로 설계되었습니다.

어두운 테마의 UI는 눈의 피로를 줄이고 인터페이스 내에서 시각적 선명도를 지원하는 데 도움이 될 수 있습니다. 그러나 이 접근 방식을 사용하려면 이전 디자인 블로그 기사: Dark UI Dos and Don'ts에서 설명된 대로 장점, 단점 및 잠재적인 함정과 같은 디자인 방향에 대한 신중한 평가가 필요합니다.

사용자 조사를 통한 더 나은 대시보드 디자인

사용자 조사는 사용자에게 관련성 있고 명확하며 간결한 데이터가 제공되는 환경을 만드는 데 도움이 됩니다. 이렇게 하면 사용 및 액세스 방법이 아니라 찾고 있는 콘텐츠와 데이터에 대해 생각하는 데 도움이 됩니다.

일부 대시보드는 작동해야 하거나 동일한 기본 대시보드를 보는 다양한 역할의 사용자에 맞게 손쉽게 사용자 지정할 수 있습니다. 사용자 연구는 사용자의 목표, 멘탈 모델, 환경적 맥락 및 문제점을 결정하는 데 도움이 되기 때문에 중요합니다. 최종 대시보드 디자인에 큰 영향을 미치는 요소입니다.

사용자 경험 디자이너이자 연구원이자 작가인 Mike Kuniavsky는 이것이 "청중에게 디자인이 미치는 영향을 이해하는 과정"이라고 말합니다.

디자이너는 다양한 사용자 유형을 정의하고 목표가 동일한 부분과 다른 부분을 이해해야 합니다. 한 사용자 유형과 다른 사용자 유형에 대해 어떤 정보가 가장 실행 가능합니까? 사용자 유형마다 다른 레이아웃이 필요한지 또는 보다 일반적인 사용 사례에 대한 솔루션이 있는지 고려해야 합니다.

이를 염두에 두고 기본적인 와이어프레임으로 시작하여 사용자 연구 단계에서 실제 사용자와 테스트할 수 있는 프로토타입으로 이동하는 것이 좋습니다. 진정으로 가치 있는 통찰력은 단 5명의 사용자와 함께 짧은 사용자 연구 단계에서 나올 수 있으며, 그 결과 엄청난 시간을 절약할 수 있습니다.

대시보드 디자인의 점진적 공개

점진적 공개는 혼란을 줄여 사용자의 주의를 유지하는 데 사용되는 기술입니다. 점진적 공개 시스템을 만들면 사용자 중심 환경을 만드는 데 도움이 되어 사용자의 관심을 우선시하고 실수를 방지하며 시간을 절약할 수 있습니다. 또한 사용자는 자신에게 중요한 주요 기능에 집중할 수 있으며 필요하지 않거나 관심이 없는 기능을 포함하여 모든 기능을 살펴보지 않아도 됩니다.

점진적 공개는 오류율을 상당히 줄이는 대시보드 디자인 모범 사례입니다. 시스템이 기능 우선 순위를 기반으로 할 때 효율성을 개선하고 사용자가 대시보드에 대한 이해를 높이는 데 도움이 됩니다.

점진적인 공개는 고급 기능이나 거의 사용되지 않는 기능을 보조 화면으로 미루어 응용 프로그램을 더 쉽게 배우고 오류가 발생하기 쉽게 만듭니다. – 제이콥 닐슨

애니메이션은 여러 기능을 수행하면서 다양한 사용자 요구를 충족시키는 좋은 방법입니다. 데이터와 시각 자료가 로드되는 동안 사용하기에 좋은 옵션이며 고급 점진적 공개 솔루션입니다.

애니메이션은 모션의 환상을 만드는 과정입니다. 이는 진행감과 지속적인 피드백을 만들어 사용자의 불확실성을 줄이고 인지된 성능을 높이는 역학입니다.

대시보드에서 점진적 공개를 사용할 때의 이점:

• 사용자 불확실성 및 불안 감소(진행 징후를 표시함으로써 사용자는 모든 것이 의도한 대로 작동하고 있음을 확신합니다)
• 사용자를 기다리게 하지 않고 볼 수 있는 것(데이터의 부분적 표시) 제공
• 사용자에게 다음 단계에 대한 명확한 기대치를 제공하고 정보가 계층적으로 표시되는 방식을 이해합니다.

점진적인 공개 및 데이터 로드와 관련된 잠재적 문제는 다음과 같습니다.

• 부적절한 방식으로 지표 및 공개를 사용합니다. 짧은 로딩 시간과 쓸모없는 단계는 주의를 산만하게 만들고 사용성 원칙에 어긋나게 작동합니다.
• 명확한 진행률 표시 없이 데이터 검색이 지연되면 사용자가 불확실해지고 이탈률이 높아질 수 있습니다.
• 정적 진행률 표시기를 사용하는 것은 의미가 거의 없는 솔루션이며 진행 상황에 대한 충분한 정보를 제공하지 않아 사용자의 불확실성과 이탈률을 높일 수도 있습니다.

요약

대시보드는 특히 대시보드 디자인 모범 사례 및 적절한 데이터 시각화를 따르는 사용자 중심의 목표 중심 디자인을 통해 데이터 및 기타 정보를 전달할 수 있는 강력한 방법입니다. 모든 대시보드가 ​​다르고 고유한 목표, 요구 사항 및 제한 사항이 있지만 다음과 같은 기본 원칙을 따르면 세부 사항에 관계없이 뛰어난 디자인을 만드는 데 도움이 됩니다.

• 무엇보다도 사용자 유형에 공감하고 목표를 이해하십시오.
• 암시적인 시각 효과, 레이블, 점진적 공개 기법 및 애니메이션을 사용하여 사용자에게 명확한 스토리를 전달합니다.
• 사용자 조사 기술을 적용하여 복잡한 것을 쉽게 만드십시오.
• 드릴다운 시스템에서 적절한 시기에 데이터와 정보를 공개합니다.
• 데이터 시각화를 사용하여 의미 있는 방식으로 정보를 표현합니다.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 제품 디자인에서 인간 중심 디자인의 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 모바일 인터페이스에 대한 경험적 원리
• 예측적 디자인: 마법 같은 사용자 경험을 만드는 방법