eCommerce UX – กลยุทธ์และหลักการออกแบบที่จำเป็น

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

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

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

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

การเดินทางของผู้ใช้รวมถึง:

  • การค้นพบเว็บไซต์
  • ค้นหาสินค้าและเรียกดู
  • หน้าสินค้า
  • รถเข็น
  • เช็คเอาท์
  • การยืนยัน

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

ขั้นตอนของการเดินทางของลูกค้า ux ของอีคอมเมิร์ซ
ขั้นตอนการเดินทางของผู้ใช้ใน การออกแบบเว็บไซต์อีคอมเมิร์ซ

การค้นพบเว็บไซต์

วางตำแหน่งแบรนด์อย่างชัดเจน

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

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

การออกแบบอีคอมเมิร์ซ ux สำหรับหน้า Landing Page
การวางตำแหน่งแบรนด์โดยใช้แบบอักษร ภาพถ่าย และคัดลอกโดย Bang & Olufsen

แสดงคำกระตุ้นการตัดสินใจที่เกี่ยวข้อง

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

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

คำกระตุ้นการตัดสินใจอีคอมเมิร์ซ
โพลารอยด์แสดง CTA เพื่อซื้อของขวัญในหน้าแรก

ช่างตัดเสื้อแลนดิ้งเพจสำหรับ SEO

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

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

หน้า Landing Page ของอีคอมเมิร์ซบนมือถือ
หน้า Landing Page เฉพาะสำหรับสเตชันเนอรีงานแต่งงานโดย Papier

ค้นหาผลิตภัณฑ์และเรียกดู

ให้การค้นหาในสถานที่

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

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

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

ช่องค้นหาอีคอมเมิร์ซ
การใช้งานการค้นหาโดย Apple

สร้างแรงบันดาลใจให้ผู้เยี่ยมชมในโหมดการค้นพบ

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

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

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

ecommerce ux - การค้นพบผลิตภัณฑ์
Etsy ช่วยให้ผู้ใช้ค้นพบสิ่งที่ได้รับความนิยมนอกเหนือจากการแสดงหมวดหมู่

ใช้ตัวกรองและการค้นหาแบบเหลี่ยมเพชรพลอย

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

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

เมื่อผู้ใช้ใช้ตัวกรอง จะปรากฏทันทีใน UI ว่ามีการใช้ตัวกรองใด ผู้ใช้ควรสามารถลบตัวกรองที่ใช้ได้อย่างง่ายดาย

ASOS แสดงช่วงของตัวกรองโดยละเอียดสำหรับแต่ละหมวดหมู่และแสดงอย่างชัดเจนว่ามีการใช้ตัวกรองใด

การกรองอีคอมเมิร์ซบนมือถือ
ตัวกรองเฉพาะหมวดหมู่โดย ASOS

หน้าสินค้า

แสดงการดำเนินการหลักอย่างชัดเจน

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

Lowe's ผู้ค้าปลีกอุปกรณ์ปรับปรุงบ้านช่วยให้ผู้ใช้ทราบวิธีเพิ่มผลิตภัณฑ์ลงในรถเข็นโดยใช้ปุ่มสีเขียวขนาดใหญ่เป็นหนึ่งในสิ่งที่โดดเด่นที่สุดในหน้าเว็บ

แนวทางปฏิบัติที่ดีที่สุดของอีคอมเมิร์ซ ux แสดงการกระทำหลักอย่างเด่นชัด
Lowe's แสดงการทำงานหลักของ "Add to Cart" เป็นปุ่มสีเขียวขนาดใหญ่

ให้ข้อมูลรายละเอียดผลิตภัณฑ์

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

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

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

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

สร้างความไว้วางใจให้กับลูกค้า

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

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

ecommerce ux - นโยบายการจัดส่งและการคืนสินค้า
ASOS จะแสดงข้อมูลการจัดส่งและการส่งคืนในรูปแบบที่เชื่อมโยงจากหน้ารายละเอียดผลิตภัณฑ์

เพิ่มหลักฐานทางสังคม

หลักฐานทางสังคมเป็นแนวคิดที่หมายถึงผู้คนได้รับอิทธิพลจากพฤติกรรมของผู้อื่น แนวคิดนี้เป็นส่วนหนึ่งของหลักการชักชวนของ Dr. Robert Cialdini (นักวิจัยชั้นนำในศาสตร์แห่งอิทธิพล) และได้รับการพิสูจน์แล้วว่าใช้ได้ผล

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

ecommerce ux บทวิจารณ์ของลูกค้า
รีวิวสินค้าในอเมซอน.

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

แสดงสรุปคำสั่งซื้อที่ชัดเจน

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

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

กระเป๋าช้อปปิ้งอีคอมเมิร์ซ ux บนมือถือ
ภาพรวมคำสั่งซื้อและรายละเอียดเกี่ยวกับ The Modist

เช็คเอาท์

ให้ผู้ใช้ชำระเงินในฐานะแขก

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

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

อีคอมเมิร์ซ ux ลงชื่อเข้าใช้
หน้าจอลงชื่อเข้าใช้อีสปพร้อมตัวเลือก “ดำเนินการต่อในฐานะแขก”

ให้คำติชมด้วยภาพในระหว่างขั้นตอนการชำระเงิน

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

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

แถบความคืบหน้าการชำระเงินอีคอมเมิร์ซ ux
Apple มีแถบความคืบหน้าการชำระเงินทีละขั้นตอน

ใช้วิธีการชำระเงินทั่วไป

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

ในเนเธอร์แลนด์ มักใช้ iDEAL สำหรับธุรกรรมอีคอมเมิร์ซ และ 60% ของผู้บริโภคชาวดัตช์ใช้ iDEAL ในการซื้อครั้งล่าสุด ร้านค้าปลีกเสื้อผ้า Scotch & Soda อนุญาตให้ผู้ซื้อชำระเงินด้วย iDEAL และ PayPal

ตัวเลือกการชำระเงินอีคอมเมิร์ซ
วิธีการชำระเงินแบบต่างๆ ในกระบวนการเช็คเอาต์ของ Scotch & Soda

ยืนยันการสั่งซื้อ

แสดงรายละเอียดยืนยันการสั่งซื้อหลังจากซื้อ

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

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

ecommerce ux ยืนยันการสั่งซื้อ
แนวคิดอีเมลยืนยันการสั่งซื้อโดย Drew Christiano

ส่งคำสั่งซื้อและการอัปเดตการจัดส่งทางอีเมล

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

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

สรุป

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

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

• • •

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

  • เทรนด์อีคอมเมิร์ซที่โดดเด่นและอิทธิพลที่มีต่อการออกแบบ (พร้อมอินโฟกราฟิก)
  • eCommerce UX สำหรับประสบการณ์มือถือ
  • eCommerce UX – ภาพรวมของแนวทางปฏิบัติที่ดีที่สุด (พร้อมอินโฟกราฟิก)
  • สุดยอดคู่มือการออกแบบเว็บไซต์อีคอมเมิร์ซ
  • การออกแบบอีคอมเมิร์ซใหม่: การเปลี่ยนแปลงเล็กน้อยทำให้การปรับปรุง UX ที่สำคัญ