당신이 오늘날 가장 발전된 자동차의 소유자이고 이 자동차에 기술이 제공할 수 있는 모든 기능과 센서가 있다고 상상해 보십시오.

이 자동차의 대시보드는 어떻게 생겼을까요?

분명히 우리는 우리가 운전하고 있는 속도에 대한 표시를 얻을 수 있고 분명히 모터 rpm, 연료 수준 및 우리가 운전한 거리에 대한 표시를 갖게 될 것입니다. 그러나 우리는 오늘날 존재하는 가장 진보된 자동차의 소유자임을 기억합시다. 따라서 자동차 내부 및 외부 온도, 해발 고도, 풍속, 마일당 연료 소비량, 차의 무게, 승객과 짐, 차의 각도와 위치, 어느 한 층의 기압, 선회할 때 경험하는 G포스, 운전 분위기에 맞는 음악 추천…

이 모든 기능이 있으면 좋지만 어떤 기능이 운전을 개선하고 어떤 기능이 우리의 목표(장소 간 안전한 운전)를 방해하고 주의를 분산시킬까요?

이 기사에서는 SaaS 제품용 대시보드를 구축할 때 해결해야 할 비밀 소스와 몇 가지 황금률을 공유할 것입니다.

1. 콘텐츠 정렬 - 모든 것이 매우 중요한 것은 아닙니다.

사용자를 알아가는 동안 모든 종류의 데이터를 문서화하고 수집하는 것이 좋습니다. 모든 인터뷰 및 작업 세션에서 토론에서 일부 매개변수 또는 메트릭이 제기될 수 있습니다. 정보의 모든 조각을 수집하여 벽(또는 좋아하는 캔버스)에 펼칩니다.

사용자와 요구 사항에 대한 충분한 데이터를 수집한 후에는 대시보드가 ​​제품으로 들어가는 관문이지만 제품 자체는 아니라는 점을 기억하는 것이 중요합니다. 주의가 필요한 영역으로 이동하는 방법.

대시보드는 전체 데이터 리포지토리를 표시할 필요는 없지만 대시보드가 ​​모니터링하는 모든 정보를 다루는 높은 수준의 정보를 표시할 필요가 없으며 제품의 모든 정보를 대시보드에 표시하거나 설명할 필요는 없습니다.

다음과 같은 상황을 상상해 보십시오.

우아한 재킷을 사야 하는데 가장 가까운 가게에 들어서면 가게의 모든 상품이 문 앞 테이블에 쌓여 있는 것을 보게 된다.

어떻게 하시겠습니까?… 아마도 상점 직원 중 한 명에게 도움을 요청할 것입니다. 운 좋게도 상업 상점에서 길을 찾는 것은 매우 쉽습니다. 상점에 들어가서 남성 / 여성 부서로 1 차를 타고 오른쪽에 해당 부서를 한 눈에 볼 수 있습니다 (최대 15 초).

귀하의 제품은 동일하게 작동해야 하므로 정보를 얻기 위해 일부 정보를 '숨기거나' 사용자와의 최소한의 상호작용에 의존하는 것이 좋습니다. 사용자에게 모든 정보를 퍼붓는 것보다 낫습니다.

처리 중인 데이터의 우선순위를 3가지 그룹으로 분류해 보세요.

1. 매우 중요
2. 높은 가치
3. 가져서 좋다

2. 귀하의 유형은 무엇입니까? 다른 목적에는 다른 도구가 필요합니다.

대시보드에는 5가지 주요 유형이 있으며, 페르소나 기술, 표시되는 정보의 유형(및 양) 및 사용자가 수행할 수 있는 작업에서 차이가 발생합니다. 사용자와의 대화를 기반으로 사용자에게 어떤 종류의 도구가 필요한지, 어떤 종류의 인사이트를 제공할 수 있는지, 사용자가 도구와 어떤 상호작용을 하는지(있는 경우) 이해하려고 노력하세요.

대시보드 살펴보기

목표: 실시간으로 시스템(여러 부분에서)의 조감도 제공

메인 페르소나: 다양한

특성: 이러한 종류의 대시보드를 제어 센터로 연관시킬 수 있으므로 비숙련 사용자에게 적용되므로 학습 곡선이 짧아야 하기 때문에 매개변수와 데이터가 거의 없습니다.

운영 대시보드

목표: 프로세스의 성능을 모니터링하고 사용자가 신속하게 해결해야 하는 문제를 시각적 및 대화식으로 가리킬 수 있도록 합니다.

기본 페르소나: 이러한 대시보드는 운영 절차를 추적하는 데 사용되므로 숙련된 중간 수준의 직원이 가장 일반적으로 운영합니다.

특성: 사용자는 다양한 컨텍스트에서 데이터를 분할하고 선택한 기간 동안 데이터를 측정하는 것과 같이 대시보드를 사용하여 다양한 활동을 필터링하고 수행할 수 있어야 합니다.

일반적인 실수: 운영 대시보드를 사용하면 사용자가 다양한 프로세스를 모니터링하고 분석하여 많은 정보를 구축하거나 처리할 수 있습니다. 사용자 흐름에 따라 정보를 배치하고 그룹화해야 합니다. 사용자가 필요한 데이터에 매우 직관적이고 쉽게 액세스할 수 있어야 합니다.

전략적 대시보드

목표: 전략 대시보드는 다양한 기간의 비즈니스 성과(및 목표)에 대한 비교 보기를 관리 팀에 제공하고 일반적으로 미래 경로에 대한 예측을 제공하는 측정 도구입니다.

주요 페르소나: 일반적으로 관리 또는 분석가

특성: 대부분의 전략적 대시보드는 서로 다른 그룹 또는 기간의 서로 다른 변수를 비교하는 데 기반을 두고 있으며 대화형이어야 하며 달성하려는 목표 또는 목표를 제시해야 합니다.

일반적인 실수: 전략 대시보드를 통해 관리 팀은 비즈니스 효율성과 생산성을 개선하기 위한 올바른 결정을 내릴 수 있습니다. 사용자의 목표를 잘 정의하고 목표 달성 과정을 강조하세요(관리자는 이사회 프레젠테이션에서 진행 상황을 보여주는 것을 좋아합니다).

분석 대시보드

목표: 방대한 양의 데이터를 중심으로 하는 분석 대시보드는 사용자가 정의된 특정 세그먼트를 자세히 살펴보고 다양한 집계 및 보기에서 탐색할 수 있는 기능을 제공합니다.

주요 인물: 분석가

특성: 실시간에 중점을 둔 운영 대시보드와 달리 분석 대시보드는 과거 데이터에 의존하여 추세를 식별하고 여러 변수와 비교하며 예측을 생성합니다.

일반적인 실수: 분석 대시보드의 초점은 특정 정보 세그먼트(주어진 시간에)에 있으며 대부분의 사용자 작업은 이 세그먼트를 잘라서 다른 세그먼트와 비교합니다. 필터링 메커니즘이 작동하기 쉬운지 확인합니다. 와 함께, 그것은 그의 흐름에서 사용자를 지연시키지 않습니다 .

전술 대시보드

목표: 의사 결정을 가속화하고 주의가 필요한 영역 강조 표시

메인 페르소나: 일반적으로 중간 수준의 경영진이 사용합니다.

특성: 전술 대시보드는 특정 부품/부서/그룹에 대한 전체 비즈니스를 제시하고 사용자가 문제가 있는 영역에 집중해야 합니다. 히트맵, 토폴로지 맵, 거품형 차트 및 그룹 내부의 요소를 보여주는 기타 BI 구성 요소는 일반적으로 이러한 종류의 대시보드에 적용됩니다.

사용자에게 필요한 것이 무엇인지 이해하고 나면 마침내 적절한 프레임워크와 대시보드 유형을 선택하여 데이터를 표시할 수 있습니다.

1. 한 눈에 보기: 주어진 시간 프레임에서 요약된 중요한 지표
2. 운영: 프로세스의 다양한 메트릭으로 성능 표시
3. 전략적: 달성/개선에 필요한 장기 전략 및 지표에 중점을 둡니다.
4. 분석: 다양한 보기에서 잘라서 표시할 수 있는 방대한 양의 데이터 포함
5. 전술적: 비즈니스에 대한 심층 분석을 제시하여 의사 결정을 가속화하고 주의가 필요한 영역을 강조 표시합니다.

'5초의 법칙'을 아시나요? (바닥에서 음식을 먹는 것에 관한 것이 아닙니다)

5초 이내에 화면에서 필요한 것을 찾는 기능에 대한 규칙이며 계층 구조에 관한 것입니다.

규칙은 간단합니다. 정보가 중요할수록 더 두드러져야 합니다.

어떤 정보가 어디로 가야 하는지 결정을 내릴 때 사람들이 정보를 읽는 방식과 이 정보가 얼마나 중요한지에 따라 결정을 내려야 합니다. 화면의 다양한 계층 및 위치에 정보를 배치하여 화면에서 사용자 여정을 생성할 수 있으므로 올바른 위치와 올바른 순서로 사용자의 주의를 끌 수 있습니다. KPI는 일반적으로 대시보드에 뛰어들기에 가장 흥미로운 영역이기 때문에 시작하기에 좋은 곳입니다. 어려운 내용에 뛰어들기 전에 컨텍스트를 얻을 수 있는 요약입니다.

많은 유형의 계층이 있고 이를 적용하는 더 많은 방법이 있습니다. 일반적인 유형을 예제와 함께 요약해 보겠습니다.

크기 계층

모든 데이터 지표가 동일한 것은 아니며 일부는 흐름의 초기에 필요할 수 있습니다. 요소가 클수록 더 눈에 띕니다. 본질적으로 사용자는 더 큰 구성 요소에서 작은 구성 요소로 시작합니다.

위치 계층

화면의 왼쪽 상단은 자연스럽게 더 많은 관심을 받게 되므로 중요한 정보는 위에서 아래로, 왼쪽에서 오른쪽으로 배치하세요. 이 순서로 구성 요소를 배열하면 의도한 위치에서 사용자가 흐름을 시작할 수 있습니다.

공백 계층

매개변수가 주의를 끌도록 하려면 다른 요소 근처(또는 중간)가 아닌 공백으로 매개변수를 격리하고 둘러싸십시오.

색상 계층

눈에 띄는 색상은 요소를 분리하고 굵게 만들거나 다른 상황별 그룹으로 정렬할 수 있습니다.

모든 구성 요소가 동일한 계층에 있을 때 관련 영역에 사용자의 관심을 집중시키기가 더 어렵습니다.

화면이 너무 압도적이면 사람들이 덜 붐비는 곳(흰색이 더 많고 구성 요소가 더 적은 곳)으로 관심이 자연스럽게 쏠릴 것입니다.

놓칠 수 있는 기회를 잡을 수 없는 중요한 매개 변수가 있는 경우 간단히 말해서 몇 가지 계층 구조 규칙은 다음과 같습니다.

• 화면의 왼쪽 상단은 자연스럽게 더 많은 관심을 받게 되므로 중요한 정보는 위에서 아래로, 왼쪽에서 오른쪽으로 배치하세요.
• 매개변수가 주의를 끌도록 하려면 매개변수를 다른 요소 사이나 근처가 아닌 공백으로 격리하고 둘러싸십시오.
• 요소가 클수록 더 눈에 띕니다.
• 고유한 색상으로 요소를 분리하고 대담하게 만들 수 있습니다.

데이터 시각화를 "읽을" 때 청중은 문제에 전념할 수 있는 두뇌의 양이 제한되어 있습니다. 이 두뇌 중 일부는 시각화를 해독하는 데 전념할 것입니다. 남은 지력은 메시지를 이해하는 데 사용될 수 있습니다.

대시보드의 목적은 복잡한 정보에 액세스하고 소화하기 쉽게 만드는 것입니다. 따라서 데이터를 표시하는 인터페이스는 사용자의 인지 부하와 무엇이 있는지 이해하는 데 소요되는 시간을 최소화하기 위해 깨끗하고 간단해야 합니다.

모든 단어, 이미지 및 차트는 인터페이스에 특정 기능 또는 이점을 제공해야 합니다. 불필요한 텍스트나 그래픽을 제거하여 간단한 레이아웃을 만듭니다. 좋은 대시보드는 사용자에게 즉각적인 통찰력을 제공하고 최소한의 마찰로 작업에 보냅니다.

아래의 두 예는 동일한 통찰력을 공유하며, 위의 예는 모든 것을 모든 곳에 퍼뜨리는 반면, 아래의 예는 중요한 통찰력을 강조하고 필요에 따라 보조 정보를 제공합니다.

너무 많은 정보를 배치하면 사용자는 이를 무시하는 경향이 있으며(구조를 이해하는 데 너무 많은 작업이 필요한 것 같습니다) 아마도 다른 곳으로 이동하는 것을 선호할 것입니다.

간단한 질문에 대한 간단한 답변을 찾는 간단한 방법을 사용자에게 제공합니다.

5. 관계 찾기 및 통찰력 제공(사용자가 너무 많이 생각하지 않도록 함)

메트릭과 계층 구조를 감지하고 이해하는 것만으로 작업이 끝나는 것이 아니라 이들 간의 관계도 이해해야 합니다. 대부분의 매개변수는 독립형이 아니라 서로의 파생물이며 매개변수 뒤에 있는 관계를 이해하고 사용자가 올바른 결정과 조치를 쉽게 얻을 수 있는 방식으로 매개변수를 제시하는 것이 중요합니다.

이것은 약간 복잡한 주제이므로 간단한 예를 들어 설명하겠습니다.

소매 네트워크 관리자는 그들에게 가장 중요한 매개변수가 그의 사업의 '이익 '이라고 말할 것입니다. 그에게 수익을 늘리기 위해 무엇을 해야 하는지 물어보면 이전에 언급하지 않은 '수익' 및 '비용'과 같은 다른 매개변수를 사용하고 있음을 알게 됩니다 .

이러한 매개변수(수익 및 비용)가 없으면 이익 매개변수는 의미가 없습니다.

수익 — 비용 = 이익

서로 다른 매개변수 간의 관계를 정의한 후에 작업 순서에서 중요도 및 위치에 따라 각 매개변수에 대한 적절한 시각화를 제공할 수 있습니다. 간섭을 최소화하면서 약간의 통찰력을 추가하면 사용자가 흐름에 집중하고 추가 세부 정보를 제공하는 데 도움이 됩니다.

고립된 숫자는 컨텍스트와 가치를 거의 제공하지 않으며 사람이 너무 많이 생각하게 만듭니다. 특정 메트릭, 비교된 과거 데이터 또는 최적의 값에 추가하는 것이 좋습니다.

6. 사전 색상 결정 - (올바른 메시지를 제공하는 방법)

색상 선택은 대시보드와 관련하여 매우 중요합니다. 올바른 색상을 선택하면 사용자 워크플로가 매우 쉬워지고 더 매력적인 UI를 만들 수 있지만 잘못된 색상을 선택하면 전체 UX에 더 큰 피해를 줄 수 있습니다.

다음은 UI에 색상을 적용하기 전에 고려해야 할 몇 가지 핵심 요소입니다.

상표

브랜드 색상이 대시보드 디자인 및 데이터 시각화에 이상적인 선택이라고 가정하기 쉽지만 항상 그런 것은 아닙니다. 귀하의 브랜드가 귀하의 제품에 어떻게 그리고 어디에 반영되는지 생각하되 스타일 가이드에 적용하지는 마십시오. 브랜드 컬러는 언제든 반영될 수 있는 위치를 지정하고, 나머지 구성요소는 메시지를 전달하는 컬러로 디자인하는 것이 좋습니다.

상태

상태는 일반적으로 신호등 색상(빨간색, 주황색, 노란색)으로 표시되거나 색상 또는 부족으로 표시됩니다. 사용자는 한눈에 상태를 파악해야 합니다. 상태를 이해하기 위해 그렇게 열심히 노력하지 않아도 된다면 더 좋습니다.

• 심각도 수준
• 켜기 끄기
• 온/오프
• 연결/연결 해제

일반적으로 사용자의 관심을 끌고 워크플로를 중지하는 것이 목표이므로 빨간색 또는 기타 눈에 잘 띄는 색상으로 표시됩니다.

• 알림
• 증가 감소
• 메시지
• 알림

색상에는 일반적으로 알려진 의미가 있으며 사용자를 나타내거나 주의가 필요한 위치로 안내할 수 있습니다. 불필요한 색상으로 사용자를 혼란스럽게 하거나 주의를 분산시키지 마십시오. 색상에 대한 즉각적인 통찰력을 제공하려면 최소한의 간섭으로 인터페이스를 깨끗하게 유지하는 것이 좋습니다.

마무리

대시보드는 종종 마케팅 부서에서도 사용됩니다. 작업 화면이나 엑셀 스프레드시트보다 훨씬 더 사진이 잘 나오고 매력적입니다. 올바른 위치에 약간의 색상을 지정하면 조치가 필요한 위치에 사용자의 주의를 집중(및 정보 제공)할 수 있습니다. 익숙한 규칙(녹색 - 모든 것이 정상, 빨간색 - 모든 것이 끔찍함)은 항상 사용자의 주의를 집중시키는 데 효과적이지만 크기와 위치도 데이터의 계층 구조를 결정합니다.

앞서 언급했듯이 대시보드는 제품으로 들어가는 관문이지만 제품 자체는 아닙니다. 제품의 여러 측면에 대한 결론과 상태를 반영해야 하지만 최소한의 요구사항만 반영해야 합니다.

사용자 요구 사항을 이해하고 대시보드를 구축하는 것은 시스템이나 플랫폼을 구축하는 데 있어서 가장 즐겁고 어려운 단계입니다. 복잡성과 창의적인 자유가 있기 때문입니다. 이 페이지는 조직의 거의 모든 사용자가 작업하고 모든 사람의 요구를 충족하기 위한 화면이므로 충분한 시간과 반복을 할애하는 것이 좋습니다. 대시보드는 플랫폼을 대표하는 화면 중 하나이므로 투자할 가치가 있으며 기본 기능을 넘어 마케팅 가치도 제공하는 독특하고 독창적인 도구를 만드는 것이 좋습니다.