สิ่งที่ควรทำและไม่ควรทำของการออกแบบรถเข็นช็อปปิ้งบนมือถือ: 6 Teardowns ที่ใช้งานได้จริง (mCommerce In-Depth Guide)

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

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

ยอดขายอีคอมเมิร์ซบนมือถือคาดว่าจะคิดเป็น 52.9% ของยอดขายอีคอมเมิร์ซทั้งหมดภายในปี 2564 แต่ในปี 2560 อัตราการละทิ้งรถเข็นช็อปปิ้งบนมือถือโดยเฉลี่ยอยู่ที่ 85.65% อย่างมาก

นั่นหมายถึงลูกค้าทั้งหมดที่เพิ่มสินค้าหรือสินค้าลงในตะกร้าสินค้า เกือบ 9 ใน 10 เหลือลูกค้าที่ยังทำการซื้อไม่เสร็จ

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

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

1. ทำ: อเมซอน

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

เคล็ดลับ # 1: CTA ที่ชัดเจนหนึ่งรายการที่ด้านบนของหน้าตั้งค่าเป็นสีที่ตัดกัน ขณะที่ผู้ใช้เลื่อนลง CTA นี้จะยังคงลอยอยู่ที่ด้านบนของหน้าจอ

#เคล็ดลับการเพิ่มประสิทธิภาพ #Mobile #cart: มี #CTA ที่ชัดเจนที่ด้านบนของหน้าตั้งค่าเป็นสีที่ตัดกัน #ecommerce #optimization คลิกเพื่อทวีต
CTA จะลอยอยู่ที่ด้านบนของหน้าจอเมื่อผู้ใช้เลื่อนลง
เคล็ดลับ #2: CTA เป็นแบบกว้างหน้าจอ ดังนั้นจึงแตะได้ง่ายสำหรับผู้ใช้ทั้งที่ถนัดซ้ายและถนัดขวา
เคล็ดลับ #3: การ ย้ำการจัดส่งฟรีที่ด้านบนสุดของหน้าเพื่อบรรเทาข้อสงสัยและ "ทำให้ข้อตกลงหวานชื่นขึ้น"
เคล็ดลับ #4: รูปภาพและชื่อผลิตภัณฑ์จะลิงก์ไปยังหน้าคำอธิบายสำหรับผู้ที่ต้องการตรวจสอบรายละเอียดผลิตภัณฑ์อีกครั้ง
เคล็ดลับ #5: มีปุ่มที่ชัดเจนและง่ายต่อการแตะเพื่อเปลี่ยนจำนวนการสั่งซื้อ ลบรายการ และบันทึกไว้ในภายหลัง
เคล็ดลับ #6: การแจ้งเตือน "มีในสต็อก" ช่วยให้ลูกค้ามั่นใจได้ว่าจะไม่ต้องรอสินค้า
#เคล็ดลับการเพิ่มประสิทธิภาพ #มือถือ #cart: การแจ้งเตือน 'มีในสต็อก' ช่วยให้ #ลูกค้ามั่นใจ ว่าพวกเขาไม่ต้องรอสินค้า #ecommerce คลิกเพื่อทวีต
เคล็ดลับ #7: Amazon นำเสนอผลิตภัณฑ์ที่ได้รับการ "บันทึกไว้สำหรับภายหลัง" โดยมีปุ่ม "ย้ายไปที่รถเข็น" แบบง่ายๆ ด้านล่าง
รายการที่บันทึกไว้ในภายหลังจะมองเห็นได้ชัดเจน
เคล็ดลับ #8: รวมผลิตภัณฑ์ที่เกี่ยวข้อง – “ลูกค้ายังซื้อ” – ที่สามารถเพิ่มลงในรถเข็นโดยไม่ต้องออกจากหน้า ข้อดีเพิ่มเติมสำหรับการออกแบบองค์ประกอบนี้ เนื่องจากรายการที่สามไม่แสดงอย่างสมบูรณ์ จึงแนะนำให้เลื่อนนิ้ว
เคล็ดลับ #9: พื้นที่สีขาวจำนวนมากและไม่มีรายละเอียด "ฟิลเลอร์" ที่ไม่จำเป็น Amazon ได้รวมเฉพาะสิ่งที่จำเป็นอย่างยิ่งเท่านั้น
เคล็ดลับ #10: ลิงก์ไปที่ "ด้านบนของหน้า" ในส่วนท้าย

ต้องการข้อมูลเชิงลึกเพิ่มเติมเช่นนี้หรือไม่

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

เมื่อวันที่ฉันได้อ่านนโยบายความเป็นส่วนตัวและฉันยอมรับข้อตกลงและเงื่อนไขจดหมายข่าว

โปรดเลือกช่องทำเครื่องหมายนี้เพื่อดำเนินการต่อ

วู้ฮู! คุณเพิ่งสมัคร ตรวจสอบกล่องจดหมายของคุณเพื่อยืนยันการสมัคร

2. ทำ: ลวดเย็บกระดาษ

ความงามของรถเข็น Staples คือความเรียบง่าย สามารถตรวจสอบผลิตภัณฑ์ได้ในไม่กี่วินาที ผลลัพธ์ที่ได้คือเน้นตัวเลือกที่มีอยู่มากขึ้น
ความงามของรถเข็น Staples คือความเรียบง่าย หนึ่งในรถเข็นอีคอมเมิร์ซบนมือถือที่ดีที่สุด
เคล็ดลับ #1: เช่นเดียวกับ Amazon เราจะให้ความสนใจกับข้อเท็จจริงที่ว่าสินค้าจะถูกจัดส่งโดยไม่คิดค่าใช้จ่าย ทั้งที่ด้านบนของหน้าและในสรุปการชำระเงิน ยิ่งไปกว่านั้น ข้อความยังเป็นสีเขียว ซึ่งทำให้การแจ้งเตือนโดดเด่นยิ่งขึ้น วันที่ที่แน่นอนของ
เคล็ดลับ #2: การออกแบบนั้นเรียบง่ายเป็นพิเศษ และการใช้งานที่ยอดเยี่ยมนั้นทำจากพื้นที่สีขาว ลูกค้าสามารถตรวจสอบคำสั่งซื้อได้อย่างรวดเร็ว ทำการเปลี่ยนแปลงที่จำเป็นโดยไม่ต้องออกจากเพจ และตรวจสอบยอดรวม
เคล็ดลับ #3: กล่อง “คูปองและรางวัล” ไม่สร้างความรำคาญ นอกจากนี้ยังมีตัวเลือกที่สำคัญในการ "รับสินค้าในร้าน" โดยไม่ดึงความสนใจออกจาก CTA หลัก
เคล็ดลับ #4: คำว่า "ปลอดภัย" จะรวมอยู่ใน CTA การชำระเงิน
เคล็ดลับ #5: ส่วนท้ายถูกลบออก

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

3. ทำ: เซียร์

เซียร์เสนอตัวเลือกเพิ่มเติมมากมาย – รวมถึงแผนการชำระเงิน การรับสินค้าในร้าน ตัวเลือกของขวัญ และโปรโมชั่น รถเข็นของพวกเขาเป็นตัวอย่างที่ดีสำหรับผู้ค้าปลีกที่ต้องการรวมองค์ประกอบต่างๆ มากมายในหน้าเดียวโดยไม่ทำลายการออกแบบที่ป้องกันไม่ให้รถเข็นช็อปปิ้งบนมือถือถูกละทิ้ง
การออกแบบรถเข็นมือถือของเซียร์มีองค์ประกอบมากมาย แต่ยังคงความเรียบง่าย
เคล็ดลับ #1: CTA จะรวมอยู่ที่ด้านบนของหน้าพร้อมกับผลรวมย่อย ไอคอนแม่กุญแจยังช่วยสร้างความน่าเชื่อถือ และยังมีตัวเลือกในการชำระเงินโดยใช้ Paypal อีกด้วย
เคล็ดลับ #2: เนื่องจากเป็นสินค้าที่มีราคาสูง แผนการชำระเงินจึงถูกรวมไว้เพื่อปัดเป่าความลังเลใจใดๆ ในขั้นตอนนี้
เคล็ดลับ #3: ส่วนลดการขายรวมอยู่ในส่วนสรุปคำสั่งซื้อเป็นสีแดง กระตุ้นให้ลูกค้าคลิกผ่านเพื่อชำระเงินโดยสร้างทั้งความเร่งด่วนและลดความสงสัย
เคล็ดลับ #4: มีลิงก์สำหรับเข้าสู่ระบบโปรแกรมสมาชิกซึ่งทำหน้าที่เป็นสิ่งจูงใจเพิ่มเติมสำหรับลูกค้าใหม่ สิ่งสำคัญคือต้องทราบว่านี่ไม่ใช่ลิงก์สำหรับตั้งค่าบัญชีร้านค้าโดยไม่มีสิทธิประโยชน์ใดๆ ซึ่งจะรวมอยู่ในแบบฟอร์มการชำระเงินได้ดีกว่า
เคล็ดลับ #5: ตราประทับ "การชำระเงินที่ปลอดภัย" จะรวมอยู่ที่ด้านล่างของหน้า
มีอะไรผิดปกติ? มีมากเกินไปเล็กน้อย และผลกระทบน่าจะกระจัดกระจายความสนใจสำหรับลูกค้าบางคน ไม่จำเป็นต้องเสนอการสมัครสมาชิกนิตยสารและลิงก์ไปยังโปรแกรมความภักดีที่ด้านล่าง เป็นต้น

4. อย่า: Vitacost

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

#เคล็ดลับการเพิ่มประสิทธิภาพ #Mobile #cart: อย่าใส่แถบค้นหาที่ทำให้ผู้ใช้ออกจากรถเข็น #ecommerce คลิกเพื่อทวีต
ข้อผิดพลาด #2: การรวมผลิตภัณฑ์ "BOGO" ที่ไม่ชัดเจนโดยอัตโนมัติ (ซื้อ 1 แถม 1 ราคาครึ่ง) ที่อาจสร้างความสับสนหรือรบกวนลูกค้า
ข้อผิดพลาด #3: แถบรหัสส่งเสริมการขายที่น่ารำคาญ สิ่งนี้เบี่ยงเบนความสนใจจาก CTA หลักและกระตุ้นให้ลูกค้าออกจากรถเข็นเพื่อค้นหาโปรโมชั่นออนไลน์ กล่องส่งเสริมการขายควรมองเห็นได้ แต่ไม่มากจนเกินไป พวกเขาควรจะอยู่หลัง CTA อย่างแน่นอน
ข้อผิดพลาด #4: ค่าขนส่งถูกกำหนดเป็น "TBD" ซึ่งทำให้เกิดข้อสงสัย (โดยทั่วไป คุณควรหลีกเลี่ยงคำย่อ)
ข้อผิดพลาด #5: ส่วนท้ายใหญ่เกินไป Vitacost ต้องการให้ลูกค้าทำการซื้อหรือดาวน์โหลดแอปให้เสร็จสิ้นหรือไม่
ข้อผิดพลาด #6: ตัวเลือกผลิตภัณฑ์ – สำหรับการลบหรือเพิ่มรายการ – มีขนาดเล็กเกินไปและแตะยาก
ข้อผิดพลาด #7: แถบลอย ซึ่งสามารถมองเห็นได้ที่ด้านล่างของภาพหน้าจอ ใช้พื้นที่หน้าจอมากเกินไปในโทรศัพท์ขนาดเล็ก

5. อย่า: Lonely Planet

ในกรณีที่หน้า Staples ใช้การออกแบบที่เรียบง่ายอย่างมีประสิทธิภาพ Lonely Planet จะไม่รวมองค์ประกอบมากเกินไป ไม่มีคุณสมบัติในการลดความลังเลใจและสร้างความไว้วางใจ ไม่มีคำแนะนำหรือคำแนะนำผลิตภัณฑ์เพื่อเพิ่มมูลค่าการซื้อ และปุ่มหลายปุ่มคลิกได้ยาก
Lonely Planet ไม่รวมองค์ประกอบมากเกินไป พวกมันเหลือพื้นที่มากมายที่สามารถใช้ในการปรับปรุง cart ux
ข้อผิดพลาด #1: มีการใช้พื้นที่ไม่ดี จะเป็นการดีกว่าถ้าให้รถเข็นใส่ข้อมูลทั้งหน้าและใช้พื้นที่สีขาว แทนที่จะเปิดขึ้นมาเหนือเนื้อหาปัจจุบัน
ข้อผิดพลาด #2: ไม่รวมข้อมูลเกี่ยวกับการจัดส่ง ส่วนลด หรือตัวเลือกการชำระเงิน สิ่งเหล่านี้น่าจะลดความสงสัยและความกลัวของลูกค้าที่ไม่แน่นอน
ข้อผิดพลาด #3: ไม่มีคำแนะนำผลิตภัณฑ์ที่เกี่ยวข้อง
ข้อผิดพลาด #4: ปุ่มสำหรับเพิ่มหรือลดจำนวนผลิตภัณฑ์มีขนาดเล็กจนแทบคลิกไม่ได้
ข้อผิดพลาด #5: CTA – “ดำเนินการชำระเงิน” – ดูเหมือนปุ่มไม่
ข้อผิดพลาด #6: รูปแบบป๊อปอัปทำให้แตะ CTA จากด้านซ้ายได้ยาก ให้ลูกค้าใช้นิ้วโป้งทั้งสองข้าง!

6. ห้าม: Nike

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

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

ข้อผิดพลาด #3: “ประเภทการชำระเงินที่ยอมรับ” ไม่ได้ระบุไว้ใกล้กับจุดชำระเงิน CTA เป็นความคิดที่ดีที่จะรวมป้ายเหล่านี้ไว้บนหน้ารถเข็นของคุณ โดยเฉพาะอย่างยิ่งหากคุณไม่เป็นที่รู้จักในนาม Nike แต่ส่วนท้ายไม่ใช่ที่สำหรับพวกเขา

ข้อผิดพลาด #4: คำว่า "แขก" อาจทำให้เกิดความสับสนหากลูกค้าไม่ระบุตัวตนในลักษณะนั้น (คุณสามารถเป็นสมาชิกได้หรือไม่หากซื้อเป็นแขก)

สรุปการออกแบบรถเข็นช็อปปิ้งบนมือถือ

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

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

รับรายการตรวจสอบการเพิ่มประสิทธิภาพอีคอมเมิร์ซ 115 คะแนน

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