2024. 12. 13. 13:54ㆍ홈페이지 제작 팁과 정보
1. 대시보드의 목적을 정의하세요.
제품의 다른 뷰와 마찬가지로 대시보드에도 특정한 용도가 있습니다. 대시보드를 목적(분석, 전략, 운영, 전술 등)에 따라 분류하는 방법에는 여러 가지가 있습니다.
간단하게 설명하기 위해 두 가지 일반적인 형태로 나누겠습니다.
운영 대시보드
운영 대시보드는 시간에 민감한 작업을 수행하는 사용자에게 중요한 정보를 신속하게 전달하는 것을 목표로 합니다. 운영 대시보드의 주요 목표는 사용자에게 데이터 편차를 빠르고 명확하게 제시하고, 현재 리소스를 표시하고, 상태를 표시하는 것입니다. 사용자가 신속하고 능동적이며 효율적으로 작업할 수 있도록 설계된 디지털 제어실입니다.
분석 대시보드
운영 대시보드와 달리 분석 대시보드는 분석 및 의사 결정에 사용되는 정보를 한 눈에 볼 수 있도록 사용자에게 제공합니다. 시간에 덜 민감하고 즉각적인 조치에 초점을 맞추지 않습니다. 이러한 종류의 대시보드의 주요 목표는 사용자가 데이터를 최대한 이해하고, 추세를 분석하고, 의사 결정을 내릴 수 있도록 돕는 것입니다.
필요한 대시보드의 유형은 사용자 역할과 충족하고자 하는 요구 사항에 따라 결정되어야 합니다. 제품에는 각각 고유한 대시보드가 있어야 하는 여러 역할이 있을 수 있습니다. 하위 계층 관리자는 운영 대시보드가 필요할 수 있고, 상위 계층 관리자는 분석 대시보드가 더 필요할 수 있습니다. 종종 디자이너는 이 둘을 혼합하여 빠르게 반응하고 조치를 취해야 하는 사용자에게는 수많은 분석 기능을 제공하고, 그 반대의 경우도 마찬가지입니다.
2. 데이터에 적합한 표현을 선택했습니다.
대시보드는 차트를 의미합니다. 데이터 표현은 복잡한 작업이며, 특히 시간에 따른 정적 또는 동적 변화 등 여러 유형의 정보를 대시보드에 표시해야 하는 경우 더욱 그렇습니다. 이는 상당히 어려울 수 있습니다. 잘못된 차트 유형을 선택하거나 가장 일반적인 유형의 데이터 시각화를 기본값으로 설정하면 사용자에게 혼란을 주거나 데이터를 잘못 해석할 수 있습니다. 시작하기 전에 내부 문서와 보고서를 살펴보고 영감을 얻으세요. 처음부터 다시 시작하는 경우 사용자에게 필요한 내용을 기반으로 한 몇 가지 시각화 제안 사항이 있습니다.
분산형 차트는 주로 상관관계 및 분포 분석에 사용됩니다. 버블 차트는 차트에 세 번째 차원을 도입하는 데 도움이 됩니다.
네트워크 다이어그램은 데이터 요소 간의 아주 사소한 연결도 매우 중요할 때 유용합니다.
시각화를 사용하여 하나 또는 여러 개의 값 집합을 비교하는 것은 그리드에서 숫자를 보는 것보다 훨씬 쉽습니다. 열 차트와 꺾은선형 차트가 가장 많이 사용됩니다.
권장 사항
- 차트에서 시간은 왼쪽에서 오른쪽으로 흐르므로 차원 중 하나가 시간인 경우 항상 X축이 되어야 합니다.
- 가로 또는 세로 막대형 차트를 사용할 때는 열을 무작위로 정렬하지 말고 가장 큰 값 순으로 정렬하세요.
- 선 그래프의 경우 차트는 5개 이상의 값을 표시하지 않아야 하며 막대형 차트의 경우 7개 이상의 값을 표시하지 않는 것이 좋습니다.
파이 차트와 도넛 차트는 데이터 시각화에서 나쁜 평판을 받고 있습니다. 이 차트는 가장 자주 사용되는 차트 중 하나이며, 가장 자주 오용되는 차트이기도 합니다. 구성 요소가 너무 많거나 매우 유사한 값을 포함하는 경우 읽기 매우 어렵습니다. 인간은 각도와 면적의 경우 값을 구분하기 어렵습니다.
분포 차트는 이상값, 정상 경향 및 값의 정보 범위를 설명하는 데 도움이 됩니다.
그러나 특정 차트 유형은 완전히 피해야 합니다. 과거에는 게이지가 대시보드의 큰 트렌드였지만, 실제 개체를 디지털로 복제하려는 시도는 좋지 않은 생각입니다. 3D 차트와 과도한 스타일의 차트는 가독성이 낮고 보는 사람의 주의를 분산시키며 개발하기가 더 어렵기 때문에 사용할 이유가 거의 없습니다.
차트에 적합한 표현 유형을 선택하는 데 도움이 되도록 다음과 같은 질문을 스스로에게 해보세요.
- 단일 차트에 몇 개의 변수를 표시할 것인가?
- 일정 기간 동안의 값을 표시할 것인가, 아니면 항목 또는 그룹 간에 값을 표시할 것인가?
- 각 변수에 대해 표시하려면 몇 개의 데이터 포인트가 필요한가?
3. 명확하고 일관된 이름 지정 규칙과 일관된 날짜 형식을 따르고, 큰 값은 잘라냅니다.
대시보드의 주요 목표는 한눈에 메시지를 전달하는 것이므로, 모든 사소한 것이 중요합니다. 명확한 프레임워크를 사용하는 가장 큰 장점은 데이터 일관성입니다. 각 도구에서 데이터의 이름이 같은 방식으로 지정되어 있으면 해당 도구를 사용하기가 더 쉬워집니다.
4. 레이아웃과 흐름을 정의하세요. 우선순위를 정하세요.
그리드는 적은 노력으로 효과적인 정렬과 일관성을 달성하고 디자인의 기본 구조 또는 골격을 만드는 데 도움이 될 수 있습니다. 그리드는 디자인 요소를 배치할 수 있는 “보이지 않는” 선으로 구성됩니다. 이렇게 하면 전체적인 '시스템'으로 연결되고 구성을 합리적으로 지원할 수 있습니다. 대시보드 디자인에서는 수많은 정보를 매끄럽게 정리해야 하므로 이는 매우 중요합니다.
어떤 정보를 배치할지 결정할 때 이 점을 염두에 두세요.
- 화면의 왼쪽 상단에 자연스럽게 더 많은 관심을 끌 수 있으므로 주요 정보를 왼쪽에서 오른쪽으로 배치하세요. 이는 정보를 읽는 방식에 따른 것이므로 디자인하는 사용자의 지역에 따라 달라질 수 있습니다.
독자가 첫 번째 행을 다 읽으면 다음 행으로 이동합니다.
- 한 정보 그룹이 다른 그룹의 정보를 기반으로 의사 결정에 영향을 미치는 종속성이 있는 경우, 사용자가 앞뒤로 이동할 필요가 없는 방식으로 레이아웃을 만들어 대시보드 전체에서 쉽게 스캔할 수 있도록 연속적인 흐름을 만드세요.
5. 일관된 구조의 빌딩 블록을 사용하세요.
그리드를 정의한 후에는 정보, 차트, 컨트롤을 담을 여러 개의 '위젯'으로 작업을 시작할 수 있습니다. 카드는 정리하기 쉽습니다. 카드의 가장 중요한 장점은 거의 무한대로 조작할 수 있다는 것입니다. 카드는 쉽게 확장하거나 축소할 수 있는 콘텐츠 컨테이너 역할을 하므로 반응형 디자인에 적합한 선택입니다.
카드의 중요한 특징은 내부에 있는 컨트롤과 데이터의 일관된 레이아웃입니다. 이름을 왼쪽 상단에 배치하고 보기 컨트롤이나 작업을 카드의 오른쪽 상단에 정렬하고 나머지는 콘텐츠에 남겨두세요. 모든 것이 일관된 구조를 가지면 사용자가 인터페이스로 작업하기가 더 쉬워지며, 원하는 위치에서 모든 것을 찾을 수 있습니다.
위의 제안된 레이아웃을 사용하면 반응형 디자인이나 사용자 맞춤 설정에 있어 유연성이라는 추가적인 이점이 있습니다. 카드가 커지거나 작아지더라도 모든 주요 구성 요소는 특정 위치에 고정된 상태로 유지됩니다. 이는 개발자에게도 유용하며 향후 디자인의 전반적인 확장성에도 도움이 됩니다.
6. 여백을 두 배로 늘리기
네거티브 스페이스라고도 하는 여백은 디자인 구성에서 요소와 요소 사이의 영역입니다. 독자는 일반적으로 여백의 중요성을 인식하지 못하지만 디자이너는 여백에 많은 주의를 기울입니다. 여백의 균형이 맞지 않으면 카피를 읽기 어렵습니다. 그렇기 때문에 여백은 다른 타이포그래피 요소만큼이나 중요합니다.
7. 정보를 숨기거나 상호 작용에 지나치게 의존하지 마세요.
대시보드의 주요 목표 중 하나는 한눈에 정보를 표시하는 것이므로 스크롤이나 많은 상호 작용에 의존하면 전체 목적이 희석됩니다.
스크롤 가능한 긴 대시보드를 디자인하는 것은 디자이너가 가장 자주 저지르는 실수 중 하나입니다. 그들은 사용자에게 부담을 주지 않기 위해 더 많은 정보를 명확하게 표시하려고 하고, 정보를 서로 아래에 배치하려고 합니다. 그 결과 화면 접힌 부분 위에 보이는 정보만 사용자가 발견할 가능성이 높습니다. 그 아래의 모든 정보는 사용자의 관심을 거의 받지 못합니다. 그래서 요점은 무엇일까요?
해결책은 우선순위를 정하는 것입니다. 더 많은 조사와 인터뷰를 통해 핵심 정보를 파악할 수 있어야 합니다. 이를 표시하려면 접힌 부분 위의 공간으로만 작업해야 합니다. 전체 내용을 다 말하지 말고 요약하고 핵심 정보만 표시하세요. 추가 인터랙션을 사용하여 더 많은 콘텐츠를 담을 수 있고 사용자에게 데이터로 인한 부담을 주지 않을 수 있습니다.
상호 작용은 부차적인 정보를 표시하는 데 도움이 됩니다. 대시보드 작업의 주된 방법으로 상호작용에 전적으로 의존하는 것은 큰 실수입니다. 위의 예에서는 사용자가 전체 상황을 파악하기 위해 여러 탭을 번거롭게 전환해야 하는 것을 볼 수 있습니다. 이렇게 하면 스크롤 아래의 콘텐츠와 마찬가지로 다른 모든 탭의 정보가 사용자에게 숨겨집니다.
대시보드에 정보를 가득 채우려다 보면 극단적인 경우가 발생할 수 있습니다. 인간은 한 번에 여러 가지를 추적하는 데 서툴다는 사실을 항상 기억해야 합니다. 사용자에게 너무 많은 것을 요구하지 말고, 데이터로 사용자를 압도하지 마세요. 보기를 만들 때는 최대 5~7개의 서로 다른 위젯을 사용하세요. 그렇지 않으면 사용자가 집중하여 명확한 개요를 파악하기 어렵습니다.
8. 맞춤화가 아닌 개인화.
사용자는 자신에게 표시되는 콘텐츠가 개인의 요구와 관련이 있기를 기대합니다. 개인화 및 맞춤화는 사용자가 자신에게 중요한 것을 볼 수 있도록 도와주는 기술입니다.
개인화는 시스템 자체에서 수행됩니다. 시스템은 사용자를 식별하고 사용자의 역할에 맞는 콘텐츠, 경험 또는 기능을 제공하도록 설정되어야 합니다. 사용자 지정은 사용자가 수행합니다. 시스템은 사용자가 레이아웃, 콘텐츠 또는 시스템 기능을 구성하여 특정 요구 사항을 충족하도록 환경을 사용자 지정하거나 변경할 수 있도록 할 수 있습니다.
사용자에게 대시보드를 사용자 지정할 수 있는 더 많은 권한을 부여하는 것은 뷰가 이미 개인화되어 있는 한 좋은 시도입니다. 사용자 지정 방법을 더 많이 설계하는 것은 각 사용자 역할이 진정으로 필요로 하는 것을 찾는 지루한 과정을 피하기 위한 변명일 수 있습니다. 결국, 사용자는 스스로 뷰를 만들어야 하는 상황에 놓이게 됩니다.
9. 데이터 표 또는 목록을 통합할 때는 대화형이고 데이터가 올바르게 정렬되어 있는지 확인하세요.
데이터 테이블은 많은 수의 항목에 대해 많은 정보를 표시해야 할 때 훌륭한 솔루션입니다. 예를 들어 ID, 상태, 연락처, 마지막 활동 등이 포함된 고객 목록은 데이터 테이블로 표시하는 것이 가장 좋습니다. 공간 활용도가 높고, 확장성이 뛰어나며, 개발이 용이하고, 많은 사람들이 이미 Microsoft Excel에 익숙하기 때문에 사용자들은 일반적으로 그리드 작업에 익숙합니다. 무언가를 쉽게 찾고 변경할 수 있는 방법이기도 합니다.
10. 대시보드를 마지막으로 디자인합니다.
대시보드는 시각적으로 가장 흥미로운 뷰 중 하나이기 때문에 가장 먼저 디자인하는 경우가 많습니다. 마지막으로 디자인하는 것을 권장합니다. 대시보드는 다른 모든 것을 요약한 보기이며 애플리케이션의 다양한 부분에서 주요 정보를 표시합니다. 마지막에 디자인하는 것이 더 실용적입니다. 그렇지 않으면 다른 모든 페이지에서 작업하는 동안 계속해서 돌아가서 대시보드 디자인을 업데이트해야 합니다. 또한, 대부분의 뷰가 디자인되면 대시보드를 구성할 때 작업할 구성 요소가 많아집니다.
출처:
https://uxplanet.org/10-rules-for-better-dashboard-design-ef68189d734c
'홈페이지 제작 팁과 정보' 카테고리의 다른 글
| 모바일 UX/UI 디자인에서 해야 할 것과 하지 말아야 할 것 (3) | 2024.12.18 |
|---|---|
| 데이터 테이블 디자인 방법 (2) | 2024.12.16 |
| UI구성요소인 버튼 디자인 방법 (0) | 2024.12.11 |
| UI 구성요소인 텍스트 필드 및 양식 디자인 (1) | 2024.12.09 |
| 선택 컨트롤 요소의 UI 디자인 방법 (1) | 2024.12.06 |