تصميم Octoverse لـ GitHub: دراسة حالة لتصور البيانات

في العام الماضي ، تعاونت مع GitHub لتصميم تقرير حالة 2021 لـ Octoverse. يحلل Octoverse من GitHub بيانات العالم الحقيقي من ملايين المطورين والمستودعات من أجل تقديم رؤى صناعة تطوير البرمجيات لهذا العام. يغطي تقرير عام 2021 ثلاثة اتجاهات رئيسية: تحسين الأداء والرفاهية من خلال تطوير التعليمات البرمجية وإنشاء الوثائق ودعم المجتمعات بطريقة أكثر ذكاءً واستدامة.

بصفتي مسؤول الاتصال الإبداعي للمشروع ، كان من واجبي مساعدة فريق GitHub في تسهيل فهم التقرير المليء بالبيانات. باستخدام تصور البيانات ، قمت بتصميم أكثر من 20 مخططًا وخريطة ورسومًا بيانية لمساعدة القراء على كشف المعلومات التي جمعها علماء بيانات GitHub.

في دراسة حالة تصور البيانات هذه ، قمت بشرح عملية التصميم الخاصة بي ، وعرض موقع الويب الذي ساعدت في إنشائه لـ Octoverse الخاص بـ GitHub ، ومشاركة ما تعلمته من المشروع.

تصميم تجارب رقمية تفاعلية مع تصور البيانات

تقرير حالة Octoverse 2021 هو تقرير مترامي الأطراف ، حيث تم جمع البيانات من أكثر من 73 مليون مطور على GitHub وأكثر من 61 مليون مستودع جديد. إنها أيضًا المرة الأولى التي يتم فيها تضمين استطلاع حول التركيبة السكانية للمستجيبين. يتطلب فهم البيانات جهدًا تصميميًا مكثفًا.

تم تكليف فريقنا المتواضع ، والذي تضمن المطور خوسيه لويس جاريدو ومدير المشروع ميكيل لوبيز ، بتجميع هذه الكمية الهائلة من المعلومات للقراء. على الرغم من البداية المتأخرة والمشاريع المتزامنة الأخرى ، قمنا بتسليمها.

بدء عملية التصميم

كانت المرحلة الأولى من عملية تصميم تصور البيانات الخاصة بي هي الاكتشاف. قام علماء البيانات في GitHub بجمع وتحليل المعلومات من المطورين والمستودعات من خلال ملفات Excel وعروض PowerPoint التقديمية ومجموعات البيانات الأخرى.

باستخدام هذه المعلومات ، جنبًا إلى جنب مع رسومات التصور الأولية للبيانات من GitHub ووثيقة سياق مكونة من 60 صفحة ، بدأت أفكر في أفضل طريقة لتوضيح كل مجموعة بيانات. بعد ذلك ، بدأت في تصميم كل مخطط وخريطة ومخطط لتحقيق أقصى مشاركة للمستخدم وتجربة مستخدم بديهية.

اختيار الرسم البياني الخاص بك

هناك ثلاث نقاط رئيسية لاختيار تصور بيانات فعال:

1. تحديد الغرض من المخطط

يمكن تمثيل البيانات بعدة طرق - المخططات الشريطية والرسوم البيانية الخطية والخرائط الحرارية والمخططات الانحدارية والمزيد. يخدم كل مخطط غرضًا ، ومن المهم استخدام المخطط الصحيح لضمان نقل رسالة واضحة ودقيقة.

على سبيل المثال ، إذا كنت تريد عرض الفرق بين كميتين ، فاستخدم مخطط شريطي. إذا كنت تريد إظهار الاتجاه بمرور الوقت ، فاستخدم الرسم البياني الخطي.

2. ضع في اعتبارك المستخدم النهائي

تحتاج أيضًا إلى أن تكون على دراية بقدرة المستخدمين على قراءة البيانات وتحليلها. معظمنا على دراية بالمخططات الدائرية والشريطية والخطية. نراهم في كل مكان ونعرف كيف نقرأهم.

من ناحية أخرى ، فإن عددًا أقل من الأشخاص يعرفون كيفية قراءة المخططات الصندوقية ، والتي تُستخدم في العديد من المنشورات البحثية لتلخيص متغيرات البيانات المتعددة في مخطط واحد.

إذا قدمت للمستخدمين تصورات غير مألوفة ، فسيجدون صعوبة في تفسير البيانات.

3. التصميم بوضوح

هل تصور البيانات واضح ومختصر ، أم أن هناك الكثير من الضوضاء؟ يمكن أن تكون المخططات الشريطية طريقة رائعة لعرض البيانات ، ولكن ليس إذا كان هناك 100 شريط بتسميات فردية. وبالمثل ، فإن الرسوم البيانية جميلة وعملية ، ولكن فقط عندما يكون هناك نمط بيانات واضح. أحيانًا يكون الأقل أكثر.

تصميم تصورات بيانات مثالية

خلال تقرير حالة تقرير Octoverse لعام 2021 ، ستجد مجموعة متنوعة من تصورات البيانات التي تم تكوينها بعناية وفقًا لرؤى البيانات المقابلة.

مخطط الفراشة

في صفحة النظرة العامة ، كنت بحاجة لتصميم رسم بياني لمجموعتين من البيانات - توضح مكان عمل المستجيبين قبل الوباء وبعده. زودني GitHub بمخططين دائريين رسم كل منهما أربع نقاط بيانات: مجمعة ، ومختلطة ، وبعيدة تمامًا ، وغير قابلة للتطبيق. ومع ذلك ، لا تكون المخططات الدائرية فعالة بشكل خاص عند مقارنة مجموعتين من البيانات.

بدلاً من ذلك ، اخترت مخطط الفراشة. ترسم مخططات الفراشة البيانات على هيئة شريطين أفقيين جنبًا إلى جنب ، يشبهان أجنحة الفراشة. تُظهر هذه المخططات بوضوح الفرق بين مجموعتين تشتركان في نفس المعلمات ، وتجعل مقارنة مجموعتين من البيانات أسهل بكثير.

مخطط Bump

التصور الفعال الآخر للبيانات هو الرسم البياني النتوء. استخدمنا هذا المخطط لتقديم المعلومات حول لغات برمجة الكمبيوتر الأكثر شيوعًا التي استخدمها المطورون على مدار السنوات الثماني الماضية. تعد مخططات الارتداد رائعة لعرض التغييرات في الترتيب على مدار فترة زمنية ، وقد أصبحت عنصرًا أساسيًا في تقرير Octoverse.

خريطة Treemap

كنت بحاجة إلى توضيح القطاعات المختلفة التي يساهم فيها المستجيبون بالرمز. جاء القرار النهائي إلى المخططات الدائرية مقابل الخرائط الهيكلية.

تعد المخططات الدائرية مفيدة عندما يكون لديك ثلاثة أو أربعة قطاعات وعندما تكون الكميات مختلفة بشكل واضح. ومع ذلك ، فإن أدمغتنا لا تعالج الزوايا بشكل جيد ، لذلك عندما يكون هناك مخطط دائري به الكثير من الأوتاد ذات الحجم المتشابه ، فإن الناس يواجهون صعوبة في فك رموز أيها أكبر.

في المقابل ، تتيح الخرائط الشبكية للمستخدمين مقارنة الأجزاء ببعضها البعض بسهولة ، وكذلك مع الكل. يتم وضع المستطيلات الأكبر في أعلى اليسار ، متبوعة بمستطيلات أصغر تدريجيًا. مقارنة الخطوط المستقيمة أسهل من مقارنة الأوتاد أو الزوايا.

رسم الخرائط

أخيرًا ، كنت بحاجة إلى توضيح التوزيع الجغرافي للمنظمات التي تستخدم GitHub في عام 2021 حسب المنطقة أو الدولة. لهذا ، استخدمت مخطط السكان. مخططات الخرائط هي خرائط يتم فيها تشويه الهندسة لتلائم ميزة اقتصادية أو اجتماعية أو سياسية أو بيئية معينة.

في تصور البيانات هذا ، يشير حجم المربعات إلى حجم السكان. بالإضافة إلى ذلك ، يشير تشبع لون المربع إلى عدد المؤسسات في تلك المنطقة التي تستخدم GitHub.

تصميم موقع مستجيب لـ Octoverse 2021 من GitHub

بالإضافة إلى تصميم تصورات البيانات ، فقد ساعدت فريق GitHub أيضًا في إنشاء موقع ويب لـ Octoverse 2021. كان هذا الموقع مركزًا للمستخدمين لقراءة رؤى بيانات التقرير واستكشافها والتفاعل معها.

لتشجيع مشاركة المستخدم ، اخترنا موقع ويب سريع الاستجابة بالكامل من شأنه تكييف عرض الموقع مع إطارات عرض مختلفة الأحجام. طلب منا GitHub أن نولي اهتمامًا خاصًا لإصدار سطح المكتب بعد أن اكتشفنا أن الأجهزة الأكبر حجمًا هي التي قادت غالبية زيارات Octoverse.

عند تصميم الموقع سريع الاستجابة ، اتبعت أفضل الممارسات التالية:

• إنشاء نص باستخدام محارف متوافقة مع سطح المكتب ومتوافقة مع الأجهزة المحمولة. وشمل ذلك اختيار أفضل أحجام الخطوط ، والمحارف ، وطول الخط وارتفاعه ، وتحسين مظهر النص عند نقاط الفصل المختلفة.
• تخطيط العناصر المرئية في كل صفحة لتشجيع التمرير.
• تصميم شريط تنقل علوي سهل الاستخدام يتكيف مع تنسيقه مع حجم منفذ العرض.

نظرًا لأنني صممت موقع الويب مع وضع أجهزة مختلفة في الاعتبار منذ البداية ، فقد تم عرض معظم الرسوم البيانية بشكل جيد على جميع أحجام الشاشات. كنت بحاجة فقط لإجراء تعديلات طفيفة لإمكانية العرض المثلى ، مثل مخطط الأسنان الدائري في نهاية قسم "المجتمعات المستدامة".

تنظيم هندسة المعلومات

لقد استكشفت خيارات مختلفة لهندسة معلومات الموقع. لم أرغب في إرباك المستخدمين بالكثير من المعلومات ، لكنني أيضًا لا أريد أن يكون الموقع مبعثرًا أو يصعب التنقل فيه.

مع وضع هذا في الاعتبار ، بدأت بتصميم موقع طويل للتمرير ، مع كل المحتوى في نفس الصفحة. عندما أصبح ذلك مرهقًا بصريًا ، حاولت وضع كل مخطط في صفحة منفصلة. للمساعدة في التنقل ، أضفت قائمة تنقل جانبية لكل صفحة بها جدول محتويات ، على غرار ما قد تجده في الكتاب. يتكون التصميم النهائي على موقع Octoverse من صفحات ويب منفصلة للاتجاهات الرئيسية الثلاثة ، بالإضافة إلى صفحة رئيسية تعمل بمثابة ملخص لأهم البيانات.

بعد اتخاذ قرار بشأن بنية المعلومات ، انتقلت إلى تصميم بنية محتوى الموقع وتدفق التنقل والصور والرسومات. لقد قمت بإنشاء إطارات سلكية لتخطيط المحتوى وإظهار المسارات بين الصفحات المختلفة.

جعل موقع الويب تفاعليًا

مؤشر تقدم التمرير

لتلبية طلب GitHub لموقع ويب ديناميكي وجذاب ، أضفنا عناصر تفاعلية. على سبيل المثال ، أسفل شريط التنقل العلوي ، قمت بتصميم مؤشر تقدم التمرير حتى يتمكن الزوار من تتبع مكان وجودهم على الموقع. أثناء قيام القراء بالتمرير لأسفل صفحة ما ، يتدرج حجم شريط المؤشر بشكل تدريجي ، ولكل صفحة لون تعبئة مختلف للشريط: رمادي أو أرجواني أو أزرق أو أخضر.

رؤوس وصور متحركة وتصور البيانات

لمنع موقع الويب من الظهور بشكل مسطح ، قررنا تحريك رؤوس الأقسام. لقد أنشأت الرسوم التوضيحية وقام مطور فريقنا بتحريكها. قمنا أيضًا بتحريك صورة البطل للصفحة الرئيسية وكل قسم فرعي ، وبطاقات الفصول المقابلة لها في أسفل كل صفحة ويب.

لقد جعلنا أيضًا بعض المخططات البيانية لتصور البيانات الثابتة تفاعلية. على سبيل المثال ، عندما تقوم بالتمرير فوق خط في مخطط التضاريس ، يزداد ثخانة الخط للتأكيد على نقطة البيانات المقابلة. إنها رسم متحرك بسيط ولكنه فعال يتيح لزوار الموقع التفاعل مع البيانات ومقارنة اللغات بسرعة.

إنشاء التصورات الناجحة للبيانات والتصميمات الرقمية لـ GitHub: التعلم الأساسي

تكون البيانات مفيدة فقط إذا كان بإمكانك فهمها ، وعملية تصميم محتوى ثقيل البيانات يمكن للمستخدمين فك تشفيره بسهولة يمثل تحديًا. ومع ذلك ، أدى هذا التعاون مع GitHub إلى توسيع معرفتي في تصميم تصور البيانات. فيما يلي أهم الوجبات المستخلصة من دراسة حالة تصور البيانات هذه:

• تعرف على العلامة التجارية: إن التعرف على إرشادات الأنماط الأساسية للعلامة التجارية - مثل استخدامها للنوع واللون والصور - يعمل على تسريع عملية التصميم لأنه يحرر المصممين للانتقال إلى العملية الإبداعية. كنت محظوظًا لأنني كنت أعرف الكثير عن علامة GitHub التجارية قبل التعاون ، وتمكنت من استخدام هذه المعرفة لإبلاغ تصميماتي.
• اختر الأنواع الصحيحة من تصورات البيانات: يعد تحديد التصور الصحيح لتمثيل نقطة بيانات أمرًا ضروريًا. يمكن أن يتسبب التمثيل غير الصحيح في حدوث ارتباك أو نقل رسالة خاطئة.
• استخدم الألوان بحكمة: تركيبة الألوان الصحيحة ستوجه عين القارئ وتلفت الانتباه إلى نقطة بيانات معينة.
• ابق فضوليًا: عندما تحاول سرد قصة بيانات مقنعة ، فأنت ملزم بمواجهة مشكلات تصميم معقدة ، لذلك من المهم أن تكون منفتحًا على الحلول غير الشائعة والتعلم المستمر.