Merancang Octoverse GitHub: Studi Kasus Visualisasi Data

Tahun lalu saya berkolaborasi dengan GitHub untuk merancang laporan State of the Octoverse 2021. Octoverse dari GitHub menganalisis data dunia nyata dari jutaan pengembang dan repositori untuk menyajikan wawasan industri pengembangan perangkat lunak tahun ini. Laporan 2021 mencakup tiga tren utama: meningkatkan kinerja dan kesejahteraan dengan mengembangkan kode, membuat dokumentasi, dan mendukung komunitas dengan cara yang lebih cerdas dan berkelanjutan.

Sebagai penghubung kreatif proyek, adalah tugas saya untuk membantu tim GitHub membuat laporan yang padat data mudah dipahami. Dengan menggunakan visualisasi data, saya merancang 20+ bagan, peta, dan grafik untuk membantu pembaca mengungkap informasi yang dikumpulkan oleh ilmuwan data GitHub.

Dalam studi kasus visualisasi data ini, saya menjelaskan proses desain saya, menampilkan situs web yang saya bantu buat untuk Octoverse GitHub, dan berbagi pembelajaran utama dari proyek tersebut.

Merancang Pengalaman Digital yang Menarik Dengan Visualisasi Data

State of the Octoverse 2021 adalah laporan yang luas, dengan data yang dikumpulkan dari lebih dari 73 juta pengembang GitHub dan lebih dari 61 juta repositori baru. Ini juga pertama kalinya survei tentang demografi responden dimasukkan. Memahami data membutuhkan upaya desain yang ekstensif.

Tim sederhana kami, termasuk pengembang Jose Luis Garrido dan manajer proyek Miquel Lopez, ditugaskan untuk mensintesis informasi yang sangat banyak ini untuk pembaca. Meskipun awal yang tertunda dan proyek simultan lainnya, kami berhasil.

Memulai Proses Desain

Tahap pertama dari proses desain visualisasi data saya adalah penemuan. Ilmuwan data GitHub mengumpulkan dan menganalisis informasi dari pengembang dan repositori melalui file Excel, presentasi PowerPoint, dan kumpulan data lainnya.

Dengan informasi ini, bersama dengan sketsa visualisasi data awal GitHub dan dokumen konteks 60 halaman, saya mulai memikirkan cara terbaik untuk mengilustrasikan setiap kumpulan data. Kemudian, saya mulai merancang setiap bagan, peta, dan diagram untuk keterlibatan pengguna maksimum dan pengalaman pengguna yang intuitif.

Memilih Bagan Anda

Ada tiga poin kunci untuk memilih visualisasi data yang efektif:

1. Identifikasi Tujuan Grafik

Data dapat direpresentasikan dalam berbagai cara–diagram batang, grafik garis, peta panas, bagan air terjun, dan banyak lagi. Setiap bagan memiliki tujuan, dan penting untuk menggunakan bagan yang tepat untuk memastikan bahwa pesan yang jelas dan akurat tersampaikan.

Misalnya, jika Anda ingin menyajikan perbedaan antara dua kuantitas, gunakan diagram batang. Jika Anda ingin menunjukkan tren dari waktu ke waktu, gunakan grafik garis.

2. Pertimbangkan Pengguna Akhir

Anda juga perlu menyadari kemampuan pengguna Anda untuk membaca dan menganalisis data. Sebagian besar dari kita akrab dengan diagram lingkaran, batang, dan garis. Kami melihatnya di mana-mana, dan kami tahu cara membacanya.

Di sisi lain, lebih sedikit orang yang tahu cara membaca plot kotak, yang digunakan dalam banyak publikasi penelitian untuk meringkas beberapa variabel data ke dalam satu bagan.

Jika Anda menyajikan visualisasi yang tidak dikenal kepada pengguna, mereka akan kesulitan menafsirkan data.

3. Desain Dengan Kejelasan

Apakah visualisasi data jelas dan ringkas, atau terlalu banyak noise? Bagan batang bisa menjadi cara yang bagus untuk menampilkan data, tetapi tidak jika ada 100 batang dengan label individual. Demikian pula, streamgraph indah dan fungsional, tetapi hanya jika ada pola data yang jelas. Terkadang lebih sedikit lebih banyak.

Merancang Visualisasi Data Sempurna

Sepanjang laporan State of the Octoverse tahun 2021, Anda akan menemukan berbagai visualisasi data yang telah disusun dengan cermat sesuai dengan wawasan data terkait.

Bagan Kupu-Kupu

Di halaman Ikhtisar, saya perlu mendesain infografis untuk dua kumpulan data—menunjukkan di mana responden bekerja sebelum dan sesudah pandemi. GitHub memberi saya dua diagram lingkaran yang masing-masing memetakan empat titik data: collocated, hybrid, sepenuhnya jarak jauh, dan tidak berlaku. Namun, diagram lingkaran tidak terlalu efektif saat membandingkan dua kumpulan data.

Sebagai gantinya, saya memilih diagram kupu-kupu. Grafik kupu-kupu memplot data sebagai dua batang horizontal berdampingan, menyerupai sayap kupu-kupu. Bagan ini dengan jelas menunjukkan perbedaan antara dua grup yang memiliki parameter yang sama, dan membuat perbandingan dua set data menjadi lebih mudah.

Bagan Benjolan

Visualisasi data efektif lainnya adalah bump chart. Kami menggunakan bagan ini untuk menyajikan informasi tentang bahasa pemrograman komputer paling populer yang digunakan oleh pengembang selama delapan tahun terakhir. Bump chart sangat bagus untuk menampilkan perubahan peringkat selama periode waktu tertentu, dan telah menjadi pokok dalam laporan Octoverse.

Peta Pohon

Saya perlu mengilustrasikan berbagai sektor yang menjadi tujuan responden memberikan kode. Keputusan akhir datang ke diagram lingkaran versus peta pohon.

Diagram lingkaran berguna ketika Anda memiliki tiga atau empat sektor dan ketika jumlahnya jelas berbeda. Namun, otak kita tidak memproses sudut dengan baik, jadi ketika ada diagram lingkaran dengan banyak irisan dengan ukuran yang sama, orang akan kesulitan mengartikan mana yang lebih besar.

Sebaliknya, peta pohon memungkinkan pengguna untuk dengan mudah membandingkan segmen satu sama lain, serta keseluruhan. Persegi panjang terbesar ditempatkan di kiri atas, diikuti oleh persegi panjang yang semakin kecil. Lebih mudah membandingkan garis lurus daripada membandingkan irisan atau sudut.

Kartogram

Terakhir, saya perlu menggambarkan distribusi geografis organisasi yang menggunakan GitHub pada tahun 2021 menurut wilayah atau negara. Untuk ini, saya menggunakan kartogram populasi. Kartogram adalah peta di mana geometri terdistorsi untuk mengakomodasi fitur ekonomi, sosial, politik, atau lingkungan tertentu.

Dalam visualisasi data ini, ukuran kotak menunjukkan ukuran populasi. Selain itu, saturasi warna kotak menunjukkan berapa banyak organisasi di area tersebut yang menggunakan GitHub.

Desain Situs Web Responsif Untuk Octoverse 2021 GitHub

Selain mendesain visualisasi data, saya juga membantu tim GitHub membuat situs web untuk Octoverse 2021. Situs ini menjadi pusat bagi pengguna untuk membaca, menjelajahi, dan berinteraksi dengan wawasan data laporan.

Untuk mendorong keterlibatan pengguna, kami memilih situs web yang sepenuhnya responsif yang akan mengadaptasi perenderan situs ke berbagai ukuran tampilan yang terlihat. GitHub meminta kami untuk memberikan perhatian khusus pada versi desktop setelah menemukan bahwa perangkat yang lebih besar mendorong sebagian besar kunjungan Octoverse.

Saat mendesain situs responsif, saya mengikuti praktik terbaik ini:

• Menulis teks dengan tipografi ramah desktop dan ramah seluler. Ini termasuk memilih ukuran font yang optimal, tipografi, dan panjang dan tinggi garis, dan menyempurnakan tampilan teks pada breakpoint yang berbeda.
• Meletakkan elemen visual pada setiap halaman untuk mendorong pengguliran.
• Merancang bilah navigasi atas yang mudah digunakan yang menyesuaikan tata letaknya dengan ukuran viewport.

Karena saya mendesain situs web dengan mempertimbangkan perangkat yang berbeda sejak awal, sebagian besar grafik ditampilkan dengan baik di semua ukuran layar. Saya hanya perlu melakukan sedikit penyesuaian untuk visibilitas yang optimal, seperti dendrogram melingkar di akhir bagian “Komunitas berkelanjutan”.

Mengatur Arsitektur Informasi

Saya menjelajahi berbagai opsi untuk arsitektur informasi situs web. Saya tidak ingin membanjiri pengguna dengan terlalu banyak informasi, tetapi saya juga tidak ingin situs tersebut tersebar atau sulit dinavigasi.

Dengan pemikiran ini, saya mulai dengan merancang situs web bergulir yang panjang, dengan semua konten di halaman yang sama. Ketika itu menjadi luar biasa secara visual, saya mencoba menempatkan setiap bagan pada halaman terpisah. Untuk membantu navigasi, saya menambahkan menu navigasi samping ke setiap halaman dengan daftar isi, mirip dengan yang mungkin Anda temukan di buku. Desain akhir di situs web Octoverse terdiri dari halaman web terpisah untuk tiga tren utama, ditambah beranda yang berfungsi sebagai ringkasan data terpenting.

Setelah memutuskan arsitektur informasi, saya beralih ke merancang struktur konten situs, alur navigasi, gambar, dan grafik. Saya membuat gambar rangka untuk memetakan konten dan menunjukkan jalur di antara halaman yang berbeda.

Membuat Situs Web Interaktif

Indikator Kemajuan Gulir

Untuk memenuhi permintaan GitHub untuk situs web yang menarik dan dinamis, kami menambahkan elemen interaktif. Misalnya, di bawah bilah navigasi atas, saya merancang indikator kemajuan gulir sehingga pengunjung dapat melacak di mana mereka berada di situs. Saat pembaca menggulir halaman ke bawah, bilah indikator menskala secara bertahap, dan setiap halaman memiliki warna isian yang berbeda untuk bilah: abu-abu, ungu, biru, atau hijau.

Header Animasi, Gambar, dan Visualisasi Data

Agar situs web tidak terlihat datar, kami memutuskan untuk menganimasikan header bagian. Saya membuat ilustrasi dan pengembang tim kami menganimasikannya. Kami juga menganimasikan gambar pahlawan untuk beranda dan setiap subbagian, dan kartu bab yang sesuai di bagian bawah setiap halaman web.

Kami juga membuat beberapa grafik visualisasi data statis menjadi interaktif. Misalnya, saat Anda menggulir ke atas garis di bagan benjolan, garis menebal untuk menekankan titik data yang sesuai. Ini adalah animasi sederhana namun efektif yang memungkinkan pengunjung situs berinteraksi dengan data dan membandingkan bahasa dengan cepat.

Membuat Visualisasi Data dan Desain Digital yang Berhasil untuk GitHub: Pembelajaran Utama

Data hanya berguna jika Anda dapat memahaminya, dan proses mendesain konten data-berat yang dapat diuraikan dengan mudah oleh pengguna merupakan tantangan. Namun demikian, kolaborasi dengan GitHub ini memperluas pengetahuan saya dalam desain visualisasi data. Berikut adalah takeaways paling penting dari studi kasus visualisasi data ini:

• Mengenal merek: Mengenal pedoman gaya inti merek—seperti penggunaan jenis, warna, dan gambarnya—mempercepat proses desain karena membebaskan desainer untuk beralih ke proses kreatif. Saya beruntung mengetahui banyak tentang merek GitHub sebelum kolaborasi, dan saya dapat menggunakan pengetahuan ini untuk menginformasikan desain saya.
• Pilih jenis visualisasi data yang tepat: Memilih visualisasi yang benar untuk mewakili titik data sangat penting. Representasi yang salah dapat menyebabkan kebingungan atau menyampaikan pesan yang salah.
• Gunakan warna dengan bijak: Kombinasi warna yang tepat akan memandu mata pembaca dan menarik perhatian ke titik data tertentu.
• Tetap penasaran: Saat Anda mencoba menceritakan kisah data yang menarik, Anda pasti akan menghadapi masalah desain yang kompleks, jadi penting untuk terbuka terhadap solusi yang tidak biasa dan pembelajaran berkelanjutan.