Рекомендации по созданию визуализаций

Устранение перегрузки приложений

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

Чем меньше, тем лучше

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

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

Работа с приложением при наличии ограничений

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

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

При наличии подобной проблемы пользователь приложения может развернуть визуализацию. Однако рекомендуется проверять приложения на устройствах, с которыми могут работать пользователи приложений. Для проверки можно использовать различные инструменты, к примеру, дружественный режим разработки Firefox (Ctrl + Shift + M). При необходимости визуализации можно перемещать на другие листы, уменьшать количество данных для отображения в визуализациях и т. д.

Восприятие цветов

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

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

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

При нарушенном восприятии цветов линии, полосы и сектора могут выглядеть трудно различимо.

Для получения дополнительной информации см. Изменение вида визуализации.

Расположение фильтров и значков

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

Размещение слева

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

Для языков, в которых текст пишется справа налево, все, соответственно, наоборот. Это следует иметь в виду при переводе приложений на эти языки.

Размещение сверху

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

Для получения дополнительной информации см. Structuring an app using sheets.

Иерархия данных

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

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

Добавление контекста в ключевые показатели эффективности

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

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

Ошибки при создании визуализации данных

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

Неправильное использование цветов

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

Неправильное использование круговых диаграмм

Не ставьте круговые диаграммы рядом для сравнения. Не переполняйте их информацией.

Визуальные помехи

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

Перевес оформления над смысловой составляющей

Красивая визуализация не всегда эффективна. Всегда используйте лучшие способы дизайна.

Неточные данные

Просмотрите и исправьте ошибки в данных перед их представлением. Визуализации не должны содержать некорректную информацию.