Баланс между технической глубиной и удобством использования: история редизайна Radar
- Новая главная страница Radar начинается с карты трафика и сбоев и ведёт от глобального обзора к данным по отдельным странам.
- Вместо карточек с диаграммами появились вкладки со сводными показателями и переходами к подробным данным.
- При редизайне Cloudflare объединила доступность маркетинговых страниц, навигацию контентных ресурсов и компоненты продуктовой системы Kumo.
Почему это важно: Редизайн — первый шаг к тому, чтобы предоставить каждому пользователю актуальную информацию о безопасности, производительности и трафике Интернета.
Radar в режиме реального времени показывает глобальные тенденции в Интернете благодаря глобальной сети Cloudflare. Мы поддерживаем миссию Cloudflare — помогать создавать более совершенный Интернет, делая веб-данные доступными, понятными и полезными для всех. С момента запуска в 2020 году Radar нашёл свою аудиторию среди опытных пользователей с техническим образованием, например сетевых операторов и академических исследователей, которые используют данные Radar, чтобы наблюдать за отраслевыми тенденциями и мировыми событиями.
Но Radar также может стать более привычным и доступным для самостоятельного использования ресурсом для журналистов, правозащитников, представителей власти и обычных пользователей. Сделать Radar доступным для более широкой аудитории — важная часть нашего видения, поэтому мы поняли, что пришло время пересмотреть пользовательский опыт: как сделать Radar понятнее для широкой аудитории, сохранив глубину и строгость, которыми он отличается сегодня?
В этой публикации мы расскажем об обновлённом Radar, поделимся процессом разработки и изложим наше общее видение будущего платформы.
Проблемы прежнего дизайна
Прежняя главная страница Radar
Прежняя главная страница хорошо показывала широту данных Radar, но из-за способа их представления в них было трудно разобраться. Макет из карточек-бенто придавал всем элементам одинаковую визуальную значимость, вертикальные карточки нарушали привычный порядок чтения, а оформление казалось оторванным от общего стиля Cloudflare.
Мы услышали об этом от пользователей. Один из внешних пользователей сказал, что больше всего его расстраивало то, что Radar трудно показывать студентам. Этот отзыв подтвердил, что при первом знакомстве Radar может показаться сложным и непонятным. Поэтому мы хотели создать главную страницу, которая помогала бы яснее ориентироваться в содержании, а не предлагала пользователям сразу самостоятельно разбираться во всём.
Однако сделать Radar доступнее — это не только вопрос реорганизации контента. Важно было также теснее связать пользовательский опыт с Cloudflare. Для внешних пользователей единообразие напрямую влияет на доверие и удобство использования. Более цельный опыт взаимодействия с Cloudflare помогает показать, что Radar — авторитетный источник, а знакомые элементы макета упрощают работу со сложной информацией.
Представляем новую главную страницу Radar
Карта на новой главной странице Radar
В обновлённом Radar используется наглядный образ, знакомый пользователям с самым разным опытом, — карта. Хотя во многих отношениях Интернет существует вне понятия государственных границ, его связь с повседневной жизнью проще всего понять через географию.
Верхний раздел посвящён трафику и сбоям. Мы начинаем со сбоев, поскольку они относятся к наиболее конкретным, своевременным и значимым показателям состояния Интернета. Трафик, в свою очередь, демонстрирует масштаб и охват данных Radar. Карта также служит отправной точкой для перехода к приведённым ниже сведениям, помогая пользователям двигаться от глобальной картины к отдельным странам, тенденциям и историям, основанным на данных.
Пошаговое изучение данных
Под картой мы заменили прежние виджеты с диаграммами в виде карточек-бенто на вкладки, которые помогают пользователям более последовательно изучать данные. На вкладках представлены сводные статистические показатели, позволяющие оценить возможности Radar, а также предлагается перейти к более подробному изучению данных. Такая структура формирует более понятную иерархию, не перегружает страницу и даёт представление о том, какую информацию предоставляет Radar.
От идеи к воплощению
Разработка визуального языка Radar
Чтобы разработать визуальный язык Radar, мы изучили экосистему контента Cloudflare, которую можно разделить на три направления:
- Маркетинговые страницы (например, cloudflare.com)
- Контентные ресурсы, такие как блог Cloudflare и документация для разработчиков
- Продуктовые интерфейсы
Маркетинговые страницы, контентные ресурсы и продуктовые интерфейсы Cloudflare
Какое место занимает Radar?
В итоге мы решили, что Radar находится на пересечении всех трёх направлений. В основе Radar лежит продукт для работы с данными, но он также рассчитан на широкую аудиторию и насыщен контентом. В нашей стратегии сочетаются особенности дизайна каждого из направлений: доступность, как у маркетинговых страниц, структурированность и удобная навигация, как у контентных ресурсов, а также простота поддержки благодаря переходу на компоненты Kumo, используемые в продуктовой системе Cloudflare.
Какие варианты мы пробовали
С самого начала мы понимали, что главная страница должна передавать глобальный взгляд Radar. Поскольку Radar помогает людям понимать, что происходит в Интернете в разных странах и регионах, карта показалась самым наглядным способом сразу продемонстрировать этот охват.
Мы неоднократно дорабатывали карту, пытаясь найти правильный баланс между насыщенностью данными и доступностью. Ранние версии были слишком перегружены — мы пытались показать надёжность Radar с помощью визуализаций, насыщенных данными. В более поздних вариантах мы слишком увлеклись маркетинговой эстетикой: они выглядели доступнее, но возникал риск, что свежие данные Radar будут казаться статичными или чрезмерно обобщёнными. Нынешний вариант находится между этими полюсами: он передаёт ощущение данных в реальном времени, но при этом его проще воспринимать.
Ранние варианты карты с насыщенной визуализацией данных
Более поздний вариант карты с оформлением в маркетинговом стиле
Видение и развитие Radar
Поскольку Cloudflare обслуживает около 20% всего веб-трафика, Radar может рассказывать уникальные и увлекательные истории об Интернете. Чтобы раскрыть этот потенциал, мы хотим предоставить каждому пользователю доступ к актуальной информации о безопасности, производительности и трафике.
Этот редизайн — важный первый шаг в этом направлении. В дальнейшем Radar продолжит развивать инструменты, визуализации и способы рассказывать истории на основе данных, которые помогут новой аудитории пользоваться платформой, не отказываясь при этом от нашей мощной инфраструктуры данных. Сочетая техническую основательность с более простым и ориентированным на человека пользовательским опытом, мы помогаем большему числу людей изучать, понимать и обсуждать состояние Интернета.
Помогите нам сделать Radar лучше
Этот редизайн — наш первый шаг к более понятному и удобному для быстрого просмотра Radar. Но мы только начинаем, и нам важно ваше мнение. Что работает хорошо? Что можно улучшить? Какие сведения по-прежнему трудно найти?
Вы можете поделиться отзывами в социальных сетях: @CloudflareRadar в X, radar.cloudflare.com в Bluesky или по электронной почте: radar@cloudflare.com.
