Reduced drop-off with a redesigned for Header Website
2 Weeks (Feb 2025)
จากการวิเคราะห์ Header ของเว็บไซต์ในเวอร์ชัน Desktop พบว่าผู้ใช้ใช้เวลาค่อนข้างนานในการค้นหาข้อมูลที่ต้องการ เนื่องจากมีเมนูจำนวนมากใน Header ส่งผลให้ผู้ใช้เกิดความสับสน และหยุดการค้นหา นอกจากนี้ Header ยังใช้พื้นที่แสดงผลมากเกินไป ทำให้เกิดปัญหาการ Scroll ในมุมมองแบบ Responsive ดังนั้น ควรปรับปรุงและออกแบบใหม่ เพื่อยกระดับประสบการณ์การใช้งานให้ง่ายและมีประสิทธิภาพมากขึ้น ซึ่งปัญหาเล่านี้เกิดจากการวิเคราะห์ข้อมูลใน Google Analytic 4 ที่เก็บรวบรวมพฤติกรรมการใช้งานของผู้ใช้มาพัฒนาให้ดีขึ้น
ในส่วนนี้ขอแบ่งปันภาพของ header ที่ได้ปรับปรุง และนำขึ้นเว็บจริง
สามารถทดลองใช้งานได้ที่ https://www.true.th/home
ขั้นตอนแรกคือการทำความเข้าใจปัญหาที่เกิดขึ้น โดยเริ่มจากการวิเคราะห์ข้อมูลเดิมเพื่อระบุปัญหาหลักที่พบ จากนั้นจึงทำการ Research เพิ่มเติมด้วยการทำ User Research โดยให้ผู้ใช้งานทดลองค้นหาข้อมูลจาก Header Menu พร้อมสังเกตพฤติกรรมระหว่างการใช้งาน โดยเน้นประเด็นสำคัญดังนี้
ภาพตัวอย่าง header แบบเดิม
- เวลาที่ผู้ใช้ใช้ในการค้นหาข้อมูลจาก Header (ถ้าอ้างอิงจาก Jakob Nielsen ผู้ใช้ไม่ควรใช้เวลานากว่า 10-20 วินาที)
- ผู้ใช้สามารถค้นพบข้อมูลตามที่กำหนดได้หรือไม่
- สัมภาษณ์ความรู้สึกของผู้ใช้งานต่อ Header รูปแบบเดิม
เพื่อแก้ไขปัญหาที่กล่าวมาข้างต้น ได้เริ่มปรับปรุงและพัฒนา Header โดยแต่ละการเปลี่ยนแปลงมีเป้าหมายเพื่อสร้างประสบการณ์การใช้งานที่ง่ายและชัดเจนยิ่งขึ้น
ประเด็นสำคัญที่ต้องได้รับการแก้ไข
- แสดงข้อมูลจำนวนมากใน Header ทำให้ใช้เวลาหาข้อมูล ส่งผลให้ผู้ใช้เกิดความสับสน และหยุดการค้นหา
- แก้ปัญหาด้วยการจัดกลุ่มข้อมูลใหม่ใส่ข้อมูลที่จำเป็นในการนำเสนอ
- ใช้พื้นที่แสดงผลมากเกินไป ทำให้เกิดปัญหาการ Scroll ในมุมมองแบบ Responsive
- เปลี่ยนรูปแบบการแสดงผลจากเดิมที่ใช้เป็น Mega Menu มาเป็น dropdown เพื่อช่วยลดพื้นที่การใช้งานที่เยอะเกินไป
เมื่อได้ Solution ที่จะนำมาแก้ไขปัญหาดังกล่าวแล้ว เพื่อให้มั่นใจว่า Solution ที่ออกแบบไว้สามารถตอบโจทก์และแก้ไขปัญหาได้จริง จึงต้องมีการทำ Usability Testing โดยในครั้งนี้มี Solution สองรูปแบบที่คาดว่าจะช่วยแก้ไขปัญหาได้ จึงเลือกใช้วิธี A/B Testing เพื่อทดสอบว่ารูปแบบไหนเหมาะสมและใช้งานได้ดีที่สุดสำหรับผู้ใช้
Solution A
- เป็นการใช้ Header ในรูปแบบ Cascading menu หรือ Dropdown Menu ซึ่งเป็นที่นิยมในการใช้เป็น Header Menu สำหรับเว็บทั่วไป ข้อดีคือ เหมาะสำหรับเนื้อหาที่มีการจัดหมวดหมู่ และมีองค์ประกอบย่อยจำนวนมาก
Solution B
- ใช้รูปแบบ Nested Sidebar ข้อดีคือ เหมาะสำหรับเนื้อหาที่มีการจัดหมวดหมู่ และลำดับขั้นเหมือนกันแต่จะนิยมใช้กับเว็บแอปพลิเคชัน
เนื่องจากทั้งสอง Solution มีข้อดีที่ใกล้เคียงกัน จึงเลือกใช้เครื่องมือ A/B Testing เพื่อเปรียบเทียบผลลัพธ์ โดยอ้างอิงจากคำตอบและความคิดเห็นของผู้ใช้งาน เพื่อนำมาประกอบการตัดสินใจในการเลือกแนวทางที่เหมาะสมที่สุด
Solution A
Solution B
กลุ่มผู้ใช้งานหลักที่เลือกทำ A/B Testing ของเว็บไซต์ คือ กลุ่มลูกค้าที่มีช่วงอายุระหว่าง 18–45 ปี ซึ่งเป็นช่วงอายุที่มีการเข้าใช้งานเว็บไซต์ และยังคงค้นหาข้อมูลผ่านเว็บไซต์อยู่เป็นประจำ จึงเลือกผู้ใช้กลุ่มนี้ เพราะกลุ่มเป้าหมายจะค่อนข้างกว้าง จึงเลือกจำแนกได้จากพฤติกรรมการใช้งานตามอายุ ส่วนผู้ใช้งานที่มีอายุมากกว่า 45 ปี มักนิยมรับข้อมูลผ่านช่องทางอื่น เช่น โซเชียลมีเดียหรือ SMS มากกว่าเว็บไซต์
ภาพแสดงผลการทดสอบ
ผลการทดสอบพบว่าผู้ใช้ส่วนใหญ่พอใจการใช้งาน Header แบบ A โดยเหตุผลหลักคือความเคยชินที่มาจากการใช้งานเว็บไซต์อื่น รวมถึงหาข้อมูลได้ไวกว่า
ซึ่งได้ทดสอบจาก User ทั้งหมด 12 คน
ผู้เลือกรูปแบบ A = 8 คน
ผู้ใช้ที่เลือกแบบ B = 4 คน
ซึ่งเห็นได้ชัดเจนว่ากลุ่มผู้ใช้ส่วนใหญ่มองว่าแบบ A ใช้งานง่ายกว่า
สิ่งสำคัญที่ได้เรียนรู้จากโปรเจ็กต์นี้เลยคือ การได้ใช้ข้อมูลในการวิเคราะห์ และออกแบบ UX/UI
- ถ้าเรามีข้อมูลเชิงสถิตินั้นจะเป็นประโยชน์กับเรามากเพราะสามารถบอกเราได้ว่า “กำลังเกิดอะไรขึ้นบ้าง” กับหน้าเว็บของเรา
- การสัมภาษณ์ และทดสอบกับผู้ใช้ช่วยให้เราเข้าใจว่า “สิ่งที่กำลังเกิดขึ้นนั้นมาจากสาเหตุอะไรเป็นหลัก”
- การทำ Usability Testing สามารถทำให้เราหาคำตอบให้กับ Solution ของเราได้ง่ายขึ้น
