ecommerce web design 1

25 สุดยอดวิธีออกแบบเว็บไซต์ร้านค้าให้ยอดขายพุ่ง

ecommerce web design 1
Share on facebook
Share on twitter
Share on telegram
Share on linkedin
Share on email
รวมวิธีออกแบบเว็บไซต์เพื่อเพิ่มยอดขาย ทำอย่างไรให้เว็บไซต์ขายได้ดีขึ้น แนะนำเทคนิคการปรับ UX UI แบบละเอียดพร้อมภาพประกอบ

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

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

การทำเว็บไซต์โดยคำนึงถึงเรื่องของ UI, UX จึงเป็นเรื่องที่สำคัญอย่างยิ่งที่จะดึงดูดผู้ซื้อให้มาซื้อสินค้ากับเรา นอกจากจะต้องมีรูปที่สวยงามแล้ว การส่งประสบการณ์ที่ดีให้กับผู้ใช้งาน (User) หรือการทำ User experience จึงสำคัญมาก เพราะจะช่วยเพิ่ม Conversion rates, เพิ่มยอดขาย ลดการเกิดการยกเลิกตะกร้าสินค้า (Cart abandonment) และช่วยดึงดูดลูกค้าเก่าของเราให้กลับมาซื้อซ้ำได้

*บทความนี้มีเนื้อหาจาก Advertorial ที่อ้างอิงจากการใช้งานจริงของทีมงาน Designil

ออกแบบเว็บไซต์ เพื่อเพิ่มยอดขาย

รู้หรือไม่ว่าผู้ใช้งานเว็บไซต์ร้านค้า (E-commerce) จะตัดสินเว็บไซต์ของเราว่าดีหรือไม่ดีภายในระยะเวลา 50 milliseconds หรือเพียงแค่ .05 วินาทีเท่านั้น  ดังนั้นเรามีเวลาที่จำกัดมากในการดึงดูดผู้ใช้งาน มาดูกันเลยว่าส่วนประกอบหลักของเว็บไซต์ที่ดีที่จะช่วยเพิ่มยอดขายได้นั้นมีอะไรบ้าง

บทความนี้มีอะไรบ้าง แสดง

1. ความน่าเชื่อถือ

1.1 Contact information ช่องทางการติดต่อ

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

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

ยกตัวอย่างภาพด้านบน เราจะเห็นว่าเว็บไซต์ของ Officeworks นั้นได้เขียนรายละเอียดหัวข้อของการติดต่ออย่างชัดเจน ไม่ว่าจะเป็นที่อยู่, เบอร์โทรศัพท์, ช่องทางการติดต่อ, เรื่องของการจัดส่ง, การบริการคืนเงินภายใน 30 วัน, การสั่งสินค้าแล้วมารับที่ร้าน (Click & Collect) หรือคำถามเกี่ยวกับ Covid-19 เพื่อเพิ่มความมั่นใจให้กับลูกค้าว่าสินค้าที่ได้รับจะไม่มีปัญหาอย่างแน่นอน

1.2 Return policy วิธีการคืน เปลี่ยนสินค้า

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

Express returns - Ikea
Express returns – Ikea

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

Dyson Australia - Return policy
Dyson Australia – Return policy

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

Uber Application
Uber Application

ตัวอย่างจากแอพ Uber Eats Australia หากลูกค้าสั่งอาหารแล้วร้านไม่สามารถทำอาหารตาม Order ได้ครบ เช่น ลูกค้าแพ้อาหาร, ไม่ได้รับอาหาร, โดนยกเลิกอาหารแต่ไม่ได้รับเงินคืน หากลูกค้ากรอกคำร้องเรียนผ่านทางแอพพลิเคชั่น ทาง Uber จะคืนยินดีเงินภายใน 1 วัน

Gymshark return policy
Gymshark return policy

ตัวอย่างจาก Gymshark Australia

ลูกค้าสามารถเปลี่ยนคืนสินค้าได้หากได้รับเสื้อผ้าที่ไม่ตรงขนาด หรือเปลี่ยนใจ สามารถส่งคืนสินค้าได้ภายใน 90 วัน

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


1.3 Technical certifications มีเครื่องหมายการชำระเงินที่เชื่อถือได้

trust histogram results2 1024x520 1
1.3.1 Trust seals

1.3.1 เครื่องหมายการชำระเงิน

ยกตัวอย่างภาพ 1.3.1 จาก CXL Research ได้ทำการค้นหาว่าเครื่องหมายการชำระเงิน Trust seals หรือ Badge ตัวไหนที่ผู้คนให้ความเชื่อถือและยอมรับมากที่สุด จากภาพเราจะเห็นว่าคนจะคุ้นเคยกับ Mastercard, Visa มากที่สุด แต่เชื่อถือ Paypal มากที่สุด ดังนั้นการมีรูปภาพ Logo ของช่องทางการชำระเงินที่ User รู้สึกคุ้นเคยและเชื่อถือ จะช่วยทำให้ User รู้สึกปลอดภัยและช่วยลดอัตราการยกเลิกตะกร้าสินค้า (Cart abandonment) ได้

บทความที่เกี่ยวข้อง เหตุผลของการยกเลิกตะกร้าสินค้า

amazon
1.3.2 Amazon checkout page

1.3.2 การสร้างความน่าเชื่อถือในหน้าชำระเงิน

เว็บไซต์ Amazon จะมีรูปแม่กุญแจอยู่ทางด้านบนขวามือ หากกดไปแล้วจะเจอกับหน้าของ Privacy Notice ที่จะอธิบายทั้งหมดว่า Amazon จะเก็บข้อมูลอะไรจาก User บ้าง เป็นหน้าแสดง Legal policies ที่มีการอัพเดทสม่ำเสมอ เกี่ยวกับเรื่องของ Cookies, บัตรเครดิต, การทำ Transaction บนเว็บไซต์อย่างละเอียด ซึ่งข้อมูลตรงส่วนนี้เจ้าของธุรกิจเองจะต้องใส่ใจและทำข้อมูลแจ้งผู้ใช้งานบนเว็บไซต์ด้วย เพราะในอนาคตประเทศไทยจะมีกฏหมาย PDPA ออกมาคุ้มครองผู้บริโภค ดังนั้นอย่าลืมศึกษาเรื่องของกฏหมายตรงส่วนนี้ด้วยนะคะ

บทความที่เกี่ยวข้อง วิธีทำ PDPA บน เว็บไซต์WordPress

1.4 Https มีแถบแสดงสีเขียวด้านบนเว็บไซต์

ตัวอย่างเว็บไซต์ที่สร้างจาก Readyplanet มีระบบ HTTPS
ตัวอย่างเว็บไซต์ที่สร้างจาก Readyplanet มีระบบ HTTPS

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

เรดดี้แพลนเน็ต ได้ให้บริการลูกค้าที่สนใจอยากทำเว็บไซต์ E-commerce โดยจะมาพร้อมกับระบบ Https ที่ติดตั้งมาให้ครบเรียบร้อยทั้งหมด รวมไปถึงระบบ CRM จัดการข้อมูลลูกค้าได้ในที่เดียว
ดูข้อมูลเพิ่มเติมได้ที่ R-shop แพลตฟอร์มร้านค้าออนไลน์

1.5 ช่องทางการสอบถามก่อนการซื้อ

ตัวอย่างระบบ R-Widget จาก Readyplanet
ตัวอย่างระบบ R-Widget จาก Readyplanet

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

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

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

comparison chat multi platforms vs chat center
comparison chat multi platforms vs chat center

ภาพตัวอย่างด้านบนนั้น เป็นระบบ R-Widget จาก Readyplanet ที่มีการรวบรวมช่องทางการแชทยอดนิยมของประเทศไทยเข้ามาไว้ด้วยกัน ไม่ว่าจะเป็น Facebook, Line, โทรศัพท์, Web chat มารวมไว้ในเว็บไซต์เดียวกัน แอดมินสามารถตอบข้อความได้จากที่เดียว และหากมีข้อความเข้ามา ระบบจะทำการส่งอีเมล์แจ้งเตือนไปยังเจ้าของร้านให้มาตอบลูกค้าและปิดการขายได้ทันเวลา

1.6 ระบบรีวิวสินค้า มีสรุปผลรีวิวสินค้า Snapshot

ออกแบบเว็บไซต์ จาก shopee bag review
Shopee bag reviews
amazon review
Amazon reviews

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

ออกแบบเว็บไซต์ Shein reviews
ออกแบบเว็บไซต์ Shein reviews

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


2. เทคนิคการออกแบบเว็บไซต์

2.1 ภาพสวย มองเห็นชัดเจน โหลดไม่นาน

ReadyPlanet R Web ใช้รูปสินค้าที่น่าสนใจ
ReadyPlanet R Web ใช้รูปสินค้าที่น่าสนใจ

การใช้ภาพประกอบที่ดึงดูดและน่าสนใจเป็นสิ่งที่สำคัญมาก แต่อย่าลืมคิดถึงเรื่องของขนาด Dimension ของภาพ

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

ดังนั้นคำแนะนำที่ดีในการเลือกขนาดของรูปภาพ (Dimension) จึงควรจะต้องทำ A/B testing หรือ Usability testing เพื่อดูผลลัพธ์ด้วยว่าภาพแบบไหนจะดึงดูดผู้ซื้อได้มากกว่ากัน

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

2.2 มีระบบ Zoom ภาพและมองเห็นได้ชัดทุกมุมมอง

Amazon zoom
Amazon zoom

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

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

2.3 รูปภาพที่แสดงวิธีการใช้งานในสถานที่จริง

Splash pad from Amazon
Splash pad from Amazon

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

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

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

2.4 อย่าใช้รูปภาพ Stockphotos รูปภาพที่ซ้ำ นายแบบคนเดียวกัน

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

แนะนำว่าให้ปรึกษากับทีมกราฟิกก่อนการทำภาพเอาขึ้นเว็บไซต์นะคะ

meme stockphotos
meme stockphotos

2.5 ใส่วิดีโอประกอบสินค้า วิธีการใช้งานสินค้า

jbhifi video
jbhifi video 1
  • ผู้ซื้อมากกว่า 55% จะใช้วิดีโอออนไลน์ในการตัดสินใจซื้อสินค้าในร้าน (จาก Google)
  • 87% ของนักการตลาดวิดีโอ กล่าวว่าการใช้วิดีโอจะช่วยเพิ่ม Traffic ให้กับเว็บไซต์ได้ (Wyzowl, 2020)
  • 80% ของนักการตลาดวิดีโอ กล่าวว่าวิดีโอสามารถเพิ่มยอดขายได้ (Wyzowl, 2020)
  • วิดีโอเป็นสื่อที่คนใช้งานเป็นประจำในปัจจุบัน ดังนั้นการมีวิดีโอรีวิวสินค้า แสดงวิธีการใช้งาน หรือเปรียบเทียบสินค้า จะช่วยทำให้สินค้าของเราน่าสนใจมากยิ่งขึ้น

ข้อมูลจาก: Hubspot

2.6 ออกแบบเว็บไซต์ โดยใช้สี ฟอนต์ การจัดวางให้มีความสม่ำเสมอ

selfridges web design
selfridges web design

เรื่องของ Consistency ความสม่ำเสมอในการออกแบบนั้นเป็นสิ่งที่สำคัญอย่างยิ่ง

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

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

ส่วนเรื่องของการออกแบบควรออกแบบใช้สี ขนาด ระยะห่าง การจัดวางของทั้งระบบให้ไปในทิศทางเดียวกันเพื่อให้เกิดความเป็นอันหนึ่งอันเดียวกัน ปัจจุบันเรามีสิ่งที่เรียกว่า Design system ในการควบคุมการออกแบบให้งานของเราออกมามีความ Consistency ซึ่งจะช่วยในการการ Reuse ของต่าง ๆ บนเว็บไซต์กลับมาใช้ซ้ำได้ไวมากขึ้น

เรื่องของสีก็สำคัญเช่นเดียวกัน การใช้สีควรผ่านมาตรฐานของ Web accessibility เพื่อให้สีบนจอดิจิตัลของเรานั้นอ่านออกได้ง่าย ไม่แสบตา หรือทำให้ปวดหัว สำหรับดีไซน์เนอร์อย่าลืมเช็ค Contrast ทุกครั้งเวลาเลือกสี

2.7 วาง Hierarchy ของเว็บไซต์ให้เข้าใจง่าย

ออกแบบเว็บไซต์ lazada ia
ตัวอย่างการแบ่งหมวดหมู่จาก Lazada
ตัวอย่างการแบ่ง IA จาก Ikea
ตัวอย่างการเขียนคำในเมนู จาก Ikea

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

  • ทำอย่างไร User ของเราจะเข้าใจได้ว่าใต้หมวดหมู่นี้จะมีหมวดหมู่อะไรซ่อนอยู่ ?
  • คำที่เราเขียนบนเมนูหรือหัวข้อต่าง ๆ หมายความว่าอย่างไร ?
  • คำเขียน (Label) ต่าง ๆ ชัดเจน และเข้าใจง่าย หรือไม่ ?
  • หมวดหมู่ Category ทำให้ User เข้าใจสามารถหาสินค้าเจอได้หรือไม่ ?
  • ถ้าฉันจะหาตู้เสื้อผ้าสีชมพูขนาดเล็กสำหรับเด็ก โดยไม่ต้องกรอกผ่านช่องค้นหา ฉันจะหาเจอได้อย่างไร เป็นต้น

ดังนั้นเราจึงควรพิถีพิถันทั้งเรื่องของการออกแบบเมนูในเว็บไซต์ Navigation และการแบ่ง Category ของสินค้า และโครงสร้างของข้อมูล (Information architecture – IA) ให้ผู้ใช้งานสามารถค้นหาได้ง่าย

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

บทความที่เกี่ยวข้อง Card sorting คือ ? สอนใช้เครื่องมือทำ UX ตามหา IA บทความนี้จะสอนวิธีการทดสอบผู้ใช้งานเรื่องการเขียนคำบน Menu, Navigation และ Category ในเว็บไซต์ของเรา อธิบายแบบพื้นฐานกันเลยค่ะ

2.8 ระบบค้นหาสินค้าที่ชัดเจน และแม่นยำ

search product
search product

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

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

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

หรือการค้นหาสินค้าผ่านทาง Google image search ที่ช่วยเชื่อมโยงไปถึง Google shopping แล้วก็กลับมาที่เว็บไซต์ของเรา

เรื่องของระบบการค้นหา และ Journey ของการหาสินค้าเป็นอะไรที่ซับซ้อนมาก ข้อนี้อาจจะต้องใช้เวลาในการอธิบายเกี่ยวกับด้าน Technology กันพอสมควรเลย แต่ที่สำคัญที่สุดอย่าลืมทำเรื่องของ Alt คำอธิบายรูปภาพ ควรเขียนให้ชัดเจน และเป็นคำที่คนนิยมค้นหาไว้สำหรับการค้นหาจาก Google image, Google shopping ได้ในอนาคตด้วยนะคะ

2.9 ปุ่ม Call to action ต้องเด่นชัด

ออกแบบเว็บไซต์ Target e-commerce
target e-commerce website – cta example

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

ยังมีเรื่องของการเขียนคำที่ต้องเขียนให้ชัดเจน ไม่กำกวมและสื่อความหมายสำหรับ User ตัวอย่างจากภาพด้านบนเว็บไซต์ Target เขียนคำบนปุ่มได้ไม่เหมือนใครคือ “Add for shipping” และ “Choose options”

2.10 อย่าลืมคิดถึงเรื่อง Cart abandonment

Cart abandonment คือการยกเลิกการซื้อสินค้า เมื่อ User ของเราไปถึงหน้าชำระเงินแล้ว แต่ User ก็ปิดเว็บไซต์ไปเสียอย่างนั้น 58.6% of US online shoppers Baymard ได้ให้ข้อมูลไว้ว่า เหตุผลสำคัญที่คนส่วนใหญ่ยกเลิกการชำระเงินคือ

1. ราคาสินค้าไม่ชัดเจน มีค่าใช้จ่ายเพิ่มเติมที่นอกเหนือจากตะกร้าสินค้า เช่น ค่าขนส่ง, ค่าภาษี, ค่าบริการ อื่น ๆ
2. เว็บไซต์ต้องการให้สมัครสมาชิก
3. การจัดส่งที่ช้าเกินไป

ดังนั้น หากเราต้องการให้การยกเลิกตะกร้าสินค้า (Cart abandonment) ลดลง เวลาออกแบบเว็บไซต์อย่าลืมตั้งคำถามเบื้องต้นก่อนดังนี้

  • หน้าชำระเงินดูสับสนเกินไปมั้ย ?
  • ชำระเงินยุ่งยากและหลายขั้นตอนเกินไปหรือไม่ ?
  • โหลดช้าเกินไปหรือไม่ ?
  • หน้านี้มีบั๊ก หรือเกิด Error ระหว่างทางหรือเปล่า ?

บทความที่เกี่ยวข้อง เหตุผลของการยกเลิกตะกร้าสินค้า

ออกแบบเว็บไซต์ research baymard cart abandonment
Baymard cart abandonment

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

2.11 Responsive website ออกแบบเว็บไซต์ ให้รองรับทุกอุปกรณ์

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

mobile device user stats
mobile device user stats

นอกจากจะต้องคำนึงเรื่องของ Responsive แล้ว ยังมีรายละเอียดเพิ่มเติมทางด้าน UX UI อีกมากมายที่จะต้องปรับให้เข้ากับหน้าของมือถือด้วย ตัวอย่างเช่น

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

3. การตลาด

3.1 Free shipping

ออกแบบเว็บไซต์ free delivery etsy
Free delivery by Etsy

ถ้าหากให้เราลองเลือกว่า

  1. สินค้า A – ราคา 100 บาท ค่าส่ง 99 บาท
  2. สินค้า B – ราคา 199 บาท ฟรีค่าจัดส่ง เราอยากซื้อสินค้าไหนมากกว่ากัน ?

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

3.2 ระบบ CRM

การทำการระบบ CRM ให้กับ E-commerce ของเรา โดยหลัก ๆ CRM มีหลักการทำงานดังต่อไปนี้

  • ดาต้าเบสเก็บข้อมูลลูกค้า ผู้ติดต่อ ฯลฯ
  • เครื่องมือทางการตลาด (Marketing tools)
  • เครื่องมือช่วยจัดการทำงานของทีม Support, Sales

โดยเว็บไซต์ที่มีระบบ CRM จะมีข้อดีดังต่อไปนี้

  • ช่วยพัฒนาการบริการ Customer experience ถ้าหากว่าระบบสามารถช่วยตรวจสอบสินค้า ยอดขาย การจัดส่งได้ จะทำให้ผู้ซื้อรู้สึกไว้วางใจและอยากกลับมาซื้อซ้ำ กลายเป็นผู้ซื้อขาประจำของเรา (Active retention customer)
  • ช่วยบริหารการตลาดและการทำโปรโมชั่น
  • ระบบจะช่วยทำให้พนักงานขาย (Sales) ทำงานได้รวดเร็วและดีขึ้น
  • วางแผนการขาย (forcast) ยอดขายในอนาคตได้
R CRM system by Readyplanet
R CRM system by Readyplanet

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

สำหรับธุรกิจกลุ่ม B2B ที่ทำการขายสินค้าที่ไม่สามารถตัดบัตรเครดิตหรือซื้อกันได้ผ่านทางหน้าเว็บไซต์ ท่านสามารถทำหน้า Sale page เพื่อให้ลูกค้าของท่านทำการกรอกแบบฟอร์มเพื่อติดต่อกลับหรือขอใบเสนอราคาผ่านระบบเว็บไซต์​ โดยส่วนนี้สามารถใช้งาน R-CRM ควบคู่กันไปได้ เพื่อเป็นการเก็บ Leads ของผู้ที่สนใจสินค้า โดยเจ้าของธุรกิจสามารถติดตามการทำงานของเซลล์ได้ทั้งหมดผ่านระบบ R-CRM ในที่เดียว

3.3 การสะสมแต้ม

การสะสมแต้ม หรือที่เรียกกันว่า Loyalty program ระบบนี้จะช่วยสร้างการซื้อที่สม่ำเสมอทำให้เกิดผู้ซื้อซ้ำ (User retention)

บริษัท Costco เลือกที่จะรักษาลูกค้าขาประจำไว้เพราะว่ามีค่าใช้จ่ายที่น้อยกว่าการหาลูกค้าใหม่ถึง 5 เท่า โดยลูกค้าประจำนั้นมียอดการช้อปที่สูงกว่า 67% เมื่อเทียบกับลูกค้าใหม่

Loyalty program นั้นมีวิธีการอย่างไรบ้าง

  • ลดราคา
  • สะสมแต้มแลกของรางวัล
  • ของแถมฟรี
  • คูปองลดราคา
  • เข้าถึงสินค้าใหม่ก่อนใคร
  • ทำโปรโมชั่นตามวันเกิดของลูกค้า

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

PointSpot Report Customer Insight Loyalty by Readyplanet
PointSpot Report – Customer Insight Loyalty by Readyplanet

บริการแนะนำจาก Readyplanet ระบบ PointSpot บัตรสมาชิกสะสมแต้มด้วยเบอร์โทร ที่ใช้งานง่ายแค่ถามเบอร์โทรลูกค้า และรองรับการเชื่อมต่อกับหน้าเว็บไซต์ที่สร้างขึ้นด้วย R-Web และ R-Shop ของ Readyplanet มาพร้อม Loyalty Program แบบ All-in-One อาทิ ระบบคูปองโปรโมชั่น คูปองวันเกิด และรายงานต่าง ๆ ที่ช่วยให้ธุรกิจเข้าใจ Customer Insights มากขึ้น

3.4 Landing page

Landing page คือ เว็บไซต์หน้าเดี่ยวที่ใช้สำหรับทำการตลาด (Marketing) นำเสนอสินค้าให้น่าสนใจ จะเป็นหน้า (Page) ที่ผู้ใช้งานเข้ามาใช้ หลังจากกดลิงค์ผ่านทาง Email, Google ads, Google, Bing, YouTube, Facebook, Instagram, Twitter หรือจากช่องทางอื่น ๆ บนเว็บไซต์

โดย Landing page นั้นจะโฟกัสไปที่จุดมุ่งหมายเดียว โดยไม่มีอะไรมา distract ผู้ที่เข้ามาชมหน้านี้ ตัวอย่างเช่น โฟกัสไปที่อยากให้คนสมัครสมาชิก, อยากเก็บ Leads ผู้ซื้อ, อยากขายของ เป็นต้น

ถ้าหากผู้ใช้งานมาเจอเว็บไซต์เราผ่านทางโฆษณาบน Social media เราสามารถนำเสนอสินค้าได้ตรงกลุ่มเป้าหมายผ่านหน้า Landing page นั้น ๆ เพื่อสร้างยอดขายได้ทันที

จากภาพสถิติเราจะเห็นว่า Conversion Rate (อัตราส่วนของการเข้าชมเนื้อหาในเว็บไซต์แล้วกลายเป็นผู้ซื้อของเรา) จากหน้า Landing page นั้นสูงกว่าหน้าของ Product page และหน้า Landing page ยังมีผู้เข้าชมที่เยอะกว่าอีกด้วย

อีกหนึ่งข้อดีของการทำ Landing page คือ เราสามารถทำการทดสอบ Run experiment ทำ A/B testing ได้สม่ำเสมอโดยไม่กระทบกับการขายหลักในเว็บไซต์ของเรา

3.5 Retargeting ตามคนกลับมาซื้อสินค้าของเรา

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

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

Retargeting จะไม่สำเร็จหากไม่มี Google ads, Facebook ads, LinkedIn ads หรืออื่น ๆ ดังนั้นการทำ Retargeting จึงถือว่าเป็นเรื่องที่สำคัญมากสำหรับการทำ E-commerce ในปัจจุบัน

Retargeting ที่ดีนั้นควรจะต้อง track ได้ ว่าเราได้ปิดการขายบนหน้าเว็บของเราไปจากการยิงโฆษณาผ่านช่องทางไหน Facebook, Google หรือ อื่น ๆ เพื่อที่จะช่วยให้เราสามารถควบคุมการใช้จ่ายค่า ads ในอนาคตได้อย่างแม่นยำ

readyplanet static retargeting vs dynamic retargeting
readyplanet static retargeting vs dynamic retargeting

Readyplanet ได้ให้บริการ ระบบ R-Dynamic ระบบที่จะช่วยทำโฆษณาที่แสดงผลเจาะจงไปตามแต่ละ User ซึ่งจะให้ผลลัพธ์ที่ตรงกว่าการทำ Re-targeting ธรรมดา โดยจากผลการสำรวจพบว่าช่วยเพิ่มยอดขาย CTR ได้สูงสุดถึง 300% (สำรวจจากลูกค้าที่ใช้งาน R-Dynamic)

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

3.6 Email Marketing

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

  1. สร้างความสัมพันธ์ที่ดีในระยะยาวกับลูกค้าของเรา
  2. อีเมล์สามารถทำโปรโมชั่น ช่วยสร้างยอดขายได้
  3. การส่งอีเมล์จะเป็นการส่งข้อมูลหาลูกค้าของเราได้โดยตรง โดยไม่ผ่าน third party หรือระบบอื่น ๆ
  4. อีเมล์จะช่วยดึงลูกค้ากลับมาซื้อซ้ำ และทำการตลาดอื่น ๆ ได้อีกมากมาย

ประเภทของอีเมล์หลัก ๆ จะมี 3 ส่วนด้วยกันคือ

  1. Transactional emails คือ อีเมล์ที่จะถูกส่งหลังจากมีการซื้อขาย, สมัครสมาชิกกับระบบ เช่น อีเมล์สรุปยอดขาย ใบเสร็จ แจ้งการโอนเงิน การส่งของ เป็นต้น
  2. Promotional emails คือ อีเมล์สำหรับทำการตลาด เช่น ลดราคาเมื่อซื้อครั้งแรก, สะสมแต้ม, ลดราคาตามเทศกาล, แถมของฟรี เป็นต้น
  3. Lifecycle emails คือ อีเมล์ที่จะมีจุดการคำนวนในการส่ง เช่น จะส่งอีเมล์หาผู้ที่ออกจากเว็บไซต์ของเราไปสามวันโดยที่ไม่ซื้อสินค้าให้กลับมาซื้อใหม่อีกครั้ง, หรือคนที่ลืมของไว้ในตะกร้าสินค้าแต่ลืมชำระเงิน ให้กลับมาชำระเงิน เป็นต้น

ในส่วนของการตลาดนั้นยังมีอีกมากมาย ในวันนี้แอดนัทหยิบยกมาแค่เพียงบางส่วนเท่านั้น หากท่านใดที่สนใจข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบเพื่อเพิ่มยอดขาย อย่าลืมติดตามบทความใหม่ ๆ บน Designil นะคะ


สรุปวิธีการออกแบบเว็บไซต์

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

ออกแบบเว็บไซต์ etsy design
etsy design system

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

การทำเว็บไซต์ต้องมีการปรับปรุงอัพเดทเนื้อหาสม่ำเสมอไม่มีวันสิ้นสุด

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

และหากท่านที่ยังเป็นมือใหม่กับการดูแลร้านค้าออนไลน์ ทางบริษัทจะมีคลาสอบรมให้เราอัพเดทความรู้กันเป็นประจำทุกเดือนด้วยค่ะ

logo readyplanet

บริการที่น่าสนใจจาก Readyplanet

ทำเว็บไซต์ร้านค้า R-Shop แพลตฟอร์มสร้างเว็บไซต์ E-commerce ที่มีระบบบริหารการขาย CRM, Chat, Payment gateway ที่ครบถ้วน ให้ลูกค้าชำระเงินได้อย่างมั่นใจ

R-CRM สำหรับทำการตลาดออนไลน์ที่สามารถจัดเก็บข้อมูลได้ทั้งของลูกค้า , Sales, และสามารถดู Lead ของลูกค้าได้ ว่ามาจากช่องทางไหน ทำให้ปิดการขายได้อย่างสะดวกและรวดเร็ว

R-Dynamic ระบบช่วยทำโฆษณาที่แสดงผลเจาะจงไปตามแต่ละ User ตรงกว่าการทำ Re-targeting ผลการสำรวจจากลูกค้าที่ใช้งานพบว่าช่วยเพิ่มยอดขาย CTR ได้สูงสุดถึง 300%

R-Booking ระบบสำหรับการสั่งจอง เช่น ฟิตเนส คลาสเรียน ร้านทำผม สปา คลินิก ร้านอาหาร สปา เป็นต้น

R-Widget มีช่องทางการติดต่อที่ตอบโจทย์ลูกค้าคนไทยทุกตัว เช่น Line, Facebook, Email, Call / โทร, Web chat สามารถจัดการแชททั้งหมดได้ในที่เดียว เจ้าของธุรกิจไม่ต้องตอบข้อความหลายท่ี

ระบบสะสมแต้ม Pointspot สำหรับทำการตลาดแบบ Loyalty program ช่วยสะสมแต้มหรือทำการตลาดเพื่อให้ลูกค้ากลับมาซื้อซ้ำ

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

*บทความนี้มีเนื้อหาจาก Advertorial ที่อ้างอิงจากการใช้งานจริงของทีมงาน Designil


ติดตามบทความใหม่เกี่ยวกับการ ออกแบบเว็บไซต์ เพื่อเพิ่มยอดขาย เป็นประจำผ่านทาง Designil.com แล้วเจอกันใหม่บทความหน้านะคะ 🙂

Resources

Share on facebook
Share on twitter
Share on telegram
Share on linkedin
Share on email

Leave a Reply

Your email address will not be published. Required fields are marked *