데이터가 많은 UX 디자인을 전략적으로 계획하는 방법

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

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

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

그렇다면 올바른 균형을 맞추는 방법은 무엇입니까?

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

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

그러나 지금은 이 대화에서 빅 데이터 응용 프로그램을 설계하는 데 가장 적합한 언어를 생략하겠습니다.

고객이 좋아하는 멋진 빅 데이터 애플리케이션을 디자인하는 방법

아마도 가장 좋은 출발점은 고객이 누구인지 묻는 것입니다.

정말 멋진 대시보드를 만들어 제시간에 고객에게 전달했을 수도 있습니다. 고객이 "그럼 X, Y, Z는 어디에서 할 수 있나요?"

아야! 그것은 상처를 주었을 것입니다.

1. 사용자 페르소나를 사용하여 유용한 데이터 기반 대시보드 디자인

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

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

그들은 그걸 어떻게 햇어?

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

데이터 기반 응용 프로그램은 조직 내부 또는 외부의 여러 페르소나에서 사용되는 경향이 있으므로 모든 사람의 요구 사항을 충족하도록 정보 아키텍처 와이어프레임 및 작업을 구성할 수 있도록 해당 페르소나를 식별해야 합니다.

그렇게 하면 최종 사용자, 타겟 고객, 즉 주요 고객에게 디자인이 유용할 것입니다.

다음은 예시입니다.

UX 디자인 프로젝트를 위한 사용자 페르소나를 만드는 방법에 대한 기본 사항을 알아야 하는 경우 Cooper가 유용한 팁을 제공합니다(여기에서 디자인 페르소나에 대한 데이터를 조사하고 수집하는 방법 포함).

사용자/페르소나를 이해하면 궁극적인 목표인 필요에 맞게 애플리케이션 기능을 사용자 정의하는 데 도움이 될 수 있습니다.

또한 다음과 같이 클라이언트에 사용할 데이터 시각화 도구 유형을 결정할 수 있습니다.

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

예를 들어:

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

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

한 가지 예는 CS 담당자가 해결되지 않은 문제와 같은 추가 정보를 수집하기 위해 고객의 이름이나 번호를 입력할 수 있는 고객 서비스입니다.

Mahfix for You vs John Paulson에서 이러한 유형의 대화형 데이터 시각화 도구가 작동하는 것을 확인할 수 있습니다. 숫자를 입력할 수 있으며 입력을 기반으로 정보를 다시 보고합니다. 꽤 부드럽습니다!

타겟 고객 및 클라이언트
페르소나 워크시트

이 3페이지 대화형 PDF는 청중을 찾고, 콘텐츠를 감사하고, 비즈니스를 위한 게임 계획을 세우는 데 도움이 됩니다. 레이아웃을 구독하여 워크시트를 다운로드하세요!

워크시트를 무료로 다운로드하세요!

2. 스타일보다 사용성: 단순하고 명확하며 은혜롭게 유지

당신을 사로잡는 매력적인 UX를 디자인하는 데 몰두하기 쉽지만 솔직히 클라이언트에게는 비현실적입니다.

사용 가능하려면 인터페이스가 명확해야 합니다. 다작 UX 디자이너 Joshua Porter의 말에 따르면 "명확성은 직업 1위입니다."

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

따라서 사용성에 대한 명확성을 높이기 위해: 디자이너가 맞춤형 UX 디자인을 사용해야 합니까, 아니면 꺾은선형 차트와 같이 시도되고 테스트된 시각화 도구만 사용해야 합니까?

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

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

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

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

그러나 단순히 유용성을 넘어 매력적인 데이터 처리 인터페이스를 만들 수 있습니다.

한 가지 방법은 다음과 같습니다.

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

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

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

이 디자인 컨셉은 대중적인 믿음과 달리 둔한 2차원 디자인보다 사용성과 미니멀리즘에 가깝습니다. 하지만 평면 디자인은 지루하지도 둔하지도 않다. 밝은 색상, 깔끔한 모서리 및 열린 공간을 활용할 수 있습니다.

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

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

4. 미학보다 접근성

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

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

이 요소들을 각각 분해해 볼까요?

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

한 가지 중요한 UX 디자인 원칙은 정보 계층(이 경우 시각적 계층)을 관찰하고 구현하는 것입니다.

즉, 올바른 메트릭의 우선 순위를 지정하는 디자인입니다.

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

이렇게 하면 대시보드가 ​​깔끔하게 정리될 뿐만 아니라 사용자가 따르기 쉽고 부담이 적은 방식으로 자신에게 중요한 것에 집중하는 데 도움이 됩니다.

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

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

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

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

다음은 흐름을 돕는 두 가지 방법입니다.

추가 정보 숨기기

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

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

다시 말하지만, 적절한 UX 디자인 페르소나 연구를 수행하는 것이 언제 어떤 사용자에게 가장 중요한지 식별하는 데 어떻게 도움이 되는지 알게 될 것입니다.

호버 애니메이션 사용

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

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

여전히 유용하고 매력적인 데이터 집약적인 애플리케이션을 제공하기 위해 애니메이션을 사용하는 더 많은 방법이 있습니다.

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

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

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

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

위의 "압도적인" 주제에 따라 이렇게 하면 클라이언트/사용자가 덜 압도되는 느낌을 받는 데 도움이 될 뿐만 아니라 다음 페이지로 이동하기 전에 데이터를 한 단계씩 이해하면서 한 페이지의 수치를 더 잘 정리할 수 있습니다. 시각.

예를 들어, 임무 제어 UI는 클라이언트가 한 페이지에서 모든 데이터를 얻는 데 도움이 될 수 있지만 시간이 지남에 따라 압도적일 수 있습니다. 특히 다양한 화면 크기의 경우 압축되는 것은 말할 것도 없고요.

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

임무 제어 UI는 정교해 보일 수 있지만 앞에서 논의한 한 번에 한 페이지씩 접근하는 방식만큼 매끄럽고 사용하기 쉽지 않습니다. 전자는 진열된 데이터의 산속에 숨겨진 의미를 전달하는 데 쉽게 방해가 될 수 있습니다. 그리고 그것은 유용하지 않습니다.

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

위의 단계에 따라 사용자가 원시 데이터의 패턴을 식별하고 연관시키는 것이 더 쉬워집니다. 이는 데이터 집약적인 애플리케이션을 설계할 때 목표로 삼아야 하는 또 다른 주요 이점입니다. 사용하는 데이터 시각화 도구가 사용자가 빅 데이터를 이해하는 데 도움이 될 때 훌륭한 작업을 수행했음을 알 수 있습니다.

5. 개선의 여지를 허용

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

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

핵심 테이크아웃

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

또한 사용자는 원시 데이터를 해석하고 사용하여 의사 결정을 제대로 이해하지 못하고 정보가 표시되는 방식을 알 수 없습니다.

데이터가 많은 UX 프로젝트를 위한 디자인은 보이는 것만큼 짜증나지 않아야 합니다. 위의 팁과 트릭은 데이터가 많은 인터페이스를 설계하는 방법을 파악하는 데 도움이 될 수 있습니다. 기억해라:

1. 사용자 페르소나를 사용하여 유용한 데이터 기반 대시보드 디자인
2. 대상 고객 및 클라이언트 페르소나 워크시트
3. 스타일보다 유용성: 단순하고 명확하며 우아하게 유지
4. 소재와 평면 디자인 결합 - 형태보다 기능
5. 미학보다 접근성
6. 개선의 여지를 허용

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

아래 댓글 섹션에서 알려드립니다.

웹디자인 리포트 사업

올해 우리는 1,000명의 주요 프리랜서, 에이전시 및 크리에이티브에게 웹사이트를 구축하고, 클라이언트 서비스를 구성하고, 제때에 전액을 지급받는 가장 좋은 방법에 대해 질문했습니다. 거기에서 우리는 숫자를 계산하고 통찰력을 파고 아름다운 보고서를 포장하여 추측을 멈추고 비즈니스 확장을 시작할 수 있습니다!

이번 달부터 웹 디자인 비즈니스를 완전히 새로운 차원으로 끌어올리십시오. 귀하와 같은 다른 디자인 비즈니스로부터 통찰력을 얻고 귀하의 서비스에 대한 경쟁력 있는 비용 청구를 시작하십시오!