เวลาที่ต้องทำสไลด์พรีเซนต์งาน เรารู้ได้อย่างไรคะว่าควรที่จะวางอะไรไว้ตรงไหน ? หน้าสไลด์ว่างเปล่าขาวโพลนหนึ่งหน้าคงต้องเคยสร้างความหนักใจให้กับคนทำสไลด์ไม่มากก็น้อย ความจริงแล้วในการออกแบบ Layout ไม่มีผิดถูกนะคะ ขึ้นอยู่กับว่าทำแล้วเข้าใจง่ายไหม สื่อสารเข้าใจหรือเปล่า แต่ถ้าใครอยากลงลึกถึงหลักการออกแบบ Layout ด้วยเทคโนโลยี Heat Map Analysis ที่จ๊าบมาก ๆ เพื่อเอาไว้เป็นไอเดียในการออกแบบสไลด์ครั้งต่อไป บทความนี้มีไอเดียดี ๆ อีกหนึ่งกรุบมาฝากกัน

Heat Map Analysis คืออะไร 

เคยดูหนังแอคชั่นที่เวลาเขาต้องต่อสู้กันในที่มืด แล้วทุกคนต้องใส่แว่นจับความร้อนเพื่อหาเป้าหมาย เพราะมนุษย์ปล่อยความร้อนออกมาสูงกว่าวัตถุอื่น ๆ ไหมคะ ? Heat Map Analysis ก็ใช้หลักการคล้าย ๆ กันเลย คือตรวจจับความร้อน แต่เปลี่ยนจากฉากต่อสู้เลือดสาด มาเป็นหน้าเว็บไซต์เเทน

Cr.hotjar 

ซึ่งเจ้า Heat Map Analysis ก็เป็นตัวเก็บข้อมูลพฤติกรรมของผู้ใช้งานคะว่า ผู้ใช้งานเขาเข้ามาทำอะไรบ้างบนเว็บไซต์ของเรา มีประสบการณ์การใช้งานอย่างไร คลิกตรงไหนเยอะ-ไม่คลิกเลย เลื่อนอ่านถึงตรงไหนของหน้าเว็บไซต์​มากที่สุด โดยเเทนด้วยสี หากบริเวณไหนคนสนใจมากก็จะแทนด้วยสีโทนร้อน บริเวณไหนที่คนสนใจน้อยก็จะถูกแทนที่ด้วยสีโทนเย็น โดยเรียงระดับจากน้อยไปมาก ดังนี้

• สีเทา (Gray) 0 – 2.5%
• สีน้ำเงิน (Blue) 2.5 – 12.5%
• สีน้ำเงินอมเขียว (Teal) 12.5 – 30%
• สีเขียว (Green) 30 – 50%
• สีเหลือง (Yellow) 50 – 70%
• สีส้ม (Orange) 70 – 90%
• สีแดง (Red) 90 – 100%

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

1. Scroll Maps การเก็บข้อมูลผ่านการ Scroll เลื่อนหน้าจอ โดยจะแสดงออกมาเป็นเฉดสีทั้งหน้าจอ 

2. Move Maps การเก็บข้อมูลผ่านการเคลื่อนไหวของมาส์เคอร์เซอร์ โดยจะแสดงผลลัพธ์ออกมาเป็นจุดวงกลมกระจายไปตามหน้าจอ 

3. Click Maps การเก็บข้อมูลการคลิกหรือ Tab เอานิ้วแตะจอ บนหน้าเว็บไซต์ โดยจะแสดงผลลัพธ์ออกมาเป็นจุดวงกลมกระจายเหมือน Move Maps

4. Eye-tracking Maps การเก็บข้อมูลผ่านการมอง (ซึ่งจะสะท้อนจากสายตาของผู้ใช้งาน) โดยจะแสดงผลลัพธ์ออกมาเป็นจุดวงกลมกระจายไปตามหน้าจอเหมือน Click Maps 

ตัวอย่างการใช้ Heat Map Analysis ในการออกแบบ 

Cr.konversionskraft

เราจะเห็นได้ว่าในหน้า Landing Page นี้ ผู้ใช้งานอ่านข้อความทางด้านซ้าย ซึ่งเป็นเรื่องที่ดี แต่จุดที่ผู้ใช้งานให้ความสนใจมากที่สุดคือ ตำแหน่งหน้าเด็กผู้หญิง และตรงป้ายลดราคา (เพราะมีสีแดงเข้มมาก ๆ ) แต่กลับไม่กดคลิกที่ปุ่ม Call-to-Action มุมล่างขวาเท่าที่ควร 

Cr.konversionskraft

เมื่อเข้าใจ Heat Map Analysis นี้ เราจะเห็นได้ว่าปุ่ม Call-to-Action ต้องได้รับการปรับปรุงหรือย้ายไปยังตำแหน่งที่มีสีแดงเข้ม เพื่อรองรับตำแหน่งที่ผู้คนคลิกได้ดีขึ้น เป็นต้น

ข้อดีของการออกแบบด้วยการใช้หลัก Heat Map Analysis อาจเป็นไอเดียที่ดีในการออกแบบสไลด์สำหรับคนที่อยากลองทำอะไรใหม่ ๆ ดูบ้าง เพื่อที่ว่าเวลาเราออกแบบงาน เราจะได้จัดเรียงลำดับความสำคัญของเนื้อหาให้ถูกจุดสนใจของคนฟัง คนฟังจะได้ไม่พลาดส่วนสำคัญไป นำไปสู่การได้รับฟีดแบคในเชิงบวกมากยิ่งขึ้น ซึ่งปกติแล้วการใช้งานเครื่องมือ Heat Map Analysis สามารถใช้งานได้ผ่าน Web Analytics Tools ต่าง ๆ ซึ่งเสียตังค์ค่ะ แต่ในบทความนี้เราจะนำหลักการออกแบบโดยใช้หลักการ Eye-Tracking Map มาฝากกันฟรี ๆ เลย 

Z FLOW

การออกแบบตามหลัก Heat Map Analysis ด้วย Eye-Tracking Map แบบแรกคือ Z Pattern การมองจากซ้ายไปขวาและจากบนลงล่าง โดยเริ่มที่มุมซ้ายมือด้านบน แล้วจบลงที่มุมขวาด้านล่างตามตัวเลขด้านบน โดยให้เราวางข้อมูลสำคัญ ๆ ตามจุดทั้ง 4 ได้เลย 

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

F FLOW

การออกแบบตามหลัก Heat Map Analysis ด้วย Eye-Tracking Map แบบที่สองคือ F Pattern การออกแบบที่เริ่มจากด้านบนซ้ายไปขวาตามจุด หากมีข้อมูลสำคัญที่ต้องการให้คนฟังเห็นหรือให้ความสนใจ ควรวางไว้ทางด้านบนซ้าย เพื่อให้แน่ใจว่าข้อมูลนั้นจะได้รับความสนใจเพียงพอ

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

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

มีไอเดียออกแบบสไลด์แล้ว อยากลองทำสไลด์จริง ๆ ต้องนี่เลย คอร์สเรียนออนไลน์ ‘Shortcut PowerPoint​ Design’ ที่ได้รับการีวิวอย่างล้นหลามว่าดีจริง เรียนแล้วนำไปใช้ได้จริง ๆ เพราะอัดแน่นด้วยเทคนิคการออกแบบงาน Presentation ที่หาที่ไหนไม่ได้อีกแล้ว ไม่มีพื้นฐานก็เรียนได้ เมื่อเรียนจบแล้วคุณจะไม่ใช่มือใหม่อีกต่อไป เพราะคอร์สนี้จะทำให้คุณกลายเป็นมือโปรด้านการออกแบบ Presentation ! 



ที่มาข้อมูล

• https://www.rainmaker.in.th/heatmap-visitor-recording-tools/
• https://teerayut-h.medium.com/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%A7%E0%B8%B2%E0%B8%87-layout-%E0%B9%81%E0%B8%9A%E0%B8%9A-z-%E0%B9%81%E0%B8%A5%E0%B8%B0-f-60d7e7c0bb07
• https://anga.co.th/blog/what-is-heat-map-analysis/
• https://blockfint.com/blog/eye-tracking-and-visual-hierarchy