บทความนี้เกิดขึ้นจาก แอดเห็นเพื่อนแชร์คอร์สออนไลน์ฟรีใน facebook เลยกดเข้าไปดู เพราะแอดเพิ่งเคยเห็น Platform ที่ชื่อว่า klasssi เพื่อนๆ ลองคลิกไปดูได้ หน้าตา Platform จะเป็นแบบนี้

klasssi by Kasikornbank

klasssi คือ แพลตฟอร์มการเรียนรู้ที่เชื่อในการส่งต่อคลื่นแห่งความรู้ไม่สิ้นสุด ช่วยเพิ่มศักยภาพให้เติบโตและปรับเปลี่ยนได้ทันอนาคต (แอด copy slogan เค้ามา) ก่อตั้งขึ้นโดยธนาคารกสิกรไทย แอดลองหาใน Playstore ทาง klasssi เค้าก็มี Application เหมือนกัน ลองเรียนดูก็ถือว่าโอเคเลย

แนะนำคอร์สและผู้สอน

มาถึงเนื้อหากันเลยดีกว่า แอดเลือกลงคอร์สที่ชื่อว่า Data Design Fundamental การออกแบบข้อมูลเบื้องต้น ใช้เวลาในการเรียนประมาณ 2 ชม. สอนโดย คุณโจ้ ฐิติพงษ์ เหลืองอรุณเลิศ ผู้ก่อตั้ง บริษัท บุญมีแล็บ เป็นบริษัทที่มีชื่อเสียงด้าน Data Visualization และ Design มากๆ เจ้านึงเลยทีเดียว

หลายคนถ้าดูจากชื่อคอร์สอาจจะคิดว่าเป็นแนว Database architecture design หรือเปล่า แต่จริงๆ แล้วคอร์สนี้จะเกี่ยวกับการแสดงผลข้อมูล และเป็นวิชาที่ค่อนข้างใหม่และเป็นสิ่งที่แอดสนใจเป็นทุนเดิมอยู่แล้ว เนื้อหาในคอร์สจะรวมศาสตร์ 3 แขนง คือ

1. Data Visualization
2. Data Storytelling
3. Interaction Design

เนื้อหาเหมาะกับใคร

คนที่สนใจและต้องการเข้าใจในเรื่องเหล่านี้

• ความต้องการของ Users
• ธรรมชาติของ Data
• ธรรมชาติของ Data Visualization
• Graphic Design หรือ Interaction Design
• ใช้สมองสองฝั่ง Creative และ Analytical

Chapter 1 : Type of Data Design

1. Communication Storytelling

เป้าหมาย

• Originality : ดูแล้วแปลกตา เห็นแล้วต้องจำได้
• Decoration : การตกแต่งให้น่าสนใจและสวยงาม
• Lightness : แสดงข้อมูลได้เบาบาง ไม่ลงรายละเอียดมาก
• Undimensionality : มีมิติที่ไม่หลากหลาย เล่าแบบเรียง Sequence
• Redundancy : มีข้อมูลเพิ่มเข้ามาเพื่อให้เข้าใจมากขึ้น เช่น Tips
• Figuration : ทำให้ข้อมูลบางจุดชัดขึ้น

ตัวอย่าง : https://www.thairath.co.th/spotlight/platu

2. Analytics and Operation

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

ในปัจจุบัน Dashboard คือ สิ่งเหล่านี้ที่ทุกคนคุ้นตากันดี

เป้าหมาย

• Functionality : ทำเพราะต้องการใช้งานในเรื่องต่างๆ
• Density : มีข้อมูลพอสมควรและอัพเดท
• Multidimensionality : มองได้หลากหลายมุม
• Novelty : ข้อมูลต้องบ่งบอกอะไรที่สำคัญ
• Alteration : มีความพร้อมสำหรับการปรับเปลี่ยน (Scale up)

ตัวอย่าง www.activethai.org

Facebook Analytics และ Google Data Studio

พี่โจ้ทิ้งท้ายว่า Analytics and Operation มันคือ Making reality visible หรือ การทำความเป็นจริงให้มองเห็นได้

---

Data Design Process

1. Project Conceptualization

ตั้ง Goals ให้แน่ชัดว่าเป้าหมาย คืออะไร เช่น อยากสร้าง Dashboard ที่ทำให้คนเข้าใจกิจกรรมทางกายมากขึ้น เช่น จังหวัดไหนมีสถิติแบบไหน

2. Data Characterization

ดูว่ามี Data อะไรบ้างให้เรานำมาใช้ เช่น สถิติจากรัฐบาล หรือ Open data จากแหล่งอื่นๆ ที่น่าเชื่อถือ จากนั้นนำมาทำ Preprocessing เป็นช่วงที่ปวดหัวที่สุด เพราะต้อง Clean และจัดการข้อมูลให้พร้อมใช้ ดูว่า Data ไหนเชื่อมกันได้บ้าง

3. Visualization Design

ออกแบบโดยใช้ข้อมูลที่มี อาจเกิดจากการ Sketch มือ ขั้นตอนนี้ต้องมีความเข้าใจใน UX/UI พอสมควร เพื่อให้ออกแบบได้ดีขึ้น

4. Visualization Development

เขียนโปรแกรมมมม หรือ Coding เพื่อให้ออกมาเป็น Interactive Dashboard (ปกติแอดใช้แต่ BI Tools สำเร็จรูป T_T) ซึ่งก็มีอยู่สองทางนั่นแหละ

1. BI Tools (Google Data Studio, Tableau, Power BI, Qlik Sense)
2. Coding

5. Publish, 6. Knowledge and action

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

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

Chapter 2 : Nature of Data

เราควรรู้ว่าธรรมชาติของข้อมูลเป็นยังไง มีลักษณะแบบไหน

ตัวอย่าง ข้อมูลจาก Airbnb

1. Interval Data

• ไม่ได้มีค่าเท่ากับ 0
• ใช้คำนวนได้
• ข้อมูล วัน/เดือน/ปี, ชั่วโมง, องศาเซลเซียส

2. Nominal Data

• นับได้ และคำนวนเป็น % ได้
• หาค่าเฉลี่ยไม่ได้
• ใช้แบ่ง Category เป็นหลัก เช่น ชนิด, ขนาด

3. Ordinal Data

• จัดลำดับได้
• ค่าที่ถูกแปลมาจากแบบสำรวจ เช่น 1-5 (ไม่พึงพอใจ – พอใจมาก)

4. Ratio Data

• เป็นค่า 0 ได้
• คำนวนได้หมดทุกแบบ
• เช่น ราคา, อายุ, น้ำหนัก
• Discrete เช่น มีผู้ชาย 3 คน ไม่สามารถบอกได้ว่ามีผู้ชาย 3.2 คน เพราะไม่มีความหมาย
• Continuous เช่น น้ำหนัก 64.5 กิโลกรัม

Level of Aggregation

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

โดยทั่วไปเรามักจะมองหาข้อมูลที่มีความละเอียดที่สุด แบบในตารางด้านขวา เรียกว่า Transactional Data

Chapter 3: Nature of Visualization

การแสดงผลข้อมูลมีหลายแบบมาก ขึ้นอยู่กับงานแต่ละแบบ หรือ เป้าหมายที่เราต้องการ ดูจากตัวอย่างด้านล่างได้เลย อันนี้ดีมากๆ แอดชอบบบ

โดยทั่วไปเวลาเราทำงาน ก็จะนึกภาพในหัวได้อยู่ประมาณ 3 Chart

1. Pie Chart
2. Line Chart
3. Bar Chart

แต่จริงๆ แล้วการใช้ Chart อื่นช่วยเราได้มากเลย

ตัวอย่างที่ 1

มีข้อมูล 3 แกน

• Life expectancy
• GDP per capita
• Population

ถ้าเราใช้ Bar Chart แน่นอนว่าต้องแยกเป็น 2 กราฟ

1. Life expectancy และ Country
2. GDP per capita และ Country

ถามว่าผิดไม่ แอดมองว่าไม่ผิดนะ เพราะมันก็แสดงผลข้อมูลได้เหมือนกัน แต่มันจะเริ่มงงมากขึ้นถ้าวันนี้เราอยากรู้ความสัมพันธ์กันของข้อมูลทั้ง 2 กราฟ

Scatter Plot

กราฟนี้จะช่วยตอบโจทย์ของเรา เพราะเป็นการดูความสัมพันธ์ของตัวเลข รวมถึงการกระจายตัวของข้อมูลด้วย โดยเราจะเอาข้อมูลทั้ง 3 แกนมา Plot ลงไป

• แกน Y = แสดงผลของ Life expectancy
• แกน X = แสดงผลของ GDP per capita
• ขนาดของจุด แสดงผลของ Population

นอกจากนั้นเรายังใช้สีในการแบ่งทวีปได้อีกด้วย 4 Metrics เลยทีเดียว

นอกจากนี้ยังแสดงให้เห็นถึง Correlation, Cluster, Direction ในวงสีแดง ตามภาพด้านล่าง

• กลุ่มประเทศในวงด้านซ้าย = กลุ่มที่มี GDP ที่ต่ำ แม้ว่าจะมีช่วงอายุเท่าไหร่ก็ตาม
• กลุ่มประเทศในวงด้านขวา = กลุ่มที่มีอายุยืนมากๆ และมีรายต่ำจนถึงสูง

Direction จะเป็นเส้นที่วิ่งไปทางขวาบน เพื่อให้มีคุณภาพชีวิตที่ดีขึ้น

ตัวอย่างที่ 2

มีข้อมูล 1 แกน

• งบบริษัท

ถ้าเราใช้ Pie Chart ก็จะต้องมีหลายๆ วง แบ่ง Subset ลงไปเรื่อยๆ แบบนี้

Tree Map

กราฟนี้ข้อดีคือจะเป็นลักษณะ 4 เหลี่ยมเต็มๆ ต่างจาก Pie Chart ที่จะแบ่งส่วนข้อมูลด้วยรัศมีในวงกลม จากในรูปจะเห็นว่าการใช้ 4 เหลี่ยมทำให้มีพื้นที่ในการนำเสนอมากกว่า หากเราดูที่มุมขวาล่าง แม้ว่าข้อมูลมีแค่ 5 % ก็ยังเห็นข้อมูลส่วนั้นได้

ต่างกับการใช้ Pie Chart หากข้อมูลน้อยมากๆ ก็จะแสดงรัศมีแคบมากจนกลายเป็นเส้น ทำให้ไม่เห็นสัดส่วนของข้อมูลส่วนนั้น และ Tree Map ยังเห็นสัดส่วนของข้อมูลในระดับที่ใหญ่ขึ้นมาอาจจะเป็นประเภทของงบ เช่น ในกรอบ 4 เหลี่ยมสีชมพู ที่เป็นพื้นที่สีม่วง จะเห็นว่างบประมาณประเภทนี้มีมากเป็นอันดับ 5 ของงบทั้งหมด และดูได้ว่าในประเภทนั้นโฟกัสอะไรเป็นหลัก

Chapter 4 : Data Design Rules

เรามาดูส่วนที่เป็น Highlight ของคอร์สนี้กันเลยดีกว่า อะไรคือสิ่งที่ควรทำและไม่ควรทำในการออกแบบ Dashboard ! ด้วยหลัก 3 A

1. Affordance : ทำให้คนเข้าใจได้ในทันที

Visual Hierarchy

• Reading Pattern : ออกแบบข้อมูลส่วนสำคัญ ให้อยู่ในการอ่านข้อมูลสองแบบ

1. แบบตัว F : อ่านหัวข้อก่อนแล้วไล่ลงรายละเอียดตามมา
2. แบบตัว Z : อ่านหัวข้อก่อนแล้วอ่านไล่มาทั้งหน้าแบบ skim

• Accent : เรียงลำดับการดู เราต้องการให้เข้าใจข้อมูล หรือเข้าถึงข้อมูลส่วนไหนก่อน ช่วยได้โดยใช้สีที่โดดเด่นช่วยเน้นข้อความให้กับส่วนที่มีความสำคัญมากกว่า
• Size : ใช้ขนาดเน้นส่วนสำคัญ เช่น กราฟที่มีขนาดใหญ่ที่สุดจะช่วยดึงดูดให้คนสนใจได้มากกว่า
• Space : กราฟหรือข้อมูลส่วนไหน ที่มีพื้นที่ว่างรอบๆ มากๆ ทำให้ช่วยเน้นให้เด่นชัดขึ้นได้

Visual Encoding

• Ordinal

เลือกใช้กราฟ ให้เหมาะสมกับประเภทของข้อมูล เช่น ใช้พื้นที่ของ 4 เหลี่ยมที่มีขนาดไม่เท่ากันในการบ่งบอกว่า สิ่งไหนมีมากกว่ากัน หรือใช้ขนาดของวงกลม ช่วยบ่งบอกได้ว่า สิ่งไหนมีมากกว่ากัน

• Categorical

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

แอดแปะตัวอย่างของ Visual Encoding เพิ่มเติมในภาพด้านล่างจาก Oreilly

Color

หลักการใช้สี อันนี้แอดชอบเป็นพิเศษ เพราะมันง่ายต่อการเข้าใจของคนที่มาอ่าน Dashboard จริงๆ

• Grey with accent : ใช้สีให้น้อยทีสุด เช่น ใช้สีเฉดเทาทั้งหมด แล้วใส่ Accent คือ การเน้นสีเฉพาะสิ่งที่เราอยากจะโฟกัส (ไม้ตายของแอดเลย)
• Meaning : ใช้สีที่ตรงกับความหมาย เช่น ใช้สีอ่อนแสดงค่าที่มีน้อย และสีเข้มแสดงค่าที่มีจำนวนมาก
• Sequential : ใช้สีจากเข้มไปอ่อน แสดงความเข้มข้นของข้อมูล
• Diverging : ใช้แสดงผลข้อมูลสองขั้วที่แตกต่างกัน เช่น ผลการเลือกตั้ง แต่ควรเลือกสีตรงกลางเป็นสีที่ 3 เช่น สีขาว เพราะช่วยทำให้สีไม่ปนกันระหว่างสองขั้ว จะทำให้กราฟที่ออกมาสีดูแย่

ใครคิดไม่ออกว่าจะออกแบบยังไงดี พี่โจ้ก็แนะนำ website ช่วยในการออกแบบด้วย

User Experience

ความเข้าเรื่องการใช้งานของ Users

• Navigation : ออกแบบให้ Users กดใช้งานเพื่อไปยังหน้าต่างๆ ได้ง่าย และกลับมาในหน้าต่างที่เค้าต้องการได้ และต้องรู้ว่า ณ ตอนนี้เค้าอยู่ที่ตรงไหน
• Current state : หากเป็นแผนที่ ต้องให้ Users รู้ว่ากำลังคลิกเลือกอะไรอยู่
• Filter / Facet : ข้อมูลขนาดใหญ่ ไม่สามารถแสดงผลทั้งหมดได้ในทีเดียว การใช้ Checkbox หรือ Dropdown จะช่วยให้เลือกดูข้อมูลได้ง่ายขึ้น
• Tooltip / Legend : จะช่วยได้มากหากเป็น Interactive Dashboard เพราะช่วยในการ Drill down ข้อมูลได้ในทันที

Narration / Exploration

เลือกวิธีการนำเสนอข้อมูลให้ ตรงกับการใช้งาน เช่น เพื่อการเล่าเรื่อง หรือ เพื่อการ Explore ข้อมูล

• Slideshow : การแสดง Chart อันพร้อมคำอธิบาย จากนั้นกดไปหน้าต่อไป เหมือนกับ PPT หรือ Google Slide ที่เราคุ้นเคยกันดี โดยแต่ละ Slide ควรมี Key Message แค่อย่างเดียวเท่านั้น
• Scroll : ส่วนใหญ่ใช้ในการออกแบบ website เหมือนเอา Slideshow มาเรียงลงไปข้างล่าง
• Single image : เป็น infographic และโปสเตอร์ต่างๆ หรือภาพที่เป็น squared ใน Instagram ต้องพยายามใส่ข้อมูลทั้งหมดภายในภาพเดียวให้ได้
• Interactive หรือ Dashboard : เหมาะสำหรับข้อมูลที่มีจำนวนมาก และมีสิ่งที่จะแสดงลึกกว่า มีการ Drill down รายละเอียดต่างๆ

2. Aesthetics : ทำให้มีความสวยงาม น่ามอง

Simple

ไม่ว่าอะไรที่เราใส่ลงไปใน Dashboard หรือ Storytelling เราต้องถามตัวเองเสมอว่า ถ้าไม่ใส่ลงไป ยังสามารถเล่าเรื่องได้มั้ย ถ้ายังเล่าได้ก็ควรเอาออก

Memorable

จากข้อ Simple เราไม่ควรจะเอาออกมากเกินไป เพราะทำให้คนฟังหรือคนดูจำเราไม่ได้ เพราะอีกสิ่งนึงคือ เราจะสร้างความประทับใจให้ผู้รับสารอีกด้วย เช่น การใส่ Interaction filter รวมถึงรูปภาพและสีสัน

3. Accessibility : ทำให้ทุกคนเข้าถึงได้โดยมีข้อจำกัดน้อยที่สุด

Size

ขนาดตัวอักษรควรอยู่ในลักษณะที่ทุกคนมองเห็นได้อย่างชัดเจน รวมถึงขนาดของ Chart ควรใช้ให้เหมาะสมกับกลุ่ม Audience ที่เราต้องการสื่อสาร

Wording

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

Device

ควรออกแบบให้เหมาะกับทุกประเภทอุปกรณ์ เช่น มือถือ แทปเล็ต และ คอมพิวเตอร์

Color-blindness

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

Course Summary

จาก 4 Chapter ที่เราได้เรียนไป ทางคุณโจ้ก็ได้ทำ One Page Summary สรุปให้อีกทีนึง สีสันน่าประทับใจ 5555

แอดคิดว่าคอร์สนี้ทำอออกมาได้โอเคสำหรับคนที่มองหาคอร์สที่ช่วยแนะนำการออกแบบ Dashboard เพราะมีหลักการต่างๆ ที่ทุกคนควรคำนึงถึงก่อนออกแบบอย่างชัดเจนและค่อนข้างเห็นภาพ สำหรับคนที่เป็นสาย Data Analyst แอดว่าน่าจะได้ประโยชน์พอสมควร

เรียนจบได้รับ Certificate สวยๆ แบบนี้เลยยยยย

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

พูดคุยกันได้ที่เพจ Malonglearn – มาลองเรียน หรือติชมผ่านคอมเม้นด้านล่างเลยจ้า