год
2023
роль
Cube.dev: исправление графиков
01.
Контекст
Cube.dev — это Business Intelligence Tool, а значит одна из его основных функций — построение графиков и дашбордов. Но с построением были некоторые проблемы.
Рассмотрим график подробнее: это обычная двумерная столбчатая диаграмма, но в ховер вшито дополнительное третье измерение.
02.
Проблемы
- Предположим, что одна из величин будет иметь ничтожное в сравнении с остальными значение. Тогда его хитбокс будет меньше одного пикселя, что не позволит пользователю прицелиться на него и узнать это значение.
- Слишком разрозненные значения, что приведет к слишком рваной диаграмме. В этом случае взгляд пользователя должен искать нужное значение на разных уровнях, что значительно затрудняет сравнение информации.
В то же время в текущей реализации значение можно посмотреть только на каждом отдельном блоке при ховере. Поэтому сравнивать значения становится очень сложно.
03.
Решение
После того, как мы разобрались с проблемами, перейдем к решению:
- Вынесем контролы за пределы графика. Теперь пользователь всегда сможет переключаться между разными значениями, какими бы малыми они ни были. Блок навигации также служит легендой таблицы.
- Теперь сделаем так, чтобы можно было быстро и легко сравнивать значения. Для этого мы вынесем значения в отдельную таблицу под основной.
Немного увеличим масштаб и добавим дополнительную ось Y
А теперь все вместе:
04.
Результат
Небольшими изменениями удалось снизить когнитивную нагрузку, улучшить читаемость графиков и сделать данные более наглядными.