การออกแบบ Dashboard

แนวคิดการออกแบบ Dashboard

Olga Scrivner, PhD

President, Scrivner Solutions Inc

ทำไมการออกแบบจึงสำคัญ?

 

  • บริษัท: NASDAQ
  • ความต้องการ: สื่อสารข้อมูลตลาดประจำวันให้นักลงทุนทั่วไปเข้าใจได้
  • วิธีแก้ปัญหา: จอแสดงค่าเดียวแบบเรียลไทม์ที่ Times Square

 

ทำไม Trend Line จึงไม่ใช่วิธีที่ดีที่สุด?

 

ตลาดหลักทรัพย์

1 Brath, Richard & Michael Peters. (2004). Dashboard design: why design is important.
แนวคิดการออกแบบ Dashboard

ทำไมการออกแบบจึงสำคัญ?

 

  • บริษัท: NASDAQ
  • ความต้องการ: สื่อสารข้อมูลตลาดประจำวันให้นักลงทุนทั่วไปเข้าใจได้
  • วิธีแก้ปัญหา: จอแสดงค่าเดียวแบบเรียลไทม์ที่ Times Square

 

ทำไม Trend Line จึงไม่ใช่วิธีที่ดีที่สุด?

 

ตลาดหลักทรัพย์

 

ข้อมูลเชิงประวัติศาสตร์ เทียบกับ ตัวชี้วัดแบบเรียลไทม์

1 Brath, Richard & Michael Peters. (2004). Dashboard design: why design is important.
แนวคิดการออกแบบ Dashboard

ส่วนประกอบของการออกแบบ

                กลุ่มผู้ใช้

  • ใครจะใช้ Dashboard นี้?
  • ต้องการอะไรบ้าง?
  • รูปแบบใดเหมาะกับกลุ่มผู้ใช้?
  • จะเข้าถึงบ่อยแค่ไหน?

  กลุ่มผู้ใช้

                        ส่วนประกอบ

  • วัตถุประสงค์: แบบสำรวจ เทียบกับ แบบอธิบาย
  • รูปแบบ: แนวนอน เทียบกับ แนวตั้ง
  • เลย์เอาต์: Grid เทียบกับ Flex
  • วิชวล: ค่า มิติ รูปทรง

 

ส่วนประกอบ

แนวคิดการออกแบบ Dashboard

วัตถุประสงค์ของ Dashboard

              Exploratory Dashboard

exploratory dashboard

Explanatory Dashboard ช่วยให้ผู้ใช้สำรวจข้อมูลได้อย่างอิสระ

                    Explanatory Dashboard

explanatory dashboard

Explanatory Dashboard นำเสนอข้อมูลเชิงลึกที่กำหนดไว้ล่วงหน้า

แนวคิดการออกแบบ Dashboard

Exploratory Dashboard

 

exploratory dashboard

 

 

  • ตัวกรองสำหรับแบ่งกลุ่มข้อมูลแบบกำหนดเอง
1 Baucke, Spencer. (2022). Dashboard design essentials.
แนวคิดการออกแบบ Dashboard

Exploratory Dashboard

 

exploratory dashboard

 

 

  • ตัวกรองสำหรับแบ่งกลุ่มข้อมูลแบบกำหนดเอง
  • แผงนำทางที่ปรับแต่งได้
1 Baucke, Spencer. (2022). Dashboard design essentials.
แนวคิดการออกแบบ Dashboard

Exploratory Dashboard

 

exploratory dashboard

 

 

  • ตัวกรองสำหรับแบ่งกลุ่มข้อมูลแบบกำหนดเอง
  • แผงนำทางที่ปรับแต่งได้
  • Drill-down เพื่อดูรายละเอียดเพิ่มเติม
1 Baucke, Spencer. (2022). Dashboard design essentials.
แนวคิดการออกแบบ Dashboard

Exploratory Dashboard

 

exploratory dashboard

 

 

  • ตัวกรองสำหรับแบ่งกลุ่มข้อมูลแบบกำหนดเอง
  • แผงนำทางที่ปรับแต่งได้
  • Drill-down เพื่อดูรายละเอียดเพิ่มเติม
  • วิชวลแบบโต้ตอบได้ (hover-over, tooltips)
1 Baucke, Spencer. (2022). Dashboard design essentials.
แนวคิดการออกแบบ Dashboard

Explanatory Dashboard

 

explanatory dashboard

 

 

  • ข้อมูลมักถูกกรองไว้แล้ว
  • มี Storyline ที่กำหนดไว้ล่วงหน้า
  • นำเสนอต่อผู้บริหาร
  • เรียกร้องให้ดำเนินการ
1 Baucke, Spencer. (2022). Dashboard design essentials.
แนวคิดการออกแบบ Dashboard

ขนาด Dashboard

                      พื้นที่จริง

  • ขนาดจอ - ระยะทแยงมุมของหน้าจอ

      Desktop, Laptop, Tablet, อุปกรณ์มือถือ

ขนาดจอ

แนวคิดการออกแบบ Dashboard

ขนาด Dashboard

                      พื้นที่จริง

  • ขนาดจอ - ระยะทแยงมุมของหน้าจอ
  • ความละเอียดหน้าจอ - จำนวนพิกเซลและความหนาแน่น (กว้าง x สูง)

                          รูปแบบ

  • รูปแบบมาตรฐาน - Dashboard สี่เหลี่ยม

    • อัตราส่วน - 16:9
    • ส่วนประกอบทั้งหมดแสดงในหน้าจอเดียว
    • ไม่ต้องเลื่อน

  • รูปแบบยาว - แนวนอนหรือแนวตั้ง

      Desktop, Laptop, Tablet, อุปกรณ์มือถือ

ขนาดจอ

                แนวนอน (แบบ Timeline) รูปแบบยาว

แนวคิดการออกแบบ Dashboard

ขนาด Dashboard

                      พื้นที่จริง

  • ขนาดจอ - ระยะทแยงมุมของหน้าจอ
  • ความละเอียดหน้าจอ - จำนวนพิกเซลและความหนาแน่น (กว้าง x สูง)

                          รูปแบบ

  • รูปแบบมาตรฐาน - Dashboard สี่เหลี่ยม

    • อัตราส่วน - 16:9
    • ส่วนประกอบทั้งหมดแสดงในหน้าจอเดียว
    • ไม่ต้องเลื่อน

  • รูปแบบยาว - แนวนอนหรือแนวตั้ง

      Desktop, Laptop, Tablet, อุปกรณ์มือถือ

ขนาดจอ

                แนวตั้ง (แบบคอลัมน์หนังสือพิมพ์) รูปแบบแนวตั้ง

แนวคิดการออกแบบ Dashboard

เลย์เอาต์ของ Dashboard

                  ระบบ Grid ระบบ grid

  • เมทริกซ์สองมิติ
  • สมดุลและสมมาตร
  • นำทางง่าย
  • Big Aggregate Numbers (BAN) - แถวบนสุด

                                โฟกัส

F focus

F focus

1 Baucke, Spencer. (2022). Dashboard design essentials.
แนวคิดการออกแบบ Dashboard

มาฝึกกันเถอะ!

แนวคิดการออกแบบ Dashboard

Preparing Video For Download...