Рецепт эффективного сайта о спорте – х3 визитов на сайте «Спартака»

Новая версия сайта красно-белых была запущена всего за пару месяцев до этого. Но и за короткий срок успела впечатлить экспертов лиги и доказать эффективность объективными метриками. О способах достижения такого результата СБК рассказали разработчики из компании Riverstart, которые также обновляли сайт ХК «Торпедо» и разрабатывали концепцию сайта ФК «Пари Нижний Новгород».

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

Изучите аудиторию сайта

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

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

Задачи этапа:

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

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

Проанализируйте статистику

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

Посещаемость

По посещаемости страниц сайта можно понять, что интересует аудиторию больше всего. В нашем случае получился такой список:

• расписание матчей;
• билеты;
• счет и статистика прошедшего матча;
• новости о команде;
• атрибутика;
• история клуба.
   

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

Семантика

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

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

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

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

Устройства

Статистика показала, что соотношение десктопных сеансов к смартфонам у сайта «Спартака» – 4 к 1. При этом тенденция к преобладанию мобильного трафика неоспорима. А значит, многим было бы удобно пользоваться сайтом со смартфона, например, проверять счет в дороге или покупать билеты. Значит, нужна проработанная адаптивность, делающая верстку удобной на любом экране.

Что характеризует хорошую адаптивную версию:

• дизайн – все функциональные элементы и контент корректно отображаются на экране, без необходимости горизонтальной прокрутки или дополнительного масштабирования;
• кликабельные элементы такого размера, чтобы по ним было легко попасть пальцем, не задев другие кнопки;
• сайт быстро загружается и не заставляет пользователя ждать (скорость можно проверить разными инструментами, например, Google PageSpeed).

Поведенческие показатели

К поведению относятся такие метрики, как показатель отказов, время, проведенное на сайте, глубина просмотра (количество страниц, просмотренных за одно посещение).

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

У «Спартака» высокий процент отказов на сайте имел обратную корреляцию с возрастом целевой аудитории: чем моложе посетитель, тем выше была вероятность его быстрого ухода при встрече с неудобным интерфейсом или нецелевым содержанием. Решить эту проблему можно повышением релевантности контента запросам выделенной группы. Как узнать, что ей нужно?

• Посмотреть статистику по выделенной аудитории: запросы, по которым она приходит, посещаемые страницы и их дочитываемость.
• Поговорить с болельщиками лично – провести интервью и узнать, в каких случаях они пользуется сайтом, за какой информацией приходят, что предпочитают изучать.
   

В частности, статистика сайта «Спартака» подтвердила высокий интерес к новостям – было много переходов, связанных с инфоповодами. Поэтому блок новостей вывели на главную, а сами посты получили группировку по инфоповодам, чтобы пользователь видел всю подборку. На сайте ХК «Торпедо» анализ выявил другую особенность. Выбор билетов был доступен только зарегистрированным пользователям. Это отпугивало людей, желавших просто проверить доступность мест. Перенос авторизации в конец воронки повысил конверсию.

Поговорите с пользователями

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

Для такой коммуникации есть разные форматы: UX-исследования, фокус-группы, интервью. Разработчики нового сайта «Спартака» провели 12 глубинных интервью с болельщиками красно-белых и других команд. Они рассказали, как взаимодействуют со спортивными сайтами.

Примерный список тем для обсуждения:

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

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

Список основных ожиданий болельщиков от сайта «Спартака» получился таким.

1. Узнать счет прошедшего матча.
2. Посмотреть расписание игр и спланировать посещение.
3. Купить билет или абонемент.
4. Следить за матчем – смотреть трансляцию, текстовое описание, онлайн-статистику.
5. Узнать новости о жизни команды.
6. Изучить историю клуба, посмотреть архивные фотографии и видеоролики.
    

На эти задачи и нужно ориентироваться, создавая или обновляя сайт.

Исследуйте рынок

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

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

Выбор сайтов для бенчмаркинга

• • • • сайты конкурентов;
      • сайты похожих организаций (в нашему случае, например, сайты клубов НХЛ);
      • популярные сайты вашей тематики, ориентированные на ту же аудиторию (хоккейные СМИ);
      • сайты, которые упоминались в проведенных интервью с пользователями.
         

Звучит легко, но на деле поиск решений таким образом – объемный и сложный этап работы. Для него есть несколько рекомендаций.

• Удачный кейс – это референс, но не шаблон, не копируйте слепо, будьте изобретательны.
• Интересы вашей аудитории имеют приоритет перед любой крутой фичей, вы делаете сайт для конкретной аудитории, а не пары эстетов.
• Если вы меняете представление какой-то функции, оставьте возможность для отката к первоначальному состоянию.
• Ключевые тренды в дизайне и UX приходят к нам с Запада, уделите внимание анализу зарубежных аналогов.
• Не увлекайтесь креативом и не экспериментируйте без нужды, в некоторых случаях стоит ограничиться привычными аудитории классическими решениями.
  
  

Сделайте ваш сайт лучше

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

Вот какие инсайты были воплощены в новом сайте «Спартака».

Доступность ключевой информации

Riverstart реализовали доступ к данным на сайте так, чтобы человек мог закрыть потребность в пару кликов: упорядочили меню, взяв за основу наиболее актуальные запросы, и подкрепили его каруселью горячих новостей на главном экране.

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

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

Добавление реально нужных возможностей

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

По стандартной для большинства веб-ресурсов схеме новости идут в хронологическом порядке: такая лента уже была на сайте клуба. Но теперь еще есть группировка по теме. Связанные общим событием или персонажем посты подтягиваются автоматически. Это не только удобно посетителям, но и положительно влияет на поведенческие метрики, так как увеличивается глубина просмотра.

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

Внимание статистике

Цифры – важнейшая часть спорта. Но их восприятие сильно зависит от подачи. Поэтому нужно, чтобы статистика считывалась легко и удобно.

На новом сайте «Спартака»:

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

Дизайн

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

Измерьте результат

Лучший показатель эффективности изменений – сравнение статистики до и после. Новый сайт «Спартака» начал работу в марте 2024 года. За это время, по сравнению с предыдущей версией:

• число визитов выросло на 238%, а посетителей – на 213%;
• число отказов уменьшилось на 153%, время, проведенное на сайте, увеличилось на 146%, а глубина просмотра – на 126%;
• болельщики стали чаще возвращаться на сайт – число пользователей, которые заходили больше одного раза, выросло на 130%;
• выросли показатели и мобильной версии: количество визитов – на 155%, посетителей – на 136%, время на сайте – на 243%, глубина просмотра – на 167%.
   

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

Краткий алгоритм

Итак, как сделать востребованный у аудитории сайт.

1. 1. 1. 1. Изучите статистику исходного сайта: посещаемость, устройства, поведение аудитории, запросы, по которым его находят.
             
         2. Поговорите с аудиторией, узнайте ее задачи, привычки и предпочтения.
             
         3. Проведите бенчмаркинг сайтов конкурентов и других ресурсов с похожей аудиторией.
             
         4. Сделайте выводы о том, какие разделы нужны сайту, какие функции, какой формат представления контента удобнее и востребованнее, какой дизайн может понравиться аудитории.
             
         5. Воплотите идеи на новом сайте.
            
            

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

Партнерский материал