대시보드 디자인 어떻게 활용해야 1000% 활용이 가능할까?(시각적 위계)

 

대시보드(Dashboard)?

WHAT ?

 

정의

대시보드는 고객이 B2C나 B2B 플랫폼에 로그인했을 때 보는 첫 화면으로,

비즈니스 분석 소프트웨어에서 흔하게 사용하는 패턴이다.

대시보드는 정기적 으로 업데이트되는 밀도 높은 정보를 분석하여,

주목할 만한 데이터 포인트를 한 페이지로 짚어 준다.

 

사용자에게 유용하고, 행동하는 데 도움이 될 만한 정보와 차트,

그래프를 시각화하여 보여 준다.

 

또한 비즈니스에 중요한 성과 지표나 워크플로와 연관된 중요한 메시지, 링크, 버튼도 나타낸다.



대시보드는 현재 상황이나 주목해야 할 정보, 마쳐야 하는 일을 빠르게 업데 이트해서 사용자의 니즈를 충족시킨다.

웹서버 데이터, SNS에서의 대화, 뉴스, 항공편, 비즈니스 분석 자료, 금융 정보 등을 업데이트해 준다.

사용자는 해당 내용을 지속적으로 모니터링하여 도움을 얻는다.

 

WHY?

(어떤 효과가 있을까?)

 

대시보드는 우리에게 친숙하고 직관적인 페이지 스타일이다.

온오프라인에서 오랜 기간 쓰였기 때문에, 사람들이 대시보드에 기대하는 바는 거의 정해져 있다.

즉, 사용자는 대시보드가 유용한 정보를 보여주고, 자동으로 업데이트되 며, 데이터를 시각화해 줄것이라고 기대한다.

대시보드에서는 여러 패턴과 컴포넌트가 맞물려서 쓰인다.

많은 온라인 대시보드는 다음 패턴들을 함께 사용한다.

 

 

---

 

제목을 붙인 섹션(Titled Sections)

탭Tabs과 접히는 패널 (collapsible Panels)

이동식 패널 (Movable Panels)

단일 화면 상세 진입 (one-Window Drilldown)

인포그래픽 (information Graphics)

데이터팁 (Datatips)

---

 

다양한 종류의 목록과 표

(How) 어떻게 활용할까?

카카오의 데이터보드 "ui" 이다

 

먼저 사용자에게 필요한 정보,

 

사용자가 보고 싶어 하는 정보, 최신으로 업데이트해야 하는 정보를 결정하라.

 

 

말처럼 단순하지는 않다. 

 

헷갈리거나 중요도가 낮은 데이터를 속아 내는 연구자나 편집자의 안목이 필요하다.

 

그렇지 않으면 사람들은 정작 중요한 데이터에 집중하지 못할 것이다.

 

 

 

사용자에게 유용 하지 않은 정보는 제거하거나, 최소한 시각적인 중요도를 낮춰라.

 

가장 중요한 정보나 다음 단계를 강조해라.

시각적 위계를 잘 활용해서 페이지의 리스트와 표, 인포그래픽을 구성하라.

 

 

주요 정보를 스크롤 없이 한 페이지에 담아서, 전체를 한눈 에 볼 수 있도록 해라.

 

서로 관련된 정보는 제목을 맡은 색션으로 묶어라.

 

각 데이터를 동시에 볼필요가 없다고 확신할 수 있을 때만 탭으로 정보를 분리 하라.

 

 

 

단일 화면 상세 진입으로 사용자가 데이터에 관한 세부 사항을 볼 수 있게 하라.

 

링크나 그래픽을 클릭해서 '더보기'를 할 수 있어야 한다.

 

데이터팁은 포인터가 인포그래픽 위에 롤오버될 때 개별 데이터 포인트를 보여주는데 효과적이다.

 

 

 

제공하는 데이터에 걸맞은 인포그래픽을 골라라.

정보를 비교해서 보여준다면 게이지나 다이얼 차트, 파이 차트, 3D 막대차트는 적절하지 않다.

 

시간기반 데이터를 표현할 때는 단순한 라인과 막대 차트를 사용하는게 더 효과적 이다.

 

 

 

숫자와 텍스트가 그래픽보다 중요하다면 리스트와 테이블을 활용하라.

 

데이터 테이블에서는 행에 색을 번갈아 적용하는 기법을 자주 사용한다.

 

 

 

사람들은 각 요소를 주의 깊게 살피지 않은채 대시보드를 대충 살펴보면서 실행 가능한 정보만 찾을 것이다.

 

그러므로 텍스트를 보여 줄 때는 키워드와 숫자가 주변 텍스트보다 눈에 띌 수 있도록 강조해라.

 

 

 

대시보드 표현 방식을 개인화하는 기능을 제공해야 할까?

 

 

 

많은 대시보드가 개인화 기능을 제공하기 때문에, 사용자는 충분히 그렇게 기대할수 있다.

 

대시보드를 개인화하는 하나의 방법은 섹션을 사용자가 다시 정렬할 수 있게 하는 것이다.

 

 

 

세일즈포스에서 사용자는 대시보드에서 보고 싶은 가치를

 

선택할 수 있으며, 이동식 메일을 이용해 자신에게 맞게 레이아웃을 조정한다

 

 

 

(EXAMPLES)

예시

 

 

 

큰 기업이든 작은 기업이든, 전체 비즈니스 프로세스를 추적하고 관리하려는 니즈가 있다.

 

세일즈포스는 이런 요구를 포착하여 거대한 사업을 일구었다.

 

개별 클라이언트에게 맞춤형으로 제공되는 대시보드는 이러한 전략의 핵심이다.

 

특정한 목적 달성을 위해 만들어진 대시보드를 몇 개 살펴보자.

 

세일즈포스의 예시이다

 

사용자는 필요에 맞게 모듈을 만들거나 개별적으로 설정할 수 있다.

 

또한 표준 모듈을 그리드에 맞춰 정리하고, 저장하고, 다른 직원들과 공유할 수 있다.

 

 

 

스페이스는 로그인할 때부터 대시보드를 보여 준다.

 

이 스타트업은 고전적인 디자인 패턴을 활용한다.

 

핵심성과지표를 강조하고,

 

실시간 지표나 주목해야 할 항목을 객관적으로 보여 준다.

 

또한 플랫폼의 다른 주요 부분으로 이동하는 진입점도 제공한다.

 

 

(사진)

 

마지막으로 이 주제에 더 깊게 알고 싶다면 정보 대시보드에 관한 스티븐 퓨 Stephen Few의

 

인포메이션 대시보드 디자인: 

 

한눈에 들어오는 데이터 시각화

(Information Dashboard Design: 

Displaying Data for At-a-Glance Monitoring 추천한다.)

 

Information Dashboard Design: Displaying Data for At-a-Glance Monitoring

 

캔버스(Canvas)와 팔레트(Palette)

 

WHAT 정의하기

 

중심이 되는 작업 공간과 이를 둘러싸고 있는 도구로 정의되는 패턴이다. 

사용자는 넓은 빈영역, 캔버스 위에서 디지털 오브젝트를 만들고 편집한다.

넓은 영역 주변 양옆이나 위아래에 그리드 형태로 도구를 배치하고, 이를 팔레트라고 부른다.

도구는 아이콘으로 표현한다.

사용자는 팔레트 버튼을 눌러서 캔버스에 새로 오브젝트를 만들거나, 

도구를 선택해 오브젝트를 수정할 수 있다. 

디지털 작업대 또는 가상의 이젤처럼 느껴지는 효과가 있다. 

 

 

사용자는 도구를 하나씩 선택해 주요 오브젝트에 적용한다. 

 

WHEN 언제 사용하면 좋을까?

어떠한 종류든 그래픽 에디터를 디자인하고 있다면 사용해야 할 패턴이다.

 

일반적인 유스케이스는 새로운 오브젝트를 만들고 가상의 공간에 오브젝트를 배열하는 방식이다.

 

WHY 어떤 효과가 있을까?

 

두 가지 패널,

즉 오브젝트를 생성하는 팔레트와 생성한 오브젝트를 배치하는

캔버스는 데스크톱 소프트웨어를 쓰는 사용자라면 누구라도 본 적 있을 만큼 흔하다.

 

 

이는 우리에게 익숙한 물리적 세계를 디지털 공간으로 자연스럽게 가져온 것이다.

'페인트 브러시', '손바닥', '돋보기'처럼 익숙한 아이콘을 여러 애플리케이션에서 사용하며,

 

같은 모양의 아이콘은 동일한 기능을 수행해 시각적 인지를 돕는다.

👀
HOW
어떻게 활용할까?

사용자가 넓은 빈 공간을 캔버스로 쓸 수 있도록 하라.

캔버스는 포토샵 처럼 개별 창으로 띄울 수도 있고 다른 도구와 함께 한페이지에 담을 수도 있다.

포토샵의 화면이다

사용자가 캔버스와 팔레트를 한화면에서 나란히 볼 수 있게 하는 게 중요하다.

추가적인 도구인 속성 패널이나 컬러스와치 등은 작은 팔레트 윈도우나

패널 형태로 캔버스의 우측이나 하단에 배치하라.

 

팔레트 자체는 아이콘이 있는 버튼을 배열한 그리드이다.

아이콘만 보고 이 해하기 어려우면 텍스트를 같이 넣을 수 있다.

 

예를 들어 일부 (GUIGraphical User Interface)

편집기에서는 GUI 컴포넌트 이름을 아이콘 옆에 둔다.

 

 

팔레트를 캔버스의 좌측이나 상단에 배치하라.

팔레트는 하위 그룹으로 나눌수 있고,

 

모듈 탭이나 접히는 패널을 통해 하위 그룹을 보여 줄 수도 있다.

 

대부분의 팔레트 버튼은 캔버스에 놓을 오브젝트를 생성하는데 쓰인다.

그럼에도 많은 제작 및 편집용 애플리케이션은 확대 모드나 올가미 툴 등을 성공적으로 팔레트에 결합했다. 

 

캔버스에 오브젝트를 만드는 제스처는 애플리케이선마다 다르다. 

일부는 드래그 앤 드롭이pg and ton만 사용하고, 

 

어떤 앱에서는 팔레트를 한 번 클릭하 고 캔버스에서 한 번 클릭하면 된다. 

디지털 펜을 쓰거나 터치 화면에서 손가 락 힘을 조정하는 것처럼 섬세한 압력을 활용하는 앱도 있다. 

 

사용성 평가가 여기서 특히 중요한데,

사용자 입장에서 도구가 작동하는 방식이 명확하지 않거나 학습하기 어러울지도 모르기 때문이다.

 

EXAMPLES

예시 다음에 나오는 사례를 통해 다양한 캔버스와 팔레트 패턴을 볼 수 있다.

 

 

포토샵(그림 230이 가장 고전적 패턴이다. 이미지를 작업하는데

사용하는 팔레트, 패널, 명령어를 앱 화면의 네 모서리에 배치했다.

 

(사진)

액슈이 RP 프로(AXIre RP Pro)는 사용자가 

중앙 캔버스에서 소프트웨어 프로도타입을 위한 와이어프레임을 만들 수 있게 했다. 

팔레트는 캔버스 좌우에 배치했다.

옴니그래플 0miGrafe은

맥 OS에서 벡터를 그리는 애플리케이션이다. 

 

여기서는 도구 팔레트를 오른쪽에 두었다. 

데스크톱뿐 아니라 모바일 앱에서 도구나 선택지가 많을 때 이 패턴을 유용하게 활용할 수 있다. 

 

사진 앱에서는 사용자가 편집하는 이미지가 중앙 캔버스에 나타난다. 

하단에는 3가지 도구 팔레트가 있고, 열고 닫을 수 있다. 

각 패널에 진입하면 여러 편집 기능을 사용할 수 있다.