วิธีแสดงข้อมูลจำเพาะสินค้า: ใช้ตาราง รูปภาพ หรือทั้งสองอย่าง

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

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

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

ข้อมูลจำเพาะสินค้าควรอยู่ในตารางหรือบนรูปภาพ

ทั้งสองอย่าง และการแบ่งนี้ไม่ใช่เรื่องรสนิยม

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

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

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

ผู้ซื้อตรวจข้อมูลจำเพาะสินค้าตัวไหนก่อน

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

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

ใส่สเปกได้กี่รายการก่อนที่ผู้ซื้อจะเลิกอ่าน

ปัญหาแทบไม่เคยเป็นเรื่องสเปกน้อยเกินไป แต่เป็นเรื่องสเปกกองรวมกันเป็นก้อนเดียวจนแยกไม่ออก

งานวิจัยเรื่องสเปกชีตของ Baymard ให้ตัวเลขไว้ชัด: 50% ของเว็บออกแบบสเปกชีตให้ผู้ใช้กวาดตาอ่านได้ยาก 23% ไม่จัดกลุ่มสเปกเป็นหัวข้อย่อยที่มีชื่อกำกับ มีเพียง 3% ที่ใช้ส่วนสรุปเพื่อไฮไลต์สเปกสำคัญ 23% ไม่ใช้การจัดรูปแบบทางสายตาช่วยการกวาดตาเลย และ 20% บังคับให้ผู้ใช้อ่านผ่านเลย์เอาต์หลายคอลัมน์ นอกจากนี้อีก 52% ไม่ได้จัดระเบียบข้อมูลที่ได้รับจากซัพพลายเออร์ใหม่ ทำให้สินค้าสองตัวประเภทเดียวกันมีชื่อฟิลด์และหน่วยต่างกัน

ข้อสุดท้ายนี่แหละคือตัวฆ่างานส่งออกโดยเฉพาะ ถ้า SKU หนึ่งเขียนว่า "กว้าง 600 มม." แล้วตัวถัดไปเขียนว่า "W: 23.6 in" ผู้ซื้อจะเลิกเชื่อถือทั้งคู่

สิ่งที่ควรทำแทน เรียงตามผลตอบแทน:

• เริ่มด้วย ส่วนสรุปสเปกสำคัญห้าถึงเจ็ดบรรทัด — เอาเฉพาะข้อมูลระดับ 1 ไม่ต้องมีอย่างอื่น มีเว็บแค่ 3% ที่ทำ นี่จึงเป็นการสร้างความแตกต่างที่แทบไม่มีต้นทุน
• จัดตารางฉบับเต็มเป็น หัวข้อย่อยที่มีชื่อกำกับ: ขนาด วัสดุ การบรรจุ ความสอดคล้องตามมาตรฐาน
• ใช้ ระบบหน่วยเดียวเป็นหน่วยหลัก และวางค่าที่แปลงแล้วไว้ในช่องเดียวกัน ไม่ใช่แยกเป็นคอลัมน์ต่างหาก
• ใช้ชื่อฟิลด์ให้เหมือนกันทุก SKU ในหมวดเดียวกัน ถึงแม้สเปกชีตจากโรงงานจะไม่เหมือนกันก็ตาม

ขนาดสินค้าควรอยู่ตรงไหนของหน้าสินค้า

อยู่สามที่ ตามลำดับนี้

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

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

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

จะเสียอะไรบ้างถ้าข้อมูลจำเพาะอยู่แต่ในรูปภาพ

เสียทุกอย่างที่อยู่ถัดจากพิกเซลไป

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

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

บนมือถือมีอะไรเปลี่ยนไปบ้าง

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

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

ผลที่ตามมาในทางปฏิบัติ:

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

วิธีแสดงข้อมูลจำเพาะสินค้า: เช็กลิสต์ตรวจสอบ 10 ข้อ

ลองใช้เช็กลิสต์นี้กับประกาศขายหนึ่งรายการก่อนจะไล่แก้ทั้งแคตตาล็อก

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

ตารางสรุปสำหรับใช้อ้างอิงเร็ว

คำถามที่พบบ่อย

ควรแสดงข้อมูลจำเพาะสินค้าในตารางหรือในคำบรรยายสินค้า

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

ขนาดสินค้าควรปรากฏตรงไหนของประกาศขาย

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

ประกาศขายหนึ่งรายการควรแสดงสเปกกี่รายการ

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

ผู้ซื้ออ่านสเปกชีตบนมือถือจริงหรือ

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

ใส่ข้อมูลจำเพาะทั้งหมดลงในรูปสินค้าไปเลยได้ไหม

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

แหล่งข้อมูลและเอกสารอ้างอิง

• Baymard Institute — การใช้งานหน้าสินค้า: 82% ของเว็บมีปัญหา UX ขั้นรุนแรง จากการสำรวจเว็บชั้นนำ 344 แห่ง
• Baymard Institute — สเปกชีตสินค้า: 50% ของเว็บทำให้กวาดตาอ่านยาก พร้อมผลสำรวจเรื่องการจัดกลุ่ม ส่วนสรุป การจัดรูปแบบ และคอลัมน์
• Baymard Institute — ควรมีรูปเทียบสเกลอย่างน้อยหนึ่งรูป: 28% ของเว็บไม่มี และ 42% ของผู้ใช้ประเมินสเกลจากรูปภาพ
• W3C — ทำความเข้าใจเกณฑ์ความสำเร็จ WCAG 1.4.5 รูปภาพที่เป็นข้อความ
• Schema.org — Product: คุณสมบัติ width, height, depth และ weight สำหรับข้อมูลสินค้าแบบมีโครงสร้าง
• GS1 — มาตรฐาน Mobile Ready Hero Images: ความชัดเจนของข้อมูลสินค้าในขนาดไทล์