시각화 설계 모범 사례

앱 정돈하기

앱에 정보가 너무 많으면 어떤 정보가 중요한지 알기 어렵습니다. 오늘날의 현대적인 사용자 인터페이스 스타일은 더 깔끔하고 단순하며 더 정돈된 디자인 스타일이 선호됩니다. 간결한 디자인은 은연중에 사용자의 시선을 끌고 더 오래 집중시킵니다.

적을수록 좋다

사용자는 종종 앱에 지나치게 많은 정보를 포함하려고 합니다. 여러 측정값이 있는 꺾은선형 차트는 혼란스럽고 해석하기 어려울 수 있습니다. 여러 개의 작은 시각화를 만들어 이 정보를 페이지 전체에 넓게 분산시켜 보십시오. 이렇게 하면 시각화를 효과적으로 나란히 비교 및 대조해볼 수도 있습니다. 또한 대체 가능 차원 및 측정값을 사용하면 시각화가 과밀해지는 일 없이 측정값 간에 신속하게 전환할 수 있습니다. 자세한 내용은 시각화 데이터 변경를 참조하십시오.

여러 가지 방법으로 앱의 모양과 기능을 개선할 수 있습니다. 시각화 디자인 방법은 청중 및 강조하고자 하는 데이터에 따라 독자가 데이터를 해석하는 방법에 큰 영향을 줄 수 있습니다.

제한 인식

시각화 소비자는 제한된 화면 공간 또는 해상도에서 작업 중일 수 있습니다. Qlik Sense는 반응형 디자인을 사용하여 이러한 제한을 해결합니다. 그러나 화면 공간 또는 해상도가 너무 제한적일 경우 특정 디자인 합의가 필요합니다. 여기에는 다음 사항이 포함됩니다.

• 막대형 차트 및 꺾은선형 차트에 표시되는 데이터 하위 집합. 차원 값의 수가 시각화의 폭을 초과하는 경우, 스크롤 막대가 있는 미니 차트가 표시됩니다.
• 데이터 필터를 선택하기 위한 축소된 메뉴. 차원 값의 수가 필터 창의 사용 가능한 공간을 초과하는 경우 메뉴가 축소됩니다. 앱 소비자가 새 창을 열려면 필터 창 제목에서 차원 이름을 클릭해야 합니다. 그런 다음 새 창에서 선택할 수 있습니다. 또한 공간이 제한되면 차원 이름이 필터 창 제목에 줄임표(...)로 나타날 수 있습니다. 앱 소비자가 필터 창의 이름을 보려면 줄임표(...)를 클릭해야 합니다.
• 차트 범례의 이름이 잘림. 차원 및 측정값에 사용할 수 있는 공간에 비해 이름이 너무 길면 잘립니다. 잘린 이름 끝 부분에 줄임표(...)가 추가됩니다. 앱 소비자가 잘린 이름 위에 마우스 포인터를 올리면 전체 이름을 볼 수 있습니다.
• 범례, 레이블 및 제목 누락.

앱 소비자는 시각화를 확장하여 이러한 문제의 일부를 해결할 수 있습니다. 그러나 앱을 사용할 수 있는 장치에서 앱을 테스트하는 것이 좋습니다. 또한 Firefox의 반응형 설계 모드(Ctrl + Shift + M)와 같이 다양한 도구를 사용하여 테스트할 수도 있습니다. 필요한 경우 시각화를 새 시트로 이동하여 시각화에 표시되는 데이터 양 등을 줄일 수도 있습니다.

색 접근성

색 관련 시각 장애를 가진 사람에게는 색 스펙트럼이 좀 더 좁아집니다. 이로 인해 시각화를 다르게 해석할 수 있습니다.

예를 들어, 어떤 사람들에게는 빨간색과 녹색이 노란색이나 갈색에 더 가깝게 보입니다. 이런 형태의 적록 색각 이상이 가장 일반적입니다. 특히 재무 분야의 데이터 시각화에서 빨간색은 종종 부정적인 의미를 전달하므로 주목해야 합니다.

따라서 빨간색이나 녹색 KPI 상태는 혼동을 일으킬 수 있습니다. 성과 지표로 다양한 모양과 색을 사용하여 더 이해하기 쉽도록 디자인을 개선할 수 있습니다. 예를 들어 저조한 성과에는 속이 빈 빨간색 원을, 훌륭한 성과에는 속이 채원진 녹색 원을, KPI 상태가 허용되지 않는 수준일 때만 나타나는 경고 기호로 삼각형을 사용합니다.

선, 막대 및 원형 조각은 색이 왜곡되면 구별하기 어려워질 수 있습니다.

자세한 내용은 시각화 모양 변경를 참조하십시오.

필터 및 아이콘 배치

필터와 아이콘은 데이터 시각화에서 필수 요소이지만 어디에 배치하고 어떻게 정렬해야 할지는 파악하기 어려울 수 있습니다. 종종 몇 가지 확실한 설계 원칙에 기반하여 사용자가 읽기 시작할 위치를 예측할 수 있습니다.

왼쪽 배치

사용자가 많이 방문하는 여러 웹 사이트에서는 왼쪽 탐색 타일 및 필터를 사용합니다. 이는 많은 언어가 왼쪽에서 오른쪽으로 읽으며, 결과적으로 화면의 왼쪽이 사용자가 가장 자주 보는 곳이기 때문입니다. 콘텐츠를 훑어보는 사용자는 화면의 왼쪽에 끌리는 경향이 있습니다. 따라서 대상이 오른쪽으로 가면 갈수록 이를 보는 사용자는 적어집니다. 모든 필터와 아이콘이 왼쪽에 세로로 나열되어 있는 경우는 비중이 동일하게 적용됩니다.

하지만 텍스트를 오른쪽에서 왼쪽으로 쓰는 언어에서는 이와 반대입니다. 앱이 이러한 언어로 변환될 경우 이 점에 유의해야 합니다.

상단 배치

아이콘 및 필터의 또 다른 일반적인 배치 옵션은 앱의 상단에 나열하는 것입니다. 필터 또는 아이콘을 왼쪽에 배치하지 않으면 메뉴를 분산시킴으로써 보다 큰 시각화 공간을 확보할 수 있습니다. 또한 필터 및 아이콘을 시각화 위에 배치하면 아래의 콘텐츠와 구분하여 표시할 수 있습니다. 이는 필터 또는 아이콘에 우선 순위를 두고 있음을 사용자에게 보여주는 데 도움이 됩니다. 모든 필터 및 아이콘이 상단에 나란히 배치되면 가장 왼쪽의 필터 또는 아이콘에 더 큰 비중이 있으며 사용자가 우선시하게 됩니다.

자세한 내용은 시트를 사용하여 앱 구조화를 참조하십시오.

정보 계층 구조

특정 시각화가 다른 시각화보다 더 우선시되어야 할 경우가 있습니다. 몇 가지 핵심 설계 모범 사례를 사용하여 정보의 계층 구조를 표시할 수 있습니다. 예를 들어, 서로 다른 크기를 사용하여 일부 시각화를 강조할 수 있습니다. 큰 정보가 더 중요해 보이므로 글꼴이나 차트 크기를 늘려서 사용자가 가장 처음 보도록 할 수 있습니다.

페이지 배치 역시 정보 계층 구조의 일부분을 담당합니다. 페이지 위쪽의 정보가 먼저 읽히기 때문에 페이지 아래쪽의 정보보다 더 중요하게 인식됩니다. 첫 페이지의 정보는 마지막 페이지의 정보보다 훨씬 중요하게 인식됩니다.

KPI에 컨텍스트 추가

KPI는 앱 안에서 대략적인 아이디어를 전달하기에 좋은 방법입니다. 그러나 KPI 값은 이면에서 발생하는 수치 및 계산에 대한 컨텍스트는 제공하지 않습니다. KPI 옆의 녹색 표시등이 해당 목표를 간신히 달성했는지, 훌륭하게 완수했는지 알려주지는 않습니다.

KPI에 컨텍스트를 제공하도록 하려면 값 옆에 작은 텍스트로 지원 정보를 포함시킵니다. 예를 들어, 현재 KPI 값을 작년의 값과 비교할 수 있습니다. 또한 축이나 값이 없는 작은 막대형 차트를 추가하여 현재 추세에 대한 정보를 제공할 수도 있습니다.

데이터 시각화의 위험 피하기

데이터 시각화의 장점을 경험하려면 위험을 피해야 합니다. 일반적인 위험의 예는 다음과 같습니다.

색상 남용

색을 과하게 사용하지 마십시오. 적절하지 않은 위치에 적절하지 않은 색을 사용하면 명확성이 떨어지고 혼란을 초래할 수 있습니다. 동일한 색도 위치에 따라 다른 의미가 될 수 있습니다.

원형 차트의 오용

비교를 위해 원형 차트를 나란히 사용하는 것은 피하십시오. 원형 차트에 너무 많은 정보를 넣으려고 하지 마십시오.

시각적인 어수선함

너무 많은 정보는 명확성이라는 목적을 저해합니다. 최대 9개의 KPI를 사용하고 시각적으로 어수선한 것들을 모두 제거하십시오.

내용보다 스타일 우선

시각화가 아름답다고 해서 효과적인 정보를 전달할 수 있는 것은 아닙니다. 항상 최적의 설계 사례를 사용하십시오.

잘못된 데이터

데이터를 표시하기 전에 데이터와 관련된 문제를 파악하여 수정하십시오. 질이 나쁜 정보로 인해 시각화가 저평가되지 않도록 하십시오.