데이터 중심의 UX 디자인을 전략적으로 계획하는 방법

빅 데이터가 급증하고 있습니다. 그러나 복잡한 데이터 요구 사항을 단순하고 깨끗하며 유용한 사용자 인터페이스와 조화시키는 것은 오늘날 모든 UX 디자이너를 위한 테스트입니다. 종종 디자인(메시지를 전달하는 도구)은 커뮤니케이션(원시 데이터의 고지에 숨겨진 메시지 또는 의미)을 방해합니다.

정보를 벗겨내면 사용자 인터페이스가 단순화되고 정리됩니다. 그러나 데이터 기반 애플리케이션에서는 데이터가 적다는 것은 종종 덜 실용적이고 유용한 대시보드를 의미합니다.

그러나 가능한 모든 상황 데이터를 유지하면 작동하지 않는 앱이 생성됩니다.

그렇다면 올바른 균형을 맞추려면 어떻게 해야 할까요?

애플리케이션이 데이터를 표시하는 방식은 UX 디자이너가 참여하는 중요한 역할을 합니다.

이 글에서는 UX 디자이너가 앱 대시보드, 웹 페이지 등에 빅 데이터(기가바이트에 들어가는 데이터)를 적용할 때에도 간단하고 명확한 데이터 시각화를 개발하는 데 사용할 수 있는 팁과 요령을 공유하려고 합니다.

하지만 지금은 이 대화에서 빅 데이터 애플리케이션 설계를 위한 최고의 언어를 제외하겠습니다.

데이터 중심의 UX를 설계하는 방법은 다음과 같습니다.

클라이언트가 좋아하는 멋진 빅 데이터 애플리케이션을 설계하는 방법

아마도 시작하기 가장 좋은 지점은 고객이 누구인지 묻는 것입니다.

아마도 당신은 끝내주는 멋진 대시보드를 만들어 고객이 "X, Y, Z를 어디에서 할 수 있습니까?"라고 묻도록 제시간에 전달했을 것입니다.

아야! 상처 받았을 것입니다.

1. 유용한 데이터 기반 대시보드를 설계하기 위해 사용자 페르소나를 사용합니다.

인공 지능과 기계 학습이 계속해서 개선되는 만큼 대부분의 조직은 분류되지 않은 데이터를 처리하기 위해 여전히 사람의 개입이 필요합니다.

그리고 최고의 UX 디자이너는 데이터 기반 애플리케이션을 사용할 사람들의 문제를 해결하는 데 도움이 되는 제품을 만듭니다.

그들은 그걸 어떻게 햇어?

Uber 및 Advanced Technologies Group의 수석 디자인 리더인 Erik Klimcz는 Medium에서 몇 가지 실행 가능한 팁을 공유했습니다. 그는 UX 디자이너가 먼저 모든 프로젝트에 대해 사용자 또는 페르소나를 식별한 다음 정의해야 한다고 제안합니다.

데이터 기반 애플리케이션은 조직 내부 또는 외부의 여러 개인이 사용하는 경향이 있으므로 이러한 개인을 식별하여 모든 사람의 요구를 충족하도록 정보 아키텍처 와이어프레임 및 작업을 구성할 수 있습니다.

그렇게 하면 디자인이 최종 사용자, 대상 청중, 즉 주 고객에게 유용할 것입니다.

다음은 그림입니다.

사용자/페르소나를 이해하면 응용 프로그램의 기능을 필요에 맞게 사용자 지정하는 데 도움이 될 수 있습니다. 이것이 궁극적인 목표입니다.

또한 다음과 같은 중요한 질문에 답하여 어떤 클라이언트에 어떤 유형의 데이터 시각화 도구를 사용할지 결정할 수 있습니다.

• 누가 데이터(사용자 페르소나)를 처리합니까? 예를 들어 고객 또는 사내 데이터 분석가를 위해 설계되었습니까?
• 이 사용자가 다음에 수행하는 데 도움이 되는 데이터가 필요한 것은 무엇입니까?

예를 들어:

사용자의 개인 항목을 기반으로 정보를 채우는 인포그래픽 유형을 디자인할 수 있습니다.

이러한 종류의 데이터 기반 앱 디자인은 사용자가 정보를 얻거나 추가 조치를 취하기 위해 철회해야 하는 정보를 업로드해야 하거나 자유롭게 업로드해야 하는 상황에 유용합니다.

한 가지 예는 CS 담당자가 고객의 이름이나 번호를 입력하여 고객에 대한 자세한 정보를 수집할 수 있는 고객 서비스입니다.

Mahfix for You vs John Paulson에서 이러한 유형의 대화형 데이터 시각화 도구를 실제로 볼 수 있습니다. 숫자를 입력할 수 있으며 입력한 내용을 기반으로 정보를 다시 보고합니다. 꽤 부드럽습니다!

2. 스타일보다 사용성: 단순하고 명료하며 우아하게 유지

당신을 사로잡는 매력적인 UX를 디자인하는 데 얽매이기 쉽지만, 솔직히 말해서 당신의 클라이언트에게는 비실용적입니다.

사용할 수 있으려면 인터페이스가 명확해야 합니다. 다작의 UX 디자이너 조슈아 포터(Joshua Porter)는 "명확성은 제1의 일"이라고 표현했습니다.

실제로 Joshua Porter는 빅 데이터 애플리케이션을 설계할 때 여전히 적용되는 사용자 인터페이스 설계의 원칙에 대한 유용한 게시물을 작성했습니다.

따라서 사용성에 대한 명확성을 높이려면 디자이너가 맞춤형 UX 디자인을 사용해야 합니까, 아니면 라인 차트와 같이 검증된 시각화 도구만 사용해야 합니까?

클라이언트/사용자 사례에 따라 다릅니다.

인포그래픽(정적 및 대화형 모두), 색으로 구분된 블록, 애니메이션, 3D 시각화 등 최신 맞춤형 데이터 시각화 도구가 계속해서 등장합니다.

그러나 실제로 필요한 데이터 프레젠테이션 도구는 4가지뿐입니다.

• 시간 경과에 따른 변화와 같은 연속 데이터를 나타내는 선형 차트
• 요약 정보를 표시하기 위한 테이블
• 변수의 분포를 보여주고 양적 데이터를 간격으로 플로팅하기 위한 히스토그램
• 불연속 데이터 표시, 변수 비교 및 ​​범주형 데이터 플로팅을 위한 막대 그래프

그러나 단순한 사용성 이상으로 매력적인 데이터 크런치 인터페이스를 만들 수 있습니다.

이를 수행하는 한 가지 방법은 다음과 같습니다.

더 좋은 점은 데이터가 많은 인터페이스를 위한 설계가 더 간단해질 수 있다는 것입니다.

텍스트와 차트를 결합하는 것은 데이터 기반 UX를 디자인하면서 명확성을 향상시키는 가장 좋은 방법 중 하나입니다. 사용자는 시각 자료를 소비하고 명확성을 높이기 위해 텍스트를 읽을 수 있습니다. 그러나 이 접근 방식은 모든 상황, 특히 범주화되지 않은 엄청난 양의 데이터에서 작동하지 않을 수 있습니다.

3. 재료와 평면 디자인 결합 - 형태보다 기능

이 디자인 컨셉은 통념에 반하는 지루한 2차원 디자인보다 사용성과 미니멀리즘에 더 가깝습니다. 하지만 플랫 디자인은 지루하지도 지루하지도 않습니다. 밝은 색상, 깔끔한 가장자리 및 열린 공간을 활용할 수 있습니다.

특히 모바일 애플리케이션, 웹사이트, 데스크톱 브라우저에는 플랫 및 머티리얼 디자인을 사용하는 것이 좋습니다. 디자인은 미니멀하고 많은 양의 추가 데이터를 저장하지 않기 때문에(이전 디자인에서처럼) 로딩이 빠르고 참여도를 높이도록 디자인하면 방문자가 페이지를 더 오래 볼 수 있도록 도울 수 있습니다.

이는 검색 엔진 알고리즘이 인터웹에서 지속적으로 스캔하는 모바일 친화적이고 빠른 로딩 및 적은 이탈률(SEO 및 순위 이점)의 이점을 얻을 수 있는 데이터 기반 웹 사이트 또는 모바일 사이트에 적합합니다.

4. 미학보다 접근성

무겁고 상황에 맞는 데이터를 유동적이고 매력적으로 만드는 것만이 아닙니다(많은 도움이 되지만). 또한 최종 사용자가 다음을 쉽게 수행할 수 있도록 데이터 프레젠테이션을 디자인하려고 합니다.

• 어떤 데이터가 가장 중요한지 명확하게 파악
• 제시된 데이터의 논리적 흐름 이해
• 데이터의 의미 이해
• 취해야 할 다음 단계가 무엇인지 이해

이러한 각 요소를 분해하는 것은 어떻습니까?

사용자는 어떤 데이터가 가장 중요한지 알아야 합니다.

중요한 UX 디자인 원칙 중 하나는 정보의 계층 구조(이 경우에는 시각적 계층 구조)를 관찰하고 구현하는 것입니다.

즉, 올바른 메트릭을 우선시하는 디자인입니다.

가장 중요한 데이터를 먼저 구성, 정렬 및 우선 순위를 지정하고 나중에 추가 데이터를 보완하려고 합니다. 물론 우선 순위는 응용 프로그램의 사용자(위에 정의된 페르소나에서)에 따라 달라집니다.

이렇게 하면 대시보드가 ​​깔끔하게 정리될 뿐만 아니라 사용자가 따라하기 쉽고 부담이 덜한 방식으로 사용자가 자신에게 중요한 것에 집중할 수 있습니다.

사용자는 데이터의 논리적 흐름을 이해할 수 있어야 합니다.

단순성은 사용자가 데이터를 특정 결과에 연결하는 데 중요한 역할을 합니다.

이전 항목에서 설명한 것과 유사하게 전체 데이터의 개요 그리드로 시작하려고 합니다.

직관적인 드롭다운 메뉴를 추가할 수 있습니다. 이 메뉴는 사용자가 클릭하면 아래로 내려가 추가 정보와 특정 작업 또는 작업 항목을 표시합니다. 사람들은 이것을 좋아하고 이미 인기를 얻고 있습니다.

다음은 흐름에 도움이 되는 두 가지 방법입니다.

추가 정보 숨기기

클릭 가능한 링크 또는 롤오버를 사용하여 더 많은 정보를 표시할 수 있습니다. 또한 슬라이드하여 데이터 표시 및 확대하여 표시와 같은 기능은 추가 정보를 포함하거나 주요 데이터 포인트를 강조 표시하는 좋은 방법입니다. 모두 단순하고 자연스러운 제스처를 사용합니다.

이를 통해 사용자는 자신의 업무에 중요하다고 생각하는 링크나 롤오버를 클릭하고 덜 중요하다고 생각하는 링크나 롤오버를 그대로 둘 수 있습니다.

다시 말하지만, 제대로 된 UX 디자인 페르소나 연구를 수행하면 어떤 사용자에게 언제 가장 중요한 것이 무엇인지 식별하는 데 어떻게 도움이 되는지 알 수 있습니다.

호버 애니메이션 사용

호버 애니메이션 효과를 사용하여 (겉보기에는) 지루한 데이터에 더 많은 활기, 참여 및 유용성을 추가할 수 있습니다.

호버 애니메이션은 데이터 기반 애플리케이션을 구성하고 정리하는 데 도움이 되는 동시에 특정 작업이나 항목에 대한 추가 정보를 제공하는 데 특히 실행 가능합니다.

여전히 애니메이션을 사용하여 유용하고 참여도가 높은 데이터 집약적 애플리케이션을 제공하는 더 많은 방법이 있습니다.

클릭 가능한 링크, 슬라이드 또는 롤오버 뒤에 정보를 숨길 때 가장 중요한 것은 백엔드 쪽에서 가장 많은 작업을 수행한다는 것입니다. 따라서 처음부터 이를 염두에 두고 아키텍처 와이어프레임을 설계해야 한다는 점을 명심하십시오.

사용자는 데이터의 의미를 이해할 수 있어야 합니다.

대시보드에서 데이터를 구성하고 우선 순위를 지정한 후 다음 단계는 데이터를 별도의 페이지로 나누는 것입니다. 정보를 분류할 수 있는 경우 데이터 번들마다 다른 페이지/화면을 할당해야 합니다.

백엔드에서 시간이 더 오래 걸리고 더 많은 작업이 필요할 수 있지만 이는 작고 복잡한 데이터 중심의 애플리케이션 디자인 프로젝트에 모두 적합할 수 있습니다.

위의 "압도적" 주제에 따라 이렇게 하면 고객/사용자가 덜 압도당하는 데 도움이 될 뿐만 아니라 다음 페이지로 이동하기 전에 한 페이지에서 데이터를 한 단계씩 이해하면서 한 페이지에서 수치를 더 잘 이해할 수 있습니다. 시간.

예를 들어 미션 컨트롤 UI는 클라이언트가 모든 데이터를 한 페이지에 표시하는 데 도움이 될 수 있지만 시간이 지남에 따라 압도당할 수 있습니다. 특히 다양한 화면 크기에서 압착되는 것은 말할 것도 없습니다.

종종 고객이 이러한 유형의 대시보드를 요청하지만 더 잘 알고 있어야 합니다.

미션 컨트롤 UI는 정교해 보일 수 있지만 앞에서 설명한 한 번에 한 페이지씩 접근하는 방식만큼 매끄럽고 사용하기 쉽지는 않습니다. 전자는 산더미 같은 데이터에 숨겨진 의미를 전달하는 데 쉽게 방해가 될 수 있습니다. 그리고 그것은 유용하지 않습니다.

사용자는 다음 단계를 이해할 수 있어야 합니다.

위의 단계를 따르면 사용자가 원시 데이터에서 패턴을 식별하고 연결하는 것이 더 쉬워집니다. 이는 데이터가 많은 응용 프로그램을 설계할 때 목표로 삼아야 할 또 다른 주요 승리입니다. 사용하는 데이터 시각화 도구가 사용자가 빅 데이터를 이해하는 데 도움이 될 때 훌륭한 작업을 수행했음을 알 수 있습니다.

5. 개선의 여지를 허용

마지막으로 디자인을 민첩하게 만들고 싶을 것입니다.

시간이 흐르고 사용자가 디자인과 상호 작용할 때 피드백을 통해 작업을 수행하고 전체를 수정하거나 다시 디자인할 수 있습니다. 데이터 처리를 위한 완벽한 디자인을 생성하는 유일한 방법은 없으므로 디자인을 민첩하게 유지하면 지속적인 개선 또는 시작을 위한 견고한 패치를 만드는 데 도움이 될 수 있습니다.

주요 테이크 아웃

UX 디자인의 목적은 명확하고 실행 가능한 방식으로 메시지를 전달하는 것입니다. 이는 데이터가 많은 애플리케이션을 설계하는 데 특히 중요합니다. 이 경우 좋은 디자인의 비즈니스는 분석가나 관리자 또는 최종 사용자가 정보에 입각한 결정을 내리도록 돕는 것입니다.

그리고 사용자는 원시 데이터를 해석하고 사용할 수 없으며, 데이터가 어떻게 제시되는지 잘 이해하지 못하는 경우 결정을 내릴 수 없습니다.

데이터가 많은 UX 프로젝트를 위한 디자인은 생각보다 짜증나지 않아야 합니다. 위의 팁과 요령은 데이터가 많은 인터페이스를 설계하는 방법을 파악하는 데 도움이 될 수 있습니다.

멋진 데이터 시각화 UI를 디자인하기 위해 따르고 공유하고 싶은 유용한 팁이 있습니까?

아래 의견란에 알려주십시오.