หนึ่งในปัญหาที่เจอบ่อย ๆ ในการออกแบบ Visualization คือการใช้สีที่ไม่สอดคล้องกับประเภทของข้อมูล ตัวอย่างคลาสสิคเลยคือการใช้สีต่าง ๆ กัน หรือ Hue หลากหลายเป็นสีรุ้ง 🌈 กับค่าข้อมูลที่มีลำดับ เช่น ค่ามากเป็นสีเขียว ค่ากลาง ๆ เป็นสีเหลือง และค่าน้อยเป็นสีแดง ตามแบบสัญญาณไฟจราจร 🟢🟡🔴

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

แล้วปัญหานี้ไม่ใช่ปัญหาสมมตินะครับ ในการกำหนดสีระดับความรุนแรงของโควิดในอเมริกาที่ให้แต่ละรัฐไปกำหนดกันเอง อ้างอิงจากในบทความนี้ใน New York Times รัฐ Colorado ให้สีฟ้าอันตรายน้อยกว่าสีเขียวแต่รัฐ North Dakota ให้สีฟ้าปลอดภัยกว่าสีเขียว คนที่ต้องเดินทางระหว่างสองรัฐนี้ก็งงไปเลย

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

ถ้าเป็นไปได้ หลักเกณฑ์ทาง Visualization ก็มักแนะนำให้ใช้ความเข้มสีแสดงค่าข้อมูลที่มีลำดับ แล้วให้เก็บ Hue ต่าง ๆ ไว้แสดงข้อมูลที่เป็นประเภทต่าง ๆ ไม่ใช่ค่าสูงต่ำครับ

อย่างไรก็ตาม เมื่อปีที่แล้วมีเปเปอร์ใหม่อันนึงในงานประชุมวิชาการ EuroVis 2021 ชื่อว่า Color Nameability Predicts Inference Accuracy in Spatial Visualizations ที่ตั้งคำถามว่าแล้วทำไมยังมีคนใช้ Hue สีต่าง ๆ ในการแสดงค่าข้อมูลที่มีลำดับละ

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

หลายคนคงเคยได้ยินว่าภาษากำกับความคิดของเราได้ อย่างการแยกแยะสีเนี่ย คนรัสเซียจะแยกสีบางสีได้เร็วกว่าคนที่พูดภาษาอื่น เป็นเพราะมีคำเรียกสีนั้นชัด ๆ ในภาษารัสเซีย ได้แก่ goluboy (ฟ้า?) และ siniy (น้ำเงิน?)

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

ใครสนใจรายละเอียดลองไปอ่านในเปเปอร์ได้ มีรางวัล Best Paper ของ EuroVis 2021 รับประกัน การทดลองมันก็มีข้อจำกัดอะไรของมัน ลองคิดโต้แย้งดูได้ โดยเฉพาะที่มันแย้งกับ Best Practices แต่ผมว่าน่าสนใจมากที่งานนี้เชื่อมเรื่องภาษาศาสตร์เข้ากับเรื่อง Visualization

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

สีใน Visualization (ตอนที่ 1)