GitHub'ın Octoverse'ını Tasarlamak: Bir Veri Görselleştirme Vaka Çalışması

Geçen yıl, 2021 Octoverse Durumu raporunu tasarlamak için GitHub ile işbirliği yaptım. GitHub'ın Octoverse'ı, yılın yazılım geliştirme endüstrisi içgörülerini sunmak için milyonlarca geliştiriciden ve depodan gelen gerçek dünya verilerini analiz eder. 2021 raporu üç ana eğilimi kapsıyor: kod geliştirerek, belgeler oluşturarak ve toplulukları daha akıllı ve daha sürdürülebilir bir şekilde destekleyerek performansı ve refahı artırma.

Projenin yaratıcı bağlantı noktası olarak, GitHub ekibine veri ağırlıklı raporun anlaşılmasını kolaylaştırmada yardımcı olmak benim işimdi. Veri görselleştirmeyi kullanarak okuyucuların GitHub veri bilimcilerinin topladığı bilgileri çözmesine yardımcı olmak için 20'den fazla çizelge, harita ve grafik tasarladım.

Bu veri görselleştirme vaka çalışmasında tasarım sürecimi açıklıyor, GitHub'ın Octoverse'ı için oluşturulmasına yardım ettiğim web sitesini sergiliyorum ve projeden önemli öğrendiklerimi paylaşıyorum.

Veri Görselleştirme ile İlgi Çekici Dijital Deneyimler Tasarlama

State of the Octoverse 2021, 73 milyondan fazla GitHub geliştiricisinden ve 61 milyondan fazla yeni depodan toplanan verilerle yayılan bir rapordur. Ayrıca ilk kez yanıtlayanların demografisi üzerine bir anket dahil edildi. Verileri anlamlandırmak kapsamlı bir tasarım çabası gerektiriyordu.

Geliştirici Jose Luis Garrido ve proje yöneticisi Miquel Lopez'den oluşan mütevazı ekibimiz, okuyucular için bu muazzam miktarda bilgiyi sentezlemekle görevlendirildi. Gecikmeli bir başlangıç ​​ve diğer eş zamanlı projelere rağmen teslim ettik.

Tasarım Sürecini Başlatmak

Veri görselleştirme tasarım sürecimin ilk aşaması keşif oldu. GitHub'ın veri bilimcileri, Excel dosyaları, PowerPoint sunumları ve diğer veri kümeleri aracılığıyla geliştiricilerden ve havuzlardan bilgi topladı ve analiz etti.

Bu bilgilerle, GitHub'ın ilk veri görselleştirme çizimleri ve 60 sayfalık bir bağlam belgesiyle birlikte, her bir veri kümesini en iyi nasıl gösterebileceğimi düşünmeye başladım. Ardından, maksimum kullanıcı katılımı ve sezgisel bir kullanıcı deneyimi için her bir grafiği, haritayı ve diyagramı tasarlamaya başladım.

Grafiğinizi Seçmek

Etkili bir veri görselleştirme seçmenin üç önemli noktası vardır:

1. Grafiğin Amacını Belirleyin

Veriler çeşitli şekillerde gösterilebilir: çubuk grafikler, çizgi grafikler, ısı haritaları, şelale grafikleri ve daha fazlası. Her çizelge bir amaca hizmet eder ve açık ve doğru bir mesajın iletilmesini sağlamak için doğru olanı kullanmak önemlidir.

Örneğin, iki miktar arasındaki farkı göstermek istiyorsanız bir çubuk grafik kullanın. Zaman içinde bir eğilim göstermek istiyorsanız, bir çizgi grafiği kullanın.

2. Son Kullanıcıyı Düşünün

Ayrıca, kullanıcılarınızın verileri okuma ve analiz etme yeteneğinin de farkında olmanız gerekir. Çoğumuz pasta, çubuk ve çizgi grafiklere aşinayız. Onları her yerde görüyoruz ve onları nasıl okuyacağımızı biliyoruz.

Öte yandan, pek çok araştırma yayınında birden çok veri değişkenini tek bir grafikte özetlemek için kullanılan kutu çizimlerini nasıl okuyacağını daha az kişi biliyor.

Kullanıcılara tanıdık olmayan görselleştirmeler sunarsanız, verileri yorumlamakta zorlanırlar.

3. Net Tasarım

Veri görselleştirme net ve özlü mü yoksa çok fazla gürültü var mı? Çubuk grafikler, verileri görüntülemek için harika bir yol olabilir, ancak tek tek etiketlere sahip 100 çubuk varsa değil. Benzer şekilde, akış grafikleri güzel ve işlevseldir, ancak yalnızca net bir veri modeli olduğunda. Bazen daha az.

Mükemmel Veri Görselleştirmeleri Tasarlama

2021 State of the Octoverse raporu boyunca, ilgili veri içgörülerine göre özenle oluşturulmuş çeşitli veri görselleştirmeleri bulacaksınız.

Kelebek Haritası

Genel Bakış sayfasında, katılımcıların pandemi öncesi ve sonrasında nerede çalıştığını gösteren iki veri seti için bir infografik tasarlamam gerekiyordu. GitHub bana her biri dört veri noktasını haritalayan iki pasta grafik sağladı: eş konumlu, karma, tamamen uzak ve uygulanamaz. Ancak pasta grafikler, iki veri kümesini karşılaştırırken özellikle etkili değildir.

Bunun yerine bir kelebek grafiği seçtim. Kelebek çizelgeleri, verileri kelebek kanatlarına benzeyen yan yana iki yatay çubuk olarak çizer. Bu grafikler, aynı parametreleri paylaşan iki grup arasındaki farkı açıkça gösterir ve iki veri setini karşılaştırmayı çok daha kolay hale getirir.

Çarpma Tablosu

Bir başka etkili veri görselleştirmesi ise çarpma grafiğidir. Bu tabloyu, son sekiz yılda geliştiriciler tarafından kullanılan en popüler bilgisayar programlama dilleri hakkındaki bilgileri sunmak için kullandık. Çarpma çizelgeleri, belirli bir süre boyunca sıralamadaki değişiklikleri görüntülemek için harikadır ve Octoverse raporunda temel bir unsur haline gelmiştir.

Ağaç Haritası

Katılımcıların koda katkıda bulunduğu farklı sektörleri göstermem gerekiyordu. Son karar, ağaç haritalarına karşı pasta grafiklere geldi.

Pasta grafikler, üç veya dört sektörünüz olduğunda ve miktarlar açıkça farklı olduğunda kullanışlıdır. Bununla birlikte, beynimiz açıları iyi işlemez, bu nedenle, benzer boyutta çok sayıda takoz içeren bir pasta grafiği olduğunda, insanlar hangisinin daha büyük olduğunu deşifre etmekte zorlanırlar.

Buna karşılık, ağaç haritaları, kullanıcıların segmentleri birbirleriyle ve bütünle kolayca karşılaştırmasına olanak tanır. En büyük dikdörtgenler sol üste yerleştirilir, ardından giderek daha küçük dikdörtgenler gelir. Düz çizgileri karşılaştırmak, kamaları veya açıları karşılaştırmaktan daha kolaydır.

Kartogram

Son olarak, 2021'de GitHub kullanan kuruluşların bölgelere veya ülkelere göre coğrafi dağılımını göstermem gerekiyordu. Bunun için bir nüfus kartogramı kullandım. Kartogramlar, belirli bir ekonomik, sosyal, politik veya çevresel özelliği barındırmak için geometrinin çarpıtıldığı haritalardır.

Bu veri görselleştirmesinde, karelerin boyutu popülasyon boyutunu belirtir. Ayrıca, meydanın renginin doygunluğu, o bölgedeki kaç kuruluşun GitHub kullandığını gösterir.

GitHub'ın Octoverse 2021 için Duyarlı Web Sitesi Tasarımı

Veri görselleştirmeleri tasarlamanın yanı sıra GitHub ekibinin Octoverse 2021 için bir web sitesi oluşturmasına da yardımcı oldum. Bu site, kullanıcıların raporun veri içgörülerini okuması, keşfetmesi ve bunlarla etkileşim kurması için bir merkezdi.

Kullanıcı katılımını teşvik etmek için, sitenin oluşturulmasını farklı boyuttaki görünümlere uyarlayacak tamamen duyarlı bir web sitesi seçtik. GitHub, Octoverse ziyaretlerinin çoğunu daha büyük cihazların yönlendirdiğini gördükten sonra masaüstü sürümüne özellikle dikkat etmemizi istedi.

Duyarlı siteyi tasarlarken şu en iyi uygulamaları takip ettim:

• Masaüstü ve mobil uyumlu yazı tipleriyle metin oluşturma. Bu, en uygun yazı tipi boyutlarını, yazı tiplerini ve satır uzunluğunu ve yüksekliğini seçmeyi ve metnin farklı kesme noktalarında nasıl göründüğünü iyileştirmeyi içeriyordu.
• Kaydırmayı teşvik etmek için görsel öğeleri her sayfaya yerleştirmek.
• Düzenini görünüm alanı boyutuna uyarlayan kullanıcı dostu bir üst gezinme çubuğu tasarlama.

Web sitesini en başından beri farklı cihazları düşünerek tasarladığım için çoğu grafik tüm ekran boyutlarında iyi işlendi. "Sürdürülebilir topluluklar" bölümünün sonundaki dairesel dendrogram gibi, optimum görüntülenebilirlik için yalnızca küçük ayarlamalar yapmam gerekiyordu.

Bilgi Mimarisini Düzenlemek

Web sitesinin bilgi mimarisi için farklı seçenekleri araştırdım. Kullanıcıları çok fazla bilgiyle boğmak istemedim, ancak sitenin dağınık olmasını veya gezinmesinin zor olmasını da istemedim.

Bunu akılda tutarak, tüm içeriği aynı sayfada olan uzun kaydırmalı bir web sitesi tasarlayarak başladım. Bu görsel olarak bunaltıcı hale geldiğinde, her grafiği ayrı bir sayfaya yerleştirmeyi denedim. Gezinmeye yardımcı olması için, her sayfaya bir kitapta bulabileceğinize benzer bir içindekiler tablosu içeren bir yan gezinme menüsü ekledim. Octoverse web sitesindeki son tasarım, üç ana trend için ayrı web sayfalarından ve ayrıca en önemli verilerin özeti olarak hizmet veren bir ana sayfadan oluşur.

Bilgi mimarisine karar verdikten sonra sitenin içerik yapısını, gezinme akışını, resimlerini ve grafiklerini tasarlamaya geçtim. İçeriği haritalamak ve farklı sayfalar arasındaki yolları göstermek için tel kafesler oluşturdum.

Web Sitesini Etkileşimli Hale Getirmek

Kaydırma İlerleme Göstergesi

GitHub'ın ilgi çekici, dinamik bir web sitesi talebini karşılamak için etkileşimli öğeler ekledik. Örneğin, üst gezinme çubuğunun altında, ziyaretçilerin sitede nerede olduklarını takip edebilmeleri için bir kaydırma ilerleme göstergesi tasarladım. Okuyucular bir sayfayı aşağı kaydırdıkça, gösterge çubuğu kademeli olarak ölçeklenir ve her sayfanın çubuk için farklı bir dolgu rengi vardır: gri, mor, mavi veya yeşil.

Hareketli Başlıklar, Görüntüler ve Veri Görselleştirme

Web sitesinin düz görünmesini engellemek için bölüm başlıklarını canlandırmaya karar verdik. Çizimleri ben oluşturdum ve ekibimizin geliştiricisi onları canlandırdı. Ayrıca ana sayfa ve her alt bölüm için kahraman görselini ve her web sayfasının alt kısmında bunlara karşılık gelen bölüm kartlarını canlandırdık.

Ayrıca bazı statik veri görselleştirme çizelgelerini etkileşimli hale getirdik. Örneğin, çarpma grafiğinde bir çizgi üzerinde ilerlediğinizde, ilgili veri noktasını vurgulamak için çizgi kalınlaşır. Site ziyaretçilerinin verilerle etkileşime girmesine ve dilleri hızla karşılaştırmasına olanak tanıyan basit ama etkili bir animasyondur.

GitHub için Başarılı Veri Görselleştirmeleri ve Dijital Tasarımlar Oluşturma: Temel Öğrenmeler

Veriler, yalnızca onu anlamlandırabiliyorsanız yararlıdır ve kullanıcıların kolayca deşifre edebileceği veri ağırlıklı içerik tasarlama süreci zorludur. Yine de GitHub ile olan bu işbirliği, veri görselleştirme tasarımı konusundaki bilgimi genişletti. Bu veri görselleştirme vaka çalışmasından elde edilen en önemli çıkarımlar şunlardır:

• Markayı tanıyın: Bir markanın temel stil yönergelerine (tür, renk ve görsel kullanımı gibi) aşina olmak tasarım sürecini hızlandırır çünkü tasarımcıları yaratıcı sürece geçme konusunda özgür kılar. İşbirliğinden önce GitHub'ın markası hakkında çok şey bildiğim için şanslıydım ve bu bilgiyi tasarımlarımı şekillendirmek için kullanabildim.
• Doğru veri görselleştirme türlerini seçin: Bir veri noktasını temsil edecek doğru görselleştirmeyi seçmek çok önemlidir. Yanlış bir temsil, kafa karışıklığına neden olabilir veya yanlış mesajı iletebilir.
• Rengi akıllıca kullanın: Doğru renk kombinasyonu okuyucunun gözünü yönlendirecek ve belirli bir veri noktasına dikkat çekecektir.
• Meraklı kalın: Zorlayıcı bir veri hikayesi anlatmaya çalıştığınızda, karmaşık tasarım sorunlarıyla karşılaşmanız kaçınılmazdır, bu nedenle alışılmadık çözümlere ve sürekli öğrenmeye açık olmak önemlidir.