Image for post
Image for post

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

sergey nikolaev
Jul 12, 2018 · 7 min read

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

Как сейчас

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

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

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

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

Image for post
Image for post
Image for post
Image for post

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Image for post
Image for post
Насколько он был опытней всех остальных в свой последний сезон!

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store