โครงสร้างข้อมูลที่ดีทำให้คนหาสิ่งที่ต้องการเจอโดยไม่ต้องรู้ว่าธุรกิจแบ่งทีมภายในอย่างไร งานจึงเริ่มจากภาษาของลูกค้า กลุ่มงานที่เขาต้องทำ และเส้นทางที่พาไปถึงข้อมูลสำคัญได้สั้นที่สุด
สรุปสั้น
สิ่งที่จะได้จากบทความนี้
- จัดกลุ่มเนื้อหาตามงานที่ลูกค้าต้องทำ ไม่ใช่ตามผังองค์กร
- ตั้งชื่อเมนูด้วยคำที่ลูกค้าใช้ค้นหา ไม่ใช่ศัพท์ภายใน
- ลึกไม่เกินสามชั้นจากหน้าแรกถึงหน้าที่ต้องการ
- หนึ่งหัวข้อควรมีหน้าหลักหนึ่งหน้าที่รับผิดชอบ
- ทดสอบโครงสร้างด้วยคนจริงก่อนเริ่มออกแบบหน้าจอ
โครงสร้างข้อมูลคืออะไร และสำคัญตรงไหน
โครงสร้างข้อมูลคือการตัดสินใจว่าเว็บมีหน้าอะไร หน้าไหนอยู่ใต้หน้าไหน และแต่ละหน้าเรียกว่าอะไร เป็นงานที่มองไม่เห็นในดีไซน์ แต่กำหนดว่าลูกค้าจะหาของเจอหรือไม่
เว็บที่โครงสร้างผิดจะแก้ด้วยดีไซน์ไม่ได้ เพราะไม่ว่าจะจัดหน้าตาสวยแค่ไหน ถ้าเนื้อหาถูกวางไว้ในที่ที่ลูกค้าไม่คิดจะไปหา ก็ยังหาไม่เจอเหมือนเดิม
เคสตัวอย่าง: บริษัทรับทำเว็บ (ขอไม่เปิดชื่อ) มีเมนูแยกตามแผนกภายใน หลังจัดใหม่ตามงานที่ลูกค้าทำ — ดูบริการ เทียบราคา ดูผลงาน — อัตราคนที่ไปถึงหน้าติดต่อจากหน้าบริการขึ้นประมาณ 35% ใน 4 สัปดาห์
เตรียมช่องรูป — จะใส่ภายหลัง
ช่องว่างสำหรับภาพ — เปรียบเทียบเมนูแบบผังองค์กรกับเมนูแบบงานของลูกค้า
จัดกลุ่มตามงานของลูกค้า ไม่ใช่ตามผังองค์กร
ข้อผิดพลาดที่พบบ่อยที่สุดคือจัดเมนูตามโครงสร้างภายในบริษัท เช่น แยกตามแผนกหรือแยกตามชื่อทีม ซึ่งลูกค้าไม่รู้และไม่สนใจ
ให้เริ่มจากลิสต์งานที่ลูกค้าเข้ามาทำ เช่น ดูว่ารับทำอะไรบ้าง เทียบราคา ดูผลงานที่คล้ายธุรกิจตัวเอง หรือติดต่อขอใบเสนอราคา แล้วจัดกลุ่มเนื้อหาให้รองรับงานเหล่านั้น
ตั้งชื่อด้วยคำที่ลูกค้าใช้
ชื่อเมนูที่ดีคือชื่อที่ลูกค้าอ่านแล้วรู้ทันทีว่าข้างในมีอะไร วิธีตรวจง่ายๆ คือดูว่าคำนั้นมีคนค้นหาจริงไหม และลูกค้าเคยพูดคำนั้นในแชทหรือในการโทรคุยหรือเปล่า
- ใช้คำที่ตรงและคุ้นเคย เช่น รับทำเว็บไซต์ แทนคำอย่างโซลูชันดิจิทัล
- หลีกเลี่ยงศัพท์ภายในและชื่อแบรนด์ของบริการตัวเองในเมนูหลัก
- ชื่อเดียวกันต้องหมายถึงสิ่งเดียวกันทุกที่ในเว็บ
- ถ้าต้องอธิบายชื่อเมนูด้วยคำบรรยายเพิ่ม แปลว่าชื่อยังไม่ดีพอ
เตรียมช่องรูป — จะใส่ภายหลัง
ช่องว่างสำหรับภาพ — ตัวอย่างชื่อเมนูที่ลูกค้าเข้าใจ vs ศัพท์ภายใน
วางลำดับชั้นให้ลึกไม่เกินสามชั้น
จากหน้าแรกไปถึงหน้าที่ลูกค้าต้องการ ควรกดไม่เกินสามครั้ง ถ้าลึกกว่านั้น ทั้งลูกค้าและ Search Engine จะเข้าถึงหน้าลึกได้ยาก และหน้านั้นมักถูกลืมไปพร้อมกัน
โครงสร้าง URL ควรสะท้อนลำดับชั้นเดียวกันกับเมนู เพื่อให้อ่าน URL แล้วเดาได้ว่าอยู่ส่วนไหนของเว็บ ซึ่งช่วยทั้งคนและเครื่องมือค้นหา
Breadcrumb ที่สะท้อนลำดับชั้นช่วยให้คนที่เข้ามาจาก Search รู้ว่าอยู่ตรงไหนและย้อนกลับได้ง่าย
- หน้าแรก → หมวดหลัก → หน้าเป้าหมาย ไม่เกินสามชั้น
- URL สั้น อ่านรู้เรื่อง และไม่เปลี่ยนบ่อยโดยไม่จำเป็น
- หน้าที่ลึกต้องมีลิงก์กลับหมวดหลักที่ชัด
เตรียมช่องรูป — จะใส่ภายหลัง
ช่องว่างสำหรับภาพ — ลำดับชั้น URL และ breadcrumb ไม่เกินสามชั้น
หนึ่งหัวข้อ หนึ่งหน้าที่รับผิดชอบ
เมื่อมีหลายหน้าพูดเรื่องเดียวกันโดยไม่มีบทบาทต่างกัน ลูกค้าจะสับสนว่าควรอ่านหน้าไหน และ Search Engine จะเลือกไม่ถูกว่าหน้าไหนควรได้อันดับ
วิธีแก้คือกำหนดให้แต่ละหัวข้อมีหน้าหลักหนึ่งหน้าที่ตอบครบที่สุด ส่วนหน้าอื่นที่เกี่ยวข้องทำหน้าที่เสริมและลิงก์กลับมาที่หน้าหลักนั้น
ถ้ามีบทความและหน้าบริการพูดเรื่องเดียวกัน ให้กำหนดว่าหน้าไหนรับคนที่พร้อมจ้าง และหน้าไหนรับคนที่ยังหาข้อมูล
- หนึ่งหัวข้อหลักต่อหนึ่ง URL หลัก
- หน้ารองลิงก์กลับหน้าหลักด้วยข้อความที่สื่อความ
- ไม่สร้างหน้าใหม่ถ้าแค่เปลี่ยนคำเรียกเล็กน้อย
ทดสอบโครงสร้างก่อนเริ่มออกแบบหน้าจอ
โครงสร้างทดสอบได้โดยไม่ต้องมีดีไซน์ วิธีที่เร็วและถูกที่สุดคือเขียนชื่อหน้าทั้งหมดลงกระดาษหรือไฟล์ แล้วให้คนที่ไม่ได้ทำเว็บนี้ลองบอกว่าถ้าอยากทำงานอย่างหนึ่งจะกดเข้าไปดูที่ไหน
ทำแค่ห้าคนก็เห็นรูปแบบชัดแล้วว่าชื่อไหนทำให้คนเดาผิด และหมวดไหนที่ไม่มีใครนึกถึง แก้ตอนนี้ต้นทุนแทบเป็นศูนย์ เทียบกับการแก้ตอนพัฒนาเสร็จ
เตรียมช่องรูป — จะใส่ภายหลัง
ช่องว่างสำหรับภาพ — การทดสอบ card sort หรือ tree test โครงสร้างเว็บ
เตรียมข้อมูล
ข้อมูลที่ควรเตรียมก่อนเริ่มลงมือ
- รายการงานที่ลูกค้าเข้ามาทำบนเว็บ
- คำที่ลูกค้าใช้เรียกบริการของคุณ
- ผังหน้าทั้งหมดพร้อมลำดับชั้นไม่เกินสามชั้น
- หน้าหลักที่รับผิดชอบแต่ละหัวข้อ
- ผลทดสอบโครงสร้างกับคนจริงอย่างน้อยห้าคน
บริการที่เกี่ยวข้อง
