GitHubのオクトバースの設計：データ視覚化のケーススタディ

昨年、私はGitHubと協力して、2021年のState oftheOctoverseレポートを設計しました。 GitHubのOctoverseは、数百万の開発者とリポジトリからの実際のデータを分析して、その年のソフトウェア開発業界の洞察を提示します。 2021年のレポートは、コードの開発、ドキュメントの作成、よりスマートで持続可能な方法でのコミュニティのサポートによるパフォーマンスと福祉の向上という3つの主要なトレンドをカバーしています。

プロジェクトのクリエイティブなリエゾンとして、GitHubチームがデータ量の多いレポートを理解しやすくするのを支援することが私の仕事でした。 データの視覚化を使用して、GitHubデータサイエンティストが収集した情報を読者が解明できるように、20以上のチャート、マップ、グラフを設計しました。

このデータ視覚化のケーススタディでは、設計プロセスについて説明し、GitHubのOctoverse用に作成したWebサイトを紹介し、プロジェクトからの重要な学習内容を共有します。

データ視覚化による魅力的なデジタルエクスペリエンスの設計

State of the Octoverse 2021は広大なレポートであり、7,300万人を超えるGitHub開発者と6,100万を超える新しいリポジトリからデータが収集されています。 また、回答者の人口統計に関する調査が含まれるのはこれが初めてです。 データを理解するには、広範な設計作業が必要でした。

開発者のJoseLuisGarridoとプロジェクトマネージャーのMiquelLopezを含む私たちの控えめなチームは、読者のためにこの膨大な量の情報を統合する任務を負っていました。 開始の遅れやその他の同時プロジェクトにも関わらず、納品しました。

設計プロセスの開始

私のデータ視覚化設計プロセスの最初の段階は発見でした。 GitHubのデータサイエンティストは、Excelファイル、PowerPointプレゼンテーション、およびその他のデータセットを介して、開発者およびリポジトリから情報を収集および分析しました。

この情報と、GitHubの最初のデータ視覚化スケッチおよび60ページのコンテキストドキュメントを使用して、各データセットを説明するための最善の方法について考え始めました。 次に、ユーザーエンゲージメントを最大化し、直感的なユーザーエクスペリエンスを実現するために、各チャート、マップ、および図の設計に着手しました。

チャートの選択

効果的なデータの視覚化を選択するには、次の3つの重要なポイントがあります。

1.チャートの目的を特定する

データは、棒グラフ、線グラフ、ヒートマップ、ウォーターフォールチャートなど、さまざまな方法で表すことができます。 各チャートには目的があり、明確で正確なメッセージが確実に伝えられるように、適切なチャートを使用することが重要です。

たとえば、2つの数量の差を表示する場合は、棒グラフを使用します。 時間の経過に伴う傾向を表示する場合は、折れ線グラフを使用します。

2.エンドユーザーを検討する

また、データを読み取って分析するユーザーの能力にも注意する必要があります。 私たちのほとんどは、円グラフ、棒グラフ、折れ線グラフに精通しています。 私たちはどこでもそれらを見て、それらを読む方法を知っています。

一方、箱ひげ図の読み方を知っている人は少なくなります。箱ひげ図は、複数のデータ変数を1つのグラフにまとめるために多くの研究出版物で使用されています。

なじみのない視覚化をユーザーに提示すると、ユーザーはデータを解釈するのに苦労します。

3.明確なデザイン

データの視覚化は明確で簡潔ですか、それともノイズが多すぎますか？ 棒グラフはデータを表示するための優れた方法ですが、個々のラベルが付いた棒が100本ある場合はそうではありません。 同様に、ストリームグラフは美しく機能的ですが、明確なデータパターンがある場合に限ります。 時には少ないほうが多いです。

完璧なデータ視覚化の設計

2021年のStateofthe Octoverseレポート全体を通して、対応するデータの洞察に従って注意深く構成されたさまざまなデータの視覚化を見つけることができます。

バタフライチャート

[概要]ページで、2セットのデータのインフォグラフィックを設計する必要がありました。パンデミックの前と後の回答者の作業場所を示しています。 GitHubは、それぞれが4つのデータポイント（併置、ハイブリッド、完全にリモート、および該当なし）をマップした2つの円グラフを提供してくれました。 ただし、2つのデータセットを比較する場合、円グラフは特に効果的ではありません。

代わりに、私はバタフライチャートを選びました。 蝶のチャートは、蝶の羽に似た2本の水平バーとしてデータを並べてプロットします。 これらのグラフは、同じパラメーターを共有する2つのグループの違いを明確に示しており、2つのデータセットの比較をはるかに簡単にします。

バンプチャート

もう1つの効果的なデータの視覚化は、バンプチャートです。 このチャートを使用して、過去8年間に開発者が使用した最も人気のあるコンピュータープログラミング言語に関する情報を示しました。 バンプチャートは、一定期間のランクの変化を表示するのに最適であり、Octoverseレポートの定番となっています。

ツリーマップ

回答者がコードを提供するさまざまなセクターを説明する必要がありました。 最終的な決定は、円グラフとツリーマップのどちらになりました。

円グラフは、セクターが3つまたは4つあり、数量が明らかに異なる場合に役立ちます。 しかし、私たちの脳は角度をうまく処理できないため、同じサイズのくさびがたくさんある円グラフがあると、人々はどちらが大きいかを解読するのに苦労します。

対照的に、ツリーマップを使用すると、ユーザーはセグメントを相互に、または全体と簡単に比較できます。 最大の長方形が左上に配置され、その後に徐々に小さい長方形が配置されます。 ウェッジや角度を比較するよりも、直線を比較する方が簡単です。

カルトグラム

最後に、2021年にGitHubを使用している組織の地理的分布を地域または国ごとに説明する必要がありました。 このために、私は人口カルトグラムを使用しました。 カルトグラムは、特定の経済的、社会的、政治的、または環境的特徴に対応するためにジオメトリが歪められたマップです。

このデータの視覚化では、正方形のサイズは母集団のサイズを示しています。 さらに、正方形の色の彩度は、そのエリアでGitHubを使用している組織の数を示します。

GitHubのOctoverse2021のレスポンシブウェブサイトデザイン

データの視覚化の設計に加えて、GitHubチームがOctoverse 2021のWebサイトを作成するのを支援しました。このサイトは、ユーザーがレポートのデータインサイトを読んだり、探索したり、操作したりするためのハブでした。

ユーザーエンゲージメントを促進するために、サイトのレンダリングをさまざまなサイズのビューポートに適合させる、完全にレスポンシブなWebサイトを選択しました。 GitHubは、より大きなデバイスがOctoverseの訪問の大部分を占めていることを発見した後、デスクトップバージョンに特別な注意を払うように依頼しました。

レスポンシブサイトを設計するとき、私は次のベストプラクティスに従いました。

• デスクトップとモバイルに適した書体でテキストを作成します。 これには、最適なフォントサイズ、書体、行の長さと高さの選択、およびテキストがさまざまなブレークポイントでどのように表示されるかを調整することが含まれていました。
• スクロールを促進するために、各ページに視覚要素を配置します。
• ビューポートのサイズに合わせてレイアウトを調整する、使いやすいトップナビゲーションバーを設計します。

最初からさまざまなデバイスを念頭に置いてWebサイトを設計したため、ほとんどのグラフはすべての画面サイズで適切にレンダリングされました。 「持続可能なコミュニティ」セクションの最後にある円形の樹状図など、最適な視認性のために微調整を行うだけで済みました。

情報アーキテクチャの整理

Webサイトの情報アーキテクチャのさまざまなオプションを検討しました。 情報が多すぎてユーザーを圧倒したくはありませんでしたが、サイトが散らばったり、ナビゲートしづらくなったりしたくありませんでした。

これを念頭に置いて、私はすべてのコンテンツが同じページにある、長くスクロールするWebサイトを設計することから始めました。 それが視覚的に圧倒されるようになったとき、私は各チャートを別々のページに配置してみました。 ナビゲーションを支援するために、本にあるような目次付きのサイドナビゲーションメニューを各ページに追加しました。 Octoverse Webサイトの最終的なデザインは、3つの主要なトレンドの個別のWebページと、最も重要なデータの要約として機能するホームページで構成されています。

情報アーキテクチャを決定した後、サイトのコンテンツ構造、ナビゲーションフロー、画像、およびグラフィックの設計に移りました。 コンテンツをマップし、異なるページ間のパスを表示するためのワイヤーフレームを作成しました。

ウェブサイトをインタラクティブにする

スクロールの進行状況インジケーター

魅力的でダイナミックなウェブサイトに対するGitHubのリクエストを満たすために、インタラクティブな要素を追加しました。 たとえば、上部のナビゲーションバーの下に、訪問者がサイトのどこにいるかを追跡できるように、スクロールの進行状況インジケーターを設計しました。 読者がページを下にスクロールすると、インジケーターバーが段階的に拡大縮小され、各ページのバーの塗りつぶし色が灰色、紫、青、または緑になります。

アニメーション化されたヘッダー、画像、およびデータの視覚化

Webサイトがフラットに見えないようにするために、セクションヘッダーをアニメーション化することにしました。 私はイラストを作成し、私たちのチームの開発者がそれらをアニメーション化しました。 また、ホームページと各サブセクションのヒーロー画像、および各Webページの下部にある対応するチャプターカードをアニメーション化しました。

また、静的データ視覚化チャートの一部をインタラクティブにしました。 たとえば、バンプチャートの線をスクロールすると、線が太くなり、対応するデータポイントが強調されます。 これはシンプルですが効果的なアニメーションであり、サイトの訪問者がデータを操作して言語をすばやく比較できます。

GitHubの成功するデータ視覚化とデジタルデザインの作成：重要な学習

データは、それを理解できる場合にのみ有用であり、ユーザーが簡単に解読できるデータ量の多いコンテンツを設計するプロセスは困難です。 それでも、このGitHubとのコラボレーションにより、データ視覚化設計に関する知識が広がりました。 このデータ視覚化のケーススタディからの最も重要なポイントは次のとおりです。

• ブランドを知る：タイプ、色、画像の使用など、ブランドのコアスタイルガイドラインに精通していると、デザイナーはクリエイティブプロセスに進むことができるため、デザインプロセスがスピードアップします。 コラボレーションの前にGitHubのブランドについて多くのことを知っていたのは幸運でした。そして、この知識を使って自分のデザインに情報を提供することができました。
• 適切なタイプのデータ視覚化を選択する：データポイントを表す適切な視覚化を選択することが不可欠です。 誤った表現は、混乱を引き起こしたり、間違ったメッセージを伝えたりする可能性があります。
• 色を賢く使う：正しい色の組み合わせは、読者の目を導き、特定のデータポイントに注意を引き付けます。
• 好奇心をそそる：説得力のあるデータストーリーを伝えようとすると、複雑な設計上の問題に直面することになります。そのため、珍しい解決策と継続的な学習を受け入れることが重要です。