Visualisation Palette

2 min readJun 25, 2018

หนึ่งในโครงการที่ทาง

กำลังออกแบบและพัฒนาอยู่ในขณะนี้ก็คือระบบวิเคราะห์ข้อมูลในระบบการจัดซื้อจัดจ้างภาครัฐเพื่อเปิดเผยข้อมูลจัดซื้อจัดจ้างตามพระราชบัญญัติการจัดซื้อจัดจ้างและบริการพัสดุภาครัฐ พ.ศ. 2560 (CGD-MIS) ผมขอเรียกสั้น ๆ ว่า ระบบวิเคราะห์ข้อมูลการจัดซื้อจัดจ้างภาครัฐ แทนเพื่อความกระชับ โดยเป็นครั้งแรกที่กรมบัญชีกลางเปิดข้อมูลระบบการจัดซื้อจัดจ้างภาครัฐ (e-GP) มาจัดทำเป็น Interactive Data Visualisation เต็มรูปแบบเพื่อให้ผู้บริหาร สื่อมวลชน ประชาชนและผู้สนใจ ได้นำข้อมูลมาใช้ประโยชน์

ผมถือว่าโครงการนี้เป็นการแสดงออกถึงความตั้งใจของหน่วยงานรัฐในการผลักดันข้อมูลเปิด (opendata) ซึ่งเป็นกลไกสำคัญในการนำไปสู่การบริหารงานของรัฐอย่างโปร่งใส

หนึ่งในกระบวนการออกแบบ Data Visualization ที่สำคัญก็คือ Visual Encoding คือการแปลงข้อมูลให้เป็นภาพ ซึ่งสามารถเลือกใช้ได้หลากหลายรูปแบบไม่ว่าจะเป็น ตำแหน่ง (position) ขนาด (size) ความยาว (length) ฯลฯ ในบทความนี้ผมจะพูดถึงการใช้สี (color) สำหรับโครงการนี้

ภาพที่ 1 ตาราง Visual Encoding แยกตามวิธีและแสดงลักษณะการใช้งาน

Color

จากตาราง (ภาพที่ 1) แสดงให้เห็นว่า การใช้สีเหมาะกับข้อมูลที่มีจำนวนน้อยกว่า 20 หากใช้สีเกินกว่านี้จะลดความสามารถในการรับรู้และจดจำของผู้รับสาร นอกจากนี้สียังเหมาะสำหรับการใช้แบ่งกลุ่ม (categorical) เท่านั้น ซึ่งโดยความเข้าใจของคนทั่วไปมักเลือกใช้สีในการแสดงกราฟ ชาร์ต เป็นตัวเลือกแรก ๆ ซึ่งก็พบว่าหลายครั้งการใช้สีไม่ตรงตามคุณลักษณะนี่เอง ที่ทำให้ Data Visualisation ซับซ้อนยิ่งขึ้น แทนที่จะช่วยให้เข้าใจข้อมูลหรือเรื่องราวได้อย่างรวดเร็ว

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

Viz Palette

ระบบวิเคราะห์ข้อมูลการจัดซื้อจัดจ้างภาครัฐ มีข้อมูลที่ต้องจำแนกกลุ่ม (categorical) อยู่จำนวนไม่น้อย ผมจึงต้องจัดจานสีหลักสำหรับทีมเพื่อใช้ไปตลอดทั้งงาน ซึ่งแตกต่างจากการทำ Color Guideline ในงานเว็บหรือแอปที่กำหนดเพียง Primary Secondary และ Toner ก็เพียงพอ

ผมได้ใช้เครื่องมือ Viz Palette ที่สร้างโดย Elijah Meeks และ Susie Lu มาช่วยทุ่นเวลาในการคัดเลือกสี โดยเครื่องมือมีการเชื่อมต่อกับเครื่องมือเลือกสีอื่น ๆ เช่น Chroma.js, Colorgorical, ColorBrewer ที่สะดวกคือมี Data Visualisation ให้เทียบสีได้ทันที เมื่อเลือกสีจนเป็นที่พอใจแล้วก็สามารถคัดลอกโค้ดไปใช้งานได้ตามอัธยาศัย

ภาพที่ 4 Color Palette สำหรับใช้ในงาน ระบบวิเคราะห์ข้อมูลการจัดซื้อจัดจ้างภาครัฐ

การใช้งาน Data Visualisation แตกต่างจากงาน Graphic Design ที่จำเป็นต้องถ่ายทอดเรื่องราวที่มีความถูกต้อง แม่นยำ (precision) มาก่อนความสวยงาม (aesthetic) ยิ่งเป็น Interactive Dashboard ที่มีผู้ใช้งานหลากหลาย บางคนอาจใช้เป็นเครื่องมือในการทำงานด้วยแล้ว จึงมองข้ามประเด็น Accessibility ไปเสียไม่ได้ ซึ่งเว็บไซต์นี้ก็มีให้ตรวจสอบว่าสีที่จัดลงบนจานสี จะออกมาเป็นแบบไหนในมุมมองของคนตาบอดสี

ภาพที่ 5 กดเลือก Deuteranomaly สำหรับคนตาบอดสีประเภทบกพร่องการรับแสงสีเขียว ซึ่งมีถึง 2.7% ของประชากร

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

Visibility
สีต้องมองเห็นเด่นชัด ชัดด้วยสีที่แตกต่างกับพื้นหลัง หรือการจำกัดการใช้สีเพื่อไม่ให้แย่งกันดึงดูดสายตา ทั้งนี้การคำนึงถึงที่ว่าง (negative) ก็มีความสำคัญไม่แพ้ สีและองค์ประกอบ (positive) เลยทีเดียว

Consistency
การเลือกสีหรือจานสีควรพิจารณาให้ถ้วนถี่ เพื่อการนำไปใช้อย่างสม่ำเสมอตลอดทั้งโครงการ ไม่ควร ข้อนี้สำคัญมากเมื่อโครงการ Data Visualisation มีหลายชิ้น เช่น งานประเภท Dashboard

Systematic
สีควรมีการตั้งชื่อให้เป็นระบบ และเข้าใจกันได้ง่ายโดยทีม นอกจากจะสะดวกในการพัฒนาแล้วยังง่ายในการปรับเปลี่ยนและดูแลทั้งโครงการ เช่น
[{“color”:”#ffb3fd”,
“name”:”light purple”,
{“color”:”#e098e6",
“name”:”purple”}]

Constraint
จำกัดเพื่อกำจัดความสับสน จากที่ได้กล่าวไว้แล้วข้างต้นเรื่องการใช้สีไม่ควรเกิน 20 สี สำหรับโครงการนี้ ผมจำกัดการใช้สี โดยมีให้เลือกใช้ไม่เกิน 12 สี โดยใช้จริงน้อยกว่านั้น อาจตั้งคำถามกับตัวเองว่า “หากลดจำนวนสีแล้ว ยังสามารถเล่าเรื่อง แสดงข้อมูลให้เข้าใจได้เท่าเดิมหรือไม่” ถ้าใช่ก็ให้ลดการใช้สีไปจนเหลือน้อยที่สุด

Harmony/ Unity
การเลือกสีควรเลือกให้เข้ากับลักษณะขององค์กร การเล่าเรื่องและการใช้งาน สำหรับโครงการนี้ เลือกใช้สีที่เบรกให้อ่อน (ผสมขาวหรือเทา) เพราะเป็นการแสดงข้อมูลที่มีมากหน่วย มากกลุ่ม และมีความละเอียดสูง สีที่อ่อนลงจะช่วยให้องค์ประกอบข้อมูลบนเว็บไซต์ ไม่รุงรัง หนักสายตา กลุ่มสีที่เลือกต้องมั่นใจว่ากลมกลืนกัน วางข้างกันได้ ในขณะเดียวกันก็ยังแสดงความแตกต่างที่ชัดเจน สำหรับ mood&tone ของเว็บไซต์ออกแบบให้หลุดออกจากภาพจำของเว็บไซต์ภาครัฐ จึงเลือกใช้สีชุดใหม่ที่สร้างภาพลักษณ์ให้ทันสมัย โปร่งใส และสร้างสรรค์

หลังจากปล้ำกับเว็บนี้อยู่นาน ก็ได้ Visualisation palette ของโครงการระบบวิเคราะห์ข้อมูลการจัดซื้อจัดจ้างภาครัฐ ตามนี้

Visual Guidelines

เนื่องจากโครงการ Data Visualisation ขนาดใหญ่ จำเป็นต้องทำงานกันเป็นทีม ประกอบด้วย Visual Designer, Interaction Designer, Data Scientist และ Web/App Developer จึงจำเป็นที่จะต้องมีวิธีในการสื่อสารนั่นคือ Visual Guidelines

Categorical
การใช้สีสำหรับการแสดงข้อมูลแบบแบ่งกลุ่ม