แนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบเมนูหลายระดับ

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

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

เคล็ดลับการออกแบบสำหรับหน้าจอทุกขนาด

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

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

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

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

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

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

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

ทำให้การคลิกและแตะสามารถเข้าถึงได้ ในการทำให้เมนูสามารถเข้าถึงได้สำหรับผู้ใช้ที่มีความบกพร่องในการควบคุมมอเตอร์แบบละเอียด ให้ปฏิบัติตามหลักเกณฑ์การออกแบบวัสดุของ Google และจัดรูปแบบองค์ประกอบที่คลิกได้ให้มีขนาดอย่างน้อย 48 x 48 พิกเซล

เคล็ดลับการออกแบบสำหรับเดสก์ท็อป

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

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

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

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

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

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

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

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

เมื่อออกแบบเมนู mega ให้พิจารณาสิ่งต่อไปนี้:

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

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

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

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

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

เคล็ดลับการออกแบบสำหรับหน้าจอมือถือ

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

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

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

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

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

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

แทนที่เมนู mega และหลายเมนูย่อยด้วยเมนูที่ทับซ้อนกัน หากคุณต้องการขยายมากกว่าหนึ่งเมนูย่อยหรือกำหนดค่าเมนู mega ใหม่ ให้เลือกวิธีการซ้อนทับกัน: แทนที่จะขยายเมนูย่อยด้านล่างหรือด้านข้างพาเรนต์ ให้เมนูย่อยแทนที่พาเรนต์ ด้วยวิธีการนี้ คุณจะต้องใส่ลิงก์ "ย้อนกลับ" ในแผงควบคุมทั้งหมด ยกเว้นระดับแรก สำหรับเมนูระดับบนสุด ให้พิจารณาใช้ไอคอนมุมขวาหรือลูกศรขวาสำหรับรายการหลัก

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

ให้ชัดเจนและสม่ำเสมอ

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

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

อ่านเพิ่มเติมในบล็อก Toptal:

• คู่มือที่ครอบคลุมสำหรับสถาปัตยกรรมสารสนเทศ
• การออกแบบที่ตอบสนอง: แนวปฏิบัติและข้อควรพิจารณาที่ดีที่สุด
• หลักการสถาปัตยกรรมสารสนเทศสำหรับมือถือ (พร้อมอินโฟกราฟิก)