สุดยอดคู่มือการออกแบบเว็บไซต์อีคอมเมิร์ซ

เผยแพร่แล้ว: 2022-03-11

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

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

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

ออกแบบอีคอมเมิร์ซเพื่อความไว้วางใจและความปลอดภัย

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

การออกแบบเว็บไซต์ ASOS eCommerce ให้ eCommerce UX . ที่ยอดเยี่ยม
ASOS มอบ UX อีคอมเมิร์ซที่ยอดเยี่ยมด้วยการแบ่งปันข้อมูลที่เกี่ยวข้องเกี่ยวกับธุรกิจและการชำระเงินที่ปลอดภัยในส่วนท้าย

ต่อไปนี้คือวิธีการบางอย่างที่จะสื่อถึงความน่าเชื่อถือ:

  • รวมภาพรวมของธุรกิจ:

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

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

เขียนด้วยภาษาธรรมดาและหลีกเลี่ยงศัพท์แสงทางกฎหมายหรือนโยบายภายใน

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

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

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

ข้อควรพิจารณาในการออกแบบ UI ของอีคอมเมิร์ซ

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

เคล็ดลับการออกแบบส่วนต่อประสานผู้ใช้ที่จำเป็นมีดังนี้:

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

คู่มือการออกแบบเว็บไซต์อีคอมเมิร์ซ: การออกแบบเว็บที่สวยงาม
การออกแบบเว็บไซต์อีคอมเมิร์ซที่ตอบสนอง (โดย กิก้า ทามารัชวิลี)

ความสำคัญของการนำทางไซต์อีคอมเมิร์ซที่ปราศจากแรงเสียดทาน

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

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

หมวดหมู่สินค้าที่ชัดเจน

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

ค้นหาสินค้า

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

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

การออกแบบเว็บไซต์อีคอมเมิร์ซ: การกรองผลการค้นหา
Sportsgirl อนุญาตให้จัดเรียงและกรองผลการค้นหา

ผลิตภัณฑ์กรอง

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

ดูสินค้าอย่างรวดเร็ว

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

การออกแบบอีคอมเมิร์ซพร้อมการดูผลิตภัณฑ์อย่างรวดเร็ว
หน้าต่างโมดอล "มุมมองด่วน" จาก Urban Outfitters

ข้อเสนอพิเศษ

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

ต้องการนักออกแบบ UX อิสระที่ทำงานเต็มเวลาในสหรัฐฯ

การออกแบบหน้าผลิตภัณฑ์อีคอมเมิร์ซ

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

ให้ภาพสินค้าที่ยอดเยี่ยม

หน้ารายละเอียดผลิตภัณฑ์การออกแบบเว็บอีคอมเมิร์ซ
รูปภาพผลิตภัณฑ์ของ MR PORTER มีคุณลักษณะการซูมและแม้แต่วิดีโอ

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

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

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

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

UX . อีคอมเมิร์ซที่ราบรื่นและราบรื่น
การเลือกตัวเลือกสินค้าและเพิ่มสินค้าลงตะกร้า (โดยแดนเนียล)

ให้ข้อมูลผลิตภัณฑ์ในปริมาณที่เหมาะสม

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

คู่มือการออกแบบเว็บไซต์อีคอมเมิร์ซ การออกแบบหน้ารายละเอียดผลิตภัณฑ์
HODINKEE แสดงข้อมูลผลิตภัณฑ์โดยละเอียด

จ้างการออกแบบที่โน้มน้าวใจ

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

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

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

แสดงสินค้าที่เกี่ยวข้องและแนะนำ

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

คำแนะนำผลิตภัณฑ์อีคอมเมิร์ซและผลิตภัณฑ์ที่เกี่ยวข้อง
French Connection แสดงผลิตภัณฑ์เสริมและแนะนำสำหรับ eCommerce UX ที่ยอดเยี่ยม

การออกแบบรถเข็น

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

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

หนึ่งในการออกแบบอีคอมเมิร์ซที่ดีที่สุด
ตะกร้าสินค้าโดย OVO Things

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

การออกแบบการชำระเงินอีคอมเมิร์ซ

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

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

eCommerce UX: การออกแบบการชำระเงินอีคอมเมิร์ซ
Crumpler มีการชำระเงินหน้าเดียวพร้อมตัวเลือกในการซื้อสินค้าในฐานะแขก

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

การออกแบบ UI การชำระเงินอีคอมเมิร์ซ
lululemon แสดงให้เห็นว่ามีกระบวนการสามขั้นตอนในการซื้อให้เสร็จสมบูรณ์

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

สรุป

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

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

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

  • eCommerce UX – กลยุทธ์และหลักการออกแบบที่จำเป็น
  • eCommerce UX สำหรับประสบการณ์มือถือ
  • วิธีดึงดูดผู้ซื้ออีคอมเมิร์ซผ่าน UX Design
  • การออกแบบอีคอมเมิร์ซใหม่: การเปลี่ยนแปลงเล็กน้อยทำให้การปรับปรุง UX ที่สำคัญ