รูปแบบสากลของ website (ที่ user อ่านจากซ้ายไปขวา) logo จะวางอยู่มุมบนซ้าย – ถ้าเราวาง logo ไว้ตรงกลางหน้าเว็บ แทนล่ะ UX จะยังดีอยู่รึเปล่า?
เว็บสมัยใหม่ (Responsive website: เว็บที่สามารถปรับขนาดหน้าเว็บตาม device ต่าง ๆ) เริ่มมีการจัดหน้าโดยให้ logo วางอยู่ตรงกลางมากขึ้น เพราะพื้นที่ด้านซ้าย/ขวาของ navigation ใน Mobile site ถูกเอาไปใช้วางเมนูหรือไอคอน เลยต้องย้าย logo มาไว้ตรงกลางแทน
การวาง layout ให้ logo อยู่ตรงกลางใน Mobile site ยังมีความใกล้เคียงกับการวาง logo แบบดั้งเดิม สังเกตว่า ระยะห่างของ logo แบบจัดกลางใน Mobile site ไม่ต่างจากการวาง logo แบบเก่า ที่ปกติอยู่ชิดซ้ายมากนัก แต่สำหรับ Desktop site ตำแหน่งของ logo แบบจัดกลางจะแตกต่างจากเดิมค่อนข้างมาก
งานวิจัยเปรียบเทียบตำแหน่ง logo บนหน้าเว็บ
มีการทำวิจัยเกี่ยวกับตำแหน่งของ logo บน Web navigation เพื่อเปรียบเทียบว่าจัด logo ชิดซ้ายหรือจัดกลางดีกว่ากัน โดยแบ่งการวัดผลออกเป็น 2 เรื่อง คือ Navigation Success และ Brand Recall
A) ตำแหน่ง logo กับ Navigation Success
NN/g ได้ทำการวิจัยเปรียบเทียบการจัดวาง logo ของเว็บขายเสื้อผ้าทั้งหมด 14 เว็บ โดยมี 8 เว็บที่ logo จัดกลาง และ 6 เว็บที่ logo อยู่มุมบนซ้าย เว็บแต่ละเว็บไม่มี text link ที่กดแล้วกลับไปหน้า home เลย จะต้องคลิกที่ logo เท่านั้นเพื่อกลับไปหน้า home เป้าหมายของการวิจัย คือ ต้องการทราบว่า “ผู้ใช้สามารถกลับไปหน้า home ภายในคลิกเดียวได้หรือไม่“
มีผู้เข้าร่วมการทดสอบทั้งหมด 50 คน ผู้เข้าร่วมจะได้รับมอบหมายให้ลองใช้เว็บตัวอย่าง ทำงาน 2 อย่าง คือ
- (เริ่มจากหน้า home) ให้เลือกของขวัญที่มีราคาน้อยกว่า $100 ให้เพื่อน แล้วเพิ่มสินค้าลงในตะกร้า
- (เริ่มจากหน้าตะกร้าสินค้า) ให้ย้อนกลับไปหน้า home
ระหว่างการทดสอบ มีการบันทึกหน้าจอของผู้เข้าร่วมการทดลองว่าคลิกอะไรตรงไหนบ้าง
ผลการทดสอบ
ผลการทดสอบ พบว่า เว็บที่มี logo อยู่บนมุมซ้าย ผู้ใช้งานสามารถกลับไปหน้า home ภายในคลิกเดียว ได้ดีกว่าเว็บที่มี logo จัดกลาง อย่างมีนัยสำคัญ (p <0.05 with a chi-squared test)
เทียบกันแล้ว ถ้าจัด logo ไว้ตรงกลาง user มีโอกาสพลาดมากกว่าถึง 6 เท่า!!
B) ตำแหน่ง logo กับการจดจำ Brand Recall
NN/g ได้ทำอีกงานวิจัยนึงเพื่อทดสอบว่า “ตำแหน่ง logo สัมพันธ์กับการจดจำชื่อ Brand อย่างไร” โดยทดสอบกับเว็บของโรงแรม 4 แห่ง แต่ละเว็บจะวาง logo ไว้สองแบบ คือ มุมบนซ้ายกับจัดกลาง ในครั้งนี้ มีผู้เข้าร่วมการทดสอบทั้งหมด 128 คน และแต่คนจะได้รับมอบหมายให้ทำงาน 2 อย่าง คือ ให้ดูเว็บโรงแรมแบบสุ่ม 5 ที่ (แต่ละเว็บสุ่มตำแหน่ง logo ซ้าย/กลาง/ขวา) และทดสอบความจำว่า จากโรงแรมที่ให้ดู 10 ที่ เคยเห็นโรงแรมอะไรไปแล้วบ้างจากการทดสอบก่อนหน้านี้
ผลการทดสอบ
ผลการทดสอบพบว่า ตำแหน่งการวาง logo ไม่ค่อยมีผลกับการจำชื่อ Brand มากนัก
Takeaway
- การวาง Logo ไว้บนมุมซ้ายจะทำให้ UX ของ navigation ดีกว่าวาง logo ไว้ตรงกลาง เพราะ user กลับไปหน้า home ได้ง่ายกว่า
- logo ชิดซ้ายดีที่สุด ถ้าอยู่ตรงกลาง UX อาจจะแย่ลงนิดหน่อย แต่อย่าจัดชิดขวาเด็ดขาด
- ถึงแม้ว่า logo จะอยู่ด้านซ้ายแล้ว ไม่ได้แปลว่าจะแก้ปัญหา UX ได้ทั้งหมด ควรออกแบบให้ logo ดูเหมือนคลิกได้ด้วย และอย่าลืมใส่ home link
- References
- https://community.uxmastery.com/t/centered-logo-in-header-good-or-bad/1966/5
- https://uxmovement.com/navigation/why-you-should-never-center-or-right-align-your-logo/
- https://www.nngroup.com/articles/centered-logos/
*Disclaimer: จากงานวิจัยที่เขียนด้านบน ตำแหน่ง logo สามารถเอาไปประยุกต์ใช้กับ context ที่คนอ่านจากซ้ายไปขวาเท่านั้น
การนำข้อมูลไปใช้
- การนำข้อมูลไปใช้ควรพิจารณาถึงขอบเขต ข้อจำกัด และบริบทของการทดสอบที่อ้างอิงมา
- ควรพิจารณาข้อมูลควบคู่ไปกับปัจจัยอื่น ๆ ด้วย ไม่ควรใช้ข้อมูลชุดเดียว ตัดสิน UX ทั้งหมดของ web/app
- ข้อมูลในบทความเป็นผลลัพธ์ภายใต้ขอบเขตของการทดสอบเท่านั้น ควรทำการทดสอบกับ web/app และ Personas ของตนเองด้วย เพื่อให้ได้ผลลัพธ์ที่แท้จริง
BetterUXUI.com ให้ความสำคัญกับความถูกต้องของข้อมูล
ข้อมูลและงานวิจัยต่าง ๆ ที่อ้างอิงในบทความ อ้างอิงจากปีข้อมูลนั้น ๆ หากมีข้อมูลที่ใหม่กว่าและต้องการให้ทางเว็บไซต์อัพเดทบทความ สามารถ Request ให้แก้ไขบทความให้มีความถูกต้องและเป็นปัจจุบันมากขึ้น
ไม่พลาดบทความใหม่ๆ จาก BetterUXUI.com
1. กด Like Facebook page BetterUXUI
2. สมัครและอ่านบทความทางอีเมล