แนวทางปฏิบัติที่ดีที่สุดในการออกแบบเว็บไซต์อีคอมเมิร์ซทีละหน้า
แนวทางปฏิบัติที่ดีที่สุดในการออกแบบอีคอมเมิร์ซซึ่งจัดตามหน้าที่นักช้อปอยู่: หน้าแรก การนำทาง รายการหมวดหมู่ การค้นหา หน้าผลิตภัณฑ์และมือถือ พร้อมสิ่งที่ควรรวมและข้อผิดพลาดทั่วไปที่ควรหลีกเลี่ยง
คำถามที่พบบ่อย
แนวทางปฏิบัติที่ดีที่สุดในการออกแบบอีคอมเมิร์ซที่สำคัญที่สุดคืออะไร
การนำทางที่ชัดเจนโดยวิธีที่ผู้ซื้อคิดเกี่ยวกับผลิตภัณฑ์ของคุณ หน้าเว็บที่รวดเร็ว รูปภาพผลิตภัณฑ์ขนาดใหญ่ที่ซูมได้ ราคาและข้อมูลการจัดส่งใกล้กับปุ่มหยิบลงตะกร้า บทวิจารณ์ที่มองเห็นได้ การทำงานการค้นหาในสถานที่ และการชำระเงินสั้นๆ สำหรับการซื้อของแขก ออกแบบสำหรับโทรศัพท์ก่อน เนื่องจากนั่นคือจุดที่การเรียกดูร้านค้าส่วนใหญ่เกิดขึ้น
หน้าหมวดหมู่ควรแสดงผลิตภัณฑ์จำนวนเท่าใด
มากพอที่นักช้อปจะเปรียบเทียบได้ไม่มีเพจไม่รู้จบ ร้านค้าหลายแห่งแสดง 24 ถึง 48 ต่อหน้า หรือใช้ปุ่มโหลดเพิ่มเติม สิ่งที่สำคัญกว่านั้นคือตัวกรองที่ดีสำหรับคุณสมบัติที่ผู้คนเลือก เช่น ขนาด สี ราคา และความพร้อมจำหน่าย
สิ่งที่ควรอยู่ครึ่งหน้าบนของหน้าผลิตภัณฑ์
ชื่อผลิตภัณฑ์ รูปภาพหลัก ราคา ตัวเลือกตัวเลือกหลัก (ขนาด สี) สถานะสต็อก ปุ่มหยิบลงตะกร้า และบรรทัดเกี่ยวกับการจัดส่งหรือเวลาในการจัดส่ง การให้คะแนนดาวและจำนวนบทวิจารณ์ก็อยู่ที่นั่นเช่นกันหากคุณมีบทวิจารณ์
หน้าแรกของอีคอมเมิร์ซควรมีภาพหมุนหรือไม่
มักจะไม่ แถบเลื่อนที่หมุนอัตโนมัติมักถูกละเลยและอาจส่งผลเสียต่อการเข้าถึงและเวลาในการโหลด ฮีโร่ที่แข็งแกร่งเพียงตัวเดียวที่มีข้อความที่ชัดเจนและลิงก์ไปยังหมวดหมู่ยอดนิยมของคุณมักจะทำงานได้ดีกว่า
การออกแบบเว็บไซต์อีคอมเมิร์ซที่ดีช่วยให้นักช้อปทำสามสิ่งได้อย่างรวดเร็ว: ค้นหาผลิตภัณฑ์ที่เหมาะสม ไว้วางใจได้มากพอที่จะซื้อ และชำระเงินได้อย่างราบรื่น ในทางปฏิบัตินั่นหมายถึงการนำทางที่ตรงกับความคิดของลูกค้า หน้ามือถือที่รวดเร็ว รูปภาพผลิตภัณฑ์ขนาดใหญ่ ราคาและการจัดส่งที่แสดงตั้งแต่เนิ่นๆ บทวิจารณ์ที่มองเห็นได้ และการชำระเงินสั้นๆ
แทนที่จะเป็นรายการหลักการทั่วไป คู่มือนี้จะอธิบายทีละหน้า เนื่องจากคำถามของนักช้อปเปลี่ยนไปในแต่ละรายการ
หน้าแรก: "ฉันมาถูกที่แล้วหรือยัง?"
หน้าแรกมีเวลาไม่กี่วินาทีเพื่อยืนยันว่าคุณขายอะไรและขายเพื่อใคร
รวม:
- พาดหัวที่บอกชื่อสิ่งที่คุณขายด้วยคำพูดธรรมดาๆ ("กระเป๋าหนังทำมือสำหรับการพกพาทุกวัน" ไม่ใช่ "ทำเพื่อคุณ")
- รูปภาพหลักหนึ่งภาพที่แสดงผลิตภัณฑ์ที่ใช้งานอยู่
- ลิงก์ไปยังหมวดหมู่ 3 อันดับต้น ๆ ของคุณไปยังหมวดหมู่ 6 พร้อมรูปภาพ
- คำสัญญาการจัดส่งหรือการคืนสินค้าหลักของคุณอยู่ในแถบบางๆ ที่ด้านบน
- สินค้าขายดีหรือสินค้ามาใหม่ ดังนั้นผู้เยี่ยมชมที่กลับมาจึงเห็นสิ่งสดใหม่
หลีกเลี่ยง: ภาพหมุนหมุนอัตโนมัติ ป๊อปอัปที่เริ่มทำงานก่อนที่หน้าจะโหลด และวิดีโอหลักที่ทำให้การดูครั้งแรกบนมือถือล่าช้า
การนำทาง: "ของที่ฉันต้องการอยู่ที่ไหน?"
- ตั้งชื่อหมวดหมู่ตามที่ลูกค้าใช้ค้นหา "รองเท้าวิ่ง" ไม่ใช่ "รองเท้าเสริมประสิทธิภาพ" บันทึกการค้นหาไซต์ของคุณและการค้นหา Google Search Console จะบอกคุณถึงคำที่ผู้คนใช้
- รักษาระดับบนสุดให้สั้น ห้าถึงแปดรายการหลักเป็นเพดานที่เหมาะสม ใช้เมนูขนาดใหญ่สำหรับแค็ตตาล็อกขนาดใหญ่ พร้อมด้วยรูปภาพสำหรับผลิตภัณฑ์ที่เป็นภาพ
- ให้สินค้าอยู่มากกว่าหนึ่งแห่ง เสื้อแจ็คเก็ตกันน้ำสามารถใส่ได้ทั้งแบบ "แจ็คเก็ต" และ "เดินป่า"
- เพิ่มเบรดครัมบ์ ในหมวดหมู่และหน้าผลิตภัณฑ์เพื่อให้ผู้คนสามารถก้าวกลับขึ้นไปอีกระดับได้ มาร์กอัปด้วยข้อมูลที่มีโครงสร้าง BreadcrumbList สำหรับการค้นหา
หน้าหมวดหมู่: "สิ่งใดที่เหมาะกับฉัน"
นี่คือจุดที่การเปรียบเทียบส่วนใหญ่เกิดขึ้น
| องค์ประกอบ | แนวปฏิบัติที่ดีที่สุด |
|---|
| บัตรผลิตภัณฑ์ | อัตราส่วนรูปภาพเดียวกันสำหรับทุกผลิตภัณฑ์ ชื่อ ราคา คะแนน และรูปภาพที่สองบนโฮเวอร์ |
| ตัวกรอง | จับคู่การตัดสินใจที่แท้จริง: ขนาด สี ราคา วัสดุ ในสต็อก แสดงการนับ |
| เรียงลำดับ | ค่าเริ่มต้นเป็น "แนะนำ" หรือ "ขายดีที่สุด"; เสนอราคาและใหม่ล่าสุด |
| หุ้น | ซ่อนหรือทำเครื่องหมายสินค้าที่ขายหมดแล้วอย่างชัดเจน |
| เพจจิ้ง | โหลดหน้าเพิ่มหรือระบุหมายเลข คงสถานะตัวกรองไว้เมื่อมีคนกลับไป |
| มือถือ | กรองในแผงเลื่อนขึ้นด้วยปุ่ม "แสดงผลลัพธ์ 34" ที่ชัดเจน | ข้อผิดพลาดทั่วไปคือตัวกรองที่จะล้างตัวเองเมื่อนักช้อปเปิดสินค้าและคืนสินค้า ทดสอบปุ่มย้อนกลับ |
การค้นหาไซต์: "ฉันรู้ว่าฉันต้องการอะไร"
ผู้ซื้อที่ค้นหามักจะมีความตั้งใจสูง ดังนั้นช่องค้นหาที่ไม่รัดกุมจะทำให้เกิดต้นทุนการขายโดยตรง
- ใส่ช่องค้นหาในส่วนหัว ซึ่งมองเห็นได้บนเดสก์ท็อป และแตะเพียงครั้งเดียวบนมือถือ
- ทนต่อการพิมพ์ผิดและคำพ้องความหมาย ("tee" ควรพบ "t-shirt")
- แสดงคำแนะนำผลิตภัณฑ์พร้อมรูปภาพขณะที่คนพิมพ์
- อย่าแสดงทางตัน เมื่อ "ไม่มีผลลัพธ์" แนะนำหมวดหมู่หรือสินค้าขายดี
- ตรวจสอบคำค้นหาของคุณทุกเดือน การค้นหาบ่อยครั้งโดยไม่มีผลลัพธ์จะบอกคุณว่ามีสินค้าอะไรในสต็อกหรือเปลี่ยนชื่อผลิตภัณฑ์อย่างไร
หน้าสินค้า: "ฉันควรซื้อสิ่งนี้ไหม?"
หน้าสินค้าทำการขาย ทำงานผ่านมันจากบนลงล่าง
ภาพถ่าย
- รูปภาพหลายรูปต่อผลิตภัณฑ์: ด้านหน้า ด้านหลัง รายละเอียด ขนาด (บนตัวบุคคลหรือติดกับวัตถุที่คุ้นเคย) และใช้งานอยู่
- ซูมบนเดสก์ท็อปและซูมนิ้วบนมือถือ
- พื้นหลังที่สอดคล้องกันในแคตตาล็อก
- วิดีโอที่การเคลื่อนไหวมีความสำคัญ เช่น ผ้าม่านหรือการพับอุปกรณ์
ราคา ตัวเลือก และปุ่มซื้อ
- ราคาใกล้เคียงกับชื่อสินค้า โดยแสดงราคาขายให้ชัดเจน
- ตัวเลือกรูปแบบเป็นปุ่มหรือตัวอย่าง ไม่ใช่แบบเลื่อนลง เมื่อมีตัวเลือกเพียงไม่กี่ตัวเลือก
- ขนาดที่ไม่มีแสดงแต่ปิดใช้งาน เพื่อให้ผู้ซื้อทราบช่วง
- ปุ่มเพิ่มลงตะกร้าที่มีคอนทราสต์สูงหนึ่งปุ่ม และเวอร์ชันติดหนึบบนมือถือเมื่อผู้คนเลื่อนดู
- ประมาณการการจัดส่งและค่าจัดส่งหรือเกณฑ์ด้านล่าง
คำอธิบายและรายละเอียด
เริ่มต้นด้วยสิ่งที่ผลิตภัณฑ์ทำเพื่อลูกค้า จากนั้นจึงระบุข้อกำหนด ใช้ตารางข้อมูลจำเพาะแบบสั้นสำหรับขนาด วัสดุ และการดูแลรักษา เส้นบอกขนาดควรเปิดในแผงในหน้าเดียวกัน แทนที่จะส่งคนออกไป
ไว้วางใจ
- คะแนนดาวและจำนวนรีวิวอยู่ด้านบน รีวิวทั้งหมดอยู่ล่างสุด พร้อมรูปถ่ายจากลูกค้าหากคุณหาได้
- คืนกรมธรรม์ในบรรทัดเดียวใกล้กับปุ่ม
- คำตอบสำหรับคำถามที่กล่องจดหมายสนับสนุนของคุณได้รับมากที่สุด
เพิ่มข้อมูลที่มีโครงสร้างของผลิตภัณฑ์ (ชื่อ รูปภาพ ราคา ความพร้อมจำหน่าย รีวิว) เพื่อให้ผลการค้นหาแสดงราคาและการให้คะแนนได้
รถเข็นและชำระเงิน: "ให้ฉันจ่ายแล้วไป"
การออกแบบการชำระเงินก็มีวินัยในตัวเอง เวอร์ชันสั้น: แสดงค่าใช้จ่ายทั้งหมดตั้งแต่เนิ่นๆ อนุญาตให้แขกชำระเงิน เก็บแบบฟอร์มให้สั้น และเสนอกระเป๋าเงินด่วน เช่น Apple Pay และ Google Pay คำแนะนำของเราเกี่ยวกับ การเพิ่มประสิทธิภาพการชำระเงิน ครอบคลุมรายละเอียดแต่ละขั้นตอน## หน้าหลังการซื้อ: "ได้ผลแล้วเป็นยังไงบ้าง?"
การออกแบบไม่ได้หยุดอยู่ที่ปุ่มชำระเงิน ผู้ซื้อเกือบทุกรายจะอ่านหน้ายืนยันคำสั่งซื้อและอีเมลอย่างละเอียด
- แสดงหมายเลขคำสั่งซื้อ รายการ ยอดรวม และระยะเวลาจัดส่งให้ชัดเจน
- เสนอการสร้างบัญชีที่นี่ โดยกรอกรายละเอียดที่พวกเขาป้อนไว้ล่วงหน้าแล้ว
- ลิงก์ไปยังการติดตามคำสั่งซื้อและกระบวนการคืนสินค้าของคุณ
- แนะนำผลิตภัณฑ์ที่เกี่ยวข้องเฉพาะในกรณีที่สอดคล้องกับสิ่งที่พวกเขาซื้อจริงๆ
- ทำให้อีเมลยืนยันตรงกับรูปลักษณ์ร้านค้าของคุณ จึงไม่เข้าใจผิดว่าเป็นสแปม
Mobile : ออกแบบที่นี่ก่อน
การเข้าชมร้านค้าส่วนใหญ่มาจากโทรศัพท์ ดังนั้นควรออกแบบและทดสอบเลย์เอาต์ของโทรศัพท์ก่อน จากนั้นจึงขยายสำหรับเดสก์ท็อป
- แตะเป้าหมายที่มีความสูงพิกเซล 44 ขึ้นไป
- ข้อความที่มีพิกเซล 16 หรือใหญ่กว่า ดังนั้น iOS จะไม่ซูมเข้าไปในช่องแบบฟอร์ม
- Sticky เพิ่มลงตะกร้าในหน้าผลิตภัณฑ์
- ไม่มีฟีเจอร์แบบโฮเวอร์เท่านั้น เนื่องจากไม่มีโฮเวอร์บนหน้าจอสัมผัส
- ทดสอบบนโทรศัพท์ระดับกลางจริงผ่านข้อมูลมือถือ
ความเร็วและการเข้าถึง
ทั้งสองเป็นการตัดสินใจในการออกแบบ ไม่ใช่แค่ด้านเทคนิคเท่านั้น
ความเร็ว: บีบอัดรูปภาพและให้บริการ WebP หรือ AVIF ตั้งค่าความกว้างและความสูงของรูปภาพเพื่อหยุดการข้ามเลย์เอาต์ จำกัดแอปและสคริปต์ของบุคคลที่สาม และตรวจสอบ Core Web Vitals ใน PageSpeed Insights ของ Google
การเข้าถึง: คอนทราสต์ของสีที่ตรงตาม WCAG 2.2 AA, ข้อความแสดงแทนบนรูปภาพผลิตภัณฑ์, ช่องแบบฟอร์มที่มีป้ายกำกับ, เมนูและตัวกรองที่เข้าถึงด้วยแป้นพิมพ์ได้ และข้อความแสดงข้อผิดพลาดที่ระบุว่ามีอะไรผิดปกติ ร้านค้าที่สามารถเข้าถึงได้นั้นง่ายกว่าสำหรับทุกคน และการเข้าถึงได้ในหลายภูมิภาคก็เป็นความคาดหวังทางกฎหมายเช่นกัน
รีวิวการออกแบบก่อนเปิดตัว
- [ ] หน้าแรกบอกสิ่งที่คุณขายในหนึ่งประโยค
- [ ] ชื่อหมวดหมู่ตรงกับคำค้นหาของลูกค้า
- [ ] ฟิลเตอร์จะรอดจากปุ่มย้อนกลับ
- [ ] การค้นหาจะจัดการกับการพิมพ์ผิดและจะไม่แสดงหน้าว่าง
- [ ] สินค้าทุกชิ้นมีรูปถ่ายหลายรูปพร้อมการซูม
- [ ] ค่าจัดส่งหรือเกณฑ์ที่ปรากฏบนหน้าผลิตภัณฑ์
- [ ] บทวิจารณ์แสดงอยู่บริเวณด้านบนของหน้าผลิตภัณฑ์
- [ ] Sticky เพิ่มลงรถเข็นบนมือถือ
- [ ] เปิดใช้งานการชำระเงินของแขกแล้ว
- [ ] ตรวจสอบรายงานมือถือ PageSpeed Insights และแก้ไขปัญหาสำคัญแล้ว
รับสร้างร้านหากคุณเริ่มต้นใหม่ทั้งหมด เลย์เอาต์เริ่มต้นที่ดีจะช่วยประหยัดการตัดสินใจเหล่านี้ได้มาก เรียกดู เทมเพลต ของเราสำหรับการออกแบบร้านค้า หรืออธิบายร้านค้าของคุณกับ We.Inc ทางแชท และสร้างร้านค้าออนไลน์ที่มีหน้าผลิตภัณฑ์ ตะกร้าสินค้า และการชำระเงินที่คุณสามารถปรับแต่งด้วยภาพหรือในโค้ด โดยมีโฮสติ้งและ SSL รวมอยู่ด้วย
เริ่มฟรี
เริ่มต้นฟรี · ไม่ต้องใช้บัตรเครดิต
Product
Who It's For
Features
Resources
Company
View Sitemap