위치:
시각적 계층을 사용하여 대시보드 페이지 구성
대시보드 페이지를 각각 정렬하여 사용자가 전체 그림에서 세부 사항까지 자연 순서대로 읽을 수 있도록 합니다.
대시보드 페이지를 사용하여 여러 개의 별도의 대시보드를 구축하는 대신 단일 대시보드에서 계층화된 스토리를 전달합니다. 또한 페이지는 대시보드가 열릴 때 기본 페이지의 쿼리만 실행되므로 로드 시간이 향상됩니다.
헤드라인, 본문 및 세부 사항이 있는 리드
- 헤드라인. 사용자가 가장 먼저 볼 수 있는 상단에 주요 측정값 및 활용을 배치합니다.
- Body. 헤드라인 아래에 해당 측정값을 설명하고 분석하는 차트가 표시됩니다.
- 세부 사항. 세분화해야 하는 사용자를 위해 세부적인 테이블 및 참조 정보를 마지막으로 배치합니다.
눈을 유도하는 레이아웃 패턴 선택
- F 패턴. 사용자가 상단을 스캔한 다음, 왼쪽을 아래로 스캔합니다. 위젯이 많은 콘텐츠 집적형 대시보드에 사용합니다.
- Z 패턴. 눈이 왼쪽 위에서 오른쪽 위로 이동한 다음, 아래로 대각 방향으로 이동합니다. 명확한 행동 유도와 함께 더 간단한 대시보드에 사용합니다.
- 옆으로 관련 보기를 옆에 배치하여 이 기간과 지난 기간과 같은 직접 비교를 지원합니다.
명확성을 위해 그룹화 및 정렬
- 컨테이너 위젯을 사용하여 관련 위젯을 그룹화하고 섹션을 분리합니다.
- 일관된 그리드에 위젯을 정렬하고 균일한 간격을 유지합니다.
- 레이블 및 섹션 색상을 사용하여 그룹화를 강화합니다.
- 각 섹션을 쉽게 구분할 수 있도록 공백을 남깁니다.
대시보드가 표시되는 위치에 대한 설계
- 독립형 앱에 전체 세부 사항을 표시합니다.
- 레코드 페이지 또는 홈 페이지에 대시보드를 포함할 때 더 적은 수준의 메트릭을 표시합니다.
다음 사항도 참조:
이 기사를 통해 문제를 해결했습니까?
개선을 위한 의견을 보내주세요.
