ออกแบบหน้าสินค้าอีคอมเมิร์ซ: ต้องมีอะไรบ้าง

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

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

คำตอบสั้น ๆ

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

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

บนเดสก์ท็อป ข้อ 1 ถึง 5 อยู่ส่วนบนสุด: แกลเลอรีอยู่ข้าง “กล่องซื้อ” (buy box) ที่รวมข้ออื่น ๆ ไว้ บนมือถือ จะเรียงซ้อนกันตามลำดับนี้

6 คำถามที่หน้าสินค้าต้องตอบ

“นี่คืออะไร?”: แกลเลอรี วิดีโอ และสรุปหนึ่งบรรทัด

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

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

“เหมาะกับฉันไหม?”: สเปก ไซซ์ และคำอธิบาย

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

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

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

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

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

“รวมแล้วจ่ายเท่าไร?”: ราคาแบบรวมทุกอย่าง

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

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

“จะได้ของเมื่อไร?” และ “ส่งคืนได้ไหม?”

ตอบทั้งสองข้อไว้ใต้ปุ่ม “เพิ่มลงตะกร้า” อย่างละหนึ่งประโยค เพราะตรงนั้นคือจุดที่ความลังเลสุดท้ายโผล่ขึ้นมา

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

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

“ร้านนี้ไว้ใจได้ไหม?”: รีวิวจริงและข้อมูลที่มองเห็น

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

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

หน้าสินค้าบนเดสก์ท็อปและมือถือ

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

การออกแบบสำหรับมือถือก่อน บังคับให้ตัดสินใจเรื่องลำดับความสำคัญตั้งแต่เนิ่น ๆ บทความเปรียบเทียบ mobile-first กับ responsive design ของเราอธิบายแนวทางนี้ บนเดสก์ท็อป ส่วนที่เรียงซ้อนกันพร้อมลิงก์ภายในหน้า ดีกว่าแท็บแนวนอนที่มองข้ามได้ง่าย

ออกแบบหน้าสินค้าสำหรับมือถือ

ปุ่มตะกร้าแบบติดจอที่ช่วย ไม่ใช่บัง

แสดงเมื่อปุ่มหลักเลื่อนพ้นจอไปแล้ว พร้อมราคาและตัวเลือกที่เลือกไว้
ถ้ายังไม่ได้เลือกไซซ์ การแตะควรเปิดตัวเลือกไซซ์ ไม่ใช่แสดงข้อผิดพลาด
ทำให้แถบบาง ๆ เพราะเมื่อรวมกับปุ่มแชตและแบนเนอร์คุกกี้ มันอาจกินพื้นที่จอเล็กไปมาก
เว้นที่ให้แถบโฮมของมือถือ และอย่าให้แถบบังองค์ประกอบที่มีโฟกัสจากคีย์บอร์ด การบังจนมองไม่เห็นเลยไม่ผ่าน WCAG 2.2 เกณฑ์ 2.4.11 (Focus Not Obscured ระดับ Minimum)

แกลเลอรีที่รู้ทันทีว่าปัดได้

แกลเลอรีที่ดูเหมือนรูปนิ่งรูปเดียวจะไม่มีใครปัด ให้รูปถัดไปโผล่มาให้เห็นเล็กน้อย แสดงตัวนับ (“2 / 7”) และเพิ่มลูกศรหรือภาพย่อ เพราะเกณฑ์ Pointer Gestures ของ WCAG (2.5.1) กำหนดให้มีทางเลือกแทนการปัด ที่ใช้ได้ด้วยการแตะธรรมดา การแตะรูปควรเปิดมุมมองเต็มจอที่ซูมด้วยสองนิ้วได้และมีปุ่มซูม (การซูมด้วยสองนิ้วก็ต้องมีทางเลือกแบบแตะเช่นกัน) และแกลเลอรีไม่ควรแย่งการเลื่อนแนวตั้ง

ปุ่มที่นิ้วโป้งเอื้อมถึง และขนาดเป้าหมายตาม WCAG 2.2

ปุ่มไซซ์ ปุ่มเพิ่มลดจำนวน และหัวแอคคอร์เดียน คือตัวควบคุมที่ผู้ซื้อแตะบ่อยที่สุด และมักเล็กที่สุดบนหน้า เกณฑ์ Target Size (Minimum) ของ WCAG 2.2 (ข้อ 2.5.8 ระดับ AA) กำหนดขั้นต่ำไว้ที่ 24 คูณ 24 CSS pixel เว้นแต่เป้าหมายที่เล็กกว่านั้นจะมีพื้นที่ว่างรอบ ๆ มากพอ สำหรับตัวควบคุมเหล่านี้ ให้ตั้งเป้าที่ 44 คูณ 44 ซึ่งเป็นตัวเลขระดับ AAA (เกณฑ์ 2.5.5) และเป็นขนาดตัวควบคุมมาตรฐานของ Apple บน iPhone เว้นระยะระหว่างปุ่มไซซ์ที่อยู่ติดกัน และวางการกระทำสำคัญไว้ในระยะที่นิ้วโป้งเอื้อมถึงง่าย

ขั้นตอนทดสอบบนเครื่องจริง

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

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

ตรวจการเข้าถึงของตัวเลือกสินค้าและแกลเลอรี

ทั้งสองอย่างมักสร้างขึ้นเอง ซึ่งเป็นจุดที่การเข้าถึงมักพัง บทความ อธิบาย WCAG 2.2 ของเราครอบคลุมมาตรฐานในภาพกว้าง

ตัวเลือกสินค้า

สร้างบน radio button มาตรฐานหรือ element select จัดกลุ่มภายใต้ป้ายกำกับที่มองเห็นได้ เช่น “ไซซ์”
ตัวอย่างสีมีชื่อเป็นข้อความ และเขียนชื่อสีที่เลือกไว้ให้เห็น
ตัวเลือกที่ไม่มีของ บอกว่า “สินค้าหมด” เป็นข้อความ ไม่ใช่แค่ขีดฆ่า
สถานะที่เลือกและโฟกัสจากคีย์บอร์ดมองเห็นชัด โดยมีคอนทราสต์อย่างน้อย 3:1 เทียบกับสิ่งรอบข้าง
เมื่อเลือกแล้วราคาหรือสต็อกเปลี่ยน โปรแกรมอ่านหน้าจอจะแจ้งให้ผู้ใช้รู้
การกด “เพิ่มลงตะกร้า” โดยยังไม่เลือกตัวเลือกที่จำเป็น จะย้ายโฟกัสไปที่ตัวเลือก และอธิบายว่าขาดอะไร

แกลเลอรีและวิดีโอ

ข้อความ alt อธิบายว่าแต่ละภาพแสดงอะไร (“ด้านหลัง เห็นกระเป๋าซิป”) ไม่ใช่ “รูปสินค้า 3”
ลูกศรและภาพย่อเป็นปุ่มที่มีป้ายกำกับ และใช้งานด้วยคีย์บอร์ดได้
ไม่มีอะไรเคลื่อนไหวเอง เว้นแต่หยุดชั่วคราวได้
มุมมองเต็มจอเก็บโฟกัสไว้ข้างใน ปิดได้ด้วยปุ่ม Escape และคืนโฟกัสไปยังจุดเริ่มต้น
วิดีโอมีคำบรรยาย และไม่เล่นเสียงเองโดยไม่มีใครกด

ความเร็วและการค้นหา: ส่วนที่ผู้ซื้อไม่เคยเห็น

โหลดรูปหลักก่อน รูปสินค้าหลักมักเป็นองค์ประกอบ Largest Contentful Paint หรือ LCP ของหน้า จึงเป็นตัวตัดสินว่าหน้าจะผ่านเกณฑ์ “ดี” ของ Google ที่ 2.5 วินาทีหรือไม่ อย่าใช้ lazy-load กับรูปนี้ ส่งไฟล์ในฟอร์แมตสมัยใหม่ที่ขนาดพอดี และกำหนดขนาดให้ทุกรูป บทความ การปรับแต่งรูปภาพสำหรับเว็บไซต์ อธิบายรายละเอียด จากนั้นตรวจว่าสคริปต์รีวิว แชต และระบบแนะนำสินค้าแต่ละตัว เพิ่มเวลาโหลดเท่าไร และทำให้หน้าตอบสนองช้าลงแค่ไหนเมื่อแตะเลือกไซซ์ (วัดด้วย INP ซึ่งถือว่าดีเมื่อไม่เกิน 200 มิลลิวินาที)

ช่วยให้เครื่องมือค้นหาอ่านหน้าได้ ให้สินค้าแต่ละชิ้นมี URL ที่ชัดเจนหนึ่ง URL ตัดสินใจอย่างตั้งใจว่าตัวเลือกสินค้าจะใช้ URL เดียวกันหรือไม่ และเขียน title ที่ไม่ซ้ำ structured data แบบ Product ที่มีราคา สถานะสินค้า และข้อมูลรีวิวจริง อาจทำให้สินค้ามีสิทธิ์ (แต่ไม่รับประกัน) แสดงผลการค้นหาแบบ rich result ใน Google บทความ Schema markup ของเราอธิบายวิธีทำ

เช็กลิสต์หน้าสินค้า

คัดลอกรายการนี้ไปใช้ตอนตรวจทานหน้าสินค้าครั้งต่อไป:

ขั้นตอนต่อไป

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

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

ออกแบบหน้าสินค้าอีคอมเมิร์ซ: สิ่งที่ผู้ซื้อต้องรู้ก่อนตัดสินใจซื้อ