Виртуальное Эль-Класико. Чей сайт лучше – «Барселоны» или «Реала»?
Привет! Меня зовут Данис, я веду блог в телеграме о футбольных путешествиях — Footуризм. Моей основной работой является UX/UI дизайн или, если на понятном языке, проектирование сайтов, приложений и интерфейсов.
В этом материале я решил совместить футбол и свою профессиональную деятельность и сравнить сайты «Реала» и «Барселоны». Получилась огромная статья, где я проанализировал 11, по моему мнению, самых важных разделов.
Она написана в формате текстовой трансляции футбольного матча — по итогам каждого пункта команда-победитель забивает гол. В случае ничейного результата — по голу добавляется обеим командам.
Даже если вам тяжело будет осилить весь материал, то пролистайте до конца, чтобы узнать результат. Думаю, он вас удивит.
Стартовая страница
Оба сайта стартуют с самой свежей новости, растянутой практически на весь экран. Ниже видны карточки еще трех. Единственное отличие — «Барса» указывает дату публикации и тег команды (главная, женская, итд.). Это помогает пользователям понять, насколько актуален контент.
Неожиданно, но дальше «Барса» использует формат сторис. В версии для компьютера это выглядит немного странно, но для молодого поколения, которое чаще пользуется смартфонами, это отличный и привычный способ восприятия информации.
Клубы упаковывают свой контент в похожие карточки, но «Реал» почему-то не везде использует заголовки разделов. Это мешает понять, к какой категории относятся эти статьи/видео. Их отсутствие может запутать и отпугнуть часть пользователей.
И у тех, и у тех есть секция с указанием количества завоеванных трофеев. «Реале» ее сделал интерактивной: можно подвигать рычажок внизу и увидеть, как число кубков менялось с годами.
В целом, главная страница «Барселоны» предлагает больше контента, который при этом структурирован лучше, чем у «Реала». В этом раунде засчитываем победу сине-гранатовым.
Навигация
Клубы по-разному подходят к оформлению навигационных панелей: «Барса» указывает там все разделы сайта, а «Реал» только те, которые могут принести клубу деньги (хотя по финансовой ситуации у клубов, должно быть наоборот). Вся остальная информация, включая расписание, скрыта под иконкой меню слева. Это вынуждает пользователей делать лишний клик, чтобы найти нужное.
Дополнительно «Барселона» использует плавающий навигационный блок с самыми важными кнопками — «Кулес» (клубное членство), «Магазин», «Билеты» и «Расписание». На удивление, главная навигационная панель не исчезает при прокрутке вниз, поэтому вы можете видеть обе одновременно. Можно, конечно, сказать, что такое дублирование гаранитирует, что пользователь не потеряет нужную кнопку, но при этому пространство экрана могло бы быть использовано более эффективно. Например, верхняя панель могла бы исчезать при скроллинге вниз, чтобы на экране помещалось больше контента.
Функционально обе панели идентичны, так что здесь нет победителя.
Расписание
Начнем с «Реала»: на странице мы видим карточки матчей, которые почему-то не кликабельны. Нажать можно только на очень маленькую кнопку «More» внизу, которая позволяет увидеть информацию о билетах и перейти к их покупке. Это серьезное упущение, которое может отсеять часть потенциальных покупателей.
По какой-то непонятной причине клуб также показывает тренировки в своем календаре. Посетить их нельзя, а если вы нажмете на «More», то увидите окно с одной кнопкой на испанском, которая открывает сайт фаншопа «Реала». В общем, ничего не понятно.
Окно фильтров тоже вызвало вопросы, потому что мне потребовалось несколько попыток, чтобы понять, что я могу прокрутить его вниз. Изначально намеков на это ровно 0.
В зоне матча не так много информации, только лента контента клуба, не обязательно связанного с конкретной игрой. Под каждым постом можно оставить одну из 4 реакций.
Если кликнуть на уже сыгранный матч, то вам будет предложено посмотреть отчет, либо перейти в зону матча. К сожалению, нажав на первое, меня выкинуло на главную страницу, а в информации об игре обнаружилась все та же новостная лента с послематчевым контентом и текстовой трансляцией под ним.
Расписание у «Барсы» выглядит похоже, но более удобно структурировано. Не нужно делать лишний клик, чтобы перейти к покупке билетов (даже для группы). Кроме того, можно добавить все матчи одной кнопкой себе в электронный календарь и быстро отфильтровать матчи по турнирам и домашним/гостевым.
В зоне матча отобраны материалы, подготовленные специально для этой игры, а в панели справа можно принять участие в фановых активностях, предварительно залогинившись на сайте. Там же можно ознакомиться с историей противостояния между клубами и посмотреть детальную статистику последних 5 игр.
Для завершенных матчей клуб предлагает отчет, оценки игроков и статистику матча.
Как функционально, так и с точки зрения вовлечения пользователя сайт «Барселоны» выигрывает у сайта «Реала». Чистая победа в этом раунде.
Новости
У «Барселоны» эта страница называется «Latest» («последнее»), что может быть немного сбивать (со мной это и произошло, упорно искал слово News). Сами новости сгруппированы по дням публикации и могут быть отфильтрованы по турнирам и категориям, что упрощает поиск нужного.
Помимо текста и фотографий в статье добавлены кнопки для копирования ссылки и быстрой отправки в соцсетях и ссылка для покупки билетов на упоминаемую игру. Ниже подобраны другие материалы, связанные с этой статьей.
Почти везде на сайте можно встретить кнопку Força Barça, на которую болельщики могут кликнуть целых 10 раз и выразить так поддержку клубу. Классная механика, которая добавляет «живости» сайту.
«Реал» снова использует более минималистичный подход: страница новостей выглядит почти так же, как и главная. По-прежнему нет ни тегов команд, ни даже даты публикации.
Сами статьи не содержат ничего, кроме текста и фото. Нет ни кнопок для быстрого шеринга, ни рекомендованного контента. Минимализм, конечно, соответствует классическому стилю клуба, но в данном случае он негативно сказывается на функциональности.
Очередной раунд, который забирает «Барса».
Блок о реконструкции стадиона
Оба клуба сейчас находятся в процессе реконструкции своих стадионов, так что у нас есть отличная возможность сравнить, как они отображают это на сайте.
«Реал» предлагает посмотреть на ход работ с 4 ракурсов. После нажатию на кнопку открывается 3-минутное видео. Это не live-трансляция и нет абсолютно никакой информации, когда они были отсняты и насколько из-за этого актуально. Я открывал эти видео на протяжении 3 дней, но каждый раз они были теми же. Не очень понятно, зачем кому-то смотреть статичное видео, на котором буквально ничего не происходит. Более того, при переключении на следующее, предыдущее видео не ставится на паузу, и вы продолжаете слышать звук из него.
У «Барсы» можно посмотреть реконструкцию в прямой трансляции, но для этого нужно войти в свой аккаунт на сайте. Это хорошо для привлечения новых пользователей, но может раздражать, если вы просто хотите быстро посмотреть видео.
Сама трансляция снимается на несколько камер, которые автоматически сменяются и меняют угол обзора. Если прокрутить страницу вниз, видео уменьшится до компактного размера, который не мешает просмотру другого контента.
Несмотря на принуждение ко входу в систему для просмотра, этот раунд остается за «Барселоной».
Главная команда
Пора взглянуть на страницы составов команд. Обе имеют схожий дизайн, но если у «Барселоны» все игроки расположены одним вертикальным списком, то в «Реале» они разбиты по горизонтальным рядам позиций. Чтобы увидеть игроков, которые не помещаются на экране, нужно нажать на едва заметную стрелку справа. Ни скроллингом, ни перетягиванием пролистнуть карточки не получится.
Карточки игроков у «Барсы» более информативные — при наведении курсора на них показывается статистика игрока. У «Реала» она лишь слегка меняет размер.
Но вот к страничкам игроков клубы подошли совершенно по-разному: «Реал» делает упор на подробную статистику игрока, а «Барса» на контенте, связанным с футболистом.
Не думаю, что здесь есть явный фаворит, потому что функционально обе страницы очень похожи. Это ничья.
Клубное медиа
Поскольку мы анализируем два из крупнейших футбольных клуба в мире, они оба имеют огромные клубные СМИ: Barca One и Real Madrid TV. Каждый с огромным количеством уникального и эксклюзивного контента.
Поскольку это самостоятельные платформы, заслуживающие отдельного разбора, я не буду вдаваться в подробности. Просто респектнем клубам за их наличие.
Клубное членство
Оба клуба предлагают своим болельщикам стать премиальным членом комьюнити. У «Реала» для этого отведен огромный блок на главном экране, но у него есть одна проблемка: он не работает.
После нажатия на него вы попадаете на страницу с такой же, но некликабельной картинкой. Пройти дальше можно только нажав на кнопку в тексте над ней. К сожалению, единственное, что вы увидите после этого, — страницу 404.
У «Барселоны» тоже есть подобный блок на главной странице, но он состоит только из 5 карточек со ссылками.
Перейдем непосредственно к страницам. В этот раз значительно лучше обстоят дела у «Реала»: у них есть целый лендинг, рекламирующий все бонусы подписки. «Барселона» имеет лишь небольшую страницу, на которой представлены бесплатный и премиальный планы членства Culers.
«Реала» использует много анимации, поэтому смотреть сайт довольно залипательно. Это увеличивает шанс, что пользователи увидят важные для них преимущества, что, в свою очередь, может увеличить продажи.
Несмотря на косяк со ссылкой на главной, это уверенная победа «Реала».
Покупка билетов
Хорошо продуманный процесс покупки билетов — одна из главных задач сайта футбольного клуба. Страница, приносящая самый мощный доход должна быть идеальной. Идут к этому испанские гранды по-разному.
У «Барселоны» в центре указана следующая игра с обратным отсчетом до нее. Ниже — полный список предстоящих матчей. Используется сразу 2 панели с вкладками: верхняя — для переключения между командами, нижняя — для выбора категории билетов.
«Реал» по умолчанию показывает только игры основной команды в текущем месяце. Чтобы увидеть билеты на матчи женской команды и академии, нужно выбрать их в фильтрах. Поскольку используется то же окно, что и в расписании, это не так просто сделать. Это может негативно влиять на продажи билетов на их игры. Карточки матчей выглядят слишком перегруженными информацией.
Следующий шаг также отличается для обоих клубов. «Реал» вас сразу закидывает на страницу очереди на испанском языке. Возможности поменять его нет. «Барселона» же предлагает выбрать между обычными и VIP билетами.
Далее следует этап выбора места. Карта стадиона — стандартная практика для всех клубов, поэтому неудивительно, что она есть и у «Реала», и у «Барсы».
Страницы очень похожи, с той лишь разницей, что на стадионе «Барселоны» можно посмотреть 360-градусный вид с каждого сектора. Учитывая тот факт, что сейчас они играют на временном стадионе, это очень впечатляет. На удивление, «Реал» такой возможности не предоставляет.
Единственная имеющаяся визуализация у «Реала», — это картинка расположения сектора на трибуне. Она не несет никакой ценности, поскольку выглядит точно так же, как на карте стадиона в предыдущем шаге.
Весь процесс покупки билетов у «Барселоны» выглядит и ощущается гораздо лучше, чем у «Реала». Еще один гол «Барсы».
Онлайн-магазин
Главные страницы онлайн-магазинов клубов практически идентичны. На обеих можно быстро перейти к формам, тренировочной одежде и товарам, отфильтрованным по игрокам.
Страницы товаров тоже похожи. Главное отличие в том, что если вы решите сделать футболку со своей фамилией, то «Реал» покажет вам как она будет выглядеть, а вот «Барселона» нет. Также на форму каталонцев можно нанести почему-то только 8 символов. Из плюсов, у них есть специальный блок с шортами и гетрами, подходящими к выбранному комплекту. Удобно, если пользователь хочет купить разом весь комплект.
Случайно обнаружилась проблема у «Реала»: по умолчанию выбран самый маленький размер из доступных и если вы забудете его поменять, то проблема может обнаружиться слишком поздно. «Барса» же просто не позволяет добавить в корзину товар, не выбрав его размер. Это снижает риск ошибки и потенциальной отмены/возврата.
Корзины у клубов отличаются: у «Реал» она в виде боковой панели, а у «Барселоны» испольуется вся страница. На ней они предлагают несколько популярных недорогих товаров (аналог стенда с жвачками у кассы) и шкалу, показывающую, от какой суммы будет бесплатная доставка. В комбинации эти дополнения могут принести дополнительный доход (кто из нас не добрал бы товаров, лишь бы не платить за доставку?).
По совокупности факторов, несмотря на то, что «Барселона» не показывает имя на футболке, их магазин благодаря продвинутой системе рекомендаций может принести больше денег клубу. Очередной гол на счету «Барсы».
Мобильная версия
Главная задача мобильной версии — работать без косяков. С этим оба клуба справились успешно, все разделы их сайтов отлично адаптированы и работают как нужно. Засчитываем плотную ничейку.
Итог
Финальный результат не должен вводить вас в заблуждение: у обоих клубов отличные сайты, и превосходство «Барселоны» совсем не означает, что сайт «Реала» плох. Здесь, как и в профессиональном спорте, все решают мелкие детали.
При этом нужно признать, что сайт «Барсы» выполнен на очень высоком уровне с точки зрения удобства использования, функциональности и внешнего вида, и заслуженно победил в этом противостоянии.
Если вам понравился обзор и вы хотите поддержать автора, то вы можете подписаться на мой канал в телеграме, либо пожертвовать донат в комментариях.
С возвращением на Трибуну!
Сколько времени при переходе задерживаются на сайте.
Во-первых, очень креативный подход со сравнением бизнес-составляющей клубов через призму текстовой трансляции. Свежо, круто!
Во-вторых, понимать, что текст написан профессионалам затрагиваемой тематики делает прочтение материала лишь более интересным, а саму статью – более аутентичной.
В-третьих, прекрасно понимаю, что доить идею и клепать по шаблону аналогичные обзоры других клубов будет, прежде всего, скучно вам как автору. Однако очень уж хотелось бы увидеть такую же битву непримиримых соперников (например, «МЮ» и «Ман Сити», «Интера» и «Милана»). Когда приобретал фан-членство в «МЮ» несколько лет назад в целях посещения Олд Траффорд, пришлось скачать клубное приложение. С удивлением обнаружил, что там есть множество интересных фич. С удовольствием бы прочитал, а существует ли так же подобные подходы в мобильной версии «Ман Сити» (скачивать приложение не буду: клубные пристрастия не позволяют :)
Удачи вам и в дизайне, и в околофутбольной теме! Подписался и на блог, и на Telegram-канал.
Проверил сейчас, у обоих сайтов производительность – 59/100. По скорости загрузки оба в пределах допустимого, но не летают.