- Статьи
- 3 мин на чтение
- 27
Как превратить списки с данными в интерактивные диаграммы
Проектируем удобный интерфейс для работы с данными
Насколько информативны данные в вашем интерфейсе? Если вы отображаете необработанную информацию в виде списка, то пользователи не получат чёткого представления о закономерностях и взаимосвязях между разными переменными. Людям необходимо видеть эти связи, чтобы разобраться в сути данных и действовать на базе полученной информации.
Нет лучшего способа отразить сложные данные, чем использовать интерактивные диаграммы. Когда люди взаимодействуют с данными, этот наиболее интересный способ позволяет им рассматривать информацию с разных сторон.
Например, приложение, которое отображает количество продаж во времени, выглядит более информативно в виде диаграммы, чем в формате списка.
На диаграмме пользователи могут переключаться между просмотром общих продаж за последний месяц или за год. Они также могут посмотреть среднее значение продаж по дням, по будням, по выходным или увидеть день, в который показатель продаж был самым высоким. Такая функциональность позволяет им исследовать значения данных в широком контексте.
Когда пользователь нажимает на кнопки-переключатели, диаграмма обновляется, подсвечивая различные секции. Ярко-синий цвет применяют для лучшей видимости. Также на диаграмме появляются линии сетки, которые выделяют выбранные значения.
На рисунке выше среднедневное значение находится справа от линии сетки, которая проходит сквозь столбцы с количеством проданных товаров. Среднее значение продаж по будням и выходным показано с помощью выделения синим цветом значений продаж только в эти конкретные дни. Подсвечивается даже значение дня, когда показатель продаж был самым высоким, чтобы пользователи не искали его.
Пользователь может кликнуть или навести курсор мыши на столбец, чтобы просмотреть отдельные значения. При этом появляется всплывающая подсказка с указателем данных, который указывает на выбранный столбец, чтобы люди могли отличить его от остальных. При перемещении пальца или мыши по диаграмме всплывающая подсказка и указатель перемещаются вместе с ним.
Чем больше столбцов на диаграмме, тем уже они становятся, чтобы все они уместились по ширине экрана. Поэтому важно растянуть область касания каждого столбца по всей высоте диаграммы. Это облегчит пользователям выбор столбцов, не требуя высокой точности касания.
Отображение продаж во времени — только одна перспектива для просмотра данных. Вы также можете создать другую диаграмму, чтобы показать данные с разных сторон. Например, диаграмма, которая отображает самый продаваемый товар, позволяет пользователям сравнивать, как он продавался в течение определённого отрезка времени.
Вместо того, чтобы показывать данные в формате вертикальных столбцов, изменение стиля на горизонтальные столбцы помогает пользователям понять, что это не график временных рядов. Это также позволяет увеличить длину столбцов без необходимости увеличивать высоту диаграммы, что в итоге экономит место. При клике на диаграмму пользователи получат подробное представление о различных товарах и их значениях.
Вы также можете показать, в какой день показатель продаж был самым высоким. Такое представление даёт пользователям информацию о том, в какой день недели объём продаж был самым высоким, что потенциально поможет им их увеличить.
Если вы хотите, чтобы данные на вашей диаграмме были более заметными, используйте тёмный режим. Обратная полярность делает отметки на фоне контрастнее, что улучшает их видимость. В результате отдельные значения будут более удобными для анализа.
Необработанный список с данными никогда не сможет предоставить такой уровень вовлечённости и понимания, как это делает интерактивная диаграмма. Диаграммы придают данным смысл, чтобы люди могли ими пользоваться. Списки отображают информацию в неудобном формате.
Для эффективной работы интерактивных диаграмм покажите ваши данные с разных ракурсов, чтобы пользователи могли всесторонне изучить их. Позвольте им переключаться между несколькими видами диаграмм, чтобы они могли видеть закономерности и взаимосвязи между переменными. Через мощь диаграмм ваши пользователи, наконец, найдут смысл в данных, которые они анализируют.
Перевод статьи How to Turn Data Lists into Interactive Charts из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
