ปุ่มแฮมเบอร์เกอร์

ปุ่มแฮมเบอร์เกอร์ หรือ แถบแฮมเบอร์เกอร์ (อังกฤษ: hamburger button) เป็นปุ่มที่มักวางไว้มุมบนของส่วนต่อประสานกราฟิกกับผู้ใช้ (Graphical User Interface; GUI) ชื่อ “แฮมเบอร์เกอร์” นั้นได้มาจากลักษณะที่ดูคล้ายกับแฮมเบอร์เกอร์ซึ่งเกิดขึ้นอย่างไม่ได้ตั้งใจ หน้าที่ของปุ่มแฮมเบอร์เกอร์คือเป็นปุ่มท็อกเกิล (toggle) สำหรับเรียกเมนู (ซึ่งบางครั้งเรียกว่า เมนูแฮมเบอร์เกอร์; hamburger menu) หรือแถบนำทาง (navigation bar) ระหว่างซ่อน (collapsed) อยู่ใหลังปุ่มหรือแสดงผลบนหน้าจอ ไอคอนที่เกี่ยวข้องกับวิดเจ็ทนี้ประกอบด้วยเส้นแนวนอนสามเส้น หรืออีกชื่อหนึ่งเรียกว่า “ไอคอนเมนูขณะซ่อน” (collapsed menu icon)

ไอคอนเมนูขณะซ่อน (collapsed) ในลักษณะของปุ่มแฮมเบอร์เกอร์ (Hamburger Button)

ประวัติ

การออกแบบดั้งเดิม

 

ปุ่มแฮมเบอร์เกอร์ในอินเตอร์เฟซของกูเกิลโครมรุ่น 22 สังเกตบริเวณมุมขวาบนของเบราเซอร์

ไอคอนนี้ดั้งเดิมแล้วออกบบโดย นอร์ม โค๊กซ์ (Norm Cox) เพื่อใช้ในอินเตอร์เฟซของ ซีรอกซ์สตาร์ (Xerox Star) ซึ่งเปิดตัวในปี 1981 ไอคอนนี้กลับมาสู่การใช้อย่างแพร่หลายเริ่มต้นในปี 2009 ซึ่งเริ่มจากความนิยมในการใช้มือถือสูงขึ้น และปัญหาเกิดเมื่อการออกแบบอินเตอร์เฟซนั้นต้องทำกับพื้นที่หน้าจอที่จำกัดขนาดการแสดงผลของแอพพลิเคชันมือถือ โค๊กซ์อธิบายการสร้างสรรค์ไอคอนนี้ของเขาว่า “กราฟิกนี้ต้ังใจจะให้มีลักษณะเรียบง่ายแบบ ‘ป้ายบอกทางบนท้องถนน’ กล่าวคือ เรียบง่าย จดจำการใช้งานได้ และเลียนแบบลักษณะของรายชื่อเมนูที่จะแสดงผลเมื่อกดปุ่มลงไป ด้วยความที่การออกแบบนั้นทำให้พื้นที่พิกเซลที่จำกัด มันเลยต้องโดดเด่นแต่เรียบง่าย ตอนนั้นผมรู้สึกว่าเราต้องออกแบบมันให้ได้ในพื้นที่แค่ 16x16 พิกเซลเองเท่านั้มั้ง (หรืออาจะเป็น13x13 พกเซลก็ได้นะ ผมจำตัวเลขเป๊ะ ๆ ไม่ได้)” (“Its graphic design was meant to be very “road sign” simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple. I think we only had 16×16 pixels to render the image. (or possibly 13×13… can’t remember exactly).”)

อ้างอิง

1. "How To Create a Menu Icon". www.w3schools.com. จากแหล่งเดิมเมื่อ 2018-09-05. สืบค้นเมื่อ 2018-09-20.
2. "The origin of the hamburger icon". จากแหล่งเดิมเมื่อ 2015-11-07. สืบค้นเมื่อ 2018-09-20.
3. Campbell-Dollaghan, Kelsey (March 31, 2014). "Who Designed the Hamburger Icon?". Gizmodo. จากแหล่งเดิมเมื่อ 2016-02-06. สืบค้นเมื่อ February 2, 2016.
4. "A Brief History of the Hamburger Icon". placeit.net. 29 October 2014. จากแหล่งเดิมเมื่อ 2017-02-02. สืบค้นเมื่อ 25 January 2017.
5. Ltd., Stuff & Nonsense. "We need a standard show navigation icon for responsive web design". จากแหล่งเดิมเมื่อ 2018-09-20. สืบค้นเมื่อ 2018-09-20.
6. "A Brief History of the Hamburger Icon". Placeit Blog (ภาษาอังกฤษ). 2014-10-29. สืบค้นเมื่อ 2019-02-23.

อ้างอิงผิดพลาด: ป้ายระบุ <ref> ชื่อ "WSJ_20130318" ซึ่งนิยามใน <references> ไม่ถูกใช้ในข้อความก่อนหน้า
อ้างอิงผิดพลาด: ป้ายระบุ <ref> ชื่อ "TechR-365" ซึ่งนิยามใน <references> ไม่ถูกใช้ในข้อความก่อนหน้า
อ้างอิงผิดพลาด: ป้ายระบุ <ref> ชื่อ "Tsiodoulos" ซึ่งนิยามใน <references> ไม่ถูกใช้ในข้อความก่อนหน้า
อ้างอิงผิดพลาด: ป้ายระบุ <ref> ชื่อ "TechCrunch - 24 May 2014 - Kill The Hamburger Button" ซึ่งนิยามใน <references> ไม่ถูกใช้ในข้อความก่อนหน้า

อ้างอิงผิดพลาด: ป้ายระบุ <ref> ชื่อ "bbc-H-mystery" ซึ่งนิยามใน <references> ไม่ถูกใช้ในข้อความก่อนหน้า