Проектирование Octoverse на GitHub: пример визуализации данных

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

В качестве творческого связующего звена проекта я должен был помочь команде GitHub сделать отчет с большим объемом данных простым для понимания. Используя визуализацию данных, я разработал более 20 диаграмм, карт и графиков, чтобы помочь читателям разобраться в информации, которую собрали специалисты по данным GitHub.

В этом тематическом исследовании визуализации данных я объясняю свой процесс проектирования, демонстрирую веб-сайт, который я помог создать для GitHub Octoverse, и делюсь ключевыми выводами из проекта.

Создание увлекательного цифрового опыта с визуализацией данных

State of the Octoverse 2021 — это объемный отчет, в котором собраны данные от более чем 73 миллионов разработчиков GitHub и более чем 61 миллиона новых репозиториев. Кроме того, впервые был включен опрос по демографии респондентов. Чтобы осмыслить данные, потребовались значительные усилия по проектированию.

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

Начало процесса проектирования

Первым этапом моего процесса проектирования визуализации данных было открытие. Исследователи данных GitHub собирали и анализировали информацию от разработчиков и репозиториев с помощью файлов Excel, презентаций PowerPoint и других наборов данных.

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

Выбор диаграммы

Есть три ключевых момента для выбора эффективной визуализации данных:

1. Определите цель диаграммы

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

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

2. Учитывайте конечного пользователя

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

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

Если вы представляете пользователям незнакомые визуализации, им будет трудно интерпретировать данные.

3. Ясный дизайн

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

Проектирование идеальных визуализаций данных

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

Диаграмма бабочки

На странице «Обзор» мне нужно было разработать инфографику для двух наборов данных, показывающую, где работали респонденты до пандемии и после нее. GitHub предоставил мне две круговые диаграммы, каждая из которых отображала четыре точки данных: совмещенные, гибридные, полностью удаленные и неприменимые. Однако круговые диаграммы не особенно эффективны при сравнении двух наборов данных.

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

Диаграмма ударов

Еще одна эффективная визуализация данных — диаграмма рельефа. Мы использовали эту диаграмму, чтобы представить информацию о самых популярных языках программирования, используемых разработчиками за последние восемь лет. Диаграммы рельефа отлично подходят для отображения изменений в рейтинге за определенный период времени, и они стали одним из основных элементов отчета Octoverse.

Древовидная карта

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

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

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

Картограмма

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

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

Адаптивный дизайн веб-сайта для GitHub Octoverse 2021

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

Чтобы стимулировать участие пользователей, мы выбрали полностью адаптивный веб-сайт, который адаптировал бы рендеринг сайта к окнам просмотра разного размера. GitHub попросил нас уделить особое внимание настольной версии после того, как обнаружил, что большинство посещений Octoverse было связано с более крупными устройствами.

При разработке адаптивного сайта я следовал следующим рекомендациям:

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

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

Организация информационной архитектуры

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

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

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

Делаем сайт интерактивным

Индикатор прогресса прокрутки

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

Анимированные заголовки, изображения и визуализация данных

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

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

Создание успешных визуализаций данных и цифровых проектов для GitHub: ключевые уроки

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

• Знайте бренд: знакомство с основными принципами стиля бренда, такими как использование шрифта, цвета и изображений, ускоряет процесс проектирования, поскольку освобождает дизайнеров для перехода к творческому процессу. Мне повезло, что я много знал о бренде GitHub до сотрудничества и смог использовать эти знания для информирования своих проектов.
• Выберите правильные типы визуализации данных: важно выбрать правильную визуализацию для представления точки данных. Неправильное представление может вызвать путаницу или передать неверное сообщение.
• Используйте цвет с умом: правильная цветовая комбинация будет направлять взгляд читателя и привлекать внимание к конкретной точке данных.
• Оставайтесь любопытными: когда вы пытаетесь рассказать убедительную историю данных, вы обязательно столкнетесь со сложными проблемами дизайна, поэтому важно быть открытым для нестандартных решений и непрерывного обучения.