Shopify เคล็ดลับการออกแบบและแนวทางปฏิบัติที่ดีที่สุดของ UX
เผยแพร่แล้ว: 2022-03-11Shopify ขับเคลื่อนธุรกิจอีคอมเมิร์ซมากกว่าครึ่งล้านใน 175 ประเทศ ตั้งแต่ปี 2012 จำนวนผู้ขายบนแพลตฟอร์ม Shopify เพิ่มขึ้นโดยเฉลี่ย 74% ต่อปี และผู้ค้าเหล่านี้มียอดขายมากกว่า 55 พันล้านดอลลาร์เนื่องจาก 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 นั้นมีความเกี่ยวข้อง ทันเวลา และที่สำคัญที่สุดคือทำให้เกิด Conversion ในระดับสูง
แม้ว่าคอลเลกชันเหล่านี้จะถูกกำหนดไว้เบื้องหลัง แต่ก็เป็นประโยชน์สำหรับนักออกแบบอีคอมเมิร์ซที่จะทราบถึงฟังก์ชันการทำงานนี้เมื่อออกแบบสำหรับ Shopify
แท็กสินค้า
แท็กที่แสดง/มองเห็นได้ช่วยให้ลูกค้าค้นหาผลิตภัณฑ์ที่คล้ายคลึงกันได้ และดังที่กล่าวไว้ข้างต้น สามารถใช้แท็กเหล่านี้ภายในเพื่อสร้างคอลเลกชันได้ อย่างไรก็ตาม ประโยชน์สูงสุดของแท็กอยู่ที่การใช้แท็กเพื่อสร้างการ ค้นหาแบบเหลี่ยม ซึ่งช่วยให้ลูกค้าสามารถกรองผลิตภัณฑ์ตามแอตทริบิวต์การกำหนดแท็ก เช่น "สีเหลือง"
คำนึงถึงเคล็ดลับการออกแบบ Shopify เหล่านี้:
- เพื่อความกระจ่างเพิ่มเติม แสดงว่ามีการใช้ตัวกรองใด
- อนุญาตให้ลูกค้าลบตัวกรองเพื่อขยายการค้นหาให้กว้างขึ้น
- ตัดทอนตัวกรองเพื่อแสดงเฉพาะที่นิยมมากที่สุดได้อย่างรวดเร็วก่อน
ค้นหา
ฟังก์ชันการค้นหามีประโยชน์สำหรับลูกค้าที่รู้แน่ชัดว่าพวกเขากำลังค้นหาอะไร และมีความสำคัญอย่างยิ่งสำหรับนักช็อปบนอุปกรณ์เคลื่อนที่ที่พบว่าการท่องเว็บและกรองข้อมูลน่าหงุดหงิดเนื่องจากความอึดอัดตามธรรมชาติของการโต้ตอบบนอุปกรณ์เคลื่อนที่
นี่คือแนวทางปฏิบัติที่ดีที่สุดของ Shopify ที่ควรพิจารณาเมื่อออกแบบประสบการณ์การค้นหา:
- อย่า ซ่อนช่องค้นหา ลดแรงเสียดทานด้วยการทำให้ใช้งานได้ทันที
- วางการค้นหาในที่ที่ลูกค้าคาดหวัง (เช่น ด้านบนขวาหรือส่วนกลาง)
- แสดงช่องป้อนข้อมูลทั้งหมด ไม่ใช่แค่ไอคอนค้นหา
- รวมฟังก์ชันเติมข้อความอัตโนมัติเพื่อช่วยให้ผู้ใช้ค้นหาได้เร็วขึ้น
- ออกแบบสำหรับความผิดพลาดของมนุษย์โดยใช้ผลลัพธ์ที่แนะนำและการแก้ไขอัตโนมัติ
- บันทึกการค้นหาของผู้ใช้และส่งอีเมลติดตามผลหากไม่มีการขาย
Shopify แนวทางปฏิบัติที่ดีที่สุดสำหรับหน้าสินค้า
Shopify นำเสนอคุณสมบัติทั้งหมดที่จำเป็นในการดึงดูดผู้ซื้ออีคอมเมิร์ซและแนะนำผู้ใช้ไปยังจุดชำระเงินได้อย่างคล่องแคล่ว หากเรารวมคุณลักษณะเหล่านี้เข้ากับแนวทางปฏิบัติที่ดีที่สุดสำหรับอีคอมเมิร์ซ เราสามารถผลักดันจำนวนการชำระเงินที่ละทิ้งไปให้ต่ำกว่าสถิติเฉลี่ยได้

ใช้รูปภาพสินค้าที่น่าดึงดูด
สิ่งที่ทำให้เว็บไซต์อีคอมเมิร์ซที่ดีคือภาพที่ดึงดูดใจผู้ใช้ทางอารมณ์ ด้วยเหตุนี้ Shopify จึงอนุญาตให้อัปโหลดรูปภาพและตัวเลือกสินค้าได้หลายแบบ อย่างไรก็ตาม ตามแนวทางปฏิบัติที่ดีที่สุดของ Shopify ให้แสดงรูปภาพผลิตภัณฑ์เหล่านี้ อย่างน้อยหนึ่ง ภาพในขนาด (กล่าวคือ ล้อมรอบด้วยวัตถุอื่นๆ เพื่อแสดงให้เห็นว่าสินค้ามีขนาดใหญ่เพียงใด) เพื่อกำหนดความคาดหวัง
ลูกค้าต้องการทำการตรวจสอบผลิตภัณฑ์อย่างละเอียดถี่ถ้วนก่อนที่จะตัดสินใจซื้อ เพื่อให้แน่ใจว่ารูปภาพผลิตภัณฑ์ทั้งหมดมีความสดใส มีคุณภาพสูง และซูมได้
แสดงข้อมูลผลิตภัณฑ์ที่ชัดเจน
จำนวนลูกค้าอีคอมเมิร์ซที่น่าตกใจ (แต่ไม่น่าแปลกใจ) ละทิ้งตะกร้าสินค้าเนื่องจากขาดข้อมูลเกี่ยวกับต้นทุนจริง ลูกค้า 60% อ้างถึงค่าใช้จ่ายที่ไม่คาดคิด (เช่น ค่าขนส่ง ภาษี ค่าธรรมเนียม) เป็นสาเหตุของการละทิ้งรถเข็น และ 23% ไม่สามารถคำนวณต้นทุนทั้งหมดล่วงหน้าได้ การขาดความโปร่งใสเป็นวิธีที่แน่นอนในการควบคุม Conversion บนเว็บไซต์อีคอมเมิร์ซ ดังนั้นโปรดคำนึงถึงเคล็ดลับและกลเม็ดของ Shopify เหล่านี้:
- ใช้เทคนิคการเปิดเผยข้อมูลแบบก้าวหน้าเพื่อจัดโครงสร้างข้อมูลให้ชัดเจน
- แสดงรายละเอียดค่าใช้จ่ายทั้งหมดล่วงหน้า
- สื่อสารคุณค่าที่นำเสนออย่างชัดเจน
- ทำให้ปุ่มซื้อตอนนี้/เพิ่มในรถเข็นมีความโดดเด่น
สร้างความไว้วางใจและความมั่นใจ
จากข้อมูลของสถาบัน Baymard การขาดความไว้วางใจถือเป็นสาเหตุที่ลูกค้า 19% ละทิ้งที่จุดชำระเงิน โชคดีที่ร้านค้า Shopify ทั้งหมดจัดส่งด้วย SSL (การชำระเงินที่ปลอดภัย) โดยค่าเริ่มต้น แต่ยังอนุญาตให้ลูกค้าเขียนรีวิวไว้เป็นหลักฐานทางสังคม
หลักฐานทางสังคมเป็นวิธีที่ปฏิเสธไม่ได้ในการเพิ่ม Conversion โดยเพิ่มความน่าเชื่อถือบน เว็บไซต์อีคอมเมิร์ซ จากข้อมูลของ BrightLocal ผู้บริโภค 88% เชื่อมั่นในรีวิวออนไลน์มากพอๆ กับคำแนะนำส่วนตัว ดังนั้นจึงจำเป็นต้องสะกิดลูกค้าเก่าให้เขียนรีวิวและระบุสิ่งนี้ภายในเส้นทางของลูกค้า ธีม Shopify ส่วนใหญ่ยังใช้ประโยชน์จากมาร์กอัป Schema เพื่อรวมการให้คะแนนเหล่านี้เข้ากับผลการค้นหาโดยตรง
นอกจากการตรวจสอบทางสังคมแล้ว ให้พิจารณาสร้างความมั่นใจให้กับลูกค้าโดยใช้โซลูชันแชทสด เช่น Intercom, Zendesk, Drift หรือ Kayako Shopify ช่วยให้สามารถผสานรวมกับบริการของบุคคลที่สามผ่าน App Store และผ่านการติดตั้งด้วยตนเอง
แสดงคำแนะนำผลิตภัณฑ์ที่เกี่ยวข้อง
ธุรกิจอีคอมเมิร์ซชั้นนำทั้งหมดใช้ประโยชน์จากกลยุทธ์การขายต่อเนื่องและการขายต่อยอด แท็ก รวมกับการวิเคราะห์และการรวมการทดสอบ A/B เช่น Web Recommendations ของ Optimizely สามารถช่วยให้นักออกแบบส่งเสริมธุรกิจในการปรับปรุงอัตราการแปลงโดยแสดงรายการทางเลือกหรือรายการเพิ่มเติมที่ลูกค้าอาจสนใจ
บูรณาการประสบการณ์การช็อปปิ้งในแบบของคุณ
การผสานการทำงาน เช่น การปรับแต่งเว็บโดย Optimizely ร่วมกับคอลเลกชั่นและแท็กของ Shopify ช่วยให้ธุรกิจที่ขับเคลื่อนด้วยข้อมูลสามารถแบ่งกลุ่มผู้ชมตามความสนใจและประวัติการซื้อก่อนหน้านี้ และเปลี่ยนเนื้อหาของเพจตามลำดับ
ด้วยเทคนิคการออกแบบที่คาดการณ์ได้ ร้านค้า Shopify สามารถแสดงเนื้อหาที่เกี่ยวข้องมากขึ้น ทำให้ผู้ชมมีส่วนร่วมนานขึ้น และมีแนวโน้มที่จะแปลงเป็นการขายมากขึ้น การปรับเปลี่ยนในแบบของคุณเป็นกุญแจสำคัญในการส่งเสริมผลกำไรทางการเงินของธุรกิจอีคอมเมิร์ซใดๆ
การเพิ่มประสิทธิภาพการชำระเงิน
การชำระเงินของแขกเทียบกับบัญชีลูกค้า
จากข้อมูลของสถาบัน Baymard "ไซต์ต้องการให้ฉันสร้างบัญชี" เป็นสาเหตุหลักอันดับสอง (อยู่ที่ 35%) ว่าทำไมลูกค้าถึงละทิ้งการชำระเงินโดยไม่ซื้ออะไรเลย Shopify แนะนำให้อนุญาตการชำระเงินของผู้เยี่ยมชม (โดยเฉพาะบนมือถือ) ด้วยเหตุนี้จึงเป็นตัวเลือกเริ่มต้นในการปิดบัญชีลูกค้า
ระบุจุดบกพร่อง UX และลดการหลุดร่วง
ความพยายามที่จะแก้ปัญหาการเช็คเอาต์ที่ถูกละทิ้งโดยไม่มีการวิเคราะห์ที่มีประสิทธิภาพนั้นมีประสิทธิภาพเทียบเท่ากับการมองหาแมวดำในห้องมืด การเพิ่มประสิทธิภาพประสบการณ์ผู้ใช้และขั้นตอนการชำระเงินจะได้ผลดีที่สุดเมื่อเป็นกระบวนการที่ขับเคลื่อนด้วยข้อมูล
นักออกแบบของ Shopify สามารถเชื่อมต่อ Google Analytics กับ Shopify และตั้งค่าช่องทางเป้าหมาย ซึ่งหลังจากรวบรวมข้อมูลเพียงพอแล้ว จะแสดงให้เห็นอย่างชัดเจนว่าลูกค้ากำลังตัดสินใจว่าไม่ต้องการทำการซื้อต่อที่ใด
เพื่อผลลัพธ์ที่ดีที่สุด ให้ผสานรวม Shopify กับเครื่องมืออย่าง Crazy Egg, Hotjar และ FullStory เพื่อสังเกตปัญหาเหล่านี้โดยละเอียดยิ่งขึ้นโดยใช้แผนที่ความหนาแน่นและการบันทึกผู้เยี่ยมชม
บทสรุป
เพื่อให้นักออกแบบสามารถสื่อสารถึงประโยชน์และความสามารถของแพลตฟอร์ม Shopify ได้ดีขึ้น และเรียนรู้ว่าโซลูชันใดบ้างที่สามารถให้และไม่สามารถให้กับลูกค้าได้ ทางที่ดีควรเปิดร้านสาธิตฟรี นอกจากนี้ นักออกแบบอีคอมเมิร์ซชั้นนำยังสามารถลงทะเบียนเป็น Shopify Experts ได้ โดยเพิ่มความน่าเชื่อถือให้กับประวัติย่อของพวกเขาในฐานะนักออกแบบเว็บไซต์ Shopify
อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:
- อ่านบล็อก Shopify เพื่อดูเคล็ดลับและกลเม็ดเพิ่มเติมของ Shopify
- eCommerce UX – กลยุทธ์และหลักการออกแบบที่จำเป็น
- eCommerce UX สำหรับประสบการณ์มือถือ
- วิธีดึงดูดผู้ซื้ออีคอมเมิร์ซผ่าน UX Design
- การออกแบบที่ตอบสนอง – แนวปฏิบัติและข้อควรพิจารณาที่ดีที่สุด