ตัวอย่างการแสดงข้อมูลยอดนิยมและการออกแบบแดชบอร์ด

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

สามวิธี: ความเข้าใจที่ดีขึ้นเกี่ยวกับหลักการ UX ที่อยู่เบื้องหลังการออกแบบแดชบอร์ดที่ดี การประยุกต์ใช้ความเป็นเลิศด้านกราฟิก และการปฏิบัติ

การออกแบบแดชบอร์ด UX เป็นไปตามหลักการเฉพาะและแนวทางปฏิบัติที่ดีที่สุด ในทางกลับกัน ความเป็นเลิศด้านกราฟิกต้องมีการตรวจสอบอย่างละเอียดถี่ถ้วนมากขึ้น

ความเป็นเลิศด้านกราฟิกถูกกำหนดเป็น:

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

แหล่งข้อมูลที่ยอดเยี่ยมสำหรับการทำความเข้าใจความเป็นเลิศด้านกราฟิกให้ดีขึ้นคืองานของ Edward Tufte เขาได้รับการยกย่องว่าเป็น "The Leonardo da Vinci of data" และมีผลงานตีพิมพ์ หนังสือ และการบรรยายจำนวนมาก David McCandless ผู้ก่อตั้งข้อมูลที่สวยงาม เว็บไซต์ที่แสดงถึงการแสดงข้อมูลและความเป็นเลิศด้านกราฟิกที่ดีที่สุด เป็นแหล่งข้อมูลที่ยอดเยี่ยมอีกแหล่งหนึ่ง

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

การแสดงข้อมูลยอดนิยม

นโปเลียน ค.ศ. 1812 เดือนมีนาคม

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

ภาพจำลองภาพเดียวนี้แสดงจำนวนกองทหารของนโปเลียนตามสถานที่ อุณหภูมิที่กองทหารประสบ และเส้นทางที่กองทหารไปและกลับจากมอสโก

แผนที่อหิวาตกโรคของจอห์น สโนว์

ภาพกราฟิกของ John Snow ในปี 1854 แสดงตำแหน่งของบ่อน้ำสาธารณะ 13 แห่งของลอนดอน และผู้เสียชีวิตจากอหิวาตกโรค 578 ราย โดยใช้แท่งเหล็กเรียงซ้อนกันในแนวตั้งฉากกับตำแหน่ง: เข้าใจง่าย เปิดเผยความจริงในข้อมูล และให้ข้อมูลทั้งหมดที่จำเป็นแก่ผู้ใช้เพื่อวาดอย่างถูกต้อง ข้อสรุปเกี่ยวกับการเสียชีวิตของอหิวาตกโรค

ประวัติเพลงร็อค

แสดงเพียงเศษเสี้ยวของการแสดงข้อมูลทั้งหมด กราฟิกด้านล่างแสดงส่วนหนึ่งของเพลงมากกว่า 30 สไตล์จากศิลปินกว่า 700 คนในช่วงเวลาระหว่างปี 1955 ถึง 1978

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

ที่ซึ่งประชากรของยุโรปเติบโตและลดลง

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

กิจวัตรประจำวันของคนดังที่มีชื่อเสียง

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

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

กราฟิกภาษาโลก

การแสดงภาพข้อมูลแบบคลาสสิกนี้แสดงจำนวนภาษาที่มีอยู่บนโลก ที่ที่พวกเขาพูด และใครพูดในภาษาต่างๆ ในโลก

หากไม่มีความเป็นเลิศด้านกราฟิกในระดับสูง ก็คงเป็นเรื่องยากที่จะแสดงข้อมูลจำนวนมากในลักษณะที่สวยงามซึ่งให้ข้อมูลและเข้าใจง่าย

การออกแบบแดชบอร์ดยอดนิยม

เพื่อให้แดชบอร์ดถือว่าเหนือกว่า แดชบอร์ดนั้นต้องเป็นไปตามชุดเกณฑ์ UX เฉพาะ:

• หลักการตั้งชื่อที่ชัดเจนและสม่ำเสมอ
• โฟลว์และเลย์เอาต์ของข้อมูลที่จัดลำดับความสำคัญ
• ระยะขอบมีความเหมาะสมสำหรับการอ่าน
• ข้อมูลไม่ถูกซ่อนหรือโอเวอร์โหลด
• เข้าใจง่ายและอ่านง่าย

แดชบอร์ด KPI การตลาด

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

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

แดชบอร์ดลาย

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

แดชบอร์ดการแพทย์ทางไกล

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

กระดานหุ้น

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

แดชบอร์ดผู้ชมเว็บ

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

แดชบอร์ดการจัดการเอกสาร

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

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

แอพพยากรณ์อากาศเมล็ดพืช – แดชบอร์ดมือถือ

แดชบอร์ดมือถือนี้มีข้อมูลและเข้าใจง่าย เบรดครัมบ์ช่วยในการนำทาง และไอคอนที่มีคำอธิบายภาษาทั่วไปช่วยสร้างการออกแบบ UX ที่ยอดเยี่ยม

แดชบอร์ดบัตรเครดิต – แดชบอร์ดมือถือ

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

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

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

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