ควรใช้ Mega-menu ตอนไหน?

Mega-menu เป็น UI ที่ออกแบบมาเพื่อแก้ปัญหาให้เว็บไซต์ที่มีเมนูยาวเกินหน้าจอ ให้สามารถจัดเรียงเมนูทั้งหมดให้แสดงผลได้ภายในหน้าเดียว โดยการแบ่งเมนูออกเป็นกลุ่มและ Column การจัด Layout แบบนี้ทำให้ User สามารถเห็นภาพรวมของเมนูทั้งหมดในเว็บไซต์ แต่การแสดงเมนูทั้งหมดในคราวเดียว อาจทำให้ User ต้องรับข้อมูลทีละมาก ๆ และอาจมีปัญหาในการค้นหาเมนูที่ต้องการได้ แล้วเราควรออกแบบโครงสร้างของ Mega-menu อย่างไร? ตอนไหนที่เราควรใช้หรือหลีกเลี่ยงการใช้ Mega-menu

จำนวนเมนูที่เหมาะสมในการออกแบบ UI คือเท่าไหร่ ?

UX Myth: Magic Number (7±2)

ตามทฤษฎีของ George Miller (1956) สมองของคนเรามีช่อง Slot สำหรับเก็บข้อมูลไว้ในความจำระยะสั้น โดยเฉลี่ย 7(±2) ช่อง เป็นเวลา 15-30 วินาที ซึ่งเราเรียกตัวเลขนี้ว่า “Magic Number”

ไอเดียเรื่องหน่วยความจำระยะสั้น (Magic Number) ถูกเผยแพร่อย่างกว้างขวาง และถูกเอามาผสมกับการออกแบบ UI จนเกิดการเข้าใจผิดว่า “จำนวนตัวเลือก, เมนู, Tap ไม่ควรเกิน 7 ตัวเลือก” เพราะถ้ามากกว่านี้คนจะจำไม่ได้ แต่จริง ๆ แล้ว Miller’s Law สามารถใช้ได้กับ working memory ของคนเท่านั้น และไม่สามารถเอามาใช้กับการอ่านได้

User เห็นเมนูได้โดยไม่ต้องจำ เพราะว่าเมนูแสดงบนหน้าจอให้เห็นตลอดเวลา ดังนั้น Miller’s Law จึงเอามาใช้กับ UI ไม่ได้ เว็บสามารถมีจำนวนเมนูเท่าไหร่ก็ได้เท่าที่จำเป็น

ตัวเลือกใน UI สามารถมีจำนวนเกิน 7 ตัวเลือกได้ – Magic Number เป็นแค่ UX Myth อย่างหนึ่ง

เมนูแบบกว้าง (Breadth) vs. เมนูแบบลึก (Depth)

Mega-menu เป็นเมนูที่มีลำดับชั้น (Hierarchical menu) เราเรียกจำนวนชั้นของเมนูเรียกว่า “Depth” และจำนวนตัวเลือกในแต่ละชั้นเรียกว่า “Breadth”

เมนูสามารถแบ่งออกเป็น 2 แบบ โดยแบ่งตามความสมดุลระหว่าง “จำนวนของเมนูหลัก” ที่เห็นได้ทันทีบน navigation กับ “จำนวนชั้นของเมนูย่อย (Hierarchical level)”

1. เมนูแบบกว้าง (Breadth)

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

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

2. เมนูแบบลึก (Depth)

คือ Navigation Bar ที่จัดกลุ่มเมนูเรียบร้อยแล้ว ทำให้มีจำนวนเมนูหลักน้อย แต่มีเมนูย่อยมีหลายชั้น

• ข้อดี:  จำนวนเมนูบน Navigation Bar น้อย ทำให้ User ไม่ต้องรับข้อมูลเยอะเกินไป และ Design ดูคลีนกว่า
• ข้อเสีย: User ไม่เห็นเมนูทั้งหมดในคราวเดียว ต้องเอาเม้าส์ไปชี้ที่เมนูหลักก่อนถึงจะเห็นเมนูย่อย

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

ก่อนจะไปดูเฉลยในหัวข้อถัดไป ลองเดากันดูว่าระหว่าง เมนูแบบกว้าง (Breadth) กับ แมนูแบบลึก (Depth) แบบไหน UX ดีกว่ากัน?

งานวิจัยเรื่อง User Performance และ Hypertext Link

Michael L. Bernard เผยแพร่งานวิจัยเรื่อง Examining the effects of hypertext shape on user performance (2002)

ผู้ร่วมการทดลอง (อายุระหว่าง 18-52 ปี) ได้รับมอบหมายให้ค้นหาเมนูที่กำหนดจากเมนูทั้งหมดประมาณ 300 เมนูภายใน 5 นาที โดยแต่ละคนจะได้ตัวอย่างเมนูแบบสุ่ม (จากทั้งหมด 6 แบบ) ซึ่งแต่ละแบบมีจำนวนชั้นของเมนูต่างกัน

เทียบกันแล้ว ประสิทธิภาพการค้นหาและระยะเวลาการค้นหาของ โครงสร้างแบบ (12 x 27) และ (11 x 5 x 5) ดีกว่าการจัดเรียงเมนูรูปแบบอื่น ๆ ยกเว้น (6 x 2 x 2 x 12)

ผลการวิจัย พบว่า “เมนูแบบกว้าง (Breadth)” ให้ประสิทธิภาพดีกว่า “เมนูแบบลึก (Depth)”

Visibility เป็นสาเหตุที่ทำให้เมนูแบบกว้าง (Breadth) มี Interaction cost ต่ำกว่า User สามารถเข้าถึงข้อมูลที่มีโครงสร้างแนวกว้างง่ายและเร็วกว่า เพราะไม่ต้องเดาว่าอะไรอยู่ตรงไหน จึงไม่หลงทาง

For example, Snowberry, et al. (1983), who examined four structures that consisted of64 menu item choices on a single level (64); four menu items per level at a depth of three levels (4 x 4 x 4); eight menu items per level at a depth of two levels (8 x 8); and binary menu items at a depth of six levels (2 x 2 x 2 x 2 x 2 x 2), found that as the degree of hypertext depth increased from one to six levels, the rate of user errors rose from 4.0% to 34%. Likewise, Kiger (1984) found that increasing depth from two to six levels increased its user error rate from 2.2% to 12.5%

Michael L. Bernard

จำนวนชั้นเมนูมีผลกับ Error Rate เทียบกันระว่างเมนูที่มีชั้นเดียว กับ 6 ชั้น Error rate เพิ่มจาก 4.0% ไปถึง 34%

อย่างไรก็ตาม เมนูแบบกว้าง (Breadth) ก็ไม่ได้ดีกว่าเสมอไป ถ้าเราออกแบบให้เมนูกว้าง “กว้างเกินไป” ก็จะทำให้ UX แย่ลงได้เหมือนกัน

ตอนไหนที่ควรหลีกเลี่ยงการใช้ Mega-menu

• มีจำนวนเมนูน้อยเกินไป ควรใช้เมนูธรรมดา หรือ Dropdown แทน
• ตอนที่ Homepage เป็น Link portal
• ตอนที่ต้องการ Funnel ให้ visitor ไปที่หน้าใดหน้าหนึ่ง: ควรใช้ Banner หรือเพิ่ม Section ในหน้าเว็บตรง ๆ แทนที่จะเพิ่มในเมนู
• ในเว็บมือถือ (mobile site)

วิธีออกแบบ Mega-menu

ถ้าเราหลีกเลี่ยงไปใช้เมนูแบบกว้างไม่ได้ เพราะว่าเว็บไซต์เรามีจำนวนเมนูเยอะมาก ๆ เราจะทำยังไงได้บ้าง?

ออกแบบโครงสร้างของเมนูก่อน:

อย่าใช้ Mega-menu โดยไม่ลองจัดระเบียบโครงสร้างเมนูก่อน ถ้าเป็นไปได้ควรแสดงเมนูทั้งหมดให้ User เห็นได้ทันที แต่ถ้าทำไม่ได้ ควรเรียงลำดับความสำคัญ และตัดเมนูที่ไม่ใช้ออก เมนูบางอย่างสามารถทำเป็น subpage และไม่จำเป็นต้องเอามาใส่ใน Main Navigation

• โครงสร้าง Broad เกินไปไม่ดี: อย่าให้มีเมนูหลักเยอะเกินไป ทำให้ User แสกนยาก
• โครงสร้าง Deep เกินไปไม่ดี: อย่าให้มีชั้นของเมนูเยอะเกินไป เพราะมีโอกาสมากกว่าที่ User จะหลงทาง
• ข้อมูลจาก Analytic สามารถเอามาวิเคราะห์ได้ว่าเมนูไหนเป็นเมนูที่ User ต้องการใช้

จัดกลุ่ม ตั้งชื่อกลุ่มเมนู และเรียงลำดับ:

เวลาที่ User กำลังหาอะไร User จะมีคำ ๆ นั้นอยู่ในหัว (Mental model) และพยายามมองหาตามนั้น เราควรตั้งชื่อ และจัดกลุ่มเมนูให้เป็นไปตามความคาดหวังของ User

• เรียงลำดับเมนูตามความสำคัญ หรือตามตัวอักษร โดยเรียงจากบนลงล่าง และซ้ายไปขวา
• มี UX Tool หลายตัวที่สามารถเอามาใช้ในการตั้งชื่อและจัดกลุ่มเมนูได้

ดีไซน์กลุ่มเมนูต้องแตกต่างจาก link ชัดเจน สามารถเอารูปภาพมาช่วยได้

อย่าให้ความสูงของ Mega-menu เกินหน้าจอ ไม่ควรให้ User Scroll

อย่าแสดงเมนูเร็วเกินไป และอย่าซ่อนเมนูตอนที่ User ไม่ตั้งใจ

NN/g ให้คำแนะนำว่า อย่าแสดง Menu ตอนที่ User เอาเม้าส์ไปชี้เร็วเกินไป ควรรอให้ครบ 0.5 วินาที ก่อนถึงจะโชว์เมนู เพื่อแยกว่า User ต้องการคลิกที่เมนูจริง ๆ หรือว่าเป็น User Error และอย่าเพิ่งปิดเมนู ถ้า pointer ไม่ได้อยู่นอกบริเวณเกิน 0.5 วินาที

เมนูสำคัญวางไว้หน้าหลัง ไม่สำคัญเอาไว้ตรงกลาง

User จะให้ความสนใจกับไอเทมที่อยู่ลำดับเเรกกับลำดับสุดท้ายมากที่สุด นักจิตวิทยาเรียกปรากฎการณ์นี้ว่า “Serial position effect” (Primacy and Recency Principle)

ดังนั้น เราควรให้เมนูที่มีความสำคัญวางอยู่ในลำดับแรก ๆ หรือลำดับสุดท้ายของ และให้เมนูอื่น ๆ อยู่ตรงกลางแทน

IA Tool

เว็บไซต์หลายเว็บจำเป็นต้องเมีเมนูจำนวนมาก ทำให้หลีกเลี่ยงการจัดกลุ่มเมนูไม่ได้ การนำเครื่องมือ UX ด้าน Information Architecture (IA) มาใช้ จะช่วยลดปัญหาที่เกิดจาก Depth Menu ได้

Card Sorting เป็น IA Tool อย่างหนึ่งที่จะช่วยให้ User เข้ามีส่วนรวมในการจัดกลุ่ม จัดลำดับ และตั้งชื่อเมนู เมื่อเมนูเป็นไปตามความคาดหวังของ User ก็จะทำให้ User ไม่หลงทางและใช้เมนูได้มีประสิทธิภาพมากขึ้น

*บทความนี้ยังไม่ได้พูดถึงการใช้ Mega-menu ใน mobile รอติดตามได้ในบทความถัดไปนะคะ

Takeaway

• ทฤษฎี (7±2) ที่นำมาใช้กับ UI ไม่ใช่เรื่องจริง (UX Myth) จำนวนเมนูไม่ค่อยมีผลกับประสิทธิภาพการค้นหา โครงสร้างของเมนูต่างหากที่มีผล
• โครงสร้างเมนูแบบกว้าง (Breadth) มีประสิทธิภาพดีกว่า เมนูแบบลึก (Depth) เพราะมี Visibility ชัดเจนกว่า ทำให้ User ไม่ต้องเดาว่ามีข้อมูลอะไรอยู่ตรงไหน
• เว็บไซต์ที่จำเป็นต้องมีจำนวนเมนูเยอะ และหลีกเลี่ยงการใช้โครงสร้างแบบ Depth ไม่ได้ สามารถเอาเครื่องมือด้าน IA อย่าง Card Sorting มาช่วยจัดเรียงเมนูให้เป็นไปตามความคาดหวังของ User เพื่อให้ UX ดีขึ้น

• References
• https://www.researchgate.net/profile/Michael_Bernard2/publication/246126441_Examining_the_effects_of_hypertext_shape_on_user_performance/links/546b69da0cf20dedafd52f50.pdf
• https://www.hcibook.com/e3/online/menu-breadth/
• https://www.nngroup.com/articles/mega-menus-work-well/
• https://neilpatel.com/blog/common-website-navigation-mistakes

---

---