พลิกโฉมเว็บขายของด้วย WebGL! เปลี่ยนภาพนิ่งเป็นขวดเซรั่ม 3D หมุนได้ 360° สร้าง UX สุดล้ำ เพิ่มมูลค่าสินค้าให้ดูแพง มัดใจลูกค้ายุคดิจิทัล
เคยเป็นกันไหมคะ? เวลาเราไถฟีด Instagram หรือเข้าไปดูเว็บไซต์แบรนด์สกินแคร์เจ้าดังๆ แล้วรู้สึกว่า "ทำไมรูปเขาสวยจัง แต่พอกดเข้าไปดูในเว็บแล้วมันดูแบนๆ ไม่มีมิติ?" คือรูปถ่ายสวยน่ะใช่ แต่ในยุคที่โลกเรากำลังวิ่งเข้าสู่ Web 3.0 และ Metaverse แบบนี้ การมีแค่รูปถ่าย Jpg หรือ Png แปะอยู่บนหน้าเว็บ E-commerce มันเริ่มจะไม่พอแล้วสำหรับผู้บริโภคยุคใหม่ที่ต้องการ "Experience" หรือประสบการณ์ร่วมกับแบรนด์มากกว่าแค่การกดปุ่ม Add to cart
วันนี้อยากชวนทุกคนมาคุยเรื่องเทรนด์เว็บดีไซน์ที่กำลังมาแรงมากๆ ในฝั่งยุโรปและอเมริกา นั่นคือการใช้เทคโนโลยี WebGL มาสร้าง Interactive 3D บนหน้าเว็บไซต์ โดยเฉพาะในวงการ Beauty ที่ "รูปลักษณ์" คือด่านแรกของการตัดสินใจซื้อ บอกเลยว่าเทคนิคนี้จะเปลี่ยนหน้าเว็บธรรมดาๆ ของเราให้กลายเป็น Virtual Showroom ที่ลูกค้าต้องร้องว้าวแน่นอน
ทำไมต้อง 3D? เมื่อ 2D เริ่มเอาไม่อยู่ในยุค Attention Economy
เราต้องยอมรับความจริงข้อหนึ่งว่า Pain Point ใหญ่ที่สุดของการซื้อเครื่องสำอางออนไลน์คือ "จับต้องสินค้าไม่ได้" ลูกค้าไม่รู้ว่าแพคเกจจิ้งจริงๆ เป็นยังไง วัสดุเป็นแก้วหรือพลาสติก ขนาดจับถนัดมือไหม ปกติเราแก้ปัญหานี้ด้วยการถ่ายรูปหลายๆ มุม หรือถ่ายวิดีโอหมุนสินค้าให้ดูใช่ไหมคะ?
แต่นั่นมันคือ Web 2.0 ค่ะ... มันคือสื่อทางเดียวที่ลูกค้าทำได้แค่ "ดู"
ในทางกลับกัน เทคโนโลยี WebGL (Web Graphics Library) อนุญาตให้เราเรนเดอร์กราฟิก 3 มิติความละเอียดสูงลงบนบราวเซอร์ได้โดยตรง โดยที่ลูกค้า ไม่ต้องลงปลั๊กอินเพิ่ม และ ไม่ต้องโหลดแอป ลองจินตนาการดูสิว่า ถ้าลูกค้าเข้าเว็บเรามา แล้วเจอกับโมเดล 3D ของ ขวดเซรั่ม ที่มีความสมจริงระดับ Hyper-realistic แสงเงากระทบขวดแก้ววิบวับ แล้วเขาสามารถใช้นิ้วปัดหน้าจอเพื่อหมุนดูขวดได้เอง 360 องศา ซูมดูหัวดรอปเปอร์ หรือพลิกดูฉลากด้านหลังได้ตามใจชอบ ความรู้สึกในการ "เป็นเจ้าของ" สินค้าชิ้นนั้นมันจะเกิดขึ้นทันที ทั้งที่ยังไม่ได้จ่ายเงินด้วยซ้ำ
นี่แหละคือพลังของ Immersive Experience ที่รูปถ่าย 2D ให้ไม่ได้
เจาะลึก Tech Stack : เบื้องหลังความสวย คือ Code และคณิตศาสตร์
สำหรับสาย Tech หรือเจ้าของแบรนด์ที่ชอบความล้ำ อาจจะสงสัยว่า "เห้ย แล้วมันทำยากไหม? เว็บจะอืดหรือเปล่า?"
ต้องบอกแบบนี้ค่ะ สมัยก่อนการจะทำ 3D บนเว็บคือเรื่องใหญ่มาก ต้องใช้ Three.js เขียนโค้ดกันตาแตก แต่เดี๋ยวนี้ Technology Stack มันพัฒนาไปไกลมาก เรามีเครื่องมืออย่าง Spline, Dora, หรือ Webflow ที่รองรับการทำงานแบบ No-code/Low-code ทำให้ดีไซเนอร์อย่างเราสามารถขึ้นโมเดล 3D ใส่ Material ให้ดูเป็นแก้วฝ้า เป็นโลหะ หรือเป็นพลาสติก แล้ว Export ออกมาเป็นโค้ด Embed ลงหน้าเว็บได้เลย
ความเจ๋งคือ WebGL มันใช้ GPU (การ์ดจอ) ของเครื่อง user ในการประมวลผล ทำให้การแสดงผลลื่นไหลมาก ยิ่งถ้าเรา Optimize โมเดลมาดีๆ ลดจำนวน Polygon ให้เหมาะสม โหลดเร็วกว่าไฟล์วิดีโอ 4K อีกนะ
ลองนึกภาพการเซ็ตอัพ ขวดเซรั่ม โมเดล 3D สักชิ้น เราสามารถกำหนดค่า Lighting (แสง) ให้หมุนตามเมาส์ของลูกค้าได้ (Mouse movement interaction) พอแสงมันวิ่งผ่านส่วนโค้งเว้าของขวด มันจะโชว์ Texture ความพรีเมียมของแพคเกจจิ้งออกมาได้ชัดเจนมาก ชนิดที่ว่าช่างภาพเก่งๆ ยังต้องปาดเหงื่อ เพราะนี่คือ Real-time rendering ไม่ใช่ภาพนิ่งที่ผ่านการ Retouch มาแล้ว
Use Case : เปลี่ยน User Journey ให้กลายเป็นการเล่นสนุก
การเอาเทคโนโลยีนี้มาใช้ ไม่ใช่แค่เพื่อความเท่ค่ะ แต่มันคือการ Design User Journey ใหม่
ปกติเวลาเราเลื่อนหน้าเว็บ เราก็เลื่อนลงมาเรื่อยๆ (Vertical Scroll) ใช่ไหมคะ? แต่ด้วยพลังของ WebGL เราสามารถทำลูกเล่นที่เรียกว่า "Scrollytelling" ได้ เช่น พอลูกค้าเลื่อนหน้าจอลงมา แทนที่ภาพสินค้าจะเลื่อนหายไป เราสามารถตั้งค่าให้ ขวดเซรั่ม ลอยเด่นอยู่กลางจอ แล้วค่อยๆ หมุนตัวเองโชว์ส่วนผสมสำคัญที่เด้งขึ้นมาด้านข้างทีละตัว หรือทำระเบิดเลเยอร์ (Exploded View) ให้เห็นว่าข้างในขวดมีนวัตกรรมหัวปั๊มสุญญากาศยังไง
มันคือการเล่าเรื่อง (Storytelling) ที่ทำให้ลูกค้าหยุดนิ้วดู และใช้เวลาอยู่บนหน้าเว็บ (Time on Page) นานขึ้น ซึ่งส่งผลดีต่อ SEO โดยตรง เพราะ Google จะมองว่าเว็บเรามี Quality Content ที่ดึงดูดคนได้จริง
สิ่งที่เจ้าของแบรนด์ต้องเตรียมตัว (ถ้าไม่อยากตกขบวน)
ถ้าอ่านมาถึงตรงนี้แล้วเริ่มคันไม้คันมือ อยากจะลองทำดูบ้าง มีคำแนะนำจากประสบการณ์ตรงที่อยากฝากไว้ 3 ข้อค่ะ
- High-Quality 3D Assets : คุณต้องมีไฟล์โมเดล 3D ของสินค้าที่สเกลเป๊ะ แนะนำให้ขอไฟล์ CAD จากโรงงานผลิตแพคเกจจิ้ง หรือจ้าง 3D Artist ขึ้นรูปให้ใหม่ โดยเน้นเรื่อง Texture ของวัสดุให้สมจริงที่สุด เพราะถ้าโมเดลลอยๆ หลอกตา แทนที่จะดูแพง มันจะดูเหมือนเกมยุค 90s ทันที
- Platform ที่รองรับ : เช็คระบบหลังบ้านของคุณว่ารองรับการฝัง Code (Embed) หรือ iframe ไหม เว็บไซต์สำเร็จรูปสมัยใหม่ส่วนใหญ่ทำได้หมดแล้ว แต่ต้องดูเรื่อง Speed Optimization ด้วย
- Mobile First : อย่าลืมว่าลูกค้า 80% ดูผ่านมือถือ การออกแบบ Interaction การหมุน ขวดเซรั่ม ต้องใช้นิ้วปัดได้ลื่น ไม่กระตุก และไม่ไปตีกับการเลื่อนหน้าจอปกติ (Scroll jacking) ต้องเทสต์ UX ตรงนี้ให้ดีมากๆ
อนาคตของ E-commerce คือความสมจริง
สุดท้ายนี้ อยากจะบอกว่าเทคโนโลยีมันไปไวมากค่ะ การที่เราลุกขึ้นมาปรับตัวใช้ WebGL หรือ 3D บนหน้าเว็บก่อนคู่แข่ง ไม่ใช่แค่เรื่องของการตามเทรนด์ แต่มันคือการประกาศ Branding ว่าเราคือแบรนด์นวัตกรรม ที่ใส่ใจในทุก Detail แม้กระทั่งประสบการณ์หน้าเว็บ
สำหรับใครที่กำลังจะเปิดตัวโปรดักส์ใหม่ โดยเฉพาะกลุ่มสกินแคร์ที่มีคู่แข่งในตลาดเป็นหมื่นแบรนด์ ลองเปลี่ยนจากรูปถ่ายเดิมๆ มาเป็น Interactive 3D ดูสิคะ เชื่อเถอะว่า แค่ลูกค้าได้ลองหมุน ขวดเซรั่ม เล่นบนหน้าจอมือถือ เขาจะจดจำแบรนด์ของคุณได้แม่นยำกว่าการมองผ่านๆ แน่นอน และเผลอๆ Conversion Rate จะพุ่งกระฉูดจนคุณตกใจเลยล่ะ