บทความทบทวนงานวิจัยของ Wagemans และคณะ (2012) ในวารสาร Psychological Bulletin ยกตัวอย่างหลักการจัดกลุ่มแบบดั้งเดิม 7 ข้อและแบบที่ค้นพบภายหลัง 4 ข้อ
ผู้วิจัยบันทึกว่ากฎที่พิสูจน์ได้กับภาพง่าย ๆ มักมีข้อยกเว้นเมื่อองค์ประกอบในภาพเพิ่มขึ้น เมนูที่ใช้ทั้งสี กรอบ และระยะห่างพร้อมกันจึงต้องให้ทุกสัญญาณชี้ไปทางเดียวกัน
ผู้ใช้เห็นเพียงภาพ ขอบเขตของพื้นที่กดจึงต้องมองเห็นได้จากการจัดกลุ่มในภาพเอง ตัวอย่างในเอกสารของ LINE ใช้ภาพขนาด 2500 x 1686 พิกเซลแบ่งสามพื้นที่
Gestalt Principles ตามบทความทบทวนงานวิจัย 100 ปีใน Psychological Bulletin หลักการจัดกลุ่ม 11 ข้อ ภาพกับพื้น และวิธีใช้กับเมนูร้าน ป้ายราคา และริชเมนูของ LINE OA
เมนู ป้ายราคา และเมนูในแชตของร้านเล็กเป็นงานที่มีข้อมูลหลายสิบรายการในพื้นที่จำกัด ลูกค้าต้องหาของที่ต้องการให้เจอภายในไม่กี่วินาที ขณะยืนหน้าตู้หรือถือโทรศัพท์มือเดียว
บทนี้อธิบายหลักการ Gestalt จากบทความทบทวนงานวิจัยที่เปิดอ่านได้ฉบับเต็ม แล้วแปลงแต่ละหลักเป็นคำถามตรวจงานที่เจ้าของร้านใช้ได้เองกับเมนู ป้ายราคา และริชเมนูของ LINE OA โดยไม่ต้องมีพื้นฐานการออกแบบ
Gestalt Principles คือชุดหลักที่อธิบายว่าระบบการมองเห็นจัดสิ่งที่เห็นเป็นกลุ่มและแยกวัตถุออกจากพื้นหลังอย่างไร แนวคิดนี้เริ่มจากนักจิตวิทยากลุ่มเบอร์ลินต้นศตวรรษที่ 20
Gestalt Principles คือหลักการรับรู้ทางสายตาที่อธิบายว่าคนเห็นองค์ประกอบหลายชิ้นเป็นกลุ่มเดียวกันเมื่อใด เช่น เมื่ออยู่ใกล้กัน มีลักษณะเหมือนกัน หรืออยู่ในกรอบเดียวกัน บทความ A Century of Gestalt Psychology in Visual Perception ของ Johan Wagemans และคณะ ในวารสาร Psychological Bulletin ปี 2012 เล่ม 138 ฉบับที่ 6 หน้า 1172-1217 ระบุว่าจุดเริ่มของจิตวิทยา Gestalt คือบทความเรื่องการเห็นการเคลื่อนไหวแบบ phi ของ Max Wertheimer ในปี 1912 นักออกแบบนำหลักเหล่านี้มาใช้ตัดสินว่าจะวางข้อมูลชิ้นใดไว้ด้วยกัน เพื่อให้ผู้ชมเห็นกลุ่มข้อมูลตามที่ตั้งใจโดยไม่ต้องอ่านทุกบรรทัด
บทความทบทวนชิ้นนี้เขียนโดยนักวิจัยด้านการมองเห็นหลายสถาบัน ทบทวนทั้งการทดลองดั้งเดิมและงานวิจัยสมัยใหม่ รวมถึงกลไกในระบบประสาท จึงเป็นแหล่งที่บอกได้ว่าหลักข้อใดมีหลักฐานรองรับ และข้อใดยังมีข้อถกเถียง
บทความทบทวนของ Wagemans และคณะแบ่งหลักการจัดกลุ่มเป็นสองชุด ชุดแรกมาจากงานยุคแรกของกลุ่มเบอร์ลิน ชุดที่สองค้นพบภายหลัง
บทความทบทวนยกตัวอย่างหลักการจัดกลุ่มแบบดั้งเดิม 7 ข้อ ได้แก่ ความใกล้ ความคล้าย การเคลื่อนไปด้วยกัน ความต่อเนื่อง การปิด สมมาตร และความขนาน และหลักที่ค้นพบภายหลัง 4 ข้อ ได้แก่ การเปลี่ยนพร้อมกัน พื้นที่ร่วม การเชื่อมต่อกัน และความต่อเนื่องของพื้นผิวที่เหมือนกัน จำนวนข้อที่หนังสือออกแบบแต่ละเล่มยกมาจึงไม่เท่ากัน ขึ้นกับว่ารวมหลักชุดใหม่หรือไม่ สำหรับงานของร้านเล็ก หลักที่ใช้บ่อยที่สุดมีสามข้อ คือความใกล้ ความคล้าย และพื้นที่ร่วม
| หลักการ | ชุด | ความหมายตามบทความทบทวน | ใช้กับงานของร้าน |
|---|---|---|---|
| ความใกล้ (Proximity) | ดั้งเดิม | สิ่งที่อยู่ใกล้กันถูกเห็นเป็นกลุ่ม | เว้นระยะระหว่างหมวดเมนูให้กว้างกว่าระยะระหว่างรายการ |
| ความคล้าย (Similarity) | ดั้งเดิม | สิ่งที่หน้าตาคล้ายกันถูกเห็นเป็นกลุ่ม | ใช้สีหรือไอคอนเดียวกันกับรายการประเภทเดียวกัน |
| การเคลื่อนไปด้วยกัน (Common Fate) | ดั้งเดิม | สิ่งที่เคลื่อนไหวพร้อมกันถูกเห็นเป็นหน่วยเดียว | ภาพเคลื่อนไหวบนจอเมนูดิจิทัล |
| ความต่อเนื่อง (Good Continuation) | ดั้งเดิม | สายตาตามเส้นที่ต่อเนื่องราบรื่น | เส้นนำสายตาจากชื่อเมนูไปยังราคา |
| การปิด (Closure) | ดั้งเดิม | สายตาเติมรูปทรงที่ขาดให้ครบ | โลโก้หรือกรอบที่ไม่ต้องลากเส้นครบทุกด้าน |
| สมมาตรและความขนาน | ดั้งเดิม | รูปทรงสมมาตรหรือเส้นขนานถูกเห็นเป็นกลุ่ม | จัดคอลัมน์ราคาให้ขนานกัน |
| พื้นที่ร่วม (Common Region) | ใหม่ | สิ่งที่อยู่ในขอบเขตเดียวกันถูกเห็นเป็นกลุ่ม (Palmer, 1992) | กรอบหรือพื้นสีรองรับเมนูชุด |
| การเชื่อมต่อกัน (Element Connectedness) | ใหม่ | สิ่งที่มีขอบติดกันถูกเห็นเป็นกลุ่ม (Palmer & Rock, 1994) | ปุ่มที่ติดกันในแถบเดียว |
| การเปลี่ยนพร้อมกัน (Synchrony) | ใหม่ | สิ่งที่เปลี่ยนในเวลาเดียวกันถูกเห็นเป็นกลุ่ม | ไฟป้ายที่กะพริบพร้อมกัน |
ตารางรวมสมมาตรกับความขนานไว้ในแถวเดียว และไม่ได้แยกแถวให้ความต่อเนื่องของพื้นผิวที่เหมือนกัน (Uniform Connectedness) ซึ่งบทความทบทวนอธิบายว่าเป็นกระบวนการที่ระบบการมองเห็นแบ่งภาพเป็นพื้นที่ที่มีสี ความสว่าง หรือพื้นผิวเหมือนกันก่อนจัดกลุ่มขั้นต่อไป
การแยกภาพกับพื้นคือการที่ระบบการมองเห็นตัดสินว่าส่วนใดเป็นวัตถุและส่วนใดเป็นพื้นหลัง งานนี้เกิดก่อนการอ่านข้อความเสมอ ถ้าผู้ชมแยกไม่ออกว่าอะไรคือวัตถุ ข้อความบนวัตถุนั้นก็ถูกอ่านช้าลง
Figure-Ground ใช้ตัดสินว่าข้อความหรือภาพสินค้าจะเด่นออกมาจากพื้นหรือจมหายไป บทความทบทวนของ Wagemans และคณะรวบรวมปัจจัยที่ทำให้พื้นที่หนึ่งถูกเห็นเป็นวัตถุ ทั้งปัจจัยดั้งเดิมอย่างการถูกล้อมรอบและความนูนของรูปทรง และปัจจัยที่ค้นพบภายหลังอย่างพื้นที่ด้านล่าง ซึ่ง Vecera, Vogel และ Woodman (2002) พบว่าเมื่อแบ่งภาพสี่เหลี่ยมเป็นสองส่วนด้วยเส้นแนวนอนที่หยักขึ้นลง ส่วนที่อยู่ใต้เส้นมีโอกาสถูกเห็นเป็นวัตถุมากกว่า สำหรับเมนูติดผนังที่มีภาพอาหารเต็มพื้นหลัง ข้อนี้แปลว่าข้อความต้องมีพื้นรองรับของตัวเอง เช่น แถบสีทึบ ไม่ใช่วางตัวอักษรทับภาพที่มีรายละเอียดมาก
บทความทบทวนระบุด้วยว่าประสบการณ์เดิมและความสนใจของผู้ชมมีผลต่อการแยกภาพกับพื้น ลูกค้าที่คุ้นกับเมนูแบบหนึ่งจึงหาข้อมูลในเมนูแบบเดิมได้เร็วกว่า
บทความทบทวนของ Wagemans และคณะบันทึกปัญหาที่นักวิจัยยุคแรกเจอ คือกฎที่ได้จากการทดลองภาพง่าย ๆ มักถูกทำลายเมื่อขยายเงื่อนไขเพียงเล็กน้อย และในภาพที่ซับซ้อนขึ้น ปัจจัยต่าง ๆ มีปฏิสัมพันธ์กันแบบคาดเดาไม่ได้
ใช้ได้ แต่ทุกข้อต้องบอกกลุ่มเดียวกัน ตัวอย่างที่ขัดกันบ่อยในเมนูคือ รายการเครื่องดื่มกับของหวานวางใกล้กันในกรอบเดียว แต่เครื่องดื่มบางรายการใช้สีเดียวกับของหวาน ความใกล้และพื้นที่ร่วมบอกว่าเป็นกลุ่มเดียว ความคล้ายของสีบอกอีกแบบ ลูกค้าจึงอ่านโครงสร้างเมนูไม่ออก บทความทบทวนชี้ว่าในการทดลองจุดเรียงเป็นตาราง เมื่อมีหลายทิศทางให้จัดกลุ่มด้วยความใกล้ ผลขึ้นกับระยะห่างสัมพัทธ์เพียงอย่างเดียว ระยะห่างจึงเป็นเครื่องมือที่คุมได้ง่ายที่สุดเมื่อต้องการให้กลุ่มชัด
เมนูร้านเป็นงานที่ใช้หลักการจัดกลุ่มครบทุกข้อในแผ่นเดียว ลูกค้าต้องหาหมวดก่อน แล้วหารายการ แล้วจึงดูราคา ลำดับการหานี้ทำงานได้ดีเมื่อโครงสร้างกลุ่มชัดตั้งแต่แรกเห็น
เริ่มจากระยะห่าง ก่อนเลือกสีหรือฟอนต์ ระยะระหว่างหมวดควรกว้างกว่าระยะระหว่างรายการในหมวดอย่างเห็นได้ชัด ตามหลักความใกล้ แล้วจึงใช้กรอบหรือพื้นสีรองรับหมวดที่ต้องการให้เด่น ตามหลักพื้นที่ร่วม ขั้นสุดท้ายจึงใช้สีหรือไอคอนกำกับรายการประเภทเดียวกัน เช่น เมนูเผ็ดหรือเมนูแนะนำ ตามหลักความคล้าย การเรียงลำดับนี้ทำให้การตัดสินใจเรื่องสีเหลือน้อยลง เพราะโครงสร้างกลุ่มชัดแล้วจากระยะห่าง
ระยะห่างที่ใช้ได้จริงควรเลือกจากขั้นที่กำหนดไว้ล่วงหน้า วิธีตั้งขั้นระยะห่างแบบที่ระบบออกแบบของหน่วยงานรัฐใช้ อธิบายไว้ในบท หลักการออกแบบกราฟิก 5 ข้อ คืออะไร เขียนเป็น Design Tokens ส่วนเมนูที่ต้องสั่งพิมพ์เป็นแผ่นหรือเป็นเล่ม มีเรื่องกระดาษและโรงพิมพ์ในบท ออกแบบสื่อสิ่งพิมพ์ เลือกกระดาษและโรงพิมพ์ตามเกณฑ์ฉลากเขียว
ป้ายราคาบนชั้นวางใช้หลักเดียวกันในขนาดเล็กลง ราคาควรอยู่ในกรอบเดียวกับชื่อสินค้า และป้ายโปรโมชันควรต่างจากป้ายราคาปกติทั้งสีและรูปทรง เพื่อให้หลักความคล้ายแยกสองกลุ่มออกจากกัน
ริชเมนูคือเมนูที่แสดงด้านล่างห้องแชตของบัญชี LINE Official Account ตามเอกสารภาพรวมริชเมนูของ LINE Developers ริชเมนูประกอบด้วยสามส่วน คือภาพเมนูหนึ่งภาพที่เป็นไฟล์ JPEG หรือ PNG พื้นที่กดที่แบ่งเป็นรายการเมนู และแถบแชตที่ใช้เปิดปิดเมนู เอกสารระบุด้วยว่าริชเมนูไม่แสดงบน LINE สำหรับคอมพิวเตอร์ทั้ง macOS และ Windows
เพราะพื้นที่กดของริชเมนูมองไม่เห็นด้วยตาเปล่า ผู้ใช้เห็นเพียงภาพหนึ่งภาพ ส่วนขอบเขตของแต่ละปุ่มถูกกำหนดแยกด้วยพิกัดในระบบ ตัวอย่างในคู่มือการใช้ริชเมนูของ LINE ใช้ภาพขนาด 2500 x 1686 พิกเซล แบ่งเป็นพื้นที่ A กว้าง 1666 พิกเซลเต็มความสูง และพื้นที่ B กับ C ขนาด 834 x 843 พิกเซลซ้อนกันทางขวา ถ้าภาพไม่ได้แสดงเส้นแบ่งหรือพื้นสีตรงกับพิกัดนี้ ผู้ใช้จะกดผิดปุ่ม หลักพื้นที่ร่วมกับการเชื่อมต่อกันจึงเป็นเครื่องมือหลักของการออกแบบภาพริชเมนู
ช่องทางตั้งค่าริชเมนูมีสองทาง คือ LINE Official Account Manager ที่มีแม่แบบการแบ่งพื้นที่ให้เลือกและแสดงสถิติการแสดงผลกับอัตราการกด และ Messaging API ที่ปรับแต่งได้มากกว่า เอกสารระบุว่าริชเมนูที่สร้างจากเครื่องมือหนึ่งแก้ไขด้วยอีกเครื่องมือหนึ่งไม่ได้ ร้านที่เพิ่งเริ่มจึงควรเลือกเครื่องมือตั้งแต่แรก
หลักการในบทนี้แปลงเป็นคำถามตรวจงานห้าข้อ ใช้ได้กับเมนูกระดาษ ป้ายราคา และภาพริชเมนู
การวางภาพสินค้าให้มีพื้นที่ว่างสำหรับข้อความอธิบายไว้ในบท Rule of Thirds คืออะไร องค์ประกอบภาพตามงานวิจัยการมองจริง และถ้าเมนูหรือป้ายต้องใช้โลโก้ร้านร่วมด้วย บท หลักการออกแบบโลโก้ ตรวจให้จดเครื่องหมายการค้าได้ก่อนอนุมัติ อธิบายการตรวจโลโก้ก่อนนำไปติดป้ายหรือพิมพ์เมนู
Gestalt Principles อธิบายว่าสายตาจัดกลุ่มสิ่งที่เห็นอย่างไร บทความทบทวนงานวิจัยของ Wagemans และคณะรวบรวมหลักการจัดกลุ่มดั้งเดิม 7 ข้อ หลักที่ค้นพบภายหลัง 4 ข้อ และปัจจัยที่ทำให้ส่วนหนึ่งของภาพถูกเห็นเป็นวัตถุ หลักเหล่านี้แข่งกันเองในภาพที่ซับซ้อน ร้านเล็กจึงควรเริ่มจากระยะห่าง แล้วใช้กรอบและสีให้บอกกลุ่มเดียวกัน ริชเมนูของ LINE OA ต้องใช้หลักพื้นที่ร่วมมากเป็นพิเศษ เพราะผู้ใช้เห็นเพียงภาพ ส่วนพื้นที่กดถูกกำหนดแยกในระบบ
เอกสารภาพรวมของ LINE ไม่ได้กำหนดจำนวนช่องที่เหมาะสม LINE Official Account Manager มีแม่แบบการแบ่งพื้นที่ให้เลือก เกณฑ์ที่ใช้ได้คือจำนวนช่องที่ผู้ใช้แยกออกได้ทันทีบนจอโทรศัพท์ ช่องที่เล็กเกินไปทำให้กดผิดง่าย
บทความทบทวนของ Wagemans และคณะปี 2012 ระบุว่าจิตวิทยา Gestalt ยังมีความสำคัญต่อจิตวิทยาสมัยใหม่ และงานวิจัยปัจจุบันยังศึกษาหลักการจัดกลุ่มกับการแยกภาพกับพื้นต่อเนื่อง รวมถึงกลไกในระบบประสาทที่เกี่ยวข้อง
หลักการปิดอธิบายว่าสายตาเติมรูปทรงที่ขาดให้ครบ โลโก้บางแบบจึงเว้นเส้นบางส่วนไว้โดยผู้ชมยังเห็นรูปทรงเต็ม ข้อควรระวังคือช่องที่เว้นต้องไม่กว้างจนสายตาเติมไม่ได้เมื่อย่อโลโก้ให้เล็ก
ตัดข้อมูลที่ไม่ได้อยู่ในกลุ่มใดออกก่อน ข้อมูลที่เหลือควรรวมเป็นกลุ่มให้น้อยที่สุด และแต่ละกลุ่มแยกด้วยระยะห่างหรือพื้นสีที่เห็นชัดจากระยะที่ลูกค้าเดินผ่าน
ไม่จำเป็น หลักการจัดกลุ่มขึ้นกับการวางระยะห่าง กรอบ และสี ซึ่งทำได้ในโปรแกรมทำภาพสำเร็จรูปทั่วไป สิ่งที่ช่วยได้มากกว่าโปรแกรมคือการกำหนดขั้นระยะห่างสองถึงสามขั้นไว้ก่อนเริ่มงาน
ให้ PHYGITAL AGENCY ช่วยต่อยอดเรื่องนี้สู่ผลลัพธ์จริง
ให้ PHYGITAL AGENCY ออกแบบริชเมนูและตั้งคำตอบอัตโนมัติให้ทุกช่องของ LINE OA ร้านคุณ
WRITTEN BY
CHAIRMAN OF PHYGITAL AGENCY
ประธานกรรมการบริษัท ฟิจิทัล เอเจนซี จำกัด มีประสบการณ์ดูแลการตลาดที่ผสานโลกจริงและโลกออนไลน์เข้าด้วยกัน ตลอดจนเป็นที่ปรึกษาในการวินิจฉัยธุรกิจ อีกทั้งยังเคยทำงานในสายวิดีโอโปรดักชั่นและภาพยนตร์ไทยอีกด้วย
