สิ่งที่คุณต้องรู้สำหรับการออกแบบเว็บไซต์อีคอมเมิร์ซในปี 2021

เป็นปีที่คุณจะออกแบบเว็บไซต์อีคอมเมิร์ซของคุณใหม่หรือไม่? หากคุณมีไม่กี่ปีที่ผ่านมาคุณต้องรู้ว่ามีการเปลี่ยนแปลงมากมาย

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

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

หลีกเลี่ยงวิดีโอขนาดยาวในหน้าแรก

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

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

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

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

ไซต์ Prynt ใช้วิดีโอเล่นอัตโนมัติสั้น ๆ เพื่อแสดงผลิตภัณฑ์ที่ใช้งานจริง นอกจากนี้ยังมีตัวเลือกในการรับชมสิ่งที่เต็มไปด้วยเสียง

อย่าเติมเนื้อหาที่เกินหน้าแรกของคุณ

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

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

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

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

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

ทำให้ตัวกรองของคุณสามารถเข้าถึงได้ง่าย

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

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

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

ออกแบบอีคอมเมิร์ซ - ตัวเลือกการกรองของ macy
ไซต์ของ Macy นำตัวเลือกตัวกรองบางอย่างมาไว้ในหน้าเป็นปุ่ม Burberry ทำให้หมวดหมู่ตัวกรองปรากฏบนหน้า

 

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

ออกแบบรายชื่อของคุณใหม่เพื่อให้ได้ภาพที่ใหญ่ขึ้น

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

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

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

Airbnb มีภาพขนาดใหญ่ที่สามารถเลื่อนผ่าน (ซ้าย) Zara (ขวา) มีภาพความกว้างเต็มจอในรายชื่อ

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

แสดงตัวเลือกผลิตภัณฑ์เป็นปุ่ม

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

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

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

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

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

ออกจากปุ่มแบ่งปัน

Facebook, Twitter, Pinterest, Instagram, LinkedIn, Snapchat ผู้ใช้ของคุณอาจไปเที่ยวที่หนึ่งหรือมากกว่านี้ เครือข่ายทางสังคม. ดังนั้นคุณควรให้ปุ่มการแบ่งปันแก่พวกเขาในหน้ารายละเอียดผลิตภัณฑ์ของคุณ?

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

ไม่มีใครคลิกพวกเขา จริง ๆ แล้ว 0.2% ของคนทำ ตามการศึกษาหนึ่ง. มันอาจดูเหมือนโค้ดบางส่วน แต่มันมาพร้อมกับสิ่งพิเศษมากมายที่ทำให้หน้าของคุณช้าลง

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

รวมการชำระเงิน wallets

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

อีคอมเมิร์ซออกแบบใหม่ - amazon จ่ายบูรณาการ
Tamara Mellon (ซ้าย) มีตัวเลือกของ Apple Pay, PayPal และ Amazon Pay ในตะกร้าและชำระเงิน Gucci เสนอความสามารถในการข้ามไปยัง PayPal จากการแจ้งเตือน 'เพิ่มลงในกระเป๋า'

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

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

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

อนุญาตให้ผู้ใช้รวบรวม

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

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

หน้าต่างการคลิกและการรวบรวมจากการชำระเงิน ASOS ทำให้ผู้ใช้สามารถเลือกร้านสะดวกซื้อที่จะส่งการจัดส่งได้

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

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

คำแนะนำอีคอมเมิร์ซเพิ่มเติม

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

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