Жизнь в движении: руководство по анимации мобильных визуализаций данных

В наши дни, когда технологии управляют сбором и производством огромных объемов данных, относительно легко получить информацию, которая поможет вам принимать повседневные решения. Мобильные приложения используют данные о частоте сердечных сокращений и другие биометрические данные для отслеживания здоровья и целей упражнений. Они предоставляют данные в режиме реального времени об инвестициях, личных расходах и составлении бюджета. Они даже могут помочь родителям оценить особенности кормления и сна их новорожденных.

Чтобы понять огромный объем доступных данных, достаточно взглянуть на годовые отчеты дизайнера Николаса Фелтона, составленные на основе его личных данных. Когда у вас под рукой так много информации, самое сложное — разобраться в ней.

Здесь может помочь анимация. Анимация данных делает их более понятными, привлекательными и полезными, особенно на маленьких экранах мобильных устройств. С анимацией числа легче усваиваются, и становятся очевидными упущенные из виду тенденции, шаблоны и повествования. Интерактивность в реальном времени с этими визуальными элементами способствует вовлечению и позволяет пользователям более глубоко изучать данные.

В то же время чрезмерная или ошибочная анимация может свести на нет ее цель, затуманивая, а не освещая понимание. При анимации визуализаций мобильных данных дизайнеры должны использовать принципы моушн-дизайна и избегать распространенных ошибок.

Преимущества анимации мобильных визуализаций данных

Анимация — это не просто украшение визуализации данных. Движение предлагает множество преимуществ, и его следует применять с целью достижения конкретного результата.

Ключевым преимуществом использования движения в визуализации данных является помощь пользователям в восприятии тенденций и изменений. Покойный академик Ганс Рослинг известен анимацией, в которой он нарисовал данные о продолжительности жизни и доходах, чтобы показать изменения в состоянии здоровья и благосостояния в десятках стран за десятилетия. Это захватывающая анимация, которая проясняет тенденции с течением времени и противодействует общепринятым представлениям о глобальном развитии.

Исследования показывают, что анимация статических диаграмм может улучшить графическое восприятие и повысить интерес зрителей. Например, вместо того, чтобы отображать диаграмму сразу, элементы могут входить с разной скоростью, чтобы не перегружать зрителя слишком большим количеством информации. Движения «помогают показать или улучшить визуальную иерархию элементов или ориентацию осей и то, как отображаются данные», — говорит Татьяна Донска, лондонский дизайнер UI/UX в сети Toptal.

Анимация также помогает дизайнерам эффективно использовать экраны мобильных устройств. «Движение в визуализации данных помогает понять переходы между различными состояниями и предоставляет больше информации, не загромождая пользовательский интерфейс», — говорит Донска. Интерактивность в реальном времени может дополнительно поддерживать чистый интерфейс, поскольку пользователи могут просматривать данные с помощью жестов, таких как касание, перетаскивание, прокрутка и масштабирование. Например, пользователи могут провести пальцем по оси, чтобы отобразить различные значения, или нажать, чтобы открыть числа.

Включение обновлений в режиме реального времени в анимированные визуализации данных может сделать их еще более привлекательными для пользователей. Оладжиде Акинпелу, дизайнер UI/UX компании Toptal из Нигерии, говорит, что наблюдение за обновлением данных перед нашими глазами помогает человеческому познанию. Пользователю, обновляющему статические данные, будет труднее обнаружить изменения; движение в реальном времени помогает им выявить идеи, которые в противном случае они могли бы пропустить.

Конечно, сделать так, чтобы переходы и движения выглядели естественно, не отвлекая пользователя, легче сказать, чем сделать.

Методы анимации и визуализации данных для мобильных устройств

Визуализация данных не ограничивается сложными наборами данных, представленными в виде традиционных диаграмм и графиков. Даже кнопка «Мне нравится», которая показывает настроение пользователя в социальном приложении, — это способ визуализации данных.

Независимо от сложности, при анимации визуализации данных в игру вступает общий набор принципов и методов. Четыре метода, на которых мы сосредоточимся в этой статье: изменение ценности; ослабление, смещение и задержка; воспитание детей; и масштабирование — стремитесь наполнить движение в среде UX естественностью движения в реальном мире, в соответствии с врожденными ожиданиями пользователей и чувством непрерывности и повествования. В конце концов, цель состоит в том, чтобы помочь пользователям понять абстрактные данные, а не просто заинтересовать их или доставить им удовольствие.

Изменение значения

При отображении изменения значения с анимацией вместо отображения статического числа числовой счетчик тикает вверх или полоса поднимается, прежде чем приземлиться на окончательное число. Это может быть мощным способом передать прогресс или рост — или их отсутствие. Это также означает, что данные могут быть изменены, а в некоторых случаях анимация значений указывает на интерактивность.

Визуализация изменения ценности широко распространена в мобильной среде, в том числе в приложениях для фитнеса, образования и финансов. Например, в приложении для изучения языка полоса может постепенно увеличиваться до тех пор, пока не будет получена окончательная оценка за тест. Изменение значения показывает прогресс и может дать пользователю чувство выполненного долга, поощряя его продолжать обучение.

Применение изменения значения к линиям на диаграмме — еще один способ продемонстрировать изменения с течением времени. Например, на гистограмме, показывающей валовой внутренний продукт (ВВП) разных стран, движение может показать траектории национальных экономик относительно друг друга. Такие визуальные эффекты называются гонками на гистограммах.

Ослабление, смещение и задержка

В физическом мире объект не может мгновенно разогнаться с нуля до 20 миль в час. Однако в цифровом мире вы можете создать движение без ускорения или замедления. Но это не значит, что вы должны. Человеческому глазу такое движение кажется неестественным, поэтому полезно придавать графическим элементам естественную скорость входа и выхода, что называется замедлением.

Компенсация введения различных элементов пользовательского интерфейса и задержка их скорости могут дополнительно сигнализировать пользователям о том, что отображаются разные переменные, и это может помочь установить иерархию между ними. Например, в приложении для торговли акциями сначала может отображаться стоимость акций пользователя, а затем стоимость общих индексов. Смещение и задержка облегчают пользователям понимание чисел и диаграмм, чем если бы они были представлены все сразу.

Воспитание детей

Родительские отношения создают отношения между компонентами пользовательского интерфейса. Когда свойство (например, положение, масштаб или цвет) в родительском элементе изменяется, свойство в дочернем элементе изменяется. Например, на линейной диаграмме, если точка на линии является родительской, когда пользователь перетаскивает точку, он может видеть изменение значения (дочернего объекта).

Воспитание — эффективный способ повысить интерактивность и создать иерархию.

Масштабирование

Масштабирование позволяет пользователям легко перейти от просмотра данных с высоты птичьего полета к более детализированному. Это может быть полезно при представлении больших наборов данных, которые обычно можно просматривать на компьютере. Например, приложение для отслеживания акций может загружать еженедельный обзор цен на данную акцию и позволять пользователям увеличивать или уменьшать масштаб, чтобы отображать ежедневные или годовые данные.

Одной из наиболее распространенных форм визуализации данных являются карты, которые широко используются в приложениях для фитнеса, проката велосипедов и такси. Масштабирование является важным инструментом в этом контексте, поскольку границы мобильного экрана сильно ограничивают то, что может быть представлено в одном изображении.

Подводные камни моушн-дизайна, которых следует избегать

Эдвард Тафте, человек, которому приписывают буквальное написание книги о современной визуализации данных, придерживался простого принципа: «Прежде всего покажите данные».

Сосредоточьтесь на передаче информации. Такие атрибуты, как цвет, форма и движение, следует использовать только для улучшения понимания данных. Посторонние визуальные элементы — или «мусор на графике», как назвал его Тафти, — отвлекают от этой цели.

На мобильных устройствах, где пользователи экрана могут отвлекаться, слишком большое количество движущихся частей в визуализации данных может быть ошеломляющим.

«С мобильными устройствами у вас уже есть небольшой форм-фактор, который требует внимания», — говорит дизайнер-ветеран Даррелл Эстабрук, который присоединился к сети Toptal в 2019 году. В любом мобильном рабочем процессе без хорошо продуманных дискретных шагов «пользователь может пойти наперекосяк».

Эстабрук добавляет: «При любой визуализации данных вы должны спросить, какую информацию вы предоставляете пользователю, чтобы он мог принять следующее решение… нажать кнопку, написать электронное письмо или копнуть глубже. Что вам нужно сделать, чтобы предоставить им эту [информацию]?»

Вы можете разработать целенаправленную и эффективную визуализацию мобильных данных, избегая следующих ловушек:

Ресурсоемкие визуальные эффекты, которые не добавляют большой ценности

Рендеринг движения в визуальных элементах может быть ресурсоемким на серверной части и может негативно сказаться на производительности и взаимодействии с пользователем во внешнем интерфейсе. Большие наборы данных или данные, требующие обширного кодирования, повышают этот риск. Прежде чем вкладывать ресурсы в создание таких визуальных эффектов, дизайнерские команды и клиенты должны четко представлять себе желаемый результат и то, что он будет стоить затраченных усилий.

Кричащая или излишняя анимация

Анимированные визуализации данных должны поддерживать назначение приложения. Приложение для изучения языка может использовать движение, чтобы подчеркнуть прогресс пользователей, в то время как инвестиционное приложение может тонко выделить важные данные. Однако, независимо от характера приложения, в большинстве случаев дизайнерам следует избегать ярких анимаций, таких как падающие конфетти или фейерверки. Они не только рискуют геймифицировать визуальные эффекты, что может привести к нездоровому взаимодействию с приложением, но и могут скрыть или преувеличить то, что на самом деле передают данные.

Слишком интерактивные визуальные эффекты

Работа с данными требует определенной степени точности, и пользователям потребуется приличная часть экрана смартфона — от 7 до 10 мм обычно считается лучшей практикой — для успешного выполнения жестов. Слишком много интерактивности может оказаться громоздким и разочаровывающим. Полезно расставлять приоритеты по одному действию за раз.

Непоследовательный стиль

Визуализация данных должна согласовываться с общим стилем и функциональностью приложения, что Apple называет эстетической целостностью в своих рекомендациях по человеческому интерфейсу.

По словам Акинпелу, дизайнера UX/UI из Нигерии, поддержание стилистической последовательности «в виде используемого перехода, типа анимации, смешения цветов» помогает пользователям ориентироваться в наборах данных.

Идти в ногу с растущими данными

Данные прочно вошли в нашу жизнь, от работы и учебы до здравоохранения и финансов. С появлением все более совершенных смартфонов и распространением связи 5G объем данных и возможности их применения, несомненно, также будут расти.

Анимация может быть важным инструментом, помогающим людям осмыслить всю эту информацию. Движение облегчает пользователям понимание ключевых показателей, тенденций и взаимосвязей. Однако, как и в случае с любой функцией UX, анимацией можно злоупотреблять или использовать неправильно, что в конечном итоге может сделать данные менее понятными. Используя принципы и методы моушн-дизайна, дизайнеры могут создавать привлекательные и информативные анимированные визуализации мобильных данных.

Дальнейшее чтение в блоге Toptal Design

• Привлекательность и движение: руководство по принципам моушн-дизайна
• Растущее влияние индустрии моушн-дизайна
• Порадуйте пользователей этими рекомендациями по дизайну мобильных приложений