220-901 dumps 100-105 study 300-115 pdf Exam dumps 200-310 exam CISSP Exam details questions 200-310 pdf

ความหมายของ Hamburger Icon ปุ่ม 3 ขีด บน Mobile Web 

ความหมายของ Hamburger Icon ปุ่ม 3 ขีด บน Mobile Web

ความหมายของ Hamburger Icon ปุ่ม 3 ขีด บน Mobile Web

ความหมายของ Hamburger Icon ปุ่ม 3 ขีด บน Mobile Web

ความหมายของ Hamburger Icon ปุ่ม 3 ขีด บน Mobile Web และ Mobile Application ถ้าพูดถึง Hamburger Icon หลายคนคงไม่คุ้นหูกับคำๆ นี้ ซึ่งมันก็คือ สัญลักษณ์ของเมนูที่ชื่อว่า Drawer Menu (เมนูลิ้นชัก) มีลักษณะเป็นเส้น 3 ขีด เป็นเหมือนลิ้นชักที่ซ่อนเมนูที่ต้องการไว้ข้างในโดยเมื่อกดปุ่มเข้าไปแล้วจะมีเมนูโผล่ออกมาให้เลือกนั่นเองคะ

i.stack.imgur

Hamburger Icon ได้เป็นที่ถกเถียงของคนที่ทำงานด้าน UX หรือ User Experience ว่า สัญลักษณ์ 3 ขีดนี้ ขัดกับหลักการไอคอนที่ต้องสื่อความหมายได้ด้วยตัวของมันเอง แต่เมื่อ google ได้ออกมาบอกว่าเจ้า Hamburger Icon และ Drawer Menu เป็น UX ที่ดีของแอพฯแอนดรอยด์นะ สังเกตดูได้จากแอพฯของกูเกิ้ลทุกตัวจะมีเจ้าสองอย่างนี้ติดมาด้วยเสมอ Hamburger Icon ก็เลยเป็นที่รู้จักและใช้กันอย่างแพร่หลายใน Mobile Web และ Mobile Application จนถึงปัจจุบัน

 

turbo.designwoop

ต้นกำเนิดของ Hamburger Icon กำเนิดครั้งแรกบน Xerox Star คอมพิวเตอร์ส่วนบุคคล ถือเป็นเครื่องคอมพิวเตอร์ที่มีเทคโนโลยีล้ำสมัยมากในสมัยนั้น (ปี ค.ศ. 1981) โดยดีไซเนอร์ชื่อ Norm Cox ได้ออกแบบไอคอนโดยต้องการจะแสดงไอคอนในรูปแบบ Graphical เพื่อไว้ใช้กดโชว์ ลิสต์ของเมนูต่างๆที่ถูกซ่อนไว้ จึงใช้สัญลักษณ์ ขีดสามขีด โดยอนุมานจาก ป้ายจราจร ที่แสดงสัญลักษณ์ที่ง่ายต่อการจดจำ และสื่อความหมายด้วยตัวของมันเอง Hamburger Icon ได้รับความนิยมเมื่อถูกนำมาใช้โดย Facebook , Youtube และ Google ใน Mobile Web และ Mobile Application แต่ก็มีผู้ใช้งานที่ไม่คุ้นเคยกับการใช้ Hamburger Icon ได้แสดงความคิดเห็นว่า การใช้งานแบบเมนูน่าจะใช้งานได้ดีกว่า จึงมีการสำรวจข้อมูล A/B Testing ระหว่างปุ่ม Hamburger และปุ่มที่มีคำว่า Menu ผลการสำรวจหลายต่อหลายแหล่ง รวมถึง Exis ให้ผลออกมาตรงกันคือ ปุ่มที่มีคำว่า Menu สร้างอัตราการกดสูงกว่าปุ่ม Hamburger ถึง 20%

@thenextweb

โดยปัญหาของ Hamburger Icon คือมันไม่ใช่ปุ่มที่กดแล้วจะทำงานได้เลย ต้องกดถึงสองครั้งจึงจะทำงานใดๆได้ (ครั้งแรกเพื่อกดเปิดเมนู กดอีกทีที่เมนูที่ต้องการ) ซึ่งตอนที่เมนูยังถูกซ่อนอยู่ ผู้ใช้จะไม่รู้เลยว่ามันมีเมนูอะไรบ้าง ซึ่งผู้ใช้ก็จะไม่มีความรู้สึกว่าต้องกดเข้าไปดู โดย Drawer Menu จะเอาไว้ใส่ เมนูที่เหลือซึ่งปกติคนจะไม่กดใช้เมนูเหล่านี้อยู่แล้ว ด้วยเหตุผลนี้จึงทำให้ Hamburger Icon จึงมีอัตราการถูกกดต่ำมาก ปัจจุบันแอพพลิเคชั่นชื่อดัง อย่าง Facebook และ Youtobe ได้ลาจาก Hamburger Icon ไปแล้วโดยการนำเอา Menu มายัดไว้ใน Tab ซึ่งถือว่าเป็นการแก้ปัญหาได้อย่างน่าทึ่งทีเดียว แต่ Hamburger Icon ก็ยังมีข้อดีคือ ใช้เพื่อประหยัดพื้นที่บนหน้าจอ Mobile Web และ Mobile App ก็จะคุ้นชินกับ Hamburger Icon มากกว่า การใช้ Menu

 

ก็เอามาเล่าให้ฟังเป็นความรู้นะคะ กับเรื่องราวของ Hamburger Icon สำหรับผู้ใช้งานยังไงก็ลองเอาไป ปรับใช้งานด้านดีไซน์เว็บไซต์หรือแอพลิเคชั่นดูนะคะ เผื่อจะมีประโยชน์ไม่มากก็น้อย เพราะความคิดของแต่ละคนก็ต่างกันออกไป ซึ่งหลักสำคัญของการออกแบบคือ รูปแบบเหมาะสมกับการใช้งานนั้นๆคะ