ออกแบบเมนูนำทางเว็บไซต์: วิธีจัดเมนูให้คนเข้าใจ

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

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

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

คำตอบสั้น ๆ

ในการออกแบบเมนูที่คนเข้าใจ ให้ตัดสินใจ 5 เรื่อง ตามลำดับนี้:

1. สำรวจรายการเนื้อหา: ทุกหน้าที่คุณมี และหน้าที่คุณจะต้องมี
2. จัดกลุ่มหน้าตามสิ่งที่ผู้เข้าชมมาทำ ไม่ใช่ตามโครงสร้างองค์กรของคุณ
3. ตั้งชื่อแต่ละกลุ่มด้วยคำของลูกค้า ไม่ใช่ศัพท์ภายใน
4. ทดสอบโครงสร้าง ด้วย card sort และ tree test ก่อนออกแบบอะไร
5. เลือกรูปแบบเมนู ที่เหมาะกับจำนวนรายการ และหน้าจอ แล้วเพิ่มส่วนท้าย breadcrumb และช่องค้นหา ตามที่จำเป็น

การออกแบบเมนูเริ่มจาก information architecture

สถาปัตยกรรมข้อมูล (information architecture) คือวิธีจัดระเบียบ จัดกลุ่ม และตั้งชื่อเนื้อหาของเว็บไซต์ ส่วนเมนูนำทาง คือชั้นที่มองเห็นได้ของมัน เมนูจึงเป็นการตัดสินใจด้าน UX ก่อนจะเป็นเรื่อง UI: อะไรอยู่ตรงไหน และเรียกว่าอะไร มาก่อนหน้าตาของเมนู (ดูความต่างได้ที่ UX กับ UI design) และยังเป็นจุดที่กลยุทธ์ เนื้อหา ดีไซน์ และ SEO มาบรรจบกัน นี่คือเหตุผลที่เมนูที่ชัดเจน เป็นหนึ่งในส่วนผสมของเว็บไซต์ที่ดีเป็นอย่างไร

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

ขั้นที่ 1: สำรวจรายการเนื้อหา

คุณจัดระเบียบสิ่งที่ยังไม่ได้ทำรายการไม่ได้ ส่งออกทุกหน้าจาก CMS จาก XML sitemap หรือจาก crawler ลงสเปรดชีต แล้วเพิ่ม 3 คอลัมน์:

สำหรับเว็บไซต์ใหม่ ให้รวมเนื้อหาที่จะเติบโต เช่น ผลงานหรือบทความ: เมนูที่ใช้ได้กับ 8 หน้า อาจพังเมื่อมี 40 หน้า

หางานหลักที่คนมาทำ

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

ขั้นที่ 2: จัดกลุ่มหน้าตามสิ่งที่ผู้เข้าชมมาทำ

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

เลือกหลักการเดียวสำหรับระดับบนสุด

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

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

ความกว้าง ความลึก และความเชื่อเรื่อง “7 เมนู”

กฎที่ว่าเมนูควรมี 7 รายการ บวกลบ 2 ยืมมาจากงานวิจัยปี 1956 ของนักจิตวิทยา George Miller ว่าด้วยขีดจำกัดของความจำระยะสั้น ซึ่งใช้กับเมนูได้ไม่ดีนัก: ผู้เข้าชมกวาดตาดูเมนู ไม่ได้ท่องจำ ขีดจำกัดจริงเป็นเรื่องในทางปฏิบัติ:

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

ขั้นที่ 3: ตั้งชื่อเมนูด้วยคำของลูกค้า

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

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

ขั้นที่ 4: ทดสอบโครงสร้างด้วย card sorting และ tree testing

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

Card sorting: คนจัดกลุ่มเนื้อหาของคุณอย่างไร?

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

• Open card sort ผู้เข้าร่วมสร้างและตั้งชื่อกลุ่มเอง ใช้ในช่วงแรก เพื่อเรียนรู้ว่าคนคิดอย่างไร และใช้คำอะไร
• Closed card sort ผู้เข้าร่วมวางบัตรลงในกลุ่มของคุณ ใช้เพื่อเช็กโครงสร้างที่เสนอ

มองหาบัตรที่เกือบทุกคนจัดไว้ด้วยกัน บัตรที่ไปอยู่ทุกที่ (ต้องการชื่อที่ชัดขึ้น) และชื่อที่ผู้เข้าร่วมตั้งให้กลุ่ม ซึ่งใช้เป็นชื่อเมนูได้ทันที

Tree testing: คนหาสิ่งที่ต้องการในโครงสร้างเจอไหม?

tree test แสดงแค่ลำดับชั้นของเมนู เป็นข้อความธรรมดา ผู้เข้าร่วมได้รับงานที่สมจริง เช่น “คุณจะเช็กได้ที่ไหน ว่าบริษัทนี้ส่งของไปต่างประเทศหรือเปล่า?” แล้วคุณบันทึกว่าเขาไปทางไหน

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

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

ขั้นที่ 5: เลือกรูปแบบเมนูที่เหมาะสม

ถึงตอนนี้ หน้าตาของเมนูจึงเริ่มสำคัญ

ดรอปดาวน์และ mega menu

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

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

เมนู hamburger และทำไมไม่ควรซ่อนเมนูบนเดสก์ท็อป

บนมือถือ ปุ่มเมนูมักเป็นตัวเลือกที่ถูก เพิ่มคำว่า “เมนู” ข้างไอคอนถ้าทำได้ รักษาลำดับเดียวกับเดสก์ท็อป และใช้ส่วนที่ขยายได้ แทนเมนูย่อยแบบลอย สำหรับระดับที่สอง อ่านเพิ่มเรื่องจอเล็กได้ที่ mobile-first กับ responsive design

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

เมนูเสริม: ส่วนท้าย breadcrumb ช่องค้นหา และภาษา

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

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

ช่องค้นหาในเว็บไซต์ จำเป็นสำหรับแคตตาล็อกขนาดใหญ่ หรือคลังบทความ สำหรับเว็บไซต์ 15 หน้า การแก้เมนูคุ้มค่ากว่า ถ้าเพิ่มช่องค้นหา ให้อ่านคำที่คนค้น: ทุกการค้นหาสิ่งที่มีอยู่ในเมนูแล้ว ชี้ไปที่ชื่อเมนูที่ไม่ได้ผล enhanced measurement ของ GA4 บันทึกคำค้นเหล่านี้ เมื่อคำค้นปรากฏใน URL อย่างที่ ?s= ของ WordPress ทำ

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

เช็กเมนูใน 15 นาที

บนแล็ปท็อปและมือถือ ติ๊กข้อที่เป็นจริงในวันนี้:

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

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

ทำอะไรต่อ

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

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