Shopify เคล็ดลับการออกแบบและแนวทางปฏิบัติที่ดีที่สุดของ UX

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

Shopify ขับเคลื่อนธุรกิจอีคอมเมิร์ซมากกว่าครึ่งล้านใน 175 ประเทศ ตั้งแต่ปี 2012 จำนวนผู้ขายบนแพลตฟอร์ม Shopify เพิ่มขึ้นโดยเฉลี่ย 74% ต่อปี และผู้ค้าเหล่านี้มียอดขายมากกว่า 55 พันล้านดอลลาร์เนื่องจาก Shopify เป็นหนึ่งในแพลตฟอร์มอีคอมเมิร์ซ ที่เป็นที่รู้จัก และ ง่ายที่สุด ในปัจจุบัน

การออกแบบสำหรับ Shopify สามารถสร้างกำไรได้มากสำหรับนักออกแบบ

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

ในบทความนี้ เราจะมาสำรวจเคล็ดลับการออกแบบยอดนิยมของ Shopify

Shopify มีคุณสมบัติอะไรบ้าง?

Shopify มาพร้อมกับคุณสมบัติทั้งหมดที่คุณคาดหวังจากแพลตฟอร์มอีคอมเมิร์ซชั้นนำ:

  • การผสานรวมกับเกตเวย์การชำระเงินภายนอก เช่น Stripe และ PayPal
  • เข้าถึง Shopify Payments โดยไม่มีค่าธรรมเนียมเมื่อเปรียบเทียบกับตัวเลือกภายนอก
  • ความสามารถในการอนุญาตให้ชำระเงินด้วยบัตรของขวัญหรือเครดิตร้านค้า
  • หน้าชำระเงินที่ปรับแต่งได้ (เฉพาะลูกค้า Shopify Plus)
  • ตัวเลือกบัญชีผู้ใช้หรือการชำระเงินของผู้เยี่ยมชม
  • หน้าคงที่ (เช่น นโยบายความเป็นส่วนตัวหรือข้อกำหนดและเงื่อนไข)
  • หน้า Landing Page ที่มีเนื้อหาส่งเสริมการขาย
  • การเข้าถึงรหัสผ่านสำหรับร้านค้าที่กำลังพัฒนา
  • ตัวเลือกสินค้าที่มีตัวเลือกที่ปรับแต่งได้มากมาย
  • คอลเลกชันอัจฉริยะเพื่อจัดหมวดหมู่ผลิตภัณฑ์โดยอัตโนมัติ
  • ฟังก์ชั่นการค้นหาและแท็กเพื่อช่วยในการค้นพบผลิตภัณฑ์
  • ฟังก์ชันบล็อกพร้อมความสามารถในการฝังผลิตภัณฑ์ลงในโพสต์
  • API ที่จะช่วยนักพัฒนาสร้างเว็บไซต์แบบไดนามิกและแอพมือถือ

ส่งเสริมการค้นพบผลิตภัณฑ์อีคอมเมิร์ซ

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

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

การนำทางที่กำหนดเอง

การนำเสนอทางเลือกให้กับลูกค้ามากเกินไปอาจทำให้การวิเคราะห์เป็นอัมพาต (เมื่อมีตัวเลือกที่มีอยู่มากเกินไปในการตัดสินใจอย่างมีประสิทธิภาพส่งผลให้เกิดความหงุดหงิดและการละทิ้ง) ด้วยการออกแบบการนำทางแบบกำหนดเอง เราสามารถ จัดลำดับความสำคัญของ ผลิตภัณฑ์และ "คอลเลกชัน" ที่แปลงได้อย่างมีประสิทธิภาพสูงสุด ตัวอย่างเช่น การแสดงคอลเลกชั่น "โต๊ะทำงาน" อย่างเห็นได้ชัดหากผลิตภัณฑ์โต๊ะทำงานเป็นที่นิยมมากที่สุด การนำทางแบบกำหนดเองเหล่านี้สามารถแก้ไขได้ใน Shopify CMS เพื่อเปิดใช้งานการทดสอบ A/B แบบไม่เป็นทางการ

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

เคล็ดลับการออกแบบ Shopify: ลองใช้การนำทางแบบกำหนดเอง
ร้านค้า Shopify โดย Grovemade โดยใช้การนำทางที่ปรับให้เหมาะสมที่สุด

ของสะสม

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

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

แท็กสินค้า

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

เคล็ดลับการออกแบบ Shopify: การใช้ระบบแท็ก Shopify
การกำหนดแท็กให้กับสินค้าบนแพลตฟอร์ม Shopify

คำนึงถึงเคล็ดลับการออกแบบ Shopify เหล่านี้:

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

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

ค้นหา

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

นี่คือแนวทางปฏิบัติที่ดีที่สุดของ Shopify ที่ควรพิจารณาเมื่อออกแบบประสบการณ์การค้นหา:

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

ปรับปรุงการออกแบบร้านค้า Shopify โดยการออกแบบประสบการณ์การค้นหาที่ดีขึ้น
การค้นหาที่ครอบคลุม แต่มีโครงสร้างดีโดย Sunday Somewhere

Shopify แนวทางปฏิบัติที่ดีที่สุดสำหรับหน้าสินค้า

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

ใช้รูปภาพสินค้าที่น่าดึงดูด

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

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

เคล็ดลับการออกแบบ Shopify: ร้านค้า Shopify ที่มีภาพที่ยอดเยี่ยมแปลงได้ดีขึ้น
หน้าผลิตภัณฑ์ที่ดึงดูดสายตาโดย Hardgraft

แสดงข้อมูลผลิตภัณฑ์ที่ชัดเจน

จำนวนลูกค้าอีคอมเมิร์ซที่น่าตกใจ (แต่ไม่น่าแปลกใจ) ละทิ้งตะกร้าสินค้าเนื่องจากขาดข้อมูลเกี่ยวกับต้นทุนจริง ลูกค้า 60% อ้างถึงค่าใช้จ่ายที่ไม่คาดคิด (เช่น ค่าขนส่ง ภาษี ค่าธรรมเนียม) เป็นสาเหตุของการละทิ้งรถเข็น และ 23% ไม่สามารถคำนวณต้นทุนทั้งหมดล่วงหน้าได้ การขาดความโปร่งใสเป็นวิธีที่แน่นอนในการควบคุม Conversion บนเว็บไซต์อีคอมเมิร์ซ ดังนั้นโปรดคำนึงถึงเคล็ดลับและกลเม็ดของ Shopify เหล่านี้:

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

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

สร้างความไว้วางใจและความมั่นใจ

จากข้อมูลของสถาบัน Baymard การขาดความไว้วางใจถือเป็นสาเหตุที่ลูกค้า 19% ละทิ้งที่จุดชำระเงิน โชคดีที่ร้านค้า Shopify ทั้งหมดจัดส่งด้วย SSL (การชำระเงินที่ปลอดภัย) โดยค่าเริ่มต้น แต่ยังอนุญาตให้ลูกค้าเขียนรีวิวไว้เป็นหลักฐานทางสังคม

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

ร้านค้า Shopify ที่ใช้รีวิวสินค้าซึ่งเป็นส่วนหนึ่งของแนวทางปฏิบัติที่ดีที่สุดของ Shopify
การดำเนินการตรวจสอบผลิตภัณฑ์ Shopify store โดย MVMT Watches

นอกจากการตรวจสอบทางสังคมแล้ว ให้พิจารณาสร้างความมั่นใจให้กับลูกค้าโดยใช้โซลูชันแชทสด เช่น Intercom, Zendesk, Drift หรือ Kayako Shopify ช่วยให้สามารถผสานรวมกับบริการของบุคคลที่สามผ่าน App Store และผ่านการติดตั้งด้วยตนเอง

แสดงคำแนะนำผลิตภัณฑ์ที่เกี่ยวข้อง

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

ธีม Shopify ที่แปลงได้ดีที่สุดใช้กลยุทธ์การขายต่อเนื่องและการขายต่อยอด
Hardgraft ใช้กลยุทธ์การเพิ่มยอดขายที่น่าสนใจ

บูรณาการประสบการณ์การช็อปปิ้งในแบบของคุณ

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

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

การเพิ่มประสิทธิภาพการชำระเงิน

การชำระเงินของแขกเทียบกับบัญชีลูกค้า

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

Shopify
Shopify อนุญาตทั้งบัญชีลูกค้าและการชำระเงินของผู้เยี่ยมชม

ระบุจุดบกพร่อง UX และลดการหลุดร่วง

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

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

การแสดงภาพช่องทางเป้าหมายโดยใช้ Google Analytics เพื่อวิเคราะห์ธีม Shopify ที่แปลงได้ดีที่สุด
การแสดงภาพช่องทางเป้าหมายโดยใช้ Google Analytics โดย Patrick Han

เพื่อผลลัพธ์ที่ดีที่สุด ให้ผสานรวม Shopify กับเครื่องมืออย่าง Crazy Egg, Hotjar และ FullStory เพื่อสังเกตปัญหาเหล่านี้โดยละเอียดยิ่งขึ้นโดยใช้แผนที่ความหนาแน่นและการบันทึกผู้เยี่ยมชม

บทสรุป

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

• • •

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

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