บทความนี้ผมอยากแนะนำให้ทุกคนรู้จักกับ Bento Grid Layout วิธีการออกแบบที่แบรนด์ระดับโลกอย่าง Apple เลือกใช้เพื่อจัดระเบียบข้อมูล และนำเสนอออกมาให้ดูอร่อยและย่อยง่ายเหมือนกล่องข้าวญี่ปุ่นที่ถูกจัดวางมาอย่างดีครับ
เพราะเวลาที่ใครหลายๆ คนต้องทำสไลด์นำเสนอข้อมูล เชื่อว่าต้องเคยเจอปัญหาคือ มีข้อมูลหรือ Data อยู่ในมือมหาศาล จะยัดเข้าไปในสไลด์เดียวก็ดูแน่นจนตาลาย แต่พอจะแยกทีละสไลด์ก็อาจยืดยาวจนคนดูหลับ โจทย์ที่ยากที่สุดคือ “จะยัดข้อมูลทุกอย่างให้คนดูรู้เรื่องภายในหน้าเดียวได้อย่างไร?”
ซึ่งคำตอบของเรื่องนี้ไม่ได้อยู่ที่การตัดข้อมูลทิ้ง แต่อยู่ที่วิธีการคัดเลือกและนำเสนอข้อมูลเหล่านั้นให้น่าสนใจต่างหากครับ
จากศิลปะการกิน สู่ศิลปะการจัดระเบียบข้อมูล
ชื่อของมันมาจากกล่องข้าวญี่ปุ่นอย่างเบนโตะตรงๆ เลยครับ หน้าที่คือการแบ่งส่วนอาหารแต่ละชนิดไม่ว่าจะเป็นข้าว ปลา ผักดอง ซุป จะถูกจัดวางในช่องของตัวเองอย่างเป็นระเบียบ ไม่ปนกันเละเทะ พอมองภาพรวมของมันออกมาก็จะเป็นหนึ่งมื้อที่สมบูรณ์และสวยงาม
ซึ่งที่มาที่ไปของดีไซน์ลักษณะนี้ ต้องให้เครดิต Microsoft ในยุค Windows 8 ที่เป็นผู้บุกเบิก Metro UI หรือการนำกล่องสี่เหลี่ยมมาเรียงต่อกัน แต่ด้วยความที่ยุคนั้นเทคโนโลยียังเน้นดีไซน์แบบ Flat Design มากเกินไป ภาพมันเลยออกมาขาดมิติ ดูแข็งกระด้าง ก็เลยไม่ได้รับความนิยมเท่าที่ควรครับ
ภาพจาก: iLink Digital
หรือหลักคิดที่คล้ายๆ กันอีก ก็จะเป็น Mansory Layout หรือการเรียงแบบก่ออิฐ ยกตัวอย่างให้เห็นชัดที่สุดคือเว็บไซต์ของ Pinterest ที่วางรูปภาพสลับฟันปลาตามความสูงของรูปที่แตกต่างกัน ในเชิง UX เป็น Pattern ที่ไถดูได้เพลินตา แต่มุมของการตลาด คือหาจุดโฟกัสยาก เพราะข้อมูลจะไหลลงมาเรื่อยๆ ไม่มีจุดจบ ทำให้เราไม่สามารถกำหนดได้ว่าตรงไหนคือจุดสำคัญที่สุดที่ลูกค้าต้องหยุดดูครับ
ภาพจาก: Pinterest
นี่ก็เลยเป็นจุดที่ Apple ใช้พลิกโฉมวิธีการนำเสนอข้อมูลในงาน Keynote เปิดตัวสินค้าอย่าง iPhone 12, ชิป Apple M1 และ macOS Big Sur ซึ่ง Apple เจอปัญหาใหญ่คือสินค้า 1 ตัวมีจุดขายเยอะมาก ไม่ว่าจะเป็นกล้องใหม่ ชิปที่เร็วขึ้น แบตเตอรี่ที่อึดขึ้น หน้าจอสุดล้ำ หรือระบบ 5G แล้วจะทำอย่างไรให้ทุกคนรู้สเปกทั้งหมด แบบที่ไม่ต้องมานั่งดู Keynote แบบละเอียด หรืออ่านสเปกจากข่าวต่างๆ
Apple เลยสร้าง Summary Slide ในรูปแบบนี้ขึ้นมา จับทุกฟีเจอร์มายัดใส่กล่องสี่เหลี่ยมมุมโค้ง แบบหลายขนาดวางเรียงกันให้สวยงาม สิ่งที่ Apple ทำต่างจาก Windows 8 กับ Pinterest คือใส่ลำดับความสำคัญ หรือ Visual Hierarchy ลงไปด้วย ฟีเจอร์ไหนที่เป็นตัวชูโรงก็จะกล่องใหญ่หน่อย ฟีเจอร์ไหนที่ลำดับรองลงมาก็จะเล็กลงตามลำดับ แต่ก็ยังเห็นใจความสำคัญชัดเจนจากการใช้เรื่องของ Copywriting ด้วยครับ
ผลลัพธ์ที่ได้ออกมาดีมาก เพราะมันช่วยยกระดับงานดีไซน์ให้ดูพรีเมียมขึ้นทันที จนทำให้ Summary Slide หน้านั้นกลายเป็น Snap Content ที่สื่อมวลชนต่างพร้อมใจกันยกกล้องขึ้นมาถ่าย จนทุกครั้งที่มีงานเปิดตัว iPhone รุ่นใหม่ ภาพจำแรกที่โผล่ขึ้นมาในหัว หรือภาพที่ถูกแชร์ว่อนเต็มฟีดโซเชียลมีเดีย เป็นการทำให้ลูกค้าช่วยโฆษณาให้แบบอ้อมๆ โดยที่แบรนด์ไม่ต้องจ้างการโปรโมตอะไรเพิ่มเติม
ภาพจาก: Appleinsider
หลักการออกแบบที่ดี ไม่ใช่แค่จับข้อมูลยัดลงกล่อง
ถึงแม้ Bento Grid จะดูเหมือนแค่เอาเนื้อหามาใส่ในกล่องสี่เหลี่ยมมาวางเรียงกันง่ายๆ แต่การจะทำให้สวยและสื่อสารอย่างมีศิลปะและชั้นเชิง ต้องคำนึงถึง 3 ข้อหลักตามนี้ครับ
1. ใช้ Visual Hierarchy จัดลำดับความสำคัญด้วยขนาด
กฎข้อแรกคืออย่าให้ทุกกล่องเท่ากันครับ เพราะถ้าทุกกล่องแย่งกันเด่น คนดูจะตาลายและไม่รู้จะมองตรงไหน ลองแบ่งกล่องเป็น 3 ขนาด เช่น กล่องใหญ่ไว้ใส่ Key Massege หรือ Hero Image กล่องรองลองมาไว้ใส่ฟีเจอร์เด่นๆ และกล่องเล็กสุดสำหรับใส่ข้อมูลเสริม หรือตัวเลขสถิติ เป็นต้น การเล่นกับขนาดจะช่วยบังคับสายตาลูกค้าให้มองสิ่งที่เราอยากขายก่อนเสมอครับ
2. ใช้ Variety of Content ผสมความหลากหลาย
หัวใจหลักของการทำ Bento Grid คือความหลากหลายครับ ในเซ็ตนึงไม่ควรมีแค่ข้อความหรือรูปภาพอย่างเดียว อาจมีตัวเลขตัวใหญ่ๆ โชว์ Performance และเป็นคำ Copywriting สั้นๆ การสลับรสชาติแบบนี้จะสร้างจังหวะการมอง ทำให้สมองคนดูตื่นตัวตลอดเวลาและไม่รู้สึกเบื่อครับ
3. ใช้ Consistent Spacing จัดวางระยะห่างให้เป๊ะ
สิ่งที่จะทำให้งานของคุณดีขึ้นไปอีก คือเรื่องการเว้นระยะห่างระหว่างกล่องที่ควรเท่ากันเป๊ะ รวมถึงความโค้งของมุมด้วย ก็จะทำให้งานดูคลีนและเป็นมืออาชีพมากขึ้นครับ
ตัวอย่างการใช้ Bento Grid สร้างมูลค่าให้กับงาน
Portfolio โชว์ของให้ครบ จบในหน้าเดียว
ภาพจาก: undsgn
เหมาะสำหรับคนที่ทำงานสาย Creative หรือ Agency ครับ ที่ต้องการสรุปว่าเราคือใคร ทำอะไร แล้วขายใคร ซึ่งนอกจากจะเรียงผลงานลงมาเป็นลิสต์ยาวๆ แล้ว ลองเพิ่มด้วยการหยิบผลงานเด่นๆ มาใส่ในกล่อง Bento กันดูครับ กล่องใหญ่ไว้โชว์งาน Masterpiece ที่คิดว่าเจ๋งที่สุด กล่องเล็กโชว์งานรองลงมา หรือใส่ Skill set ซึ่งวิธีนี้ทำให้ลูกค้าเห็นความเก่งของเราครบทุกมิติในหน้าเดียว ดูเป็นระเบียบและน่าจ้างงานขึ้นทันทีครับ
Product Feature เปลี่ยนข้อมูลสินค้า ให้เป็นจุดขาย
ภาพจาก: MelGeek
เป็นจุดขายที่ Apple ใช้ประจำสำหรับสินค้าที่มีรายละเอียดเยอะๆ ซึ่งการใช้ Layout แบบนี้ ไม่จำกัดว่าต้องเป็นสินค้าประเภท มือถือ แกดเจ็ต หรือสินค้าเทคโนโลยีอย่างเดียว ถ้าทำธุรกิจขายอสังหาฯ ขายเฟอร์นิเจอร์ หรือขายสินค้าอื่นๆ ก็สามารถทำได้หมด ซึ่งการใช้ Bento Grid จะช่วยเปลี่ยนฟีเจอร์หรือข้อมูลที่มีดีเทลเยอะๆ ให้กลายเป็นจุดขายที่น่าสนใจ โดยแยกหมวดหมู่ชัดเจนช่วยให้ลูกค้าตัดสินใจซื้อได้ง่ายขึ้นนั่นเองครับ
Presentation สรุปเนื้อหาให้น่าแชร์
ภาพจาก: Banani
สำหรับการทำสไลด์สรุปเนื้อหา หรือ Key Takeaway ในงานบรรยาย แทนที่จะใช้ Bullet Point ลองเปลี่ยนมาใส่กล่องที่มี Visual ประกอบดูครับ มันจะช่วยเปลี่ยน Slide ที่เต็มไปด้วยตัวหนังสือ ให้กลายเป็นหน้าที่ย่อยง่าย และที่สำคัญคือมันดูสวยจนคนฟังอยากยกมือถือขึ้นมาถ่ายรูปเก็บไว้ครับ
สรุป ไขความลับ Bento Grid Layout ศิลปะของการเสิร์ฟข้อมูลให้น่าทาน อร่อย และย่อยง่าย
สุดท้ายนี้ Bento Grid ไม่ได้เป็นแค่เทรนด์การออกแบบที่ผ่านมาแล้วผ่านไป แต่มันคือวิวัฒนาการของการจัดระเบียบข้อมูลที่น่าเบื่อและซับซ้อน ให้กลายเป็นประสบการณ์ที่ย่อยง่าย และน่าอ่าน เหมือนกับการเปลี่ยนอาหารบุฟเฟต์ที่ตักกันมั่วๆ ให้กลายเป็นชุดข้าวกล่องญี่ปุ่นที่ถูกจัดวางมาอย่างประณีต ซึ่งไม่เพียงแต่จะช่วยให้ลูกค้ารับรู้ข้อมูลได้ง่ายขึ้น แต่ยังช่วยเพิ่มมูลค่าให้แบรนด์ดูแพงและน่าจดจำขึ้นมาในทันทีครับ
AI Generated by Nano Banana Pro
ลองกลับไปสำรวจสไลด์นำเสนอ หรือเว็บไซต์ของตัวเองกันดูนะครับ ว่าวันนี้คุณกำลังเสิร์ฟข้อมูลให้ลูกค้าแบบไหน จะเลือกใส่ทุกอย่างที่อยากบอก หรือคัดสรรบางส่วน และจัดใส่กล่องที่พร้อมทาน เพราะในโลกของการตลาดที่ผู้คนมีเวลาจำกัด วิธีการนำเสนอนั้น ก็สำคัญไม่แพ้คุณภาพของสินค้าครับ
บทความที่แนะนำให้อ่านต่อ
Source Source
