เมนูแฮมเบอร์เกอร์ในการออกแบบเว็บไซต์

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

การแนะนำเมนูแฮมเบอร์เกอร์ในการออกแบบเว็บไซต์

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

เพื่อช่วยให้คุณเข้าใจเมนูแฮมเบอร์เกอร์ได้ดีขึ้น เราจะมาพูดคุยกันที่นี่:

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

เมนูแฮมเบอร์เกอร์คืออะไร?

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

ทุกอย่างเริ่มต้นในปี 1981 ที่เวิร์กสเตชันของ Xerox Star Norm Cox ผู้ออกแบบส่วนต่อประสานกราฟิกกับผู้ใช้ในยุคนั้น สร้างไอคอนเพื่อเปิดรายการองค์ประกอบที่ซ่อนอยู่ จุดประสงค์คือเพื่อมอบ โซลูชันที่ช่วยประหยัดพื้นที่สำหรับรายการตัวเลือกที่มีขนาดยาว สิ่งที่คล้ายกับคลิกขวาเมนูแนวคิดบนคอมพิวเตอร์เดสก์ท็อป แต่จนถึงปี 2009 เมนูแฮมเบอร์เกอร์ไม่ได้มีความรุ่งโรจน์มากนัก เมื่อ Facebook และเว็บไซต์อื่นๆ แนะนำอีกครั้ง เมนูแฮมเบอร์เกอร์ก็เริ่มต้นขึ้น เป็นโซลูชั่นที่เกือบจะสมบูรณ์แบบในการประหยัดพื้นที่หน้าจออันมีค่าบนอุปกรณ์พกพาที่กำลังเกิดใหม่ในขณะนั้น

แต่มันเป็น?

ข้อโต้แย้งนิรันดร์เกี่ยวกับเมนูแฮมเบอร์เกอร์

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

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

การใช้และการใช้งานทางเลือก

นอกจากกฎ "สี่องค์ประกอบ" แล้ว ยังมีคำแนะนำอื่นๆ เกี่ยวกับวิธีปรับปรุงการใช้งานเมนูแฮมเบอร์เกอร์อีกด้วย

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

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

ข้อดีและข้อเสียทั่วไปของเมนูแฮมเบอร์เกอร์ในการออกแบบเว็บไซต์

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

ข้อดี:

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

จุดด้อย:

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

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