10 เคล็ดลับในการออกแบบหน้าร้านเว็บที่ยอดเยี่ยม

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

มีคำถามมากมายให้ตอบก่อนที่จะมีอะไรปรากฏขึ้นจริงในไซเบอร์สเปซและอีกมากมายเมื่อธุรกิจเติบโตขึ้น การรวบรวมข้อมูลเกี่ยวกับลูกค้าเป็นตัวอย่างที่ดีและเป็นคำถามสำคัญวันนี้โดยเฉพาะอย่างยิ่งสำหรับร้านค้าที่ต้องการเข้าถึงตลาดยุโรป การแปลงสกุลเงินและกฎหมายอีคอมเมิร์ซที่แตกต่างกันยังคงเป็นปัญหาที่ยุ่งยากในตลาดเหล่านั้น แต่ตอนนี้คุณจะต้องจัดการกับ General Data Protection Regulation (GDPR) ซึ่งต้องการกระบวนการจัดการข้อมูลลูกค้าอย่างระมัดระวังมากขึ้น

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

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

"องค์ประกอบทุกอย่างเนื้อหาทุกชิ้นต้องทำงานได้บนมือถือ" Jimmy Rodriguez ประธานเจ้าหน้าที่ฝ่ายปฏิบัติการ (COO) ของ 3dcart กล่าว "ถ้าคุณเริ่มจากศูนย์คุณออกแบบสำหรับมือถือด้วยการออกแบบที่ตอบสนองคุณสามารถสร้างเว็บไซต์เพื่อเริ่มบนมือถือแล้วนำไปไว้ที่เดสก์ท็อป"

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

1. การนำทางส่วนหัวที่ปักหมุด

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

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

2. เมนูแฮมเบอร์เกอร์

แม้ว่า Hamburger Menus จะฟังดูเหมือนคุณสมบัติที่เหมาะสมที่สุดสำหรับร้านอาหารฟาสต์ฟู้ด แต่พวกเขากำลังกลายเป็นสิ่งที่ต้องมีสำหรับ บริษัท ที่ทำธุรกิจจำนวนมากบนอุปกรณ์พกพา คุณเคยเห็นมาก่อน: เมนูแฮมเบอร์เกอร์กลายเป็นไอคอนมือถือมาตรฐานสำหรับการนำทางและเมนูต่างๆ

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

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

คุณสามารถดูเมนูแฮมเบอร์เกอร์ที่มุมบนขวาของ Target.com และบนเว็บไซต์มือถือของ Target คุณสามารถดูได้จากภาพด้านล่าง

3. Parallax Scrolling

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

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

4. การเลื่อนแบบไม่มีที่สิ้นสุด

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

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

5. ปุ่ม "เพิ่มลงในรถเข็น" แบบลอยตัว

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

6. ใช้กฎหมายของ Fitts

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

หากคุณเพิกเฉยกฎของ Fitts และวางปุ่มเล็ก ๆ สีดำและสีขาวไว้ตามรางหรือที่ด้านล่างของหน้าคุณอาจเสียโอกาสในการซื้อของ อย่าทำผิดพลาด

7. แสดงรีวิวลูกค้าและข้อความรับรอง

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

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

8. ฝ่ายบริการลูกค้าที่มีประสิทธิภาพ

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

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

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

9. การชำระเงิน Breadcrumb

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

10. มุมมอง 360 องศา

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

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