Задача: сделать редизайн представленного отчета статистики сервиса по активности пользователя. На исходном графике отображается число DNS-запросов и число блокировок за соответствующий период:
1. По взаимодействию.
а) Вместо выпадающего меню используем segmented controls/buttons. Выпадающие меню полезны для экономии места, когда есть параметры, которые не относятся к задаче пользователя. В данном случае важны все параметры. Также segmented buttons позволяют пользователям видеть все доступные варианты параметров и требуется только один щелчок, чтобы выбрать нужную опцию.
б) Кнопка show не нужна. Зачем лишние клики? Пусть график перестраивается автоматически при выборе нужного параметра.
в) Выпадающий список с детализацией графика тоже не нужен. Анализ аналогов (яндекс метрики и гугл аналитики) показал, что выборе длительного периода отображения и короткого отрезка детализации график передаёт лишь общую картину, а ориентироваться по часам, например, становится сложно.
В данном случае логичнее использовать паттерн с автоматической детализацией. Если человеку нужна подробная детализация, то он выбирает сегодня, вчера или конкретный день на календаре. Если выбирает неделю, то детализация масштабируется до по посуточной. Если период больше месяца - детализация по неделям. И так далее. Чем больший период пользователь выбирает, тем более общая картина его интересует. Поэтому логично автоматически увеличивать отрезок детализации.
Конечно всё вышесказанное актуально при условии, что мы не используем график с горизонтальной прокруткой.
Вот и первый экран:
2. Теперь немного о ui.
а) Минимум разделительных чёрточек и рамочек. Лучший разделитель и объединитель — это пространство (золотое правило типографики — правило внутреннего и внешнего).
б) Линейные графики вместо столбцов. По сути одно и тоже, но при сравнении двух показателей воспринимаются легче.
в) Общая информация по выбранному периоду с цветовой кодировкой, вместо обычной легенды.
г) Обычный тултип, ничего особенного. Отображается в верхней части графика на дополнительных линейках. Однако у дополнительных линеек есть и вторая функция — добавить воздуха в общую композицию.
д) Горизонтальная и вертикальная отбивка реже. В изначальном варианте много визуального шума. Но не слишком редкая, так как график должен быть информативен сам по себе, без всплывающего тултипа.
е) С любовью нарисованные perfect-pixel иконки:
ж) Модульная сетка, куда же без неё:
3. Переходим к следующим экранам.
Период — неделя, детализация масштабируется до дней.
4. Кастомный день/период. В segmented button дата отображается в формате дд мес гггг, так понятнее.
а) При выборе этой опции появляется календарь:
б) Повторным щелчком выбираем нужный день, нажимаем select и получаем его почасовую детализацию. Но нам нужен не день, а период с 15 марта по 27 апреля.
в) На то что можно выбрать не только день, но и период пользователю намекают инпуты в нижней части календаря и ховер в виде серых полос при наведении на даты. Также инпуты можно использовать по их прямому назначению. Если сервис предназначен для зарубежных клиентов, то формат даты нужно поменять с дд.мм.гггг на: мм.дд.гггг.
г) Выбираем второй день периода. Надпись на кнопке меняется с select day на select range. Нажимаем на кнопку.
5. Экран с графиком кастомного периода. Теперь segmented button отображает не день, а период. Детализация по неделям.
На этом всё, спасибо за внимание.
