Life in Motion: 모바일 데이터 시각화 애니메이션 가이드

오늘날 엄청난 양의 데이터 수집 및 생산을 주도하는 기술로 인해 일상적인 결정을 안내할 수 있는 정보를 비교적 쉽게 얻을 수 있습니다. 모바일 앱은 건강 및 운동 목표를 추적하기 위해 심박수 및 기타 생체 인식 데이터를 사용합니다. 그들은 투자, 개인 지출 및 예산 편성에 대한 실시간 데이터를 제공합니다. 그들은 부모가 신생아의 수유 패턴과 수면 패턴을 평가하도록 도울 수도 있습니다.

사용 가능한 데이터의 양을 파악하려면 디자이너 Nicholas Felton의 개인 데이터로 구성된 연례 보고서를 살펴보십시오. 손끝에 너무 많은 정보가 있으므로 어려운 부분은 이해하는 것입니다.

이때 애니메이션이 도움이 될 수 있습니다. 데이터에 애니메이션을 적용하면 특히 모바일 장치의 작은 화면에서 데이터를 더 이해하기 쉽고 매력적이며 유용하게 사용할 수 있습니다. 애니메이션을 사용하면 숫자를 더 쉽게 소화할 수 있고 간과한 경향, 패턴 및 내러티브가 분명해집니다. 이러한 시각적 개체와의 실시간 상호 작용은 참여를 촉진하고 사용자가 데이터를 더 깊이 탐색할 수 있도록 합니다.

동시에 과도하거나 잘못된 애니메이션은 그 목적을 무색하게 하여 통찰력을 밝히기보다는 흐리게 할 수 있습니다. 모바일 데이터 시각화에 애니메이션을 적용할 때 디자이너는 모션 디자인 원칙을 사용하고 일반적인 함정을 피해야 합니다.

모바일 데이터 시각화 애니메이션의 이점

애니메이션은 데이터 시각화에 대한 단순한 장식이 아닙니다. 모션은 수많은 이점을 제공하며 특정 결과를 달성하기 위해 적용해야 합니다.

사용자가 추세와 변화를 인식하도록 돕는 것은 데이터 시각화에서 모션을 사용하는 주요 이점입니다. 고 학자인 Hans Rosling은 수십 년 동안 수십 개국의 건강과 부의 변화를 보여주기 위해 수명과 소득 데이터를 그린 애니메이션으로 유명합니다. 시간이 지남에 따라 추세를 명확히 하고 글로벌 개발에 대한 일반적인 인식을 상쇄하는 매혹적인 애니메이션입니다.

연구에 따르면 정적 차트에 애니메이션을 적용하면 그래픽 인식을 개선하고 시청자의 관심을 높일 수 있습니다. 예를 들어 차트를 한 번에 모두 표시하는 대신 너무 많은 정보로 보는 사람을 압도하지 않도록 요소를 다양한 속도로 입력할 수 있습니다. 런던에 기반을 둔 Toptal 네트워크의 UI/UX 디자이너 Tetiana Donska는 "모션은 요소의 시각적 계층 구조 또는 축의 방향과 데이터가 표시되는 방식을 보여주거나 향상시키는 데 도움이 됩니다."라고 말합니다.

애니메이션은 또한 디자이너가 모바일 장치 화면을 효율적으로 사용할 수 있도록 도와줍니다. Donska는 "데이터 시각화의 움직임은 서로 다른 상태 간의 전환을 인식하는 데 도움이 되며 사용자 경험을 복잡하게 하지 않으면서 더 많은 정보를 제공합니다."라고 말합니다. 사용자가 탭, 드래그, 스크롤 및 확대/축소와 같은 제스처를 통해 데이터를 탐색할 수 있으므로 실시간 상호 작용은 깨끗한 인터페이스를 더욱 유지할 수 있습니다. 예를 들어 사용자는 축을 따라 손가락을 밀어 다른 값을 표시하거나 탭하여 숫자를 표시할 수 있습니다.

실시간 업데이트를 애니메이션 데이터 시각화에 통합하면 사용자의 관심을 더욱 끌 수 있습니다. 나이지리아에 기반을 둔 Toptal UI/UX 디자이너인 Olajide Akinpelu는 눈 앞에서 데이터 업데이트를 보는 것이 인간의 인지에 도움이 된다고 말합니다. 정적 데이터를 새로 고치는 사용자는 변경 사항을 감지하기가 더 어렵습니다. 실시간 모션은 그렇지 않으면 놓칠 수 있는 통찰력을 식별하는 데 도움이 됩니다.

물론 사용자의 주의를 산만하게 하지 않으면서 전환과 동작이 자연스럽게 보이도록 하는 것은 말처럼 쉽습니다.

모바일용 애니메이션 및 데이터 시각화 기법

데이터 시각화는 기존 차트와 그래프로 표현되는 복잡한 데이터 세트에만 국한되지 않습니다. 소셜 앱의 사용자 감정을 집계하는 "좋아요" 버튼도 데이터를 시각화하는 방법입니다.

복잡성에 관계없이 데이터 시각화에 애니메이션을 적용할 때 공통 원칙과 기술이 적용됩니다. 이 기사에서 초점을 맞춘 4가지 기술인 가치 변화; 완화, 오프셋 및 지연; 육아; 및 확대 - 사용자의 타고난 기대와 연속성과 내러티브에 대한 감각에 따라 실제 세계에서 움직임의 자연스러움으로 UX 환경의 모션을 부여하는 것을 목표로 합니다. 결국 목표는 사용자가 추상적 데이터를 이해하도록 돕는 것뿐 아니라 사용자를 참여시키거나 즐겁게 하는 것입니다.

가치 변화

값의 변화를 애니메이션으로 표시할 때 고정된 숫자를 표시하는 대신 숫자 카운터가 올라가거나 막대가 올라가 최종 수치에 도달합니다. 이것은 발전이나 성장 또는 그 부족을 전달하는 강력한 방법이 될 수 있습니다. 또한 데이터가 변경될 수 있음을 나타내며, 경우에 따라 값에 애니메이션을 적용하면 상호 작용이 나타납니다.

가치 변화 시각화는 피트니스, 교육, 금융 앱을 비롯한 모바일 환경 전반에 걸쳐 널리 퍼져 있습니다. 예를 들어, 언어 학습 앱에서 막대는 시험의 최종 점수에 도달할 때까지 점진적으로 올라갈 수 있습니다. 가치 변화는 진행 상황을 보여주고 사용자에게 성취감을 제공하여 학습 경로를 계속하도록 격려할 수 있습니다.

차트의 선에 값 변경 사항을 적용하는 것은 시간 경과에 따른 변경 사항을 보여주는 또 다른 방법입니다. 예를 들어, 여러 국가의 국내총생산(GDP)을 보여주는 막대 차트에서 움직임은 국가 경제의 궤적을 서로 비교할 수 있습니다. 이러한 시각적 개체를 막대 차트 레이스라고 합니다.

완화, 오프셋 및 지연

물리적 세계에서 물체는 즉시 0에서 20mph로 이동할 수 없습니다. 그러나 디지털 세계에서는 가속이나 감속 없이 움직임을 만들 수 있습니다. 그러나 그것이 당신이 해야 한다는 것을 의미하지는 않습니다. 사람의 눈에는 이러한 움직임이 부자연스러워 보이기 때문에 그래픽 요소에 여유(easing)라고 하는 자연스러운 진입 및 퇴장 속도를 부여하는 것이 좋습니다.

다양한 UI 요소의 도입을 상쇄하고 속도를 늦추면 사용자에게 고유한 변수가 표시된다는 신호를 추가할 수 있으며, 이는 그들 사이에 계층 구조를 설정하는 데 도움이 될 수 있습니다. 예를 들어 주식 거래 앱에서 사용자의 주식 가치가 먼저 나타나고 일반 지수의 가치가 뒤따를 수 있습니다. 오프셋과 지연은 사용자가 숫자와 차트를 한 번에 제시하는 것보다 더 쉽게 이해할 수 있도록 합니다.

육아

육아는 UI 구성 요소 간의 관계를 만듭니다. 상위 요소의 속성(예: 위치, 크기 또는 색상)이 변경되면 하위 요소의 속성이 변경됩니다. 예를 들어, 꺾은선형 차트에서 선의 점이 상위인 경우 사용자가 해당 점을 끌면 값(하위 개체)이 변경되는 것을 볼 수 있습니다.

육아는 상호 작용을 높이고 계층 구조를 만드는 효과적인 방법입니다.

확대/축소

확대/축소를 통해 사용자는 데이터의 조감도에서 보다 세분화된 데이터로 쉽게 이동할 수 있습니다. 일반적으로 데스크탑에서 볼 수 있는 종류의 대용량 데이터 세트를 표시할 때 유용한 기술이 될 수 있습니다. 예를 들어, 주식 추적 앱은 주어진 주식의 가격에 대한 주간 보기를 로드하고 사용자가 확대 또는 축소하여 일일 또는 연간 데이터를 표시할 수 있도록 합니다.

데이터 시각화의 가장 일반적인 형태 중 하나는 피트니스, 자전거 공유 및 차량 호출 앱에서 널리 사용되는 지도입니다. 확대/축소는 모바일 화면의 한계가 단일 시각적 개체로 표시할 수 있는 내용을 크게 축소하기 때문에 이러한 맥락에서 중요한 도구입니다.

피해야 할 모션 디자인 함정

말 그대로 현대 데이터 시각화에 관한 책을 저술한 것으로 알려진 Edward Tufte는 "무엇보다도 데이터를 보여라"라는 단순한 격언을 가지고 있었습니다.

정보 전달에 중점을 둡니다. 색상, 모양 및 움직임과 같은 속성은 데이터에 대한 이해를 높이기 위해서만 사용해야 합니다. 관련 없는 시각적 요소 또는 Tuft가 언급한 "차트 쓰레기"는 이러한 목적을 방해합니다.

화면 사용자가 주의를 산만하게 만드는 경향이 있는 모바일에서는 데이터 시각화에서 움직이는 부분이 너무 많으면 압도될 수 있습니다.

2019년에 Toptal의 네트워크에 합류한 베테랑 디자이너 Darrell Estabrook은 "모바일을 사용하면 이미 집중해야 하는 작은 폼 팩터가 있습니다.

Estabrook은 다음과 같이 덧붙입니다. “모든 데이터 시각화의 경우 사용자에게 어떤 정보를 제공하고 있는지 물어봐야 다음 결정을 내릴 수 있습니다. 버튼을 누르거나 이메일을 작성하거나 더 깊이 파고들 수 있습니다. 그들에게 그 [정보]를 제공하려면 어떻게 해야 합니까?”

다음과 같은 함정을 피함으로써 집중적이고 효과적인 모바일 데이터 시각화를 설계할 수 있습니다.

많은 가치를 추가하지 않는 리소스 집약적 비주얼

비주얼의 렌더링 모션은 백엔드에서 리소스 집약적일 수 있으며 프론트엔드에서 성능과 사용자 경험에 부정적인 영향을 미칠 수 있습니다. 대규모 데이터 세트 또는 광범위한 코딩이 필요한 데이터는 이러한 위험을 높입니다. 이러한 시각 자료를 구축하는 데 리소스를 투입하기 전에 디자인 팀과 고객은 원하는 결과와 노력할 가치가 있는 결과에 대해 명확해야 합니다.

화려하거나 불필요한 애니메이션

애니메이션 데이터 시각화는 애플리케이션의 목적을 지원해야 합니다. ​​언어 학습 앱은 모션을 사용하여 사용자의 진행 상황을 강조할 수 있는 반면 투자 앱은 실행 가능한 데이터를 미묘하게 강조 표시할 수 있습니다. 그러나 앱의 특성에 관계없이 대부분의 경우 디자이너는 떨어지는 색종이 조각이나 불꽃놀이와 같은 화려한 애니메이션을 피해야 합니다. 시각적 요소를 게임화하여 앱에 대한 부적절한 참여로 이어질 수 있을 뿐만 아니라 데이터가 실제로 전달하는 내용을 모호하게 하거나 과장할 수 있습니다.

지나치게 인터랙티브한 비주얼

데이터 작업에는 어느 정도의 정밀도가 필요하며 사용자는 제스처를 성공적으로 실행하기 위해 스마트폰 화면의 적절한 부분(일반적으로 모범 사례로 간주되는 7~10mm)이 필요합니다. 상호 작용이 너무 많으면 번거롭고 답답할 수 있습니다. 한 번에 하나의 작업에 우선 순위를 지정하는 것이 좋습니다.

일관성 없는 스타일

데이터 시각화는 Apple이 휴먼 인터페이스 지침에서 미적 무결성이라고 언급한 애플리케이션의 전반적인 스타일 및 기능과 일치해야 합니다.

나이지리아에 기반을 둔 UX/UI 디자이너 Akinpelu에 따르면 "사용하는 전환 유형, 애니메이션 유형, 색상 혼합"에서 스타일 일관성을 유지하면 사용자가 데이터 세트를 탐색하는 데 도움이 됩니다.

급증하는 데이터에 발맞추기

데이터는 직장과 학교에서 건강과 금융에 이르기까지 우리 삶의 고정 장치가 되었습니다. 스마트폰이 더욱 정교해지고 5G 연결이 확산됨에 따라 데이터의 양과 적용 가능성도 함께 증가할 것입니다.

애니메이션은 사람들이 이 모든 정보를 이해하도록 돕는 중요한 도구가 될 수 있습니다. Motion을 사용하면 사용자가 주요 지표, 추세 및 관계를 더 쉽게 이해할 수 있습니다. 그러나 모든 UX 기능과 마찬가지로 애니메이션은 과도하게 사용되거나 오용되어 궁극적으로 데이터를 이해하기 어렵게 만들 수 있습니다. 모션 디자인 원칙과 기술을 사용하여 디자이너는 매력적이고 통찰력 있는 애니메이션 모바일 데이터 시각화를 만들 수 있습니다.

Toptal 디자인 블로그에 대한 추가 정보

• 설득력 있고 감동적인: 모션 디자인 원칙 가이드
• 모션 디자인 산업의 영향력 확대
• 이러한 모바일 앱 디자인 모범 사례를 통해 사용자를 즐겁게 하십시오.