เมนูแฮมเบอร์เกอร์แบบปรับได้ สร้างเมนูแฮมเบอร์เกอร์อย่างรวดเร็วโดยใช้ jQuery การขยายเมนูที่ด้านบนของเนื้อหา

คุณอาจเบื่อกับการอ่านบทความและฟังการอภิปรายต่าง ๆ เกี่ยวกับเมนูแฮมเบอร์เกอร์สามบรรทัดสั้น ๆ อยู่ตลอดเวลา นี่เป็นเทคนิคการออกแบบ UI ที่ไม่ดีหรือไม่? หรือไม่เลว? โพสต์นี้แตกต่าง - จะไม่ตัดสินว่าเมนูนี้ดีหรือไม่ดี ประเด็นก็คือฉันไม่คิดว่ามันจะเป็นการตัดสินใจในการออกแบบที่ดีที่สุดไม่ทางใดก็ทางหนึ่ง แต่เมนูแฮมเบอร์เกอร์ก็มีเป็นของตัวเองเช่นกัน จุดแข็งโดยเฉพาะเมื่อใช้ในการออกแบบมือถือในสภาพพื้นที่จำกัด แล้วเราจะทำอย่างไร? แค่ยอมรับเมนูแฮมเบอร์เกอร์เหมือนเดิมแม้จะมีข้อบกพร่องมากมายแล้วใช้ชีวิตต่อไป? ดูเหมือนว่าไซต์และแอปจำนวนมากจะเห็นด้วยกับสิ่งนี้ และฉันเชื่อว่าฉันสามารถทำให้ดีที่สุดได้

แล้วมีสองสิ่งเกิดขึ้นซึ่งทำให้ฉันเปลี่ยนใจ ประการแรกผมเจอ. นี่เป็นบทความที่ช่วยให้เข้าใจถึงความหมายของการใช้เมนูแฮมเบอร์เกอร์ได้อย่างแท้จริง โดยเฉพาะอย่างยิ่ง ไซต์ที่มีเมนูดังกล่าวจะได้รับผลกระทบจากการมีส่วนร่วมของผู้ใช้ลดลงอย่างมาก การทบทวนสถิติดังกล่าวเพิ่งเริ่มเปลี่ยนความคิดเห็นของฉัน

เหตุการณ์ต่อไปเกิดขึ้นในขณะที่ฉันกำลังสังเกตเพื่อนร่วมงานคนหนึ่งพยายามใช้เว็บแอปพลิเคชันใหม่ที่มีเมนูดังกล่าว นี่คือนักพัฒนาที่คุ้นเคยกับอินเทอร์เฟซเมนูแฮมเบอร์เกอร์เป็นอย่างดี แต่เมื่อต้องใช้แอปพลิเคชันตามความต้องการของเขา เขาก็ถามเสียงดังว่า “ฉันจะไปที่นั่นได้อย่างไร” โปรดทราบว่านี่คือหนึ่งในคนที่ฉลาดที่สุดที่ฉันรู้จัก และเขาไม่ได้คิดที่จะแตะไอคอนเมนูแฮมเบอร์เกอร์ด้วยซ้ำ ถ้าคนที่ฉลาดมากมีปัญหาในการนำทาง สิ่งนี้บอกอะไรเกี่ยวกับผู้ใช้ทั่วไปบ้าง ความคิดเห็นของฉันก็ได้รับรากฐานที่มั่นคงในที่สุด

เหตุผลที่ฉันไม่เชื่อในพลังของเมนูแฮมเบอร์เกอร์ก็เพียงพอแล้ว - ถึงเวลาพูดคุยเกี่ยวกับวิธีแก้ปัญหาแล้ว ก่อนอื่น ฉันพิจารณาถึงคุณประโยชน์เฉพาะของการใช้เมนูแฮมเบอร์เกอร์:

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

และถ้าเราจะสร้างทางเลือกให้กับเมนูแฮมเบอร์เกอร์ก็ต้องแก้ปัญหาที่เกี่ยวข้องด้วย:

• ความเข้าใจ: องค์ประกอบการนำทางควรจะสามารถค้นหาได้ง่าย โดยเฉพาะผู้ที่ใช้ผลิตภัณฑ์เป็นครั้งแรก
• การมีส่วนร่วม: อินเทอร์เฟซควรให้คำแนะนำและข้อเสนอแนะที่อธิบายว่าผู้ใช้สามารถทำอะไรกับผลิตภัณฑ์ได้ และเมื่อใดจึงเหมาะสมที่จะใช้คุณลักษณะบางอย่าง

ฉันตัดสินใจเริ่มต้นด้วยปัญหาที่ยากที่สุดและดูว่าวิธีแก้ปัญหาของฉันจะใช้ได้ผลหรือไม่ การออกแบบมือถือ- หลังจากครุ่นคิดไอเดียต่างๆ มากมาย ฉันก็สรุปได้ว่าเมนูแถบแท็บ iOS เป็นหนึ่งในโซลูชั่นที่ดีที่สุดสำหรับอินเทอร์เฟซมือถือ ผู้คนจำนวนมากพยายามทำให้แถบแท็บสามารถเลื่อนได้ (เพื่อให้พอดีกับตัวเลือกมากกว่าห้าตัวเลือก) หรือเพิ่ม "เพิ่มเติม" ลงในการนำทาง เช่น Plyushkin ซึ่งมีห้องพิเศษที่จะเต็มไปด้วยขยะอย่างรวดเร็ว นอกจากนี้ตัวเลือกทั้งสองนี้ยังไม่เป็นไปตามข้อกำหนดหลัก - ขาดความชัดเจนการมองเห็นความเป็นไปได้ทั้งหมด แล้วคุณจะทำอย่างไรกับเมนูแท็บเพื่อแก้ไขปัญหานี้

วิธีแก้ปัญหาของฉันคือการรวมแฮมเบอร์เกอร์และแถบแท็บเข้าด้วยกันเป็นแนวทางเดียว ผลลัพธ์คือแถบแท็บที่เปิดชุดตัวเลือกสำหรับแต่ละรายการเมนู

ฉันสร้างแอปทดสอบประสิทธิภาพการทำงานของทีมเพื่อแสดงแนวทางปฏิบัติของฉัน ด้วยวิธีนี้ผู้ใช้สามารถเห็นฟังก์ชั่นหลักและการใช้งานของผลิตภัณฑ์ได้อย่างชัดเจน และแทนที่จะหลับไป รายการทั้งหมดรายการเมนูที่ซ่อนอยู่หลังไอคอนแฮมเบอร์เกอร์ ผู้ใช้จะเห็นตัวเลือกต่างๆ ที่เกี่ยวข้องกับแท็บที่เขาคลิก ทำให้การนำทางเข้าใจและแยกแยะได้ง่ายขึ้น ทุกสิ่งที่คุณต้องการอยู่ใกล้แค่เอื้อม และช่วยให้ผู้ใช้เห็นลำดับชั้นของแอปพลิเคชัน

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

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

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

เตรียมตัวให้พร้อม...เมนูแบบดึงออก ถูกต้อง - ลองใช้วิธีนี้บนอินเทอร์เฟซเดสก์ท็อปแล้วคุณจะพบกับความเป็นจริงที่ปฏิเสธไม่ได้: ตัวเลือกนี้ไม่ใช่เรื่องใหม่เลย เมนูแบบเลื่อนมีมานานหลายปีแล้ว และแทบทุกคน (แม้แต่แม่ของคุณ) ก็รู้ว่ามันทำงานอย่างไร นี่คือข้อดีของแนวทางนี้ - ไม่มีอะไรใหม่

ฉันไม่รู้ว่าจะเรียกสิ่งนี้ว่าอะไร แถบเลื่อนฝัง? หรือ TABurger (TAB “tab” + เบอร์เกอร์)? นอกจากนี้ฉันไม่รู้ว่ามีใครเคยสร้างโซลูชันที่คล้ายกันมาก่อนหรือไม่ เนื่องจากเมนูนี้ดูเรียบง่าย อดใจไม่ไหวที่จะคิดว่าตัวเองเป็นคนแรก ฉันรู้ว่าแอปบางตัวใช้เมนูแบบเลื่อนออกบนปุ่มแท็บบางปุ่ม (เช่น Tweetbot) แต่โดยทั่วไปแล้ว แอปเหล่านี้ได้รับการออกแบบมาให้เข้าถึงคุณลักษณะต่างๆ ได้อย่างรวดเร็วสำหรับผู้ใช้ระดับสูง ไม่ใช่เพื่อสร้างลำดับชั้นการนำทาง หากคุณมีตัวอย่างดังกล่าวโปรดแจ้งให้เราทราบในความคิดเห็น
ไม่สำคัญว่าเมนูดังกล่าวจะเป็นเมนูใหม่หรือคิดค้นมานานแล้ว สิ่งที่สำคัญคือจะเป็นโซลูชันการนำทางที่ดีกว่าและสร้างสรรค์กว่าเมนูแฮมเบอร์เกอร์หรือไม่ หยุดบอกตัวเองว่า “เว็บไซต์เจ๋งๆ แห่งนี้มีเมนูแบบนี้ ดังนั้นมันจะต้องดีที่สุด” หรือ “ใครๆ ก็ทำกัน ดังนั้นมันจะต้องถูกต้อง” การออกแบบสมควรได้รับแนวทางที่ดีกว่าและรอบคอบมากขึ้น
อัพเดท
Collin Eberhardt ตั้งข้อสังเกตบน Twitter ว่ามีการใช้ UI เดียวกัน วินโดว์โฟน- ฉันเอง ผู้ใช้วินโดวส์โทรศัพท์และเขาพูดถูก แม้ว่าการโต้ตอบประเภทนี้จะใช้ใน Windows Phone สำหรับตัวเลือก "เพิ่มเติม" ในแถบแท็บเท่านั้น

James Perich ให้อีกตัวอย่างหนึ่งบน Twitter ดู AHTabBarController ที่สร้างโดย Arthur Hemmer

Vitaly Rubtsov ไม่สามารถต้านทานความปรารถนาที่จะตระหนักถึงมันได้

ในบทช่วยสอนนี้ ฉันจะแสดงให้คุณเห็นถึงวิธีการทำสิ่งนี้โดยใช้เพียง CSS โดยไม่ต้องทำอะไรเลย โดยใช้จาวาสคริปต์- ดังนั้นเราจะเห็นเทคนิคบางอย่างของ CSS (และ SCSS) ที่จะช่วยให้เราสร้างแอนิเมชั่นได้เกือบจะราบรื่นเหมือนกับ GIF แบบเคลื่อนไหวนี้

นี่คือตัวอย่างสิ่งที่เราจะทำ:

เริ่มต้นด้วย โครงสร้าง HTMLซึ่งเราจะใช้ ดูความคิดเห็นเพื่อความเข้าใจที่ดีขึ้น

ควบคุม เรื่องราวสถิติ การตั้งค่า

ตอนนี้เรามาเพิ่มสไตล์พื้นฐานเพื่อให้ได้สิ่งที่เราต้องการ รูปร่าง- รหัสค่อนข้างง่าย

/* รูปแบบพื้นฐาน */ * ( box-sizing: border-box; ) html, body ( margin: 0; ) body ( font-family: sans-serif; background-color: #F6C390; ) a ( ตกแต่งข้อความ: ไม่มี; ) .container ( ตำแหน่ง: ญาติ; ระยะขอบ: 35px อัตโนมัติ 0; ความกว้าง: 300px; ความสูง: 534px; สีพื้นหลัง: #533557; ล้น: ซ่อนอยู่; )

ก่อนที่เราจะเริ่มสร้างอินเทอร์เฟซที่เหลือ เราจะเพิ่มฟังก์ชันสลับบางอย่างเพื่อให้ย้ายจากสถานะหนึ่งไปอีกสถานะหนึ่งได้อย่างง่ายดาย

HTML ที่เราต้องการมีอยู่แล้ว และสไตล์ที่ทำให้มันได้ผลก็ประมาณนี้:

// ซ่อนช่องทำเครื่องหมาย #toggle ( display: none; ) // สไตล์สำหรับสถานะ "เปิด" เมื่อเลือกช่องทำเครื่องหมาย #toggle:checked ( // องค์ประกอบใด ๆ ที่คุณต้องการเปลี่ยนสไตล์เมื่อเปิดเมนูจะอยู่ที่นี่พร้อมกับ selector ~ // ลักษณะสำหรับเปิดเมนูนำทาง เช่น & ~ .nav ( ) )

เพื่อให้เป็นสถานะปิด เราจำเป็นต้องแปลงรายการเมนูเป็นบรรทัดเพื่อให้ได้ไอคอนแฮมเบอร์เกอร์ มีหลายวิธีในการบรรลุการเปลี่ยนแปลงนี้ เราตัดสินใจทำเช่นนี้:

และนี่คือโค้ดที่ใช้สิ่งนี้

$ช่วงการเปลี่ยนภาพ: 0.5s; // แสดงรายการการนำทางเป็นบรรทัดที่ประกอบเป็นไอคอนแฮมเบอร์เกอร์ nav-item ( ตำแหน่ง: ญาติ; จอแสดงผล: อินไลน์บล็อก; ลอย: ซ้าย; ชัดเจน: ทั้งสอง; สี: โปร่งใส; ขนาดตัวอักษร: 14px; ระยะห่างตัวอักษร: - 6.2px; line-height: 7px; white-space: nowrap; scaleY(0.2); การเปลี่ยนแปลง: $transition-duration, ความทึบ 1s; ความกว้างสำหรับบรรทัดที่สอง &:nth-child(2) ( ระยะห่างตัวอักษร: -7px; ) // การตั้งค่าสำหรับองค์ประกอบที่เริ่มต้นจากบรรทัดที่สี่ & :nth-child(n + 4) ( ระยะห่างตัวอักษร: -8px; ระยะขอบ -top: -7px; ความทึบ: 0; ) // รับบรรทัดสำหรับไอคอนแฮมเบอร์เกอร์ &:before ( ตำแหน่ง: สัมบูรณ์; เนื้อหา: ""; ด้านบน: 50%; ความกว้าง: 100%; สีพื้นหลัง: #EC7263; แปลงร่าง : แปล Y (5); การเปลี่ยนแปลง: $ การเปลี่ยนแปลงระยะเวลา;

โปรดทราบว่าเราได้รวมเฉพาะรูปแบบพื้นฐานสำหรับรายการการนำทางที่สำคัญที่สุดไว้ที่นี่เท่านั้น คุณสามารถค้นหารหัสที่สมบูรณ์ได้ที่ Github

เพื่อสร้าง เปิดเมนูเราจำเป็นต้องคืนค่ารายการนำทางจากบรรทัดเป็นลิงก์ข้อความปกติและทำการเปลี่ยนแปลงเล็กน้อยอีกหลายประการ มาดูวิธีการทำเช่นนี้:

$ช่วงการเปลี่ยนภาพ: 0.5s; #toggle:checked ( // Open & ~ .nav ( // คืนค่ารายการนำทางจาก "เส้น" ในไอคอนเมนู.nav-item ( สี: #EC7263; ระยะห่างตัวอักษร: 0; ความสูง: 40px; line- ความสูง: 40px ; ขอบบน: 0; ความทึบ: 1; การเปลี่ยนแปลง: $transition-duration, ความทึบ 0.1s; // ซ่อนบรรทัด &: ก่อน (ความทึบ: ) )

หากเราพิจารณา GIF ให้ละเอียดยิ่งขึ้น เราจะเห็นว่ารายการเมนูทั้งหมดไม่ได้ถูกย้ายพร้อมกัน แต่อยู่ในรูปแบบตารางหมากรุก เราสามารถทำได้ใน CSS เช่นกัน! โดยพื้นฐานแล้ว เราจำเป็นต้องเลือกแต่ละองค์ประกอบ (โดยใช้ :nth-child ) และตั้งค่าการหน่วงเวลาการเปลี่ยนภาพให้ค่อยๆ เพิ่มขึ้น นี่เป็นงานที่ทำซ้ำอย่างแน่นอน จะเกิดอะไรขึ้นถ้าเรามีองค์ประกอบเพิ่มเติม? ไม่ต้องกังวล เราสามารถทำให้ทุกอย่างดีขึ้นได้โดยใช้เวทย์มนตร์ SCSS เพียงเล็กน้อย:

$ รายการ: 4; $ ความล่าช้าในการเปลี่ยน: 0.05 วินาที; .nav-item ( // ตั้งค่าการหน่วงเวลาสำหรับรายการการนำทางเมื่อปิด @for $i จาก 1 ถึง $items ( &:nth-child(#($i)) ( $delay: ($i - 1) * $transition - ล่าช้า; การเปลี่ยนแปลงล่าช้า: $delay;

โปรดทราบว่าด้วยโค้ดนี้ เราจะได้ลักษณะการทำงานของขั้นตอนที่ต้องการสำหรับแอนิเมชั่นปิด เราจำเป็นต้องคำนวณ $delay ซึ่งแตกต่างเล็กน้อยสำหรับแอนิเมชั่นเปิด เพื่อให้ได้การเปลี่ยนขั้นตอนกลับคืนมา แบบนี้:

$delay: ($items - $i) * $transition-delay;

เสร็จแล้วกับเมนูสุดฟิน! นอกจากนี้เรายังได้รวมองค์ประกอบจำลองบางอย่างเช่นใน GIF แบบเคลื่อนไหวและคุณจะเห็นได้

ดังนั้นเราจึงสร้างเมนูที่เรียบง่ายและใช้งานได้โดยใช้ CSS เท่านั้น อย่างไรก็ตาม หากคุณไม่ต้องการใช้ระบบสลับ CSS คุณสามารถแทนที่ระบบดังกล่าวได้บางส่วน สตริงจาวาสคริปต์โดยไม่ต้องใช้ความพยายามมาก

เราหวังว่าคุณจะชอบบทช่วยสอนนี้และพบว่ามีประโยชน์!

ไอคอนแฮมเบอร์เกอร์มีอยู่ทั่วไป ทุกที่รอบตัวเรา ในแอปพลิเคชันบนเว็บ บนเว็บไซต์บนมือถือและเดสก์ท็อป ซอฟต์แวร์- ไอคอนสามบรรทัดที่แพร่หลายนี้พบเห็นได้ทั่วไปในทุกวันนี้จนดูเหมือนว่าเชื่อมโยงกับเมนูการนำทางโดยเฉพาะ แต่นี่เป็นเรื่องจริงเหรอ?

เมื่อเร็ว ๆ นี้ การอภิปรายเกี่ยวกับประสิทธิภาพของไอคอนแฮมเบอร์เกอร์ได้ก้าวไปสู่จุดสูงสุดใหม่ บทความโดยนักออกแบบที่มีชื่อเสียง และเว็บไซต์หลายแห่ง รวมถึง The Atlantic, TechCrunch, The Next Web และ Nielsen Norman Group สรุปว่านี่คือรูปแบบการต่อต้าน UX ซึ่งเป็นไอคอนที่ทันสมัยและใช้งานง่าย ซึ่งเป็นการถดถอยจากเรียบง่ายกว่า มากขึ้น ทางเลือกที่แสดงออก แต่จะต่อต้านรูปแบบหรือไม่ การใช้ไอคอนก็เพิ่มขึ้นมากจนแทบจะเป็นสิ่งที่พบเห็นได้ทั่วไปในเว็บไซต์ส่วนใหญ่ โดยเฉพาะบนหน้าจอขนาดเล็ก

ด้วยตำแหน่งของฉันในฐานะนักออกแบบในทีมงาน m.booking.com และการที่เราใช้ไอคอนนี้เพื่อแสดงเมนูแบบเลื่อนออก ฉันจึงตัดสินใจสำรวจวัตถุนี้ ฉันเริ่มต้นด้วยการศึกษาต้นกำเนิดของไอคอนเพื่อพยายามทำความเข้าใจเส้นทางสู่ความอับอาย

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

เรื่องราวทั้งหมดนี้ทำให้ฉันถามคำถาม: “เราผิดจริง ๆ แล้วคนอื่น ๆ ก็ถูกหรือเปล่า? สิ่งนี้ทำให้เกิดความไม่สะดวกต่อผู้ใช้ของเราหรือไม่? มีคนเข้าใจจริงๆ ว่าสามบรรทัดเล็กๆ น้อยๆ ในเว็บไซต์ของเราคืออะไร”

ผู้อ่านบล็อกนี้เป็นประจำจะไม่แปลกใจที่รู้ว่าขั้นตอนต่อไปของเราคือการถามคำถามเหล่านี้ในรูปแบบของการทดสอบ A/B เช่นเดียวกับอย่างอื่น ไอคอนแฮมเบอร์เกอร์ขึ้นอยู่กับอิทธิพลของลูกค้าจำนวนมากของเรา ซึ่งต้องตัดสินใจว่าไอคอนดังกล่าวเป็นทางออกที่ดีที่สุดผ่านการโต้ตอบกับเมนูหรือไม่ มาถึงตอนนี้ ฉันได้อ่านบทความและข้อมูลมากพอที่จะมั่นใจได้ว่าการขาดความเห็นพ้องต้องกันหรือผลลัพธ์ที่แตกต่างกันนั้นไม่ได้เกิดจากพฤติกรรมของลูกค้าที่กำลังพัฒนาการออกแบบอยู่ ฉันตัดสินใจปฏิบัติตามวิธีที่อธิบายไว้ เจมส์ ฟอสเตอร์ซึ่งได้รับการอ้างอิงโดยหลายๆ คน รวมถึงผู้เชี่ยวชาญด้านอุปกรณ์เคลื่อนที่ชั้นนำของเราด้วย - ลุค วโรโบลวสกี้.

ก่อนหน้านี้เราได้ทดสอบตำแหน่งไอคอนและสไตล์ต่างๆ (มีเส้นขอบ ไม่มีเส้นขอบ มีไอคอน สีต่างๆ ฯลฯ) แต่เราไม่เคยทดสอบคำว่า "เมนู" เนื่องจากความซับซ้อนของความปรารถนาที่จะทดสอบในอีกสี่สิบ- หนึ่งภาษาที่เราสนับสนุน อย่างไรก็ตาม เราดำเนินการต่อไป และพบคำแปลโดยได้รับความช่วยเหลือจากทีมผู้เชี่ยวชาญด้านภาษาของเรา และทำการทดสอบ:

ไอคอนเมนู "แฮมเบอร์เกอร์" ดั้งเดิมของเราอยู่ทางด้านซ้ายของชื่อและมีเส้นแยกสีขาวทางด้านขวา

คำว่า "เมนู" ภายในบล็อกที่มีกรอบสีขาวมุมมนจัดชิดซ้ายเช่นกัน

เราเปิดตัวการทดสอบกับฐานผู้ใช้ทั้งหมดของเรา และด้วยความนิยมและความแพร่หลายขององค์ประกอบ UI นี้ เราหวังว่าจะใช้เวลาไม่นานในการทดสอบกับลูกค้าของเราหลายล้านคนทั่วโลก ในทุกภาษาที่รองรับและบนอุปกรณ์ที่หลากหลาย

แล้วผลลัพธ์สุดท้ายคืออะไร? คำว่าเอาชนะอาหารจานด่วนเหมือนกับในการทดลองของ James Foster หรือขนมปังและชิ้นเนื้อจะชนะหรือไม่?

แน่นอนว่าเราไม่สามารถคาดเดาข้อมูลนี้กับทุกสิ่งได้ ในบางประเทศ ในบางภาษาหรือบางอุปกรณ์ อาจทำงานได้ดีขึ้นหรือแย่ลง แต่ในระดับโลก เราสามารถสรุปได้ว่า “แฮมเบอร์เกอร์” นั้นถูกสร้างความสนุกสนานมากเกินไป โดยรวมแล้วเรียกได้ว่าเป็นคำว่า “เมนู” เลยก็ว่าได้ ด้วยจิตวิญญาณของการจัดการความก้าวหน้าของการออกแบบ เราควรพิจารณาทางเลือกอื่นๆ และอาจลองเพิ่มชีส เบคอน และเฟรนช์ฟรายส์ ลงในไอคอนแฮมเบอร์เกอร์ของเรา แต่สำหรับตอนนี้ เรายินดีที่จะรายงานว่า "เพื่อนสามบรรทัด" ของเรา ก็ฉาบปูนให้ทั่ว ตำแหน่ง รูปร่าง ขนาด ตำแหน่ง และสีที่แท้จริงของมัน แน่นอนว่าเป็นหัวข้อสำหรับการทดสอบในอนาคต

แน่นอนว่านี่เป็นบทเรียนสำหรับเราทุกคนเกี่ยวกับธรรมชาติของการทดสอบ A/B คุณไม่เคยทดสอบองค์ประกอบ UI, โมเดล หรือฟังก์ชันโดยรวมเลย คุณทดสอบสิ่งเหล่านี้กับผู้ชมผู้ใช้ที่เฉพาะเจาะจงมากภายใต้สถานการณ์เฉพาะและเฉพาะเจาะจง สิ่งที่ได้ผลกับ Booking.com อาจไม่ได้ผลสำหรับคุณหรือผู้ใช้ของคุณ นี่คือหนึ่งในเหตุผลที่เราทำการทดสอบ A/B การค้นพบจากผู้เชี่ยวชาญคนอื่นๆ ข้อมูลจากไซต์อื่น หรือสมมติฐานที่สร้างขึ้นในผับขณะรับประทานเบอร์เกอร์จะไม่ได้รับการพิสูจน์จนกว่าจะได้รับการทดสอบกับลูกค้าของเราและบนแพลตฟอร์มของเรา

ไม่ให้หลงอุปมาของเราเองแต่ก็เหมือนสูตรแฮมเบอร์เกอร์ดีๆ แม้ว่าคุณจะจดส่วนผสมทั้งหมดตามฉันเป๊ะๆ แต่สุดท้ายคุณก็จะได้แฮมเบอร์เกอร์ที่แตกต่างไปจากเดิมอย่างสิ้นเชิง แน่นอนว่าสิ่งนี้จะได้รับผลกระทบจากคุณภาพของเนื้อสัตว์ที่มีอยู่ในตลาด แป้งที่ใช้ทำขนมปัง และปัจจัยอื่นๆ อีกหลายพันปัจจัย สำหรับเราโดยส่วนตัวแล้ว แนวคิดนี้ดีหากเป็นผลดีต่อ Booking.com หากเราสามารถทำซ้ำได้บนเว็บไซต์ของเรา และได้ผลกับลูกค้าของเราทุกคนหรือไม่

จนถึงตอนนี้เราเพิ่งทำเค้าโครงเท่านั้น

เราเชื่อมต่อสองไฟล์เข้ากับเอกสาร HTML ของเราก่อนแท็กเนื้อหาปิด โดยหนึ่งในนั้นยังว่างเปล่า

เราเขียนโค้ดต่อไปนี้ในไฟล์ script.js

$(ฟังก์ชั่น())(
$(".menuBurger").on("คลิก", ​​function())(
$(".menu").slideToggle(200, function())(
if($(this).css("display") === "none")(
$(นี้).removeAttr("สไตล์");
}
});
});
});

เราจะไม่วิเคราะห์โค้ด JS โดยละเอียด เราจะจำกัดตัวเองอยู่เฉพาะความคิดเห็นทั่วไป ฉันขอแนะนำสำหรับผู้ที่สนใจการเขียนโปรแกรมใน JS

บรรทัดนี้ $(".menuBurger").on("click", function())( ตรวจสอบเหตุการณ์การคลิกบนองค์ประกอบที่มีคลาส .menuBurger

$(".menu").slideToggle(200, function())( ในที่นี้ ฟังก์ชัน slideToggle() จะถูกนำไปใช้กับเมนู ซึ่งจะขยายหรือยุบองค์ประกอบที่เลือกบนหน้าเว็บในหน่วย 200 มิลลิวินาที

$(นี้).removeAttr("สไตล์");

- ลบการแสดงผล: ไม่มีออกจากสไตล์อินไลน์

ปัญหานี้แก้ไขได้โดยใช้การวางตำแหน่งเมนู

ในโค้ด CSS หลักที่คุณต้องเพิ่ม

เมนู (
ตำแหน่ง: ญาติ;
}

ในการสืบค้นสื่อ: .menu (
พื้นหลัง: #eee;
ตำแหน่ง: แน่นอน;
}

หลังจากนี้เมนูแฮมเบอร์เกอร์จะขยายไปด้านบนของเนื้อหาหลัก นั่นเป็นวิธีที่ควรจะเป็น

1. ปิดการใช้งานและลบสคริปต์ทั้งหมด

2. แทรกบรรทัดโค้ดลงในไฟล์ HTML ระหว่างแท็ก div และ ul

3. แทนที่แท็ก div ด้วยคลาส .menuBurger ด้วยป้ายกำกับ

4. เชื่อมโยงอินพุต ID ไปยังแอตทริบิวต์ for label ผ่าน #menuCSS

ดังนั้นเมื่อคุณคลิกที่ไอคอนเมนู แฮมเบอร์เกอร์ เครื่องหมายถูกจะปรากฏในช่องทำเครื่องหมาย

5. เพิ่มคลาสเทียมที่ตรวจสอบแล้วลงในคิวรีสื่อ

#menuCSS:ตรวจสอบแล้ว (
จอแสดงผล: ไม่มี;
}

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

6. ซ่อนอินพุตใน CSS

#เมนูCSS (
จอแสดงผล: ไม่มี;
}

7. เปลี่ยนรหัสในจุดที่ 5 ดูบทความต่อไปนี้ด้านบนในบทความ

#menuCSS: เลือกแล้ว + .menu (
จอแสดงผล: บล็อก;
}

หากเลือกลิงก์ระหว่างป้ายกำกับและอินพุต #menuCSS เมนูจะถูกขยาย นั่นคือความมหัศจรรย์ทั้งหมดของเมนูแฮมเบอร์เกอร์ที่เหมาะกับคุณ CSS บริสุทธิ์และถ้าคุณเพิ่มแอนิเมชั่นที่ราบรื่นลงไป คุณจะไม่รู้สึกถึงความแตกต่างจากเมนู JS เลย

พยายามทำให้เบราว์เซอร์ของคุณเล็กลง แล้วคุณจะเห็นอย่างชัดเจนว่าเมนู CSS แฮมเบอร์เกอร์ทำงานอย่างไร

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

โดยเขาได้เสนอทางเลือก 5 ประการให้กับเมนู “แฮมเบอร์เกอร์” เพื่อจัดระเบียบระบบนำทางค่ะ แอปพลิเคชันมือถือ..

“หากคุณทำงานเกี่ยวกับผลิตภัณฑ์ดิจิทัล คุณอาจเคยอ่านบทความมากมายเกี่ยวกับวิธีการและสาเหตุที่เมนูแฮมเบอร์เกอร์ส่งผลเสียต่อประสบการณ์ของผู้ใช้บนเว็บ อุปกรณ์เคลื่อนที่เนื่องจากความไม่เข้าใจและไม่มีประสิทธิภาพ โครงการต่างๆ จำนวนมากกำลังทดลองใช้ตัวเลือกการนำเสนอเมนูทางเลือก” Zoltan Kollin เขียน

ผู้ออกแบบตั้งข้อสังเกตว่าไม่มีทางเลือกอื่นใดที่ระบุไว้ในเนื้อหาที่สะดวกหรือมีประสิทธิภาพมากกว่าทางเลือกอื่นอย่างเห็นได้ชัด - ทั้งหมดนี้เหมาะสำหรับสถานการณ์ที่แตกต่างกัน

ตามที่คอลลีนชี้ให้เห็น แท็บอาจเป็นโซลูชันที่มีประโยชน์หากแอปบนอุปกรณ์เคลื่อนที่ของคุณมีส่วนหลักหลายส่วน และผู้ใช้ต้องการสลับระหว่างส่วนเหล่านั้นอย่างรวดเร็ว

นักพัฒนามักรู้สึกว่า Colleen กล่าวต่อว่าแท็บเป็นหนึ่งในรูปแบบการนำทางที่ง่ายที่สุด แต่เมื่อสร้างเมนูดังกล่าวคุณควรปฏิบัติตามกฎหลายข้อ:

• ควรมีไม่เกินห้าส่วน
• ควรเน้นแท็บใดแท็บหนึ่ง (แท็บที่ใช้งานอยู่)
• แท็บแรกควรเป็น "บ้าน" ควรจัดเรียงแท็บตามลำดับความสำคัญหรือตามลำดับที่ต้องการใช้
• สามารถวางแท็บที่ด้านบนหรือด้านล่างของหน้าจอได้ ขึ้นอยู่กับบริบทและแพลตฟอร์ม
• คุณควรใช้ไอคอนแทนป้ายกำกับเพื่อระบุแท็บหากผู้ใช้ทราบอย่างชัดเจนว่าแต่ละไอคอนหมายถึงอะไร และคุ้นเคยกับการดำเนินการที่เป็นไปได้หรือไม่ (เช่น เหมาะสำหรับแอปพลิเคชันเครือข่ายโซเชียล)

หากแอปของคุณมีส่วนหลักมากกว่าห้าส่วน คอลลีนแนะนำให้ใช้เวอร์ชันแก้ไขของเมนูประเภทแรก - แท็บที่มีตัวเลือก "อื่นๆ" ในกรณีนี้ นักพัฒนาซอฟต์แวร์จะสามารถวางส่วนที่มีลำดับความสำคัญสูงสี่ส่วนไว้บนแผง และซ่อนส่วนที่เหลือไว้ในแท็บเพิ่มเติม

“นี่อาจดูเหมือนไม่มีตัวเลือกที่ดีไปกว่าเมนูแฮมเบอร์เกอร์ แต่ถ้าคุณออกแบบแท็บเพื่อให้ข้อมูลเกือบทั้งหมดที่ผู้ใช้ต้องการอยู่ในสี่ส่วนแรก UX จะไม่ได้รับผลกระทบมากนัก” Colleen อธิบาย

การเปลี่ยนแปลงของแท็บในส่วน "อื่นๆ" - เมนูที่ปรับให้เข้ากับขนาดหน้าจอและแสดงจำนวนแท็บที่แตกต่างกันในแต่ละความละเอียด แท็บที่ไม่พอดีกับหน้าจอจะไปอยู่ในส่วน "อื่นๆ"

“หากคุณมีหลายส่วนและไม่สามารถระบุส่วนหลักได้ การใช้แท็บที่มีส่วนเพิ่มเติมอาจไม่ใช่วิธีแก้ปัญหาที่มีประสิทธิภาพ จากนั้นคุณก็สามารถแสดงรายการทั้งหมดในเมนูและทำให้แผงเลื่อนได้” คอลลีนเขียน

ข้อเสียของโซลูชันนี้ นักออกแบบตั้งข้อสังเกตว่า ในตอนแรกผู้ใช้ยังคงเห็นเพียงบางส่วนของแท็บ และหากต้องการดูส่วนที่เหลือ คุณต้องเลื่อนดูเมนู อย่างไรก็ตาม หากผู้ใช้อยู่ในแอปร้านค้าออนไลน์ที่มีหมวดหมู่ผลิตภัณฑ์แสดงอยู่ในแผง หรือในแอปข่าวที่มีแท็บหมวดหมู่ ก็จะไม่เป็นปัญหา

ดังที่กล่าวไปแล้ว นักออกแบบควรตรวจสอบให้แน่ใจว่าผู้ใช้ทราบวิธีการเลื่อนดูอย่างชัดเจน และให้ข้อมูลที่มองเห็นได้ ตัวอย่างเช่น ใช้เอฟเฟกต์ "ซีดจาง" กับองค์ประกอบสุดท้าย

ตามที่นักออกแบบระบุว่ามีเทมเพลตที่น่าสนใจ แต่ไม่ใช่แบบทั่วไปที่ใช้เมื่อการมองเห็นและการเข้าถึงส่วนต่างๆ ไม่มีนัยสำคัญ - เมนูแบบเลื่อนลง

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

บางครั้งคอลลีนตั้งข้อสังเกตว่า การตัดสินใจที่ดีมันอาจจะกลายเป็นเมนู “แฮมเบอร์เกอร์” ก็ได้ ตามที่ผู้ออกแบบไม่แนะนำให้ใช้รูปแบบนี้ในการออกแบบเมนูหลัก แต่อาจมีประโยชน์สำหรับฟังก์ชั่นการนำทางรอง “แฮมเบอร์เกอร์” ยังสามารถใช้ได้เมื่อผู้ใช้ดำเนินการหลักทั้งหมดบนหน้าจอหลัก เช่น ในแอปพลิเคชัน Uber