Спортивная инфографика и её имитация

В обзоре дизайна сайта sports.ru я мельком пожаловался на качество инфографики, публикуемой спортивными сайтами. Теперь подробнее.

Как сейчас

Чаще всего происходит подмена понятий и под видом инфографики спортивные сайты (самые популярные русскоязычные — sports.ru и championat.com) публикуют просто набор фактоидов с крупными цифрами или увешанные оформительскими приемами базовые конструкции вроде таблиц или столбчатых диаграмм.

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

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

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

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

Но когда картинка претендует на передачу достоверной информации, это выглядит жалко. Конечно, можно сказать, что это попсовые спортивные ресурсы, а не задротский загончик статистических фриков, и было бы губительно пытаться скормить посетителям под пивко что-нибудь сложнее, чем «Зацените, число 16 больше числа 10, а это значит, что Месси лох, а Роналду красава. Лайк, шер, репост!». Редактор, который считает свою аудиторию глупой, в итоге получит глупую аудиторию. И наоборот.


Инфографика должна ясно доносить факты. Хорошая инфографика дополнительно к этому позволяет и даже провоцирует находить закономерности, истории среди данных. Её интересно изучать, она как калейдоскоп — каждый раз в глаза бросается что-то новое. Поэтому чем больше фактов (или информации) умещается на единицу площади носителя, тем больше скрытых слоев, из которых дизайнер может вытянуть закономерности и показать читателю. Из трех чисел сделать хорошую инфографику затруднительно. Достаточно добавить немного информации и оформить её чуть умнее чем «Вот вам цифры, разбирайтесь дальше сами», чтобы уже заиграло:

Статистика с главной страницы whoscored.com. Стоило на диаграмму забитых мячей игроков наложить диаграмму голов их команд, как сразу над визуализацией хочется зависать

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

Как я её сделал на сайте valencianistas.ru:

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

Статистика пребывания игроков в клубе

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

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

Факты, истории, ответы на вопросы и закономерности, которые можно выудить, изучая эту инфографику:

— Состав команды на каждый сезон

— Результат команды (место в чемпионате) за каждый сезон

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

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

— Насколько обновлялся состав с приходом каждого нового тренера. В каком сезоне сколько было летних и зимних переходов.

Скромность Эмери относительно Нуну

— Как сильно каждый из тренеров доверял игрокам из молодежной команды

В испанском футболе игрокам основной команды разрешено брать номера с 1 по 25, все номера выше 25 могут использовать только игроки молодежной команды при игре за основу

— Кто сколько лет провел в команде перед данным сезоном, кто самый древний старожил, сколько лет вместе играет костяк команды.

Сезон 2004–2005 Раньери начал с опытной командой-чемпионом, много лет играющей вместе. Марселино же, принимая команду в начале сезона 2017–2018, столкнулся с последствиями огромной текучку последних лет: лишь двое членов команды отыграли в клубе больше трех сезонов. Самый опытный — Парехо, игравший к этому времени в клубе уже шесть лет.

— Кто сколько лет оставался в команде после каждого сезона, кто дольше всех продержался

Последний чемпион сезона 2003/2004 Давид Альбельда ушел из клуба в 2013 году.
Насколько он был опытней всех остальных в свой последний сезон!

— Играли ли вместе данные игроки? Играл ли этот игрок под руководством этого тренера?

— Какие игроки играли под каждым номером, как часто менялся его обладатель

До прихода Морьентеса 9-й номер считался невезучим, так как его обладатели задерживались в команде ненадолго

— Путь каждого игрока в команде: сколько сезонов подряд продержался, сколько раз уходил и приходил в клуб

Воспитанник клуба Давид Наварро начал привлекаться к играм основной команды в сезоне 2001–2002, через два года стал полноправным игроком первой команды. Спустя четыре сезона он покинул клуб (последствия дисквалификации на 7 месяцев за драку после игры) и два года завоевывал авторитет в других командах, чтобы вернуться в 2009 году уже на роль игрока основы (просто так 4-й номер не дают).

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

— Показывать возраст игрока в каждом сезоне и средний возраст команды

— Добавить стоимость перехода каждого игрока

— Считать потраченные и заработанные на трансферах клубом деньги в каждое межсезонье

— Демонстрировать базовые показатели игрока в каждом сезоне: количество игр за сезон, средняя оценка.

Поматчевая статистика игроков за сезон

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

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

Слева: игрок забил два мяча и был заменен в середине второго тайма. Справа: игрок вышел на замену ближе к концу игры и отличился голевым пасом и забитым мячом

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

Опять же, инфографика рассказывает истории, если прислушаться к ней.

Как чередовались вратари, чтобы запасной не чувствовал себя совсем ненужным. Как феерили Гуедеш, Дзадза и Родриго в начале сезона, и как первые два после этого мощного старта сникли, а третьему на помощь пришел Мина, зацепившись за свой шанс регулярными мячами, забитыми после выхода на замену. И как Максимович начал активно подключаться в ротацию в середине сезона, когда календарь стал интенсивным из-за матчей Кубка Испании, и выпал из состава снова, когда команда из кубка вылетела. И еще много чего для любителей задротских закономерностей.


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