hamburger-menu-Responsive

ออกแบบ Responsive Menu แบบไหนถึงจะสร้าง Conversion ได้ดีที่สุด

ใครๆ ก็อยากมีเว็บแบบ Responsove Design กันทั้งนั้นใช่มั้ยครับ สิ่งสำคัญการสร้างประสบการณ์ที่ดีในการแสดงผลบนหน้าจอทุกขนาด ปรับการแสดงเนื้อหาให้เหมาะกับขนาดหน้าจอแสดงผลให้ผู้ใช้ได้ประสบการณ์ที่ดี

ในการออกแบบ Website แบบ Responsive บ่อยครั้งที่เราจะเห็นเมนูแบบย่อเป็นสัญลักษณ์สามเส้นคล้าย Hamburger ซึ่งในงานดีไซน์ก็จะเรียก Hamburger Menu จะใช้แสดงผลเมนูแบบย่อในเวอร์ชั่นที่เป็น มืถือโดยส่วนมาก หรือแม้แต่กระทั่งใน Application ทั้ง iOS และ Adnroid ก็มีการนำเมนูแบบแฮมเบอร์เกอร์ไปใช้บ่อยครั้ง มีคำถามถกเถียงกันในวงการการออกแบบ User Experience Design ว่าแล้วเมนูแบบนี้แม้ว่ามันจะดูดีในออกแบบแสดงผล คำถามคือผู้ใช้นั้น คุ้นชินกับเมนูแบบนี้แล้ว คลิกเมนูจริงหรือ

มีการทดลองทำ Test AB Tested เมนูแบบ Hamburger ผลที่ได้น่าสนใจครับ Responsive menu แบบ Hamburger แบบสามขีดให้ผลได้ไม่ดีนัก ในการออกแบบ Navigation สำหรับเวอร์ชั่นมือถือแต่ก็ไม่ได้แย่นะครับมีอันที่ได้ผลลัพธ์ที่ดีกว่า

การทดลอง A/B Testing ได้ทดสอบกับผู้เข้าชมเว็บไซต์เวอร์ชั่นมือถือ ทั้งบน iOS และ Android ที่แสดงเมนูแบบ 3 เส้นที่เราเห็นบ่อยๆ ในเว็บไซต์ปัจตุบันนี้ โดยตั้งตัวแปรเมนูแบบ Hamburger 3 แบบ

Screen Shot 2558-08-16 at 8.34.13 PM

1.แบบแรก Baseline 3 เส้น
2.แบบที่สอง Beseline เพ่ิมคำว่าเมนู Menu ประกอบ (เป็นตัวแปรแรก)
3. ถัดมา ทำการล้อมกรอบให้กับ Hamburger Baseline 3 เส้น โดยไม่มีคำอะไรประกอบ (เป็นตัวแปรที่สอง)
ผลที่ได้คือ ในแบบที่ 3 ซึ่งเป็นตัวแปรที่สองให้ผลดีกว่า ดีขึ้น 22.4% และ Conversion สูงกว่าด้วย

Screen Shot 2558-08-16 at 8.38.16 PM

ท้าทายครั้งที่สองด้วยลองเอา Baseline 3 เส้น ออก

จากผลลัพธ์ที่ดีที่สุดในการทดลองแรก ท้าทายด้วยการสร้างตัวแปรใหม่ โดยเลือกสร้าง 3 ตัวแปรครับ
1. คำว่า Menu ถูกล้อมกรอบ
2. คำว่า Menu ถูกล้อมกรอบ เพิ่มBaseline 3 เส้น
3. คำว่าเมนูเฉย ไม่มีทั้งกรอบและ Baseline 3 เส้น

baseline2-variation1

2-variation22-variation3

ผลการทดสอบ วางเมนูแบบอื่น ปรากฏว่า เมนูที่เขียนว่า Menu ล้อมกรอบโดยไม่มี Hamburger มี Conversion ที่ดีกว่า มี Improvement กว่าเดิม 12.9%

Screen Shot 2558-08-16 at 8.43.33 PM

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

คราวนี้ต้องมาชั่งน้ำหนักดูระหว่างสวยอินเทรนด์กับ ผลที่ดีเลือกอะไร ‪#‎Optimization‬ ‪#‎webdesignConversion‬

อ้างอิง AB Tested

ชอบบทความให้กำลังใจง่ายๆ แค่กด Like ข้างล่างนี้ครับ :)