Спортивная инфографика и её имитация
В обзоре дизайна сайта sports.ru я мельком пожаловался на качество инфографики, публикуемой спортивными сайтами. Теперь подробнее.
Как сейчас
Чаще всего происходит подмена понятий и под видом инфографики спортивные сайты (самые популярные русскоязычные — sports.ru и championat.com) публикуют просто набор фактоидов с крупными цифрами или увешанные оформительскими приемами базовые конструкции вроде таблиц или столбчатых диаграмм.
Это всё похоже на культ цифр. Но цифры, разбросанные по макету, не складываются сами по себе в «общую картину» предмета, о котором на этих макетах говорится. Посмотрите на последнюю картинку и попробуйте ответить на вопросы вроде «Насколько сильно показатель игрока зависит от количества сыгранных матчей?», «Насколько сильна разница между лучшим вратарем и худшим?», «Можно ли разделить вратарей на какие-то группы по их навыкам, типа топовые и остальные?». Поиск ответов превращается в пытку. Из этого набора портретов с подписями не складывается понимание предмета.
Иногда происходит совсем страшное и публикуется псевдоинфографика. Она старательно повторяет внешние признаки настоящей инфографики, но смысл при бездумном подражании теряется, и скопированные признаки превращаются в карго-атрибуты «Смотрите, у нас есть выноски, значит это серьезная аналитическая работа».
Такие приемы популярны в интерфейсах приборов из научно-фантастических фильмов, когда надо из ничего изобразить сложность.
Но когда картинка претендует на передачу достоверной информации, это выглядит жалко. Конечно, можно сказать, что это попсовые спортивные ресурсы, а не задротский загончик статистических фриков, и было бы губительно пытаться скормить посетителям под пивко что-нибудь сложнее, чем «Зацените, число 16 больше числа 10, а это значит, что Месси лох, а Роналду красава. Лайк, шер, репост!». Редактор, который считает свою аудиторию глупой, в итоге получит глупую аудиторию. И наоборот.
Инфографика должна ясно доносить факты. Хорошая инфографика дополнительно к этому позволяет и даже провоцирует находить закономерности, истории среди данных. Её интересно изучать, она как калейдоскоп — каждый раз в глаза бросается что-то новое. Поэтому чем больше фактов (или информации) умещается на единицу площади носителя, тем больше скрытых слоев, из которых дизайнер может вытянуть закономерности и показать читателю. Из трех чисел сделать хорошую инфографику затруднительно. Достаточно добавить немного информации и оформить её чуть умнее чем «Вот вам цифры, разбирайтесь дальше сами», чтобы уже заиграло:
Тогда в заметке о sports.ru я привел пример (ну или похвастался), как можно малыми силами в разы увеличить информационную насыщенность стандартной диаграммы. Как сейчас выглядит визуализация результатов команд на sports.ru:
Как я её сделал на сайте valencianistas.ru:
Теперь я хочу представить еще две интерактивные визуализации, сделанные за последние полгода. Смотреть лучше на крупных мониторах, с телефона даже не пытайтесь открывать.
Статистика пребывания игроков в клубе
Первая работа — интерактивный таймлайн, на котором хронологически разложены игроки, игравшие за клуб. При перемещении курсора от сезона к сезону подсвечиваются все заявленные на этот период игроки, демонстрируя смену поколений в команде.
В основном режиме визуализации футболисты разложены по их игровым номерам. Но игроки иногда между сезонами меняют свои номера, и это мешает наглядности: на визуализации линия игрока вроде бы прервалась, а на деле лишь перепрыгнула на новую строку. Поэтому у визуализации есть второй режим, где номера на спине не учитываются и пути игроков не дробятся на куски, но из-за этого вся инфографика сильно расползлась по вертикали.
Факты, истории, ответы на вопросы и закономерности, которые можно выудить, изучая эту инфографику:
— Состав команды на каждый сезон
— Результат команды (место в чемпионате) за каждый сезон
— Как часто менялся главный тренер, сколько их было за каждый сезон, кто задерживался дольше всего, каких результатов добивался в каждом сезоне
— Насколько обновлялся состав с приходом каждого нового тренера. В каком сезоне сколько было летних и зимних переходов.
— Как сильно каждый из тренеров доверял игрокам из молодежной команды
— Кто сколько лет провел в команде перед данным сезоном, кто самый древний старожил, сколько лет вместе играет костяк команды.
— Кто сколько лет оставался в команде после каждого сезона, кто дольше всех продержался
— Играли ли вместе данные игроки? Играл ли этот игрок под руководством этого тренера?
— Какие игроки играли под каждым номером, как часто менялся его обладатель
— Путь каждого игрока в команде: сколько сезонов подряд продержался, сколько раз уходил и приходил в клуб
Этого, как мне кажется, уже достаточно, чтобы надолго зависнуть над визуализацией, находя всё новые и новые закономерности и истории. И это не предел, инфографику еще можно дополнить:
— Показывать возраст игрока в каждом сезоне и средний возраст команды
— Добавить стоимость перехода каждого игрока
— Считать потраченные и заработанные на трансферах клубом деньги в каждое межсезонье
— Демонстрировать базовые показатели игрока в каждом сезоне: количество игр за сезон, средняя оценка.
Поматчевая статистика игроков за сезон
Вторая поделка, которую я хочу с гордостью представить — подробная визуализация выступления игроков в каждом матче сезона.
По сути это таблица, где каждая ячейка показывает выступление конкретного игрока в конкретном матче.
Перемещаясь от игры к игре, можно в динамике оценить степень задействования каждого игрока по ходу сезона: его спады и взлеты, выходы в основе или на замену, голевые серии и ассисты, предупреждения и удаления, зависания на скамье запасных или вообще вне заявки. Если же скользить взором по вертикали, то раскрываются подробности матчей: номер тура, соперник, результат, состав на игру и та же статистика индивидуального выступления каждого игрока. В левой части визуализации все показатели просуммированы, чтобы можно было оценить общий уровень выступления за сезон игрока.
Опять же, инфографика рассказывает истории, если прислушаться к ней.
Как чередовались вратари, чтобы запасной не чувствовал себя совсем ненужным. Как феерили Гуедеш, Дзадза и Родриго в начале сезона, и как первые два после этого мощного старта сникли, а третьему на помощь пришел Мина, зацепившись за свой шанс регулярными мячами, забитыми после выхода на замену. И как Максимович начал активно подключаться в ротацию в середине сезона, когда календарь стал интенсивным из-за матчей Кубка Испании, и выпал из состава снова, когда команда из кубка вылетела. И еще много чего для любителей задротских закономерностей.
Людям не интересны числа сами по себе. Им интересны истории, которые спрятаны в этих числах. Надо только распознать их в слоях информации, найти такие срезы в этот многомерном измерении данных, которые бы раскрывали суть предмета наблюдения. Выудить проекции, которые бы складывались в цельный образ, и представить их удобном виде. Это первоочередная задача дизайнера при работе над инфографикой, и подбор шрифта для смачного фактоида не должен её затмевать.
