UI Pattern เมนูฉลาดสุดๆ ของ Amazon.com By uiblogaziner August 17, 20145555 views ShareTweet 4 เมนูที่ผมจะมานำเสนอนี่ไม่ใช่เมนูอาหารนะครับ แต่เป็นเมนูที่เป็นลิงค์แบ่งประเภทสินค้าออกเป็นหมวดหมู่ต่างๆ ซึ่งมักเรียกเป็นชื่อเฉพาะว่า เมกะเมนู (mega menu) หน้าตาของ UI เมกะเมนู ก็จะเป็นดั่งหนึ่งในเว็บที่ผมเคยทำให้ลูกค้าร้านขายส่งเครื่องเขียน myunionplus.net อย่างที่ได้บอกไปแล้วครับว่า UI นี้จะเหมาะกับร้านค้าออนไลน์ที่มีสินค้าหลายหลากประเภท แต่ความพิเศษที่อยากจะมาเล่าเกี่ยวกับ UI นี้ก็คือ ความพิถีพิถันใส่ใจการใช้งานของผู้ใช้อย่างแท้จริงของเว็บ Amazon.com ให้ลองเข้าที่เว็บ Amazon.com แล้วลองสัมผัสประสบการณ์การใช้งานเมกะเมนูของ Amazon ดูนะครับ จะพบว่าเมื่อเราเลื่อนเปลี่ยนเมาส์ไปบนแต่ละหมวดสินค้า ซับเมนูทางขวาจะเปลี่ยนตามอย่างรวดเร็วโดยไม่มีการหน่วงเลยระหว่างเมนูหลัก ตามปกติเมนูที่มีซับเมนูควรจะมีการหน่วงของซับเมนู เพื่อให้ผู้ใช้มีเวลาเคลื่อนที่ไปเลือกซับเมนูทางด้านขวาได้ทันก่อนที่มันจะหายไป ตัวอย่างด้านบนเป็นเมนูเดิมของเว็บ Khan Academy ครับ ลองสังเกตดูครับ พอเราเลื่อนเมาส์ผ่านเมนู Science & Economics, Computer Science, Humanities เว็บจะไม่แสดงซับเมนูให้เห็น เพราะมีการหน่วงระหว่างเมนูหลักไว้ ซึ่งไม่ดีนะครับ เราควรหน่วงซับเมนูเฉพาะตอนเมาส์เคลื่อนตัวออกจากเมนูหลักที่เรากำลังสนใจเพื่อไปเลือกซับเมนูน่าจะดีกว่า เว็บ Allianz Ayudhya ก็เป็นเว็บหนึ่งที่ทำเมกะเมนูได้ถูกต้องครับ คือพอเราเอาเมาส์ไปวางไว้ที่เมนูด้านบน เว็บจะแสดงซับเมนูย่อยให้เลือก เนื่องจากเพื่อความสวยงาม ตัวแผงซับเมนูจะไม่ได้อยู่ติดกับเมนูหลักที่เราเอาเมาส์ไปวาง ฉะนั้นจึงจำเป็นต้องหน่วงการหายไปของซับเมนูให้มากหน่อย เพื่อให้ผู้ใช้งานมีเวลาเคลื่อนที่เมาส์ไปเลือกซับเมนูได้ทันก่อนที่มันจะหายไป แต่ระหว่างเมนูหลักก็ไม่มีการหน่วงเกิดขึ้นครับ กรณีของเว็บ Allianz ดูจะไม่ค่อยมีปัญหา เพราะเมนูย่อยอยู่ด้านล่าง แต่สำหรับเมนูย่อยของเว็บ Khan Academy (แบบเก่า) นี่ซิครับ หากไม่มีการหน่วงการแสดงผลระหว่างเมนูหลักจะเกิดอะไรขึ้นครับ ดูตามภาพด้านบนและจินตนาการตามผมนะครับ ในตอนนี้เรากำลังสนใจหัวข้อ Math อยู่ จากนั้นเราก็เคลื่อนเมาส์ไปเลือกหัวข้อเมนูย่อยทางด้านขวาในทิศทางตามเส้นสีบานเย็น ก่อนที่เมาส์เราจะไปถึงแผงเมนูย่อย มันต้องผ่านเมนู Science & Economics และ Computer Science นี่ซิ ฉะนั้นหากไม่หน่วงการแสดงผลระหว่างเมนูหลักแล้ว เว็บก็จะแสดงผลซับเมนูของ Science & Economics และต่อไปก็เป็น Computer Science ดังนั้นสุดท้ายแล้วเรากลับได้ซับเมนูของ Computer Science แทนที่จะเป็นเมนูย่อยของ Math แล้วก็จะมาแก้ปัญหาโดยการทำให้การแสดงผลซับเมนูมีการหน่วงเกิดขึ้น ซึ่งผมก็บอกไปแล้วว่าไม่ดีนะครับ เพราะหากเป็นไปได้ควรจะตอบสนองสิ่งที่ยูสเซอร์เลือกโดยทันที สรุปปัญหาก็คือ หากเราไม่หน่วงการแสดงผลระหว่างเมนูหลัก ก็จะเกิดปัญหาตามที่เราจินตนาการด้านบน แต่ถ้าหากหน่วงการแสดงผลระหว่างเมนูหลัก เวลาเราเอาเมาส์ไปเลือกเมนูหลักแต่ละหัวข้อก็จะเป็นการหน่วงการแสดงผลของแผงเมนูย่อย บางคนอาจเห็นว่า หากเราเคลื่อนที่เมาส์ในแนวนอนเพื่อไปเลือกซับเมนูก็คงไม่มีปัญหานี้เกิดขึ้น แต่ด้วยพฤติกรรมของผู้ใช้จริง เรามักจะเคลื่อนเมาส์ไปในลักษณะเช่นนี้จริงๆ ครับ และนี่จึงกลายเป็นเบื้องหลังแนวคิดของเว็บ Amazon.com เพื่อออกแบบเมนูหมวดหมู่สินค้าให้สอดคล้องกับการใช้งานจริง Amazon ได้มองว่าพฤติกรรมการเคลื่อนที่ของเมาส์เพื่อไปเลือกซับเมนูจะกินพื้นที่เป็นสามเหลี่ยมกระจายออกข้างทางด้านขวาในลักษณะตามรูปด้านบน ฉะนั้นแล้วหากเมาส์ยังตกอยู่ในพื้นที่นี่ ก็ให้คิดเสมือนว่ายูสเซอร์กำลังสนใจเมนูนี้อยู่ ด้วยความคิดนี้ทำให้ Amazon ไม่จำเป็นต้องหน่วงการแสดงผลซับเมนูเมื่อเมาส์เคลื่อนที่ในแนวตั้ง แต่เมนูจะถูกหน่วงเมื่อเมาส์มีการเคลื่อนออกจากจุดอ้างอิงในลักษณะพื้นที่สามเหลี่ยม ผมแนะนำให้ลองเข้าไปเล่นดูของจริงครับ เอาแบบว่าวางเมาส์ไว้ต้นๆ คำของเมนู แล้วลองเคลื่อนไปเลือกซับเมนูในแนวเฉียงๆ หน่อย ด้วยความเร็วที่เป็นปกติ (ถ้าเคลื่อนเมาส์ช้าไป ระบบก็จะคิดว่าเราไม่ได้ตั้งใจเลือกซับเมนู แต่ต้องการดูเมนูหลักถัดไปแทน) จากนั้นลองเล่นเปรียบเทียบกับเว็บที่ไม่มีแนวคิดนี้ดูครับ เช่น เว็บ OfficeMate หรือจะเป็นเว็บของลูกค้าผมก็ได้ครับ myunionplus.net แล้วจะเห็นความอลังการงานสร้างของแนวความคิดนี้จริงๆ ครับ สุดท้ายเมกะเมนูใหม่ของเว็บ Khan Academy ก็ได้หยิบยืมแนวคิดนี้มาใช้ และเรื่องก็จบอย่างแฮปปี้ เมนูฉลาดสุดๆ นี่มันคูลจริงๆ เห็นด้วยไหมครับ (^ε^)♪ ข้อมูล: ดัดแปลงจาก Ben Kamens นักพัฒนาเว็บ Khan Academy