แนวปฏิบัติที่ดีด้าน UI/UX

การสร้างแดชบอร์ดด้วย shinydashboard

Png Kee Seng

Researcher

หลักการพื้นฐาน

  1. กำหนดวัตถุประสงค์ของแดชบอร์ดให้ชัดเจน
  2. เลือกการแสดงผลที่เหมาะสม
  3. ใช้สีอย่างมีประสิทธิภาพและสื่อความหมาย
  4. ตัดทอนค่าที่มีขนาดใหญ่
  5. หลีกเลี่ยงการเพิ่มองค์ประกอบโต้ตอบมากเกินไป
  6. ออกแบบแดชบอร์ดเป็นขั้นตอนสุดท้าย
  • หลักการเหล่านี้ใช้ได้กับแดชบอร์ดทั่วไป
  • รายการนี้ไม่ครอบคลุมทุกกรณี
  • เป็นข้อแนะนำ ไม่ใช่กฎตายตัว
การสร้างแดชบอร์ดด้วย shinydashboard

1. กำหนดวัตถุประสงค์ของแดชบอร์ดให้ชัดเจน

  • แดชบอร์ดนี้สร้างขึ้นสำหรับใคร?
  • ผู้ใช้ต้องการทราบข้อมูลอะไร?
  • การเข้าใจความต้องการของผู้ใช้ช่วยยกระดับประสบการณ์การใช้งาน $^1$
  • สถานการณ์: สร้างแดชบอร์ดสำหรับ Sally
  • วัตถุประสงค์: รายงานผลการดำเนินงานของพอร์ตโฟลิโอของเธอ
1 François, Mathilde, et al. "Automotive HMI design and participatory user involvement: review and perspectives." Ergonomics 60.4 (2017): 541-552
การสร้างแดชบอร์ดด้วย shinydashboard

2. เลือกการแสดงผลที่เหมาะสม

  • ใช้กับการแสดงผลแต่ละรายการ และกับแดชบอร์ดโดยรวมด้วย
  • แดชบอร์ดประกอบด้วยการแสดงผลหลายรายการ
  • ข้อมูลใดที่มีประโยชน์สำหรับ Sally?
  • มักต้องแลกระหว่างความแม่นยำและความชัดเจน
  • "The truthful art" โดย Alberto Cairo $^1$

ประเภทของกราฟที่แนะนำโดย Alberto Cairo

1 Cairo, Alberto. The truthful art: Data, charts, and maps for communication. New Riders, 2016
การสร้างแดชบอร์ดด้วย shinydashboard

3. ใช้สีอย่างมีประสิทธิภาพและสื่อความหมาย

  • โดยทั่วไป สีบางสีสื่อความหมายที่แตกต่างกัน
  • ตัวอย่าง
    • สีแดงมักหมายถึงคำเตือนหรือการแจ้งเตือน
    • สีเขียวมักหมายถึงข้อความแสดงความสำเร็จ
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 
             badgeColor = "red")
  ...
)

สีที่ใช้ไม่เหมาะสมสำหรับข้อความแสดงความสำเร็จ

การสร้างแดชบอร์ดด้วย shinydashboard

3. ใช้สีอย่างมีประสิทธิภาพและสื่อความหมาย

  • โดยทั่วไป สีบางสีสื่อความหมายที่แตกต่างกัน
  • ตัวอย่าง
    • สีแดงมักหมายถึงคำเตือนหรือการแจ้งเตือน และผู้ใช้คาดหวังความหมายนี้
    • สีเขียว ในทางกลับกัน มักหมายถึงข้อความแสดงความสำเร็จ
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 

             badgeColor = "green")
  ...
)

สีที่ใช้ไม่เหมาะสมสำหรับข้อความแสดงความสำเร็จ

สีที่เหมาะสมสำหรับข้อความแสดงความสำเร็จ

การสร้างแดชบอร์ดด้วย shinydashboard

4. ตัดทอนค่าที่มีขนาดใหญ่

  • ตัวเลขสามารถแสดงใน shinydashboard ได้
  • อาจต้องยอมสละความแม่นยำบางส่วนเพื่อความชัดเจน
    • ควรปัดตัวเลขขนาดใหญ่
round(2.324815454862,2)

[1] 2.32

ค่าที่ยังไม่ได้ตัดทอน

ค่าที่ตัดทอนแล้ว

การสร้างแดชบอร์ดด้วย shinydashboard

5. หลีกเลี่ยงองค์ประกอบโต้ตอบที่มากเกินไป

  • ระมัดระวังจำนวนองค์ประกอบโต้ตอบ
  • มีมากเกินไปอาจทำให้ผู้ใช้สับสน
  • มากกว่าไม่ได้ดีกว่าเสมอไป

การกระตุ้นมากเกินไปไม่เป็นผลดี

1 Image by Freepik
การสร้างแดชบอร์ดด้วย shinydashboard

6. ออกแบบแดชบอร์ดเป็นขั้นตอนสุดท้าย

  • อย่าเร่งรีบออกแบบแดชบอร์ด
    • รวมถึงการทำ wireframe การออกแบบรูปลักษณ์ เป็นต้น
  • กำหนดวัตถุประสงค์ก่อนเป็นอันดับแรก
    • ช่วยให้เลือกการแสดงผลที่เหมาะสมได้
การสร้างแดชบอร์ดด้วย shinydashboard

6. ออกแบบแดชบอร์ดเป็นขั้นตอนสุดท้าย

  • อย่าเร่งรีบออกแบบแดชบอร์ด
    • รวมถึงการทำ wireframe การออกแบบรูปลักษณ์ เป็นต้น
  • กำหนดวัตถุประสงค์ก่อนเป็นอันดับแรก
    • ช่วยให้เลือกการแสดงผลที่เหมาะสมได้

"วัตถุประสงค์: สร้างแดชบอร์ดสำหรับ Sally"

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

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

การสร้างแดชบอร์ดด้วย shinydashboard

Preparing Video For Download...