105 เคล็ดลับอีคอมเมิร์ซ UX: วิธีเกลี้ยกล่อมผู้เยี่ยมชมให้ซื้อ

เผยแพร่แล้ว: 2022-02-20

ผู้คนมาเยี่ยมชมร้านค้าของคุณและออกไปทุกวันเพราะพวกเขาไม่พบสิ่งที่ต้องการ

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

Ecommerce UX Guide

จากข้อมูลของ Nielson Norman Group บริษัทวิจัยประสบการณ์ผู้ใช้ มีแนวทางปฏิบัติที่ดีที่สุดมากกว่า 800 รายการสำหรับการใช้งานอีคอมเมิร์ซ เว้นแต่คุณจะมีเงินหลายพันล้านเหรียญเพื่อใช้ในการพัฒนา คุณจะไม่ปฏิบัติตามหลักเกณฑ์ทุกข้อ โพสต์นี้เต็มไปด้วยเคล็ดลับและตัวอย่างเพื่อให้คุณสามารถปรับปรุงการออกแบบ UX ของอีคอมเมิร์ซและรับ Conversion ได้มากขึ้น

มาแจกแจงแนวทางปฏิบัติที่ดีที่สุดขั้นพื้นฐานตามประเภทเพจกัน อ่านบทความนี้สำหรับเคล็ดลับเกี่ยวกับ mobile ux

คู่มือ UX ของอีคอมเมิร์ซ ซ่อน
หน้าแรก เคล็ดลับ UX ที่สร้างความไว้วางใจได้อย่างรวดเร็ว
การนำทาง: รากฐานของ UX
หน้าหมวดหมู่: ดึงดูดนักช้อปให้ใกล้ชิดยิ่งขึ้น
หน้ารายการสินค้า: แจ้งและสร้างความมั่นใจ
หน้าผลิตภัณฑ์: ที่ซึ่ง SEO, UX และการขายพบ
ขั้นตอนการชำระเงิน: สร้างขึ้นเพื่อความไว้วางใจ
เว็บไซต์ของคุณเป็นอย่างไร?

หน้าแรก เคล็ดลับ UX ที่สร้างความไว้วางใจได้อย่างรวดเร็ว

หน้าแรกของคุณได้รับการเข้าชมมากที่สุด ทำให้ชัดเจนว่าคุณขายสินค้า คิดว่าหน้าแรกของคุณเป็นหน้าต่างสู่ร้านค้าของคุณ คิดว่า Macy's บน Magnificent Mile ตกแต่งหน้าแรกของคุณด้วยผลิตภัณฑ์และรูปภาพที่ดีที่สุดของคุณ สิ่งหนึ่งที่คุณไม่เคยเห็นที่ Macy's คือชุดต่างๆ ที่โฉบลงทีละตัวในหน้าต่าง ฉันกำลังพูดถึงตัวเลื่อนที่นี่ หากคุณจำเป็นต้องใช้ ตรวจสอบให้แน่ใจว่าพวกเขาเป็นมิตรกับผู้ใช้

แนวทางปฏิบัติที่ดีที่สุดสำหรับพื้นที่ฮีโร่

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

UX-Best-Practices-LL-Bean-Home
LL Bean มีสินค้าจำนวนมาก แต่รูปถ่ายที่ไม่กระจัดกระจายและสำเนาที่กระชับทำให้ง่ายต่อการสำรวจกลุ่มผลิตภัณฑ์หลัก
พื้นที่ฮีโร่ Do's
  1. ใช้การออกแบบที่เรียบง่ายและไม่เกะกะ ใช้คำให้น้อยที่สุด
  2. ขจัดทุกสิ่งที่ไม่กระทบกระเทือน ตัวอย่างเช่น โพสต์บล็อกล่าสุดของคุณ
  3. ใช้คิวภาพ เช่น สีหรือลูกศรเพื่อเน้นความสนใจไปที่คำกระตุ้นการตัดสินใจเพียงครั้งเดียว
  4. ทำให้ผู้คนสามารถระบุตัวตนได้ง่าย คุณขายแจ็คเก็ตราคาแพงสำหรับผู้หญิงหรือไม่?
UX-Best-Practices-People-Version
พื้นที่ฮีโร่ Dont's
  1. ตกแต่ง. การหมุนวน ประกายไฟ และสัญลักษณ์ที่ไร้ความหมายอื่นๆ ช่วยเพิ่มภาระในการเรียนรู้และทำให้ลูกค้าเสียสมาธิ
  2. มีเนื้อหาที่ล้าสมัย เช่น โปรโมชันจากสัปดาห์ที่แล้วหรือเดือนที่แล้ว คุณจะสูญเสียความน่าเชื่อถือทันที
  3. ทำให้พื้นที่รกไปด้วยข้อความหรือโปรโมชั่นมากเกินไป
  4. มีตัวเลื่อนหรือม้าหมุนที่เลื่อนไปข้างหน้าโดยอัตโนมัติ
  5. เน้นผลิตภัณฑ์ที่ไม่ได้เป็นตัวแทนของส่วนผสมโดยรวมของคุณ

การนำทางหน้าแรก

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

UX-Best-Practices-Home-Page-Macys
หน้าแรก การนำทาง Do's
  1. ให้ผู้เข้าชมเห็น "มุมมอง 30,000 ฟุต" ของสิ่งที่ไซต์ของคุณขาย เพื่อให้พวกเขาสามารถเจาะลึกไปยังหมวดหมู่เฉพาะได้
  2. เพิ่มเครื่องมือที่คุณใช้บ่อยที่สุดหรือคู่มือการซื้อ
  3. ระบุลิงก์ไปยังหน้านโยบายการคืนสินค้า บริการลูกค้า การจัดส่ง และความเป็นส่วนตัว
หน้าแรก การนำทาง Dont's
  1. สมมติว่าคุณรู้ว่าผู้คนกำลังมองหาอะไร
  2. Jam ทุกหมวดหมู่และหมวดหมู่ย่อยในหน้าแรกของคุณ
  3. ดันโปรโมชั่นระดับสินค้า. หากคุณมีผลิตภัณฑ์เพียงไม่กี่ชิ้น คุณไม่ต้องสนใจสิ่งนี้
  4. ใช้ภาพถ่ายสต็อกทั่วไป นี้กรีดร้องความไม่จริง

การนำทาง: รากฐานของ UX

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

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

UX-Best-Practices-Best-Buy-Navigation
เมนูการนำทางหลัก Do's
  1. จำกัดเมนูด้านบนไว้ 7 ตัวเลือก
  2. ใช้การนำทางรองที่ด้านบนขวาสำหรับรายการเช่น "ติดต่อเรา"
  3. ใช้เมนูแบบหลายคอลัมน์ที่จัดระเบียบหมวดหมู่และหมวดหมู่ย่อย
  4. แสดงรูปภาพคุณภาพสูงของผลิตภัณฑ์ของคุณ
  5. ทำให้เมนูการนำทางของคุณโดดเด่นด้วยสีที่ตัดกัน
  6. ผลิตภัณฑ์อ้างอิงโยงเป็นหลายประเภท ผู้ที่กำลังมองหาไดรฟ์ USB อาจอยู่ภายใต้แล็ปท็อป อุปกรณ์เสริม หรือคอมพิวเตอร์
This ambiguous menu creates a lot of hesitation.
เมนูที่คลุมเครือนี้สร้างความลังเลอย่างมาก
เมนูการนำทางหลัก Dont's
  1. มีรายการแบบหล่นลงเดียวที่ใช้ขึ้นเป็นคอลัมน์ยาว
  2. แสดงลิงค์หน้าหมวดหมู่ว่างไปยังการนำทางหลัก
  3. การจัดประเภทสินค้ามากเกินไป หากมีเพียงหนึ่งผลิตภัณฑ์ในหมวดหมู่ (ย่อย) ให้ลบหมวดหมู่และจัดประเภทผลิตภัณฑ์ใหม่
  4. อย่าใช้ตัวเลือกที่คลุมเครือเช่น “เพิ่มเติม”

เมนูรถเข็น

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

UX-Best-Practices-Cart-Menui
ตะกร้าสินค้า เมนู Do's
  1. แสดงราคารวม และ จำนวนสินค้าในรถเข็น
  2. ลิงก์ไปยังหน้ารถเข็นที่สามารถดูรายละเอียดเนื้อหาได้
UX-Best-Practices-Cart-Menu
แรงเสียดทานเกิดขึ้นเมื่อคนต้องหยุดและคิด แรงเสียดทานทำให้ผู้ซื้อช้าลง
ตะกร้าสินค้า เมนู Dont's
  1. แทนที่ "รถเข็นขนาดเล็ก" สำหรับรถเข็นเต็มรูปแบบ ไซต์อีคอมเมิร์ซของคุณต้องการหน้ารถเข็น ไม่ใช่แค่วิดเจ็ตรถเข็น
  2. เชื่อมโยงไปยังหน้าชำระเงินโดยตรงซึ่งไม่ได้แสดงทุกรายละเอียดของสินค้าในตะกร้าสินค้า

ค้นหา

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

ค้นหาสิ่งที่ควรทำ
  1. ใช้ช่องข้อความเปิดที่ด้านบนของทุกหน้า
  2. ใช้การค้นหาแบบเหลี่ยมเมื่อมีสินค้ามากกว่า 20 รายการในหมวดหมู่หนึ่ง
  3. กรองตามราคา สี ขนาด คือตัวเลือกการค้นหาแบบเหลี่ยมขั้นพื้นฐาน
ค้นหา Dont's
  1. ใช้ข้อความเติมในการป้อนข้อมูลการค้นหา เว้นว่างไว้หรือพูดว่า "ค้นหา"
  2. ใช้ตัวเลือกการกรองตามอัตนัย เช่น “งานหนัก” หรือ “งานเบา”

หน้าหมวดหมู่: ดึงดูดนักช้อปให้ใกล้ชิดยิ่งขึ้น

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

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

เก็บหมวดหมู่การนำทางไม่เกะกะ

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

Ecommerce User Guidelines for Category Pages
หน้าหมวดหมู่นี้สำหรับอันดับของ Macy ใน 5 อันดับแรกสำหรับ “ชุดว่ายน้ำ”
หมวดหมู่ การนำทาง Do's
  1. ใช้พื้นที่สีขาวจำนวนมากและข้อความจำกัด
  2. อธิบายหมวดหมู่ย่อยโดยใช้คำไม่กี่คำเท่าที่เป็นไปได้ แต่ต้องเฉพาะเจาะจง
  3. ใช้รูปภาพเพื่อแสดงหมวดหมู่ย่อยหลักอย่างเหมาะสม
  4. ใช้เฉพาะข้อความเพื่อแสดงหมวดหมู่ที่ได้รับความนิยมน้อย
  5. มีหมวดหมู่หลักหากใช้ mega หรือเมนูแบบเลื่อนลง
UX-Best-Practices-Taget-Category-Page
Target อยู่หลัง Macy สำหรับ “Bathing Suit” แม้ว่าจะมีลิงก์ย้อนกลับมากกว่าหน้าชุดว่ายน้ำของ Macy ถึง 30 เท่า
หมวดหมู่การนำทาง Dont's
  1. แสดงรูปภาพที่ไม่เกี่ยวข้อง
  2. พึ่งพาข้อความเท่านั้น
  3. ใช้ข้อความหลายสี
  4. ดันโปรแรงๆ.
  5. ใช้ชื่อผลิตภัณฑ์สำหรับหมวดหมู่ย่อย

บนเว็บไซต์ของเป้าหมาย คุณต้องมองหา "ชุดว่ายน้ำรุ่นน้อง" ยากมาก

เนื้อหาหน้าหมวดหมู่

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

หมวดหมู่ หน้า เนื้อหา สิ่งที่ควรทำ
  1. มุ่งเน้นไปที่ความต้องการของผู้ซื้อของคุณ
  2. ใช้คีย์เวิร์ดเชิงความหมายเพื่อเสริมคีย์เวิร์ดหลักของคุณ
  3. ที่อยู่คำถามที่พบบ่อยที่เกี่ยวข้องกับหมวดหมู่
หมวดหมู่ เนื้อหา ห้าม
  1. วางสำเนาขนาดใหญ่ที่ด้านบนของหน้า
  2. ใช้คำหลักของคุณซ้ำแล้วซ้ำอีก
  3. ใช้รูปภาพที่ไม่เกี่ยวข้อง คุณเชื่อไหมว่ารูปถ่ายของชุดสูทผู้ชายในหน้าชุดว่ายน้ำของ Target?
  4. ใส่ข้อความในภาพ

หน้ารายการสินค้า: แจ้งและสร้างความมั่นใจ

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

เนื้อหา SEO สำหรับหน้ารายการผลิตภัณฑ์

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

Best Buy nails the basics.
Best Buy เล็บพื้นฐาน
SEO เนื้อหาที่ต้องทำ
  1. ใช้คำหลักที่มีความเกี่ยวข้องมากที่สุดและมีความยากต่ำสุดในชื่อหน้าและแท็ก h1 ของคุณ อ่านเพิ่มเติมเกี่ยวกับการวิจัยคำหลัก
  2. ใช้คำหลักเพิ่มเติมในการสรุป สั้นๆ ของหมวดหมู่
  3. หากต้องการข้อมูลเพิ่มเติม ให้วางไว้ใต้รายการผลิตภัณฑ์
  4. ใช้เบรดครัมบ์เพื่อช่วยให้ผู้ใช้นำทางและกระจายเพจแรงก์ไปยังหน้าหมวดหมู่ของคุณ
  5. แสดงราคาและตัวเลือก
  6. ให้ภาพรวมผลิตภัณฑ์ หากมีปุ่มหยิบใส่ตะกร้า
เนื้อหา SEO ที่ไม่ควรทำ
  1. บรรจุเนื้อหามากเกินไปก่อนที่จะแสดงรายการ
  2. ใช้ชื่อที่น่ารักหรือเปรียบเทียบสำหรับผลิตภัณฑ์ หากคุณกำลังขายรองเท้าเด็ก อย่าเรียกรองเท้าแตะสีน้ำตาลว่า "จอร์จ"

รายการสินค้านำทาง

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

รายการสินค้า การนำทางหน้าเพจ Do's
  1. แสดงจำนวนหน้าก่อนและหลังรายการสินค้า
  2. แสดงจำนวนสินค้าทั้งหมดในหมวดนั้นๆ
  3. อนุญาตให้ผู้ใช้จัดเรียงตาม: ราคา,
  4. อนุญาตให้ผู้ใช้ข้ามไปยังหน้าที่ต้องการในผลลัพธ์
รายการสินค้า การนำทางหน้าเพจ Dont's
  1. ทำให้ผู้ใช้คลิกลูกศรเพื่อเปลี่ยนหน้า
  2. สมมติว่าผู้คนจะเลื่อนกลับขึ้นไปด้านบนหรือคลิกปุ่ม "ดูทั้งหมด"
  3. ใช้ภาพถ่ายผลิตภัณฑ์ที่มีขนาดเล็กหรือพร่ามัว

หน้าผลิตภัณฑ์: ที่ซึ่ง SEO, UX และการขายพบ

รายละเอียดผลิตภัณฑ์ทั้งหมดมีความสำคัญ สำหรับ SEO และประสบการณ์ผู้ใช้ ลิงก์ภายในช่วยเพิ่ม SEO และช่วยให้ผู้ใช้กลับไปที่หน้ารายการผลิตภัณฑ์ การออกแบบหน้าผลิตภัณฑ์ที่ใช้งานง่ายจะมีข้อมูลผลิตภัณฑ์ที่สำคัญอยู่ครึ่งหน้าบน

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

การจัดวางเนื้อหาหน้าผลิตภัณฑ์

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

Samsung's Product Page Illustrates Many Best Practices
พลาดไม่ได้กับปุ่มเพิ่มในรถเข็นของ Samsung
After the button is clicked, it is very clear the product was added. Users are sent right to the shopping page.
หลังจากคลิกปุ่ม จะเห็นได้ชัดเจนว่ามีการเพิ่มผลิตภัณฑ์ ผู้ใช้จะถูกส่งไปยังหน้าตะกร้าสินค้าโดยตรง
หน้าผลิตภัณฑ์ เนื้อหา เลเยอร์ สิ่งที่ต้องทำ
  1. ระบุข้อมูลสรุปผลิตภัณฑ์สั้นๆ ที่ด้านบนของหน้าหรือข้างรูปภาพ
  2. เพิ่มเส้นขอบหรือพื้นหลังแรเงาให้กับ "พื้นที่ดำเนินการ" ของคุณ ซึ่งผู้คนจะเลือกตัวเลือกและคลิกปุ่มของคุณ
  3. แสดงตัวเลือกการสั่งซื้อใกล้ด้านบนสุดในพื้นที่ดำเนินการ
  4. มีเบรดครัมบ์บนหน้าผลิตภัณฑ์
  5. ใส่รายละเอียดผลิตภัณฑ์ รีวิว ข้อมูล ฯลฯ ใต้รูปภาพผลิตภัณฑ์และพื้นที่ CTA
Why Hide The Most Important Button?
ทำไมต้องซ่อนปุ่มที่สำคัญที่สุด?
หน้าผลิตภัณฑ์ Content Layering Dont's
  1. วางสำเนาขนาดใหญ่ไว้ใกล้หรือเหนือปุ่ม CTA
  2. ซ่อนปุ่มเพิ่มในรถเข็นจนกว่าจะมีคนทำการเลือก
  3. ทำให้ข้อมูลห้องว่างเพิ่มขึ้นเพียงคลิกเดียว
  4. มีการเปลี่ยนแปลงเล็กน้อยเมื่อมีคนคลิกปุ่มเพิ่มในรถเข็นของคุณ ผู้คน จะ พลาดข้อความ "เพิ่มสำเร็จ" ของคุณ

ข้อผิดพลาดทั่วไปที่ฉันเห็นในธีมอีคอมเมิร์ซของ WordPress จำนวนมากถูกซ่อนไว้โดยปุ่ม "หยิบใส่รถเข็น"

Victoria's Secret Is To Not Hide The Button
ความลับของวิกตอเรียคือการไม่ซ่อนปุ่ม

รูปภาพหน้าผลิตภัณฑ์

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

UX-Best-Practices-Product-Photos
รูปภาพหน้าผลิตภัณฑ์ Do's
  1. ใช้ภาพถ่ายความละเอียดสูงขนาดใหญ่บนพื้นหลังสีขาว
  2. ใช้คุณสมบัติการซูมเพื่อให้ผู้ใช้ดูรายละเอียดด้วยตนเอง
  3. ให้ผู้ใช้เลื่อนไปมาระหว่างภาพได้
  4. ระบุคำแนะนำที่ชัดเจนว่าเปิดใช้งานคุณสมบัติภาพหรือซูมเพิ่มเติม
UX-Best-Practices-Bad-Product-Photo
รูปภาพหน้าผลิตภัณฑ์ Dont's
  1. แสดงภาพ “ไลฟ์สไตล์” หรือผลิตภัณฑ์ของคุณ แสดงเฉพาะสินค้า
  2. อย่าทำให้รูปภาพของคุณเปื้อนด้วยโลโก้ ลายน้ำ หรือพื้นหลัง
  3. บังคับป๊อปอัปรูปภาพเพื่อดูรายละเอียดเพิ่มเติมหรือรูปภาพเพิ่มเติม

ขั้นตอนการชำระเงิน: สร้างขึ้นเพื่อความไว้วางใจ

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

หน้าตะกร้าสินค้า

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

Macy's cart page hits many best practices.
หน้าตะกร้าสินค้า Do's
  1. ยืนยันทุกอย่าง สินค้า ขนาด สี ปริมาณ ความพร้อมจำหน่าย วันที่จัดส่ง การจัดส่งโดยประมาณ
  2. ให้ผู้ใช้นำทางกลับไปยังสินค้าในรถเข็นได้โดยตรง
  3. ทำให้ง่ายต่อการเปลี่ยนจำนวนหรือลบสินค้า ให้ผู้ใช้เปลี่ยนจำนวนเป็น 0 เพื่อลบผลิตภัณฑ์หรือคลิกปุ่ม "นำออก"
  4. แสดงรูปภาพของผลิตภัณฑ์ในสีที่สั่งซื้อ หากลูกค้าของคุณสั่งแจ็กเก็ตสีดำและเห็นเสื้อสีน้ำเงินที่จุดชำระเงิน พวกเขาจะสูญเสียความมั่นใจ
  5. ทำให้ปุ่มชำระเงินต่อปรากฏชัดเจน แต่อนุญาตให้ผู้คนช็อปปิ้งต่อได้
  6. แสดงราคาภายนอกทั้งหมด
การนำเสนอหน้ารถเข็น Sopping Dont's
  1. ขอบัตรเครดิตหรือที่อยู่อีเมลก่อนกำหนด ให้คนยืนยันสิ่งที่พวกเขากำลังซื้อ
  2. อย่าใช้ปุ่ม "อัปเดต" เพื่อลบผลิตภัณฑ์

หน้าลงทะเบียน

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

UX-Best-Practices-Checkout-As-Guest
หน้าลงทะเบียน Do's
  1. เน้นถึงประโยชน์ของการสร้างบัญชี
  2. ใช้เค้าโครงที่เรียบง่าย
  3. อย่าถามเกิน 2 คำถาม
หน้าลงทะเบียน Dont's
  1. บังคับให้คนสร้างบัญชี ไม่มีใครอยากจำชื่อผู้ใช้และรหัสผ่านใหม่
  2. ขอบัตรเครดิตหรือที่อยู่อีเมลก่อนกำหนด ให้คนยืนยันสิ่งที่พวกเขากำลังซื้อ
  3. อย่าใช้ปุ่ม "อัปเดต" เพื่อลบผลิตภัณฑ์

หน้าชำระเงิน

หลังจากที่ผู้ซื้อรู้สึกมั่นใจว่ากำลังสั่งซื้อผลิตภัณฑ์ที่ถูกต้องจากบริษัทที่ถูกต้อง (ของคุณ) ก็ถึงเวลาเริ่มงานปาร์ตี้

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

UX-Best-Practices-Macys-Checkout-Process
หน้าชำระเงิน สิ่งที่ควรทำ
  1. ขอข้อมูลที่จำเป็นเพียงเล็กน้อยเท่านั้น
  2. แทนที่การนำทางหลักด้วยการนำทาง "ผู้ติดต่อ"
  3. ทำให้ขั้นตอนการชำระเงินของคุณสั้นและขั้นตอนของคุณชัดเจนและมีเหตุผล
  4. แสดงความคืบหน้าระหว่างขั้นตอนการชำระเงิน
  5. ให้ผู้ใช้ใช้ที่อยู่สำหรับเรียกเก็บเงินเป็นที่อยู่สำหรับจัดส่งได้ด้วยคลิกเดียว
หน้าชำระเงิน Dont's
  1. นำเสนอข้อมูลหรือทางเลือกใหม่
  2. บังคับให้ผู้คน “เข้าร่วม” หรือ “เป็นสมาชิก”
  3. ทำให้ผู้คนป้อนข้อมูลเดิมซ้ำสองครั้ง

เว็บไซต์ของคุณเป็นอย่างไร?

คุณไม่จำเป็นต้องมีเงินล้านเพื่อสร้างประสบการณ์การช็อปปิ้งที่ดี ไม่มีแบรนด์ใหญ่ใดที่ตรงตามหลักเกณฑ์ 800+ ที่แนะนำโดย Nielson Norman Group อย่าถือว่าลูกค้ารู้จักเว็บไซต์ของคุณเหมือนคุณ ทำความเข้าใจพื้นฐานเหล่านี้ แล้วคุณจะได้ Google และลูกค้าชื่นชอบไซต์ของคุณและซื้อจากคุณ

คู่มือ UX ของอีคอมเมิร์ซ