ความสามารถของ CSS และ UI หมายถึงฟีเจอร์และไวยากรณ์ CSS ใหม่ที่ช่วยให้คุณลดหรือแทนที่โซลูชัน JavaScript ที่กําหนดเองหรือแฮ็ก CSS บางรายการ และช่วยให้คุณเขียนโค้ดได้ดีและง่ายขึ้น การใช้ฟีเจอร์ CSS ที่ทันสมัยช่วยให้นักพัฒนาแอปทำสิ่งต่อไปนี้ได้
- ลดเวลาในการพัฒนา
- ปรับปรุงประสิทธิภาพของโค้ด การอ่านง่าย และการบำรุงรักษา
- ปรับปรุงประสิทธิภาพ
- สร้างอินเทอร์เฟซผู้ใช้ที่สวยงาม ราบรื่น มีประสิทธิภาพ และเข้าถึงได้
ในชุดกรณีศึกษานี้ คุณจะได้ดูว่าเว็บไซต์อีคอมเมิร์ซต่างๆ ใช้ภาพเคลื่อนไหวที่ทำงานตามการเลื่อน การเปลี่ยนมุมมอง Popover API การค้นหาคอนเทนเนอร์ และตัวเลือก has() อย่างไร รวมถึงประโยชน์ที่ได้รับ
เหตุใดเว็บไซต์อีคอมเมิร์ซจึงควรใช้ฟีเจอร์เหล่านี้
ใน6 ขั้นตอนในการพิสูจน์ว่า UX ดีขึ้น งานวิจัยของ Forrester แสดงให้เห็นว่า UI ที่ออกแบบมาอย่างดีสามารถเพิ่ม Conversion ได้สูงสุด 200% ผู้ใช้ดูเหมือนจะเชื่อมโยงคุณภาพการออกแบบกับความน่าเชื่อถือ โดยผู้บริโภค 94% ระบุว่าการออกแบบเป็นเหตุผลหลักที่ทำให้ออกจากหรือไม่ไว้วางใจเว็บไซต์ ด้วยเหตุนี้ เว็บไซต์อีคอมเมิร์ซจึงได้รับประโยชน์อย่างยิ่งจากความสามารถของ CSS และ UI เหล่านี้ Funnel Conversion ต้องราบรื่นที่สุดเพื่อให้ผู้ใช้ทํางานให้เสร็จได้อย่างง่ายดายและมั่นใจ การโต้ตอบที่ตอบสนองต่อการโต้ตอบของผู้ใช้และการนําทางที่ราบรื่นจะให้ภาพรวมที่ดีแก่ผู้ใช้ รวมถึงเพิ่มความพึงพอใจและการแสดงออกให้กับเส้นทางโดยรวม
ฟีเจอร์เหล่านี้ออกแบบมาให้ใช้งานง่าย และสามารถติดตั้งใช้งานส่วนใหญ่ใน CSS โดยใช้ JavaScript เพียงเล็กน้อย ซึ่งช่วยสร้างประสบการณ์การใช้งานอีคอมเมิร์ซที่ยอดเยี่ยมโดยไม่ต้องใช้ไลบรารีของบุคคลที่สามหรือ JavaScript ที่กําหนดเองเพื่อสร้างฟังก์ชันการทำงานเดียวกัน การใช้ JavaScript น้อยลงยังช่วยเพิ่มประสิทธิภาพได้อีกด้วย ซึ่งจะทำให้ประสบการณ์การใช้งานเหล่านี้ราบรื่นและตอบสนองได้ดียิ่งขึ้น
ความสามารถของ UI ของเว็บใช้ได้กับทุกส่วนของเส้นทางของผู้ใช้ ตัวอย่างที่เกิดขึ้นจริงมีดังนี้
| ฟีเจอร์/บริษัท | redBus | PolicyBazaar | Tokopedia |
|---|---|---|---|
| ภาพเคลื่อนไหวที่ทำงานตามการเลื่อน | รถเข็น | หน้าข้อมูลผลิตภัณฑ์ที่แสดง (PLP) | หน้ารายละเอียดผลิตภัณฑ์ (PDP) |
| ดูทรานซิชัน | การเข้าสู่ระบบ | PDP | PDP |
| ป๊อปอัป | - | - | PDP |
| การค้นหาคอนเทนเนอร์ | หน้าแรก | - | PDP |
| :has() | - | PLP | PDP |
ซึ่งสามารถแสดงเป็น Funnel Conversion ได้ด้วย
กรณีศึกษาต่อไปนี้จะแชร์วิธีที่บริษัทต่างๆ ใช้ฟีเจอร์เหล่านี้และประโยชน์ที่ค้นพบ
ขอขอบคุณเป็นพิเศษ Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme และ Rachel Andrew สำหรับความคิดเห็นและการอ่านชุดบทความนี้