การออกแบบ Octovere ของ GitHub: กรณีศึกษาการสร้างภาพข้อมูล

ปีที่แล้ว ฉันร่วมมือกับ GitHub เพื่อออกแบบรายงานสถานะปี 2021 ของ Octovere Octoverse ของ GitHub วิเคราะห์ข้อมูลในโลกแห่งความเป็นจริงจากนักพัฒนาและที่เก็บหลายล้านรายเพื่อนำเสนอข้อมูลเชิงลึกของอุตสาหกรรมการพัฒนาซอฟต์แวร์ประจำปี รายงานปี 2564 ครอบคลุมแนวโน้มหลักสามประการ ได้แก่ การปรับปรุงประสิทธิภาพและความเป็นอยู่ที่ดีโดยการพัฒนาโค้ด การสร้างเอกสาร และการสนับสนุนชุมชนอย่างชาญฉลาดและยั่งยืนยิ่งขึ้น

ในฐานะผู้ประสานงานเชิงสร้างสรรค์ของโครงการ หน้าที่ของฉันคือช่วยทีม GitHub ในการทำให้รายงานที่มีข้อมูลจำนวนมากเข้าใจง่าย เมื่อใช้การแสดงข้อมูลเป็นภาพ ฉันออกแบบแผนภูมิ แผนที่ และกราฟมากกว่า 20 รายการเพื่อช่วยให้ผู้อ่านคลี่คลายข้อมูลที่นักวิทยาศาสตร์ด้านข้อมูล GitHub รวบรวมได้

ในกรณีศึกษาการแสดงภาพข้อมูลนี้ ฉันอธิบายขั้นตอนการออกแบบ แสดงเว็บไซต์ที่ฉันช่วยสร้างสำหรับ Octovere ของ GitHub และแบ่งปันการเรียนรู้ที่สำคัญจากโครงการ

การออกแบบประสบการณ์ดิจิทัลที่น่าดึงดูดด้วยการแสดงข้อมูล

State of the Octovere 2021 เป็นรายงานที่กว้างขวาง โดยรวบรวมข้อมูลจากนักพัฒนา GitHub กว่า 73 ล้านคน และที่เก็บใหม่มากกว่า 61 ล้านแห่ง นอกจากนี้ยังเป็นครั้งแรกที่มีการรวมแบบสำรวจเกี่ยวกับข้อมูลประชากรของผู้ตอบด้วย การทำความเข้าใจข้อมูลจำเป็นต้องมีความพยายามอย่างมากในการออกแบบ

ทีมงานเจียมเนื้อเจียมตัวของเรา ซึ่งรวมถึงนักพัฒนา Jose Luis Garrido และผู้จัดการโครงการ Miquel Lopez ได้รับมอบหมายให้สังเคราะห์ข้อมูลจำนวนมหาศาลนี้สำหรับผู้อ่าน แม้จะเริ่มต้นล่าช้าและโครงการอื่นๆ พร้อมกัน เราก็ส่งมอบได้

เริ่มต้นกระบวนการออกแบบ

ขั้นตอนแรกของกระบวนการออกแบบการแสดงข้อมูลเป็นภาพคือการค้นพบ นักวิทยาศาสตร์ด้านข้อมูลของ GitHub ได้รวบรวมและวิเคราะห์ข้อมูลจากนักพัฒนาและที่เก็บข้อมูลผ่านไฟล์ Excel, งานนำเสนอ PowerPoint และชุดข้อมูลอื่นๆ

ด้วยข้อมูลนี้ ร่วมกับภาพร่างการสร้างภาพข้อมูลเบื้องต้นของ GitHub และเอกสารบริบท 60 หน้า ฉันเริ่มคิดว่าจะแสดงชุดข้อมูลแต่ละชุดได้ดีที่สุดอย่างไร จากนั้น ฉันก็เริ่มออกแบบแผนภูมิ แผนที่ และไดอะแกรมแต่ละรายการเพื่อให้ผู้ใช้มีส่วนร่วมสูงสุดและมอบประสบการณ์การใช้งานที่เข้าใจง่าย

การเลือกแผนภูมิของคุณ

มีประเด็นสำคัญสามประการในการเลือกการสร้างภาพข้อมูลที่มีประสิทธิภาพ:

1. ระบุวัตถุประสงค์ของแผนภูมิ

ข้อมูลสามารถแสดงได้หลายวิธี เช่น แผนภูมิแท่ง กราฟเส้น แผนที่ความหนาแน่น แผนภูมิน้ำตก และอื่นๆ แผนภูมิแต่ละอันมีจุดมุ่งหมาย และสิ่งสำคัญคือต้องใช้แผนภูมิที่เหมาะสมเพื่อให้แน่ใจว่ามีการถ่ายทอดข้อความที่ชัดเจนและถูกต้อง

ตัวอย่างเช่น หากคุณต้องการแสดงความแตกต่างระหว่างปริมาณสองปริมาณ ให้ใช้แผนภูมิแท่ง หากคุณต้องการแสดงแนวโน้มเมื่อเวลาผ่านไป ให้ใช้กราฟเส้น

2. พิจารณาผู้ใช้ปลายทาง

คุณยังต้องตระหนักถึงความสามารถของผู้ใช้ในการอ่านและวิเคราะห์ข้อมูล พวกเราส่วนใหญ่คุ้นเคยกับแผนภูมิวงกลม แท่ง และเส้น เราเห็นพวกเขาทุกที่และเรารู้วิธีอ่าน

ในทางกลับกัน มีคนจำนวนน้อยที่รู้วิธีอ่านแผนผังกล่อง ซึ่งใช้ในสิ่งพิมพ์วิจัยหลายฉบับเพื่อสรุปตัวแปรข้อมูลหลายตัวในแผนภูมิเดียว

หากคุณนำเสนอผู้ใช้ด้วยการสร้างภาพข้อมูลที่ไม่คุ้นเคย พวกเขาจะมีปัญหาในการตีความข้อมูล

3. ออกแบบด้วยความชัดเจน

การสร้างภาพข้อมูลมีความชัดเจนและรัดกุม หรือมีสัญญาณรบกวนมากเกินไปหรือไม่ แผนภูมิแท่งเป็นวิธีที่ดีในการแสดงข้อมูล แต่ไม่ใช่หากมี 100 แท่งที่มีป้ายกำกับแต่ละรายการ ในทำนองเดียวกัน สตรีมกราฟก็สวยงามและใช้งานได้จริง แต่เมื่อมีรูปแบบข้อมูลที่ชัดเจนเท่านั้น บางครั้งน้อยก็คือมาก

การออกแบบการแสดงข้อมูลที่สมบูรณ์แบบ

ตลอดทั้งรายงาน State of the Octovers ปี 2021 คุณจะพบกับการแสดงภาพข้อมูลที่หลากหลายซึ่งประกอบขึ้นอย่างพิถีพิถันตามข้อมูลเชิงลึกที่เกี่ยวข้อง

แผนภูมิผีเสื้อ

ในหน้าภาพรวม ฉันต้องออกแบบอินโฟกราฟิกสำหรับข้อมูลสองชุด ซึ่งแสดงว่าผู้ตอบแบบสอบถามทำงานที่ใดก่อนการระบาดใหญ่และหลังจากนั้น GitHub ให้แผนภูมิวงกลมสองอันแก่ฉัน โดยแต่ละอันจะจับคู่จุดข้อมูลสี่จุด: แบบรวม แบบผสม แบบรีโมตอย่างสมบูรณ์ และไม่เกี่ยวข้อง อย่างไรก็ตาม แผนภูมิวงกลมไม่ได้ผลเป็นพิเศษเมื่อเปรียบเทียบข้อมูลสองชุด

ฉันเลือกใช้แผนภูมิผีเสื้อแทน แผนภูมิผีเสื้อแสดงข้อมูลเป็นแท่งแนวนอนสองแท่งเคียงข้างกัน คล้ายกับปีกผีเสื้อ แผนภูมิเหล่านี้แสดงความแตกต่างระหว่างสองกลุ่มที่ใช้พารามิเตอร์เดียวกันอย่างชัดเจน และทำให้การเปรียบเทียบข้อมูลสองชุดง่ายขึ้นมาก

Bump Chart

การสร้างภาพข้อมูลที่มีประสิทธิภาพอีกประการหนึ่งคือแผนภูมิกระแทก เราใช้แผนภูมินี้เพื่อนำเสนอข้อมูลเกี่ยวกับภาษาโปรแกรมคอมพิวเตอร์ยอดนิยมที่นักพัฒนาใช้ในช่วงแปดปีที่ผ่านมา Bump charts เหมาะสำหรับการแสดงการเปลี่ยนแปลงอันดับในช่วงเวลาหนึ่ง และได้กลายเป็นส่วนสำคัญในรายงานของ Octovers

แผนที่ต้นไม้

ฉันต้องแสดงตัวอย่างภาคส่วนต่างๆ ที่ผู้ตอบแบบสอบถามมีส่วนในโค้ด การตัดสินใจขั้นสุดท้ายลงมาที่แผนภูมิวงกลมกับแผนผังต้นไม้

แผนภูมิวงกลมมีประโยชน์เมื่อคุณมีภาคส่วนสามหรือสี่ส่วน และเมื่อปริมาณแตกต่างกันอย่างชัดเจน อย่างไรก็ตาม สมองของเราประมวลผลมุมได้ไม่ดีนัก ดังนั้นเมื่อมีแผนภูมิวงกลมที่มีเสี้ยวขนาดใกล้เคียงกันจำนวนมาก ผู้คนจะมีปัญหาในการถอดรหัสซึ่งใหญ่กว่า

ในทางตรงกันข้าม ทรีแมปทำให้ผู้ใช้สามารถเปรียบเทียบเซ็กเมนต์ระหว่างกันได้อย่างง่ายดาย เช่นเดียวกับภาพรวมทั้งหมด สี่เหลี่ยมที่ใหญ่ที่สุดจะอยู่ด้านซ้ายบน ตามด้วยสี่เหลี่ยมเล็กลงเรื่อยๆ การเปรียบเทียบเส้นตรงง่ายกว่าการเปรียบเทียบเสี้ยวหรือมุม

คาร์โตแกรม

สุดท้ายนี้ ฉันต้องแสดงภาพการกระจายทางภูมิศาสตร์ขององค์กรที่ใช้ GitHub ในปี 2564 ตามภูมิภาคหรือประเทศ สำหรับสิ่งนี้ ฉันใช้แผนภาพแสดงจำนวนประชากร แผนผังแผนที่คือแผนที่ซึ่งเรขาคณิตถูกบิดเบี้ยวเพื่อรองรับลักษณะทางเศรษฐกิจ สังคม การเมือง หรือสิ่งแวดล้อมโดยเฉพาะ

ในการแสดงภาพข้อมูลนี้ ขนาดของช่องสี่เหลี่ยมจะระบุขนาดประชากร นอกจากนี้ ความอิ่มตัวของสีของสี่เหลี่ยมจัตุรัสยังระบุจำนวนองค์กรในพื้นที่นั้นที่ใช้ GitHub

การออกแบบเว็บไซต์ที่ตอบสนองตามอุปกรณ์สำหรับ Octovere 2021 ของ GitHub

นอกจากการออกแบบการแสดงข้อมูลเป็นภาพแล้ว ฉันยังช่วยทีม GitHub สร้างเว็บไซต์สำหรับ Octovere 2021 อีกด้วย ไซต์นี้เป็นฮับสำหรับผู้ใช้ในการอ่าน สำรวจ และโต้ตอบกับข้อมูลเชิงลึกของรายงาน

เพื่อสนับสนุนการมีส่วนร่วมของผู้ใช้ เราเลือกใช้เว็บไซต์ที่ตอบสนองอย่างเต็มที่ซึ่งจะปรับการแสดงผลของไซต์ให้เข้ากับวิวพอร์ตขนาดต่างๆ GitHub ขอให้เราให้ความสนใจเป็นพิเศษกับเวอร์ชันเดสก์ท็อปหลังจากพบว่าอุปกรณ์ที่มีขนาดใหญ่กว่าผลักดันให้มีการเข้าชม Octovers ส่วนใหญ่

เมื่อออกแบบไซต์ที่ตอบสนอง ฉันได้ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเหล่านี้:

• การเขียนข้อความด้วยแบบอักษรที่เหมาะกับเดสก์ท็อปและเหมาะกับอุปกรณ์เคลื่อนที่ ซึ่งรวมถึงการเลือกขนาดแบบอักษร แบบอักษร ความยาวและความสูงของบรรทัดที่เหมาะสมที่สุด และการปรับแต่งลักษณะข้อความที่เบรกพอยท์ต่างๆ
• จัดวางองค์ประกอบภาพในแต่ละหน้าเพื่อส่งเสริมการเลื่อน
• การออกแบบแถบการนำทางด้านบนที่ใช้งานง่ายซึ่งปรับเลย์เอาต์ตามขนาดวิวพอร์ต

เนื่องจากฉันออกแบบเว็บไซต์โดยคำนึงถึงอุปกรณ์ต่างๆ ตั้งแต่เริ่มต้น แผนภูมิส่วนใหญ่จึงแสดงผลได้ดีบนทุกขนาดหน้าจอ ฉันแค่ต้องทำการปรับเปลี่ยนเล็กน้อยเพื่อความสามารถในการแสดงตัวโฆษณาที่เหมาะสมที่สุด เช่น แผนภาพวงกลมที่ส่วนท้ายของส่วน "ชุมชนที่ยั่งยืน"

การจัดระเบียบสถาปัตยกรรมสารสนเทศ

ฉันสำรวจตัวเลือกต่างๆ สำหรับสถาปัตยกรรมข้อมูลของเว็บไซต์ ฉันไม่ต้องการให้ผู้ใช้มีข้อมูลมากเกินไป แต่ฉันก็ไม่ต้องการให้ไซต์กระจัดกระจายหรือนำทางได้ยาก

ด้วยเหตุนี้ ฉันจึงเริ่มต้นด้วยการออกแบบเว็บไซต์แบบเลื่อนยาว โดยมีเนื้อหาทั้งหมดอยู่ในหน้าเดียวกัน เมื่อสิ่งนั้นดูล้นหลาม ฉันพยายามวางแต่ละแผนภูมิในหน้าแยกกัน เพื่อช่วยในการนำทาง ฉันได้เพิ่มเมนูการนำทางด้านข้างในแต่ละหน้าด้วยสารบัญ คล้ายกับที่คุณอาจพบในหนังสือ การออกแบบขั้นสุดท้ายบนเว็บไซต์ของ Octovers ประกอบด้วยหน้าเว็บแยกกันสำหรับแนวโน้มหลักสามประการ รวมทั้งหน้าแรกที่ทำหน้าที่เป็นบทสรุปของข้อมูลที่สำคัญที่สุด

หลังจากตัดสินใจเลือกสถาปัตยกรรมข้อมูลแล้ว ฉันก็เริ่มออกแบบโครงสร้างเนื้อหาของไซต์ ขั้นตอนการนำทาง รูปภาพ และกราฟิก ฉันสร้างโครงลวดเพื่อจับคู่เนื้อหาและแสดงเส้นทางระหว่างหน้าต่างๆ

การทำเว็บไซต์แบบโต้ตอบ

ตัวบ่งชี้ความคืบหน้าการเลื่อน

เพื่อตอบสนองคำขอของ GitHub สำหรับเว็บไซต์แบบไดนามิกที่มีส่วนร่วม เราได้เพิ่มองค์ประกอบแบบโต้ตอบ ตัวอย่างเช่น ใต้แถบนำทางด้านบน ฉันออกแบบตัวบ่งชี้ความคืบหน้าในการเลื่อนเพื่อให้ผู้เยี่ยมชมสามารถติดตามว่าพวกเขาอยู่ที่ไหนในไซต์ ในขณะที่ผู้อ่านเลื่อนลงมาหน้าหนึ่ง แถบตัวบ่งชี้จะขยายขนาดเพิ่มขึ้น และแต่ละหน้ามีสีเติมที่แตกต่างกันสำหรับแถบ: สีเทา สีม่วง สีฟ้า หรือสีเขียว

ส่วนหัว รูปภาพ และการแสดงข้อมูลแบบเคลื่อนไหว

เพื่อไม่ให้เว็บไซต์ดูราบเรียบ เราจึงตัดสินใจทำให้ส่วนหัวของส่วนเคลื่อนไหว ฉันสร้างภาพประกอบและนักพัฒนาทีมของเราเคลื่อนไหว นอกจากนี้เรายังสร้างภาพเคลื่อนไหวให้กับภาพฮีโร่สำหรับหน้าแรกและแต่ละส่วนย่อย และการ์ดบทที่เกี่ยวข้องที่ด้านล่างของแต่ละหน้าเว็บ

เรายังสร้างการโต้ตอบของแผนภูมิการแสดงข้อมูลแบบคงที่บางส่วน ตัวอย่างเช่น เมื่อคุณเลื่อนดูเส้นใน Bump Chart เส้นจะหนาขึ้นเพื่อเน้นจุดข้อมูลที่เกี่ยวข้อง เป็นแอนิเมชั่นที่เรียบง่ายแต่มีประสิทธิภาพที่ช่วยให้ผู้เข้าชมไซต์โต้ตอบกับข้อมูลและเปรียบเทียบภาษาได้อย่างรวดเร็ว

การสร้างภาพข้อมูลและการออกแบบดิจิทัลที่ประสบความสำเร็จสำหรับ GitHub: การเรียนรู้ที่สำคัญ

ข้อมูลจะมีประโยชน์ก็ต่อเมื่อคุณเข้าใจข้อมูลนั้นได้ และกระบวนการออกแบบเนื้อหาที่มีข้อมูลจำนวนมากซึ่งผู้ใช้สามารถถอดรหัสได้ง่ายนั้นเป็นเรื่องที่ท้าทาย อย่างไรก็ตาม การทำงานร่วมกันกับ GitHub นี้ได้ขยายความรู้ของฉันในการออกแบบการแสดงข้อมูล ต่อไปนี้คือประเด็นที่สำคัญที่สุดจากกรณีศึกษาการสร้างภาพข้อมูลนี้:

• รู้จักแบรนด์: การ ทำความคุ้นเคยกับแนวทางสไตล์หลักของแบรนด์ เช่น การใช้ประเภท สี และรูปภาพ จะทำให้ขั้นตอนการออกแบบเร็วขึ้น เนื่องจากช่วยให้นักออกแบบสามารถก้าวไปสู่กระบวนการสร้างสรรค์ได้ ฉันโชคดีที่รู้มากเกี่ยวกับแบรนด์ของ GitHub ก่อนการทำงานร่วมกัน และฉันสามารถใช้ความรู้นี้เพื่อแจ้งการออกแบบของฉัน
• เลือกประเภทการแสดงข้อมูลเป็นภาพที่เหมาะสม: การเลือกการแสดงภาพข้อมูลที่ถูกต้องเพื่อแสดงจุดข้อมูลเป็นสิ่งสำคัญ การแสดงที่ไม่ถูกต้องอาจทำให้เกิดความสับสนหรือสื่อข้อความที่ไม่ถูกต้อง
• ใช้สีอย่างชาญฉลาด: การผสมสีที่เหมาะสมจะนำทางสายตาของผู้อ่านและดึงความสนใจไปยังจุดข้อมูลเฉพาะ
• อยากรู้อยากเห็นอยู่เสมอ: เมื่อคุณพยายามจะบอกเล่าเรื่องราวข้อมูลที่น่าสนใจ คุณจะต้องพบกับปัญหาการออกแบบที่ซับซ้อน ดังนั้นจึงเป็นเรื่องสำคัญที่จะต้องเปิดใจรับวิธีแก้ปัญหาที่ไม่ธรรมดาและการเรียนรู้อย่างต่อเนื่อง