Независимо от того, расследуете ли вы инцидент или просто изучаете свои данные, четкий и согласованный интерфейс помогает переключаться между рабочими процессами и быстрее находить то, что действительно важно. По мере того как Grafana росла и охватывала все больше сценариев использования, мы видели возможности для улучшения этого опыта. Именно поэтому в релизе Grafana 13.3 мы представили первый этап нашего крупнейшего визуального обновления со времен Grafana 7.
Мы подходим к этой работе поэтапно: в настоящее время обновленный пользовательский интерфейс находится в режиме публичного предварительного просмотра как в Grafana Cloud, так и в локально управляемых версиях Grafana, и ваши отзывы сыграют ключевую роль в формировании дальнейшего развития.
В этой статье мы подробно расскажем, почему мы решили внести эти изменения именно сейчас, почему мы считаем визуальную эстетику важной частью интерфейса и как это повлияет на пользовательский опыт в Grafana. Вы также можете посмотреть некоторые визуальные обновления в видео ниже.
Начнем с причин
«Цели выводятся из поведения, а не из риторики или заявленных намерений». – Donella Meadows
В Grafana Labs наша культура наделяет сотрудников и команды полномочиями выявлять потребности пользователей, быстро создавать решения, выпускать их итеративно и работать открыто. Это позволило нам охватить широкий спектр сценариев использования Grafana. Но быстрое движение может сопровождаться трудностями, включая дизайнерский долг, который приводит к несогласованным и иногда противоречивым визуальным подсказкам, рабочим процессам и графическим интерфейсам. Мы знали об этих проблемах, но наше внимание оставалось сосредоточено на предоставлении новой функциональности и поддержке как можно большего числа сценариев использования.
Между тем, за последний год команда продуктового дизайна совместно с нашими инженерами работала над созданием новых шаблонов взаимодействия для поддержки решений на базе ИИ, таких как Grafana Assistant и Assistant Workspace. Создание этих шаблонов пробудило интерес, и мы начали экспериментировать с новыми визуальными формами, цветами, очертаниями и эффектами, которые заложили основу для обновления.
В ходе этой работы наш подход к стилю и эстетике интерфейса эволюционировал, как и наша цель: помимо поддержки новых рабочих процессов и сценариев использования, мы хотели обеспечить большую согласованность взаимодействий и паттернов дизайна во всей Grafana. Это обновление — первый шаг к данной цели.
Визуальное оформление и удобство использования
«Эстетическое качество продукта является неотъемлемой частью его полезности». – Dieter Rams
Ранние итерации наложения интерфейса и визуальной группировки
Зачем же инвестировать в визуальное оформление? Чтобы оставаться актуальными? Чтобы облегчить продажи? Потому что это выглядит круто?
Все эти причины имеют право на жизнь, но в Grafana Labs продуктовые дизайнеры — прежде всего прагматики. Мы верим, что цифровые продукты должны существовать с четкой целью и функцией. Мы считаем, что каждый цвет, стиль шрифта и линия должны формировать четкую информационную иерархию и помогать пользователям быстро понимать содержимое страницы, в конечном итоге делая наш продукт проще в использовании.
Поскольку все больше рабочих процессов переносится в терминалы и агентские чат-интерфейсы, мы верим, что инвестиции в визуальный стиль сейчас имеют основополагающее значение для будущего удобства использования Grafana. Когда все меньше пользовательских сценариев полагается на традиционный интерфейс, те немногие, что зависят от него, должны отличаться особой ясностью и согласованностью.
Что нового: подробный обзор
Этот первый этап обновления направлен на то сделать интерфейс Grafana более понятным и единообразным в различных рабочих процессах и компонентах, предоставляя вам время на адаптацию к изменениям. Вот некоторые из ключевых особенностей:
- Новые темы оформления по умолчанию (светлая и темная): эти темы используют совершенно новые цветовые палитры, созданные с учетом требований доступности (accessibility).
Новые темы оформления по умолчанию (светлая и темная): эти темы используют совершенно новые цветовые палитры, созданные с учетом требований доступности (accessibility).
- Повышенная согласованность компонентов: мы начали сокращать количество доступных компонентов пользовательского интерфейса и их вариантов. Это означает, что пользователям достаточно изучить взаимодействие или паттерн один раз, чтобы затем применять его на всей платформе.
Повышенная согласованность компонентов: мы начали сокращать количество доступных компонентов пользовательского интерфейса и их вариантов. Это означает, что пользователям достаточно изучить взаимодействие или паттерн один раз, чтобы затем применять его на всей платформе.
- Новые стили шрифтов, границы и тени: переработав наши визуальные примитивы так, чтобы они работали пропорционально и масштабируемо, мы создали уровни иерархии и визуальной информации. В ходе аудита мы заметили, что многие элементы интерфейса боролись за внимание пользователей. Мы переходим к состоянию, когда вы можете сразу понять, что является наиболее важным на странице, что позволяет выполнять задачи быстрее и эффективнее. Вы заметите эти изменения в строительных блоках Grafana, включая карточки, панели и выдвижные элементы (drawers).
Новые стили шрифтов, границы и тени: переработав наши визуальные примитивы так, чтобы они работали пропорционально и масштабируемо, мы создали уровни иерархии и визуальной информации. В ходе аудита мы заметили, что многие элементы интерфейса боролись за внимание пользователей. Мы переходим к состоянию, когда вы можете сразу понять, что является наиболее важным на странице, что позволяет выполнять задачи быстрее и эффективнее. Вы заметите эти изменения в строительных блоках Grafana, включая карточки, панели и выдвижные элементы (drawers).
Мы внедряем визуальное обновление постепенно, чтобы у контрибьюторов и пользователей Grafana было время адаптироваться без ущерба для критически важных рабочих процессов. Важно отметить, что это визуальное обновление, а не редизайн. Существующая навигация остается прежней, и никаких ломающих изменений (breaking changes) для плагинов нет.
Чтобы протестировать новый интерфейс в локально управляемой Grafana, включите переключатель функций grafana.visualDesignRefresh. Вы можете в любой момент вернуться к прежнему стилю.
Полный список изменений в публичном предварительном просмотре можно найти в нашей документации.
Любопытство, мониторинг и обратная связь
«Для создания и поддержания круга компетенции необходимы три ключевые практики: любопытство и стремление к обучению, мониторинг и обратная связь». – Shane Parrish & Rhiannon Beaubien
Любопытство — ключевое качество продуктовых дизайнеров в Grafana Labs, и мы знали, что унификация внешнего вида Grafana потребует шагов, способных вызвать сильную реакцию. Именно поэтому обучение, сбор отзывов и мониторинг реакции стали центральными элементами нашего процесса.
Мы могли бы потратить год на создание того, что кажется нам идеальным новым визуальным стилем, проводя сотни внутренних итераций, но вместо этого мы начали с раннего внутреннего тестирования обновленного интерфейса силами собственной команды (dogfooding). Это привело к честным обсуждениям и мнениям со стороны сотрудников Grafana по всей компании, что помогло нам быстро доработать визуальное обновление до версии, которой мы не смогли бы достичь без работы в условиях открытости.
Теперь, когда обновление находится в режиме публичного предварительного просмотра, ваши отзывы имеют решающее значение для дальнейшего совершенствования нашего визуального стиля. Через наш сообщество в Slack и временный опрос внутри приложения вы можете напрямую рассказать нам о том, что работает хорошо, что требует улучшений и что мы могли упустить из виду. Мы открыто отслеживаем и обсуждаем эти отзывы, что помогает сделать ваш голос громче и поделиться им по всей организации. Ваши ответы станут неотъемлемой частью формирования будущих итераций обновления.
Мы с нетерпением ждем вашего мнения и продолжения нашего развития в направлении более яркого визуального опыта для всех пользователей Grafana.
