Niwat Chatawittayakul คอลัมนิส และนักธุรกิจ ปัจจุบันทำธุรกิจด้านวางแผนกลยุทธ์การตลาดและโฆษณาดิจิทัล อีกฝั่งสวมหมวกบริษัทสตาร์ทอัพด้านเทคโนโลยีโดย มุ่งความสนใจไปที่ BigData Blockchain และ Digital Transformation

หลักการเล่าเรื่องข้อมูล ด้านภาพให้ปัง ด้วยการเข้าใจหลักการสมอง

9 sec read

มีหลาย Tips ที่แนะนำเรื่องการทำ Data Visulisation ด้วยการเลือกภาพ เอาหลักการ UX/UI มาประกอบการออกแบบภาพเล่าเรื่องให้เข้าใจง่ายขึ้นซึ่งก็ได้ผลดีนะครับ แต่การหลักการเล่าเรื่องข้อมูลด้วยภาพนั้น UI เป็นส่วนประกอบนึง จะมีความต่างๆ กันในมุมของการแสดง Visualize ครับ การเล่าเรื่องข้อมูลด้วยภาพ จะอยู่บนพื้นฐานของกราฟ ที่แสดงความเชื่อมโยงมิติของข้อมูล ซึ่งจะยิ่งซับซ้อนขึ้นเมื่อมิติความเชื่อมโยงลึกขึ้นและใช้ตอบคำถามที่ซับซ้อน แต่หลักการของ UX จะคล้ายคลึงกันคือทำยังไงให้มีความเข้าใจในข้อมูล หรือใช้งานง่าย นั่นคือต้องเข้าใจวัตถุประสงค์และทำมันให้ Friendly ที่สุด

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

เข้าใจเรื่อง สมองกันก่อน

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

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

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

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

สูตร 1 : Difference and Contrast

สมองของมนุษย์ มีความสามารถในการแยกสี ได้ดีกว่าการแยกรูปลักษณ์ ยกตัวอย่างภาพด้านล่างนะครับ

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

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

สรุปย้ำชัด ๆ จากเรื่องนี้นะครับว่า สมองสามารถแยกสี ได้ดีและเร็วกว่า การแยกรูปร่าง

สูตรที่ 2 : Pre-Attentive Processing

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

เพราะฉะนั้นเมื่อเจอข้อมูลเยอะๆ สมองจะหาทางในการทำความเข้าใจได้เร็วและง่ายที่สุด เป็นสูตร Pre-Attentive Process ในที่นี้ผมจะเรียกว่า วิธีเรียกร้องความสนใจ อยากเป็นที่สนใจก็ต้องโดดเด่น เด้งออกมา เพื่อช่วยสมองของเรา และสมองของคนที่เราอยากสื่อสารข้อมูลเข้าไป ช่วยให้เขาใช้พลังงานในการตีความน้อยลงและประหยัดเวลาด้วยครับ

blank
กล่องสี่เหลี่ยมผืนผ้าสีดำเข้ม แถวที่ 3 โดดเด่นขึ้นมาแยกออกมาอีกกลุ่มทันที เมื่อมองภาพนี้ในแว๊บแรก กล่องนี้จะถูกตีความโดยสมองก่อนกล่องที่เหลือในทันที
blank
ขนาดก็ช่วย วัตถุโดดเด่นขึ้นมา กล่องสี่เหลี่ยมผืนผ้าแถวที่ 3 ก็จะถูกตีความโดยสมองก่อนกล่องที่เหลือในทันทีเช่นกัน ทั้งที่สีเดียวกันทั้งหมด
blank

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

ไม่ว่าจะสูตรเรื่องของ Difference & Contrast หรือ Pre-Attentive Processing เป็นเทคนิคง่าย ๆ ที่จะช่วยให้ ข้อมูลสามารถมีปฏิสัมพันธ์กับผู้ใช้ได้มากขึ้น (Engagement) เล่าข้อมูลได้ดีขึ้น

นำหลักการนี้ไปประยุกต์ใช้กับกราฟ การทำ Dash Board หรือการทำ Data Visualization ในวัถุประสงค์ต่างๆ ได้เลยครับ

Key Take away

  • สมองของเราจะพยายามใช้พลังงานในการประมวลผลต่ำก่อน เรียกว่าสมองของเราขี้เกียจเนื่องด้วยสัญญาตญาณ เพราะฉะนั้นการเล่าเรื่องด้วยข้อมูลถ้าทำให้สมองไม่ต้องตีความมากๆ ก็จะช่วยให้การเล่าเรื่องมีประสบการณ์กับผู้ใช้ได้ง่ายขึ้นนั่นเอง
  • จากการทดลอง สมองของเรานั้นจะแบ่งแยกข้อมูลโดย แบ่งแยกด้วยสีเร็วกว่าการแบ่งแยกด้วยรูปร่าง เพราะฉะนั้นสีจังเป็นส่วนสำคัญของการเล่าเรื่องด้วยข้อมูล
  • วิธีการแสดงความสนใจของการเล่าเรื่องด้วยข้อมูล ถ้าข้อมูลเยอะๆ การออกแบบการเล่าเรื่องจะต้องช่วยเรียกร้องความสนใจให้กับข้อมูลที่สำคัญด้วยหลักการใช้สี ด้วยการให้ความสำคัญด้วยขนาด และทิศทางที่ผิดปกติช่วยให้ข้อมูลนั้นโดดเด่นขึ้นมาสมองจะสังเกตเห็นได้อย่างรวดเร็ว
  • เรื่องของการวิเคราะห์ข้อมูลสำหรับนักเล่าเรื่องด้วยข้อมูลแล้ว การทำให้ข้อมูลแสดงออกมาเข้าใจง่ายเป็นศาสตร์ที่ต้องใช้หลักการคิดออกแบบ ซึ่งถ้าเราทำได้ดี Users เข้าใจข้อมูลได้เร็วก็ถือเป็นชัยชนะของคนทำงานสายนี้นะครับ